Customize

Customize Norio from the source kit. Do not edit compiled maps or scattered hex values.

---

Colors, type, and spacing

1. Open norio-html-dev/tokens/tokens.json.
2. Change the value (colors need both light and dark when they differ).
3. Run npm run tokens (or just npm run dev / npm run build).
4. Use the resulting var(--token-name) in SCSS.

See Design Tokens for the pipeline and Colors / Typography for the public variable names.

Add a page

1. Create src/pages/{name}.html with {% extends "layouts/base.njk" %}.
2. Set title, description, and bodyClass. Add colorScheme only to pin a mode.
3. Include one section per design block inside {% block content %}.
4. Link the page from the header / menu overlay JSON if it belongs in navigation.

Vite picks up every src/pages/*.html automatically.

Add a section

1. src/sections/{group}/{name}.njk — semantic HTML, first child .container.
2. src/assets/scss/sections/{group}/_{name}.scss — @use "../../abstracts" as *; then the block.
3. @forward "{name}"; in that folder’s _index.scss.
4. Include the section from the page.

Layout mixins: @include container;, @include section-space(var(--space-12), var(--space-10));, @include grid-auto(18rem);, @include grid-columns(3);, @include media-up(lg) { … }.

Content data

Add src/data/{key}.json. It becomes {{ key }} / {% for item in key %}. Prefer loops for long lists; hardcoded markup is fine for one-offs.

Images

• Put design assets in src/assets/imgs/, not in dist/.
• Prefer optimized .webp files.
• Reference them as assets/imgs/… so the flat dist/ output still works from disk.