Customize

Norio customization is token- and data-driven. Prefer editing JSON and SCSS sources, then regenerating tokens — avoid hand-editing generated CSS variable files.

---

1. Content (JSON)

Section copy, menus, and lists live in src/data/*.json (for example site.json, hero and project payloads). Update those files and the matching section components will pick up the new content.

2. Section styles (SCSS)

Visual rules for sections are under src/styles/sections/**. Keep class names aligned with the React components in src/components/sections/**.

3. Design tokens

Edit tokens/tokens.json, then run:

npm run tokens

That regenerates SCSS/CSS custom properties such as --color-surface-*, --color-text-*, and --font-*. npm run dev / npm run build already run tokens via predev / prebuild.

    
:root {
  --font-family-sans: var(--font-inter), "Inter Display", system-ui, sans-serif;
  --font-size-md: 20px;
  --font-leading-md: 1.4;
  --color-surface-base: #ffffff;
  --color-surface-subtle: #f4f4f4;
  --color-text-tertiary: #000000;
  --color-text-secondary: #696969;
}

:root[data-color-scheme="dark"] {
  /* dark token maps emitted by npm run tokens */
}
    
 

4. SiteShell & color scheme

Wrap each page with SiteShell. Pass colorScheme="dark" (or "light") for explicit schemes — used by dark demos such as src/app/index-dark/page.tsx.

    
<SiteShell
  pageName="home-dark"
  bodyClass="page-home-1"
  enablePreLoader
  colorScheme="dark"
>
  {/* sections */}
</SiteShell>
    
 

Also choose headerName / footerName when a page needs a different chrome variant.

5. Typography (Inter)

The root layout loads Inter via next/font and exposes --font-inter. Token --font-family-sans prefers that face. To swap fonts, update src/app/layout.tsx and the font family entries in tokens/tokens.json, then regenerate tokens.