--- name: notion-style-site description: Restyle an existing site, or build a new one, with a component library in the public visual style of notion.com: white paper canvas, warm off-white bands, near-black tight grotesque headings, one blue for buttons and links, pastel cards and hand-drawn line illustrations. Ships the library (tokens, components, optional motion, gallery), the design rules, OFL fonts and an optional example page. version: 0.2.0 delivery: download-only category: web --- # Notion Style Site This skill is a component library in one visual style: a white paper canvas with warm off-white bands, near-black headings in a tight grotesque at a heavy weight, one confident blue for the filled button and links, small pastel tints for cards, hand-drawn black-line spot illustrations with flat primary fills, and a dark theme derived for reuse. Use `assets/pack/` to restyle a website the user already has, or to build a new one. The library is plain CSS (`tokens.css` for the design tokens, `components.css` for the `sp-` components) plus an optional script (`motion.js`). ## Before you start 1. **Read the style documents.** `references/design.md`, `references/components.md` and `references/patterns.md` describe every token, component, state and page pattern of the style, with the rules for using them. Read all three before you change a page. 2. **Open the gallery.** Open `assets/pack/gallery.html` in a browser: it shows every component, variant, state and motion of the library, in both themes. Pick components from there instead of inventing new ones. 3. **Components need only the CSS.** Link `tokens.css`, then `components.css`, and the components render and read correctly with no script at all. `motion.js` is optional: it adds the motion and the interactive behaviour (menus, accordions, tabs, switches, reveals and demos). Without it, every component shows in its resting state, and content that would be revealed on scroll is simply visible. ## Restyle an existing site 1. Copy `assets/pack/` and `assets/fonts/` side by side into the project's static assets. The `@font-face` rules in `components.css` load the fonts by relative path (`../fonts/` from the pack folder); if you move the folders apart, update those paths. 2. Load `tokens.css` and `components.css` before the project's own stylesheets. Add `motion.js` at the end of the body only if the site should have the style's motion and behaviour. 3. Rework the pages one at a time onto the library: replace the project's own buttons, cards, navigation, forms and sections with the `sp-` components, and replace hard-coded colours, sizes, radii and shadows with the tokens instead of copying values. Follow the page patterns (section rhythm, hero types, band alternation) in `references/patterns.md`. 4. Keep the site's own content, routes, data, forms and behaviour. Change how it looks, not what it does. 5. Check every restyled page in a browser at desktop and phone widths, in both themes, and with reduced motion turned on. Use the project's own build and tests; `scripts/validate.mjs` is for single-file pages only. ## Build a new site Compose the pages from the library and the patterns in `references/patterns.md`. A project with its own build links the pack files as above. For a single self-contained page, start from the example below. Never copy text, images, logos or icons of the reference site, and never name it in the page. ## Optional example start: `assets/template.html` `assets/template.html` is one page built from the library with `tokens.css`, `components.css` and `motion.js` inlined. Every name, number and sentence in it is made up. Use it when the brief asks for a one-page site and you want a working start: 1. **Collect the brief.** Ask for who the page is for, the single promise, the proof the user can stand behind and the calls to action with their real destinations. Fill any gap with plausible wording and keep a list of every fact you made up. 2. **Pick the page language.** `en` or `zh-CN`, English unless the user asks otherwise (see Language). 3. **Make a work folder.** Copy `assets/template.html` to `work/src.html`, and `assets/fonts/` to `work/fonts/`. Never edit files inside the skill folder. Run the commands below from a folder where `scripts/...` and `work/...` both resolve. 4. **Edit content.** Rewrite headings, paragraphs, labels, link targets, `alt` text and `aria-label` values, and the interface strings inside the script. Replace every item of the sample identity: `Wrenfold`, `Marrowby`, `Oakum`, `Kestreline`, `Tumbleweave`, `Quillbrook`, `Saffronet`, `Pellucid`, `Lumencart`, `Ines Calloway`, `Theo Marchetti`, `Priya Holm`. Warnings also point at words that belong to the sample, such as `Spring catalogue`, `Invoice nudger`, `Order sorter`; check each one. Give every link a real destination, or an `example.com` address that you mention in your reply. Delete the instruction comments that start with `REPLACE`. Remove sections the brief does not need, together with their menu links. Keep the ids listed in `requiredIds` of `assets/validate.config.json`; if the brief drops a whole section, copy that file to `work/validate.config.json`, remove that section's ids and pass `--config work/validate.config.json` to the validator. Re-theme only through the tokens, and only switch fonts to another font in `assets/fonts/`. 5. **Build one file.** Run `node scripts/inline-assets.mjs work/src.html work/index.html`. It embeds the fonts and stops on a missing or damaged file. The page has no image slots; draw any new picture with inline SVG or CSS, never with a remote image. 6. **Validate.** Run `node scripts/validate.mjs work/index.html --mode site --site-lang ` until it exits 0. Add `--lang zh-CN` for Chinese messages and `--out work/report` for reports. 7. **Look at it (recommended).** Add `--browser --screenshot work/shots`: a local Chrome or Edge opens the page, clicks the controls and writes screenshots. Exit code 3 means no browser was found. 8. **Report back.** Say what you drafted and what the user supplied, and give the path of `work/index.html`. ## Language - Set `` or `` to match the copy; run the validator with the same `--site-lang`. - For `zh-CN`, translate visible text, `alt`, `aria-label`, `placeholder`, form messages and the ``, and put a CJK family such as `"PingFang SC", "Noto Sans SC", "Microsoft YaHei"` in every `font-family` stack before the generic fallback. - Chinese copy needs no Latin letter spacing or all-caps; remove them where they sit on translated text. - `--lang` only changes the language of the validator's messages, never the page. ## Rules - A single-file page is self-contained: no remote scripts, fonts, images or stylesheets, no network calls, no `alert` or `window.open`. - Icons are inline SVG. Do not use emoji or dingbat characters. - Do not invent real people, customers, certifications, awards or legal claims. State only what the user confirmed. - Never put credentials or tokens in a page, in logs or in a report. ## Failure boundaries - The style documents and the gallery describe the look; they cannot judge copy quality or whether a claim is true. - The validator checks structure, leftovers, assets and (with `--browser`) basic behaviour of a single-file page. It does not check a restyled multi-page project. - `--browser` needs a local Chrome or Edge. Without one, the static checks still run. ## FAQ - **Can I use the pack in a framework project?** Yes. Import `tokens.css` and `components.css` as global stylesheets and use the `sp-` classes in your components; load `motion.js` once on the client if you want the motion. - **Do I need the example page?** No. It is a convenience for one-page sites. - **Which Node version?** 18 or newer for the scripts in `scripts/`. ## Files - `assets/pack/`: the component library (`components.css`, `gallery.html`, `motion.js` and `tokens.css`). - `assets/fonts/`: the bundled OFL fonts the pack loads (`../fonts/` from the pack), with their licence. - `references/design.md`: the design system of the style: colour, type, spacing, radius and elevation tokens with the rules for using them. - `references/components.md`: every component of the style with its structure, sizes, states and dark-theme values. - `references/patterns.md`: page patterns: grid, section rhythm, heroes, imagery, motion, voice and what to avoid. - `assets/template.html`: the optional example page, built from the pack as one self-contained file. - `references/style-guide.md`: tokens, type, surfaces, components and voice of the example page. - `references/sections.md`: every view and section with its id of the example page. - `references/motion.md`: what moves, how fast, and how reduced motion is handled of the example page. - `assets/validate.config.json`: sample identity, required ids and documented exceptions for the validator. - `assets/agent-mode.json`: generator marker and template checksum. - `references/validation.md`: every validator rule with its default severity. - `references/third-party-notices.md`: the style and trademark note, font licences and image notes. - `scripts/validate.mjs`, `scripts/inline-assets.mjs`, `scripts/lib/`: the checks and the single-file builder (zero dependencies).