@nadicodeai/design-system 9.2.0 → 10.0.0

package/DESIGN.md

@@ -1,14 +1,13 @@
 ---
 version: alpha
-name: NadicodeAI Design System
+name: nadicode Design System
 description: >-
-  Reusable design-system contract for NadicodeAI: one foundation of colour,
+  Reusable design-system contract for nadicode: one foundation of colour,
   type, spacing, radius, material, elevation, and motion, applied by three
   registers, the website, the Portal, and the Nadia desktop app, plus the
   package token, CSS, and asset exports they consume.
 
 colors:
-  primary: "#007a3c"
   on-primary: "#ffffff"
   action: "#111111"
   action-foreground: "#ffffff"
@@ -44,7 +43,6 @@ colors:
   warning: "#ffc220"
   warning-soft: "#fff3d1"
   warning-deep: "#7a5800"
-  verde-vivo: "#008c45"
   selection-bg: "#111111"
   selection-fg: "#fafafa"
   navigation-selection-bg: "#ededed"
@@ -63,6 +61,7 @@ colors:
   identity-azzurro: "#0f6ee8"
   identity-ink: "#000000"
   identity-white: "#ffffff"
+  logo-dot: "#1e3cff"
   chart-1: "#1e3cff"
   chart-2: "#00a85a"
   chart-3: "#ddaa00"
@@ -88,7 +87,6 @@ colors:
   dark-line: "#262626"
   dark-input: "#696969"
   dark-seam: "#1a1a1a"
-  dark-primary: "#2fd584"
   dark-on-primary: "#0a0a0a"
   dark-action: "#ffffff"
   dark-action-foreground: "#0a0a0a"
@@ -116,13 +114,13 @@ colors:
   dark-state-review: "#ffc220"
   dark-state-blocked: "#d3302f"
   dark-state-complete: "#00a85a"
+  dark-logo-dot: "#4d6bff"
   dark-selection-bg: "#ededed"
   dark-selection-fg: "#0a0a0a"
   dark-navigation-selection-bg: "#1a1a1a"
   dark-navigation-selection-fg: "#ededed"
   dark-navigation-selection-hover: "#262626"
   dark-cross: "#555555"
-  dark-verde-vivo: "#62d494"
   dark-chart-1: "#4d6bff"
   dark-chart-2: "#00a85a"
   dark-chart-3: "#ffd866"
@@ -144,42 +142,36 @@ typography:
     fontSize: 72px
     fontWeight: 600
     lineHeight: 74px
-    letterSpacing: -1.5px
+    letterSpacing: -2.52px
   display-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 52px
     fontWeight: 600
     lineHeight: 54px
-    letterSpacing: -1px
+    letterSpacing: -1.5px
   display-md:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 24px
-    fontWeight: 600
-    lineHeight: 32px
-    letterSpacing: 0px
-  display-sm:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 20px
+    fontSize: 40px
     fontWeight: 600
-    lineHeight: 28px
-    letterSpacing: 0px
-  title-lg:
+    lineHeight: 42px
+    letterSpacing: -1px
+  heading-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 40px
+    fontSize: 30px
     fontWeight: 600
-    lineHeight: 41px
+    lineHeight: 32px
     letterSpacing: 0px
-  title-md:
+  heading-md:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 30px
+    fontSize: 24px
     fontWeight: 600
     lineHeight: 32px
     letterSpacing: 0px
-  title-sm:
+  heading-sm:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 22px
+    fontSize: 20px
     fontWeight: 600
-    lineHeight: 25px
+    lineHeight: 28px
     letterSpacing: 0px
   body-lg:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
@@ -193,59 +185,29 @@ typography:
     fontWeight: 400
     lineHeight: 25px
     letterSpacing: 0px
-  body-md-strong:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 16px
-    fontWeight: 500
-    lineHeight: 24px
-    letterSpacing: 0px
   body-sm:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 14px
     fontWeight: 400
     lineHeight: 20px
     letterSpacing: 0px
-  body-sm-strong:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 20px
-    letterSpacing: 0px
   caption:
     fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
     fontSize: 12px
     fontWeight: 400
     lineHeight: 16px
     letterSpacing: 0px
-  caption-strong:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 12px
-    fontWeight: 500
-    lineHeight: 16px
-    letterSpacing: 0px
-  caption-mono:
-    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
-    fontSize: 12px
-    fontWeight: 500
-    lineHeight: 16px
-    letterSpacing: 0px
   code:
     fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
     fontSize: 13px
     fontWeight: 400
     lineHeight: 20px
     letterSpacing: 0px
-  button-md:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 18px
-    letterSpacing: 0px
-  button-lg:
-    fontFamily: Geist, Inter, system-ui, -apple-system, sans-serif
-    fontSize: 16px
+  label-mono:
+    fontFamily: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace
+    fontSize: 12px
     fontWeight: 500
-    lineHeight: 24px
+    lineHeight: 16px
     letterSpacing: 0px
 
 rounded:
@@ -286,7 +248,7 @@ spacing:
 
 ## Overview
 
-NadicodeAI is an AI agency for SMBs. The design system makes the website and the shipped product read as one family: a calm, high-contrast monochrome architecture in which the identity layer — the Agent orbs, Nadia's striped ribbon among them, and the verde brand accent in its scoped duties — is the expressive element. Structure, chrome, and controls are neutral; a desaturated screen loses nothing structural. The interface helps a pragmatic buyer understand the work: repeated workflows, agents working beside people, inspectable outputs, human approval.
+nadicode is an AI agency for SMBs. The design system makes the website and the shipped product read as one family: a calm, high-contrast monochrome architecture in which the identity layer — the Agent orbs and Nadia's striped ribbon among them — is the expressive element. Structure, chrome, and controls are neutral; a desaturated screen loses nothing structural. The interface helps a pragmatic buyer understand the work: repeated workflows, agents working beside people, inspectable outputs, human approval.
 
 One foundation, three registers. The foundation is every `core` value in this contract: the colour roles and their dark pairs, the two type families and the type scale, the spacing ladder and the control geometry, the radius scale, the material values, the four-rung elevation ladder, the motion durations and easings, the icon render, and the brand marks. It is owned by no single product and available to every product; a value stays foundation whether one product renders it or three. A register is one product's way of applying it: its direction, its density, the rungs and steps it reaches for, its dark-mode stance, its structural grammar, its motion budget. The three registers are the website, the Portal, and the Nadia desktop app; `## Registers` names each one's rulebook, its own token families, and its dark-mode stance.
 
@@ -294,9 +256,13 @@ A register decides where a foundation value appears and adds rules of its own. I
 
 `DESIGN.md` defines the reusable contract and exported scalar tokens; the `@nadicodeai/design-system/css` bundle (`src/css/**`) realises that contract. Homepage copy, page-specific ordering, and temporary prototypes do not belong in this file.
 
+The settled target state of this contract is [the nadicode design system ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md): the brand is still, only Agents move. A section that ADR changes opens with a **Target state** paragraph naming the decision and the issue that ships it; until that issue lands, the rest of the section describes what is built. The issue's change replaces the pointer with the rule as shipped.
+
 ## Colors
 
-Neutrals carry the interface: grounds, chrome, hierarchy, and every control come from the achromatic spine, and the strongest contrast on any surface lands on the primary action. Chromatic colour appears where it says something a reader already knows how to read: the semantic feedback hues, the verde brand accent in its scoped duties (links, success, presence, identity marks), the chart palettes on data, and the Agent identity palette inside the Agent visuals. Chrome, sections, and controls stay unpainted.
+**Two greens, and only two.** `{colors.link}` #00713d, dark `{colors.dark-link}` #4ecf8c, is the green that carries text: links, navigational accents, approval states, and the deep and soft steps the `success` pair reuses. Identity verde `{colors.identity-verde}` #00a85a is the green that carries marks. Nothing else in this contract is green. A third green always turned out to be one of those two at a slightly different lightness, which is why `primary` #007a3c and `verde-vivo` #008c45, with their dark pairs `dark-primary` and `dark-verde-vivo`, no longer exist: the logo is ink with a cobalt dot and needs no brand verde, and the presence mark `verde-vivo` painted is retired with the portrait it sat on. The shadcn `primary` role is unaffected and still maps to the neutral action family.
+
+Neutrals carry the interface: grounds, chrome, hierarchy, and every control come from the achromatic spine, and the strongest contrast on any surface lands on the primary action. Chromatic colour appears where it says something a reader already knows how to read: the semantic feedback hues, the two greens in their scoped duties, the chart palettes on data, and the Agent identity palette inside the Agent visuals. Chrome, sections, and controls stay unpainted.
 
 Interaction states are material, not meaning: focus, hover, and selection read as contrast steps on the neutral spine. A hover ground is a neutral step; the only change a control hover carries is a step inside its own family, as `{colors.action-hover}` does on the action control. Cobalto stays on info and running.
 
@@ -319,8 +285,7 @@ Every value a role needs is carried by the role token itself; there is no numeri
 
 ### Semantic roles (functional tier)
 
-- **Action** (`{colors.action}` = ink `#111111`, `{colors.action-foreground}` = white, `{colors.action-hover}`, `{colors.action-active}`): the primary-control family is neutral — a white label on the ink field in light shells, and in dark shells the `dark-action-*` roles, a white control carrying a near-black label. Maximum contrast belongs to the thing that acts. The shadcn `primary` roles map here.
-- **Brand accent — verde** (`{colors.primary}` = deep verde `#007a3c`, white `{colors.on-primary}` text on its field): identity marks, logo contexts, and brand accents. Verde's working duties are exactly the scoped roles below — links, success, and Nadia's presence — and the brighter verde `#00a85a` stays the imagery-tier anchor, never carrying normal-size white text.
+- **Action** (`{colors.action}` = ink `#111111`, `{colors.action-foreground}` = white, `{colors.action-hover}`, `{colors.action-active}`): the primary-control family is neutral — a white label on the ink field in light shells, and in dark shells the `dark-action-*` roles, a white control carrying a near-black label. Maximum contrast belongs to the thing that acts. The shadcn `primary` roles map here, and `{colors.on-primary}` / `{colors.dark-on-primary}` are the foregrounds that role carries.
 - **Canvas / Line / Input / Cross / Seam** (`{colors.canvas}`, `{colors.line}`, `{colors.input}`, `{colors.cross}`, `{colors.seam}`): white content cells, the universal decorative 1 px divider, the resting-control boundary, the stronger mark/crosshair gray, and the dashed connector guide. `{colors.line}` owns ordinary seams and is deliberately quiet — a decorative hairline, not held to a non-text contrast floor. `{colors.input}` owns fields and other interactive boundaries and clears the 3:1 non-text floor against its canvas. A labeled filter or search control already identified by readable text and its icon may use the quiet line role for an optional perimeter, configured by its composition owner. Form fields whose boundary identifies the input keep the input role. Focus remains a separate full-contrast state. Never darken a decorative border locally to make it behave like a control.
 - **Body / Muted** (`{colors.body}`, `{colors.muted}`): `{colors.body}` is readable supporting copy and clears AA on canvas; `{colors.muted}` is restricted to disabled, inactive, and placeholder content. Do not use muted text for ordinary descriptions, labels, or help text.
 - **Focus ring** (`{colors.focus-ring}` / `{colors.dark-focus-ring}`): the ink keyboard-focus indicator, a full-opacity `outline` of `{spacing.focus-outline-width}` at `{spacing.focus-outline-offset}` offset, never a box-shadow. Focus is a state of material, so the indicator is the maximum-contrast neutral on each ground rather than a hue; the offset keeps it independent of the resting border, and it clears the 3:1 non-text floor against the adjacent canvas.
@@ -329,7 +294,6 @@ Every value a role needs is carried by the role token itself; there is no numeri
 - **Navigation selection** (`{colors.navigation-selection-bg}`, `{colors.navigation-selection-fg}`, `{colors.navigation-selection-hover}`): the selected destination in persistent product navigation, a neutral selection field. Selection is a place, not a meaning, so it holds by contrast on the neutral spine; cobalto belongs to the semantic info and running roles only. The dark counterparts are tuned independently for the black console. Resting and hover pairs clear AA for text, and the offset focus outline stays visible against both the selection fill and the adjacent canvas.
 - **Semantic feedback** (`{colors.success}` = verde with `{colors.success-soft}`/`{colors.success-deep}`; `{colors.error}` = rosso funzionale `#d3302f` with `{colors.error-soft}`/`{colors.error-deep}`; `{colors.warning}` = giallo `#ffc220` with `{colors.warning-soft}`/`{colors.warning-deep}`; `{colors.info}` = cobalto `#1e3cff` with `{colors.info-soft}`/`{colors.info-deep}`): validation, caution, approval, and operational feedback. In each pair the `-soft` value is the tinted tag/banner ground and the `-deep` value is the AA-clearing text on it. On a solid `error` fill (the shadcn `destructive` role) text is white; on a solid `warning` or `success` fill text is ink. The success pair intentionally reuses the link pair's AA-safe verde values; its feedback meaning remains distinct from inline navigation and entity-status semantics.
 - **Accent** (`{colors.accent}` = arancio `#ff5a1f`): a small emphasis mark for exception flags and highlights; it appears as a mark, carries no text, and paints no fill or background. The identically-named shadcn surface role is a different thing — a neutral (`{colors.canvas-soft-2}` light, `{colors.dark-canvas-soft-2}` dark) with no hue.
-- **Verde vivo** (`{colors.verde-vivo}` = `#008c45`, dark `{colors.dark-verde-vivo}` = `#62d494`): Nadia's presence accent. It paints the marks that say *Nadia herself is here*, such as the success beat over her silhouette on Nadia's entry screen. It is a mark colour, never a control fill, a text colour, a link, or a status; `action`, `link`, and `success` keep their jobs. It clears the 3:1 non-text floor on `{colors.canvas}` (4.3:1) and `{colors.dark-canvas}` (11.4:1) and carries no text of its own. White on it is 4.34:1, below AA for normal text, so a label never sits on a `verde-vivo` fill; the ring, halo, or portrait sits on it and the words sit on the canvas.
 - **Workflow States** (`{colors.state-ready}` neutral, `{colors.state-running}` cobalto, `{colors.state-review}` giallo, `{colors.state-blocked}` rosso, `{colors.state-complete}` verde): the left-border/state vocabulary for agentic work surfaces — cobalto means in motion, verde means done. The dark counterparts (`{colors.dark-state-ready}`, `{colors.dark-state-running}`, `{colors.dark-state-review}`, `{colors.dark-state-blocked}`, `{colors.dark-state-complete}`) keep the same functional identity. These colours are carried by non-text state accents only — meter fills, delta marks, and the brand book's own rails; label text stays on the neutral foreground roles for contrast in both themes. Status is not one of their jobs: every status the product renders is the Badge status vocabulary (see `## Status Vocabulary`), which reads from the semantic feedback and link pairs, and the two token sets never cross.
 
 ### Chart categoricals (functional tier)
@@ -343,7 +307,7 @@ Five full-strength hues are the system's expressive chromatic range: verde `{col
 
 ### Dark primitives
 
-**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. `dark-canvas` is true black: the only base plane for dark product shells. The remaining dark neutrals (`dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-on-primary`, `dark-scrim`, and the neutral `dark-selection`/`dark-cross` marks) are exact equal-channel grays (OKLCH chroma 0), so no hue paints a surface. The soft canvas steps belong only to bounded interaction states such as hover, selection, keycaps, and inline controls; they never replace true black as a page, section, card, popover, sidebar, or large-panel ground. `dark-input` is the resting-control boundary, held brighter than the decorative `dark-line` border so a field edge clears the non-text floor before `{colors.dark-focus-ring}` appears. The `dark-action` family is a white control stepping through light grays, ink-labelled — the primary control stays neutral on black. Chroma lives only in the intentional accents: `dark-primary` is the brightened brand verde for identity marks, `dark-link`/`dark-link-deep` a lighter verde for links, and `dark-error`/`dark-error-deep`, `dark-warning`/`dark-warning-deep`, `dark-info`/`dark-info-deep`, `dark-success`/`dark-success-deep` the brightened feedback hues, each `*-soft` a deep tinted ground. `dark-navigation-selection-*` and `dark-focus-ring` sit on the neutral spine: selection and focus are material states, not meanings. The `dark-state-*` workflow family is not a text role; it preserves the matching ready/running/review/blocked/complete rail colours for 3 px state accents while text stays on neutral foreground roles. `dark-selection-bg`/`dark-selection-fg` invert the light selection, `dark-scrim` supplies the modal foreground, and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce chroma into the neutral set.
+**Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings) are the source tokens for the generated shadcn `.dark` role map — mode-bearing primitives, not a separate palette; consuming apps opt in by applying a `.dark` ancestor through their runtime theme provider. `dark-canvas` is true black: the only base plane for dark product shells. The remaining dark neutrals (`dark-canvas-soft`, `dark-canvas-soft-2`, `dark-ink`, `dark-body`, `dark-muted`, `dark-line`, `dark-input`, `dark-seam`, `dark-on-primary`, `dark-scrim`, and the neutral `dark-selection`/`dark-cross` marks) are exact equal-channel grays (OKLCH chroma 0), so no hue paints a surface. The soft canvas steps belong only to bounded interaction states such as hover, selection, keycaps, and inline controls; they never replace true black as a page, section, card, popover, sidebar, or large-panel ground. `dark-input` is the resting-control boundary, held brighter than the decorative `dark-line` border so a field edge clears the non-text floor before `{colors.dark-focus-ring}` appears. The `dark-action` family is a white control stepping through light grays, ink-labelled — the primary control stays neutral on black. Chroma lives only in the intentional accents: `dark-link`/`dark-link-deep` a lighter verde for links, and `dark-error`/`dark-error-deep`, `dark-warning`/`dark-warning-deep`, `dark-info`/`dark-info-deep`, `dark-success`/`dark-success-deep` the brightened feedback hues, each `*-soft` a deep tinted ground. `dark-navigation-selection-*` and `dark-focus-ring` sit on the neutral spine: selection and focus are material states, not meanings. The `dark-state-*` workflow family is not a text role; it preserves the matching ready/running/review/blocked/complete rail colours for 3 px state accents while text stays on neutral foreground roles. `dark-selection-bg`/`dark-selection-fg` invert the light selection, `dark-scrim` supplies the modal foreground, and `dark-cross` is the visible mark gray, brighter than the decorative `dark-line`. Never reintroduce chroma into the neutral set.
 
 This achromatic-neutral discipline is not dark-specific: it governs the generated shadcn surface-role bridge in both the light `:root` and dark `.dark` maps. The neutral surface family — `background`, `card`, `popover`, `muted`, `secondary`, `sidebar`, `sidebar-accent`, their neutral foreground/border variants, plus `border` and `input` — resolves only to exact equal-channel grays (OKLCH chroma 0) in both themes. Hue in the role bridge is reserved for the explicit semantic roles `destructive`, `success`, and `warning`; `primary` resolves to the neutral action family. The focus rings (`ring`/`sidebar-ring`) and the `sidebar-primary*` navigation-selection family resolve to equal-channel grays like the surface family: focus and selection are material states, and no interaction state carries a hue. In dark product shells, `background`, `card`, `popover`, and `sidebar` share `{colors.dark-canvas}` so page chrome, cards, tables, overlays, and nav rails read as one console. `muted`, `secondary`, and `accent` retain the `dark-canvas-soft` steps for small interaction states such as hover, selected rows, keycaps, and inline controls. Large product surfaces never take a tinted or soft-panel fill by default.
 
@@ -407,36 +371,34 @@ is never the only explanation.
 
 ## Typography
 
-Geist Sans and Geist Mono are the two families. Each token below carries its own — `caption-mono` and `code` are Geist Mono, every other token is Geist Sans — and its Use column says what that token is for. The register law that decides which family a given string takes, and what a card, panel, or section title therefore takes, is stated once in `## Components` → **`label-mono`**.
-
-All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. The two large display tiers carry a small negative tracking — `display-xl` at `-1.5px` and `display-lg` at `-1px` — so large type reads optically tight; this is a display-heading-only exception and every non-display tier stays at `0px`.
-
-| Token                         | Size | Weight | Line Height | Use                                                                        |
-| ----------------------------- | ---- | ------ | ----------- | -------------------------------------------------------------------------- |
-| `{typography.display-xl}`     | 72px | 600    | 74px        | Hero headline at the widest breakpoint.                                    |
-| `{typography.display-lg}`     | 52px | 600    | 54px        | Compact hero and major landing headlines.                                  |
-| `{typography.display-md}`     | 24px | 600    | 32px        | Compact display tier: action bands, plan names, an entry screen's sentence.    |
-| `{typography.display-sm}`     | 20px | 600    | 28px        | Small display tier for inline display headings.                            |
-| `{typography.title-lg}`       | 40px | 600    | 41px        | Major section headings.                                                    |
-| `{typography.title-md}`       | 30px | 600    | 32px        | Standard section title.                                                    |
-| `{typography.title-sm}`       | 22px | 600    | 25px        | Cell and artifact titles.                                                  |
-| `{typography.body-lg}`        | 18px | 400    | 27px        | Hero/lead paragraphs.                                                      |
-| `{typography.body-md}`        | 16px | 400    | 25px        | Default body copy.                                                         |
-| `{typography.body-md-strong}` | 16px | 500    | 24px        | Emphasised body copy at the default size.                                  |
-| `{typography.body-sm}`        | 14px | 400    | 20px        | Secondary copy, nav, compact cell copy.                                    |
-| `{typography.body-sm-strong}` | 14px | 500    | 20px        | Emphasised secondary copy and compact labels.                              |
-| `{typography.caption}`        | 12px | 400    | 16px        | Footer secondary lines and badge labels.                                   |
-| `{typography.caption-strong}` | 12px | 500    | 16px        | Compact emphasised labels on chrome and chips.                             |
-| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, identifiers and code.                                            |
-| `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
-| `{typography.button-lg}`      | 16px | 500    | 24px        | Large button labels.                                                       |
-| `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
+**Twelve sizes, named by the role they play.** A token says what a string is — a display line, a heading, body copy, a caption, code, a mono label — never how big it is, so a page that changes its mind about size changes one token and not every call site. Strong is a weight, not a token: a 500 run of body copy is `body-md` with `font-weight: 500`, which is why `body-md-strong`, `body-sm-strong`, `caption-strong` and the two `button-*` tokens are gone.
+
+Geist Sans and Geist Mono are the two families, and there is no third. Each token below carries its own — `code` and `label-mono` are Geist Mono, every other token is Geist Sans — and its Use column says what that token is for. The register law that decides which family a given string takes, and what a card, panel, or section title therefore takes, is stated once in `## Components` → **`label-mono`**.
+
+Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. Tracking is a display-tier exception and nothing else: the three display sizes tighten from -0.035em at 72px to -0.025em at 40px so large type reads optically tight, and every heading, body, caption, code and label tier stays at `0px`. The contract authors the result in px, because DTCG dimensions are px or rem.
+
+| Token                       | Size | Weight | Line Height | Tracking   | Use                                                                    |
+| --------------------------- | ---- | ------ | ----------- | ---------- | ---------------------------------------------------------------------- |
+| `{typography.display-xl}`   | 72px | 600    | 74px        | `-2.52px` | Hero headline at the widest breakpoint.                                |
+| `{typography.display-lg}`   | 52px | 600    | 54px        | `-1.5px`  | Compact hero and major landing headlines.                              |
+| `{typography.display-md}`   | 40px | 600    | 42px        | `-1px`    | Major section headings and the smallest display line.                  |
+| `{typography.heading-lg}`   | 30px | 600    | 32px        | `0px`      | Standard section title.                                                |
+| `{typography.heading-md}`   | 24px | 600    | 32px        | `0px`      | Cell, artifact and panel titles; action bands and plan names.          |
+| `{typography.heading-sm}`   | 20px | 600    | 28px        | `0px`      | The smallest heading, inline above a group.                            |
+| `{typography.body-lg}`      | 18px | 400    | 27px        | `0px`      | Hero and lead paragraphs.                                              |
+| `{typography.body-md}`      | 16px | 400    | 25px        | `0px`      | Default body copy, and large control labels at weight 500.             |
+| `{typography.body-sm}`      | 14px | 400    | 20px        | `0px`      | Secondary copy, nav, compact cell copy, control labels at weight 500.  |
+| `{typography.caption}`      | 12px | 400    | 16px        | `0px`      | Footer secondary lines, badge labels, compact chrome labels.           |
+| `{typography.code}`         | 13px | 400    | 20px        | `0px`      | Tool calls, snippets, traces. Geist Mono.                              |
+| `{typography.label-mono}`   | 12px | 500    | 16px        | `0px`      | Mono eyebrows, identifiers and low-priority metadata. Geist Mono.      |
 
 ## Layout
 
-Layout is mathematical and single-owner in every register: one owner per visible line, every gap and height from the tokens below, never eyeballed.
+Layout is mathematical and single-owner in every register: one owner per visible line, every gap from the tokens below, never eyeballed.
+
+The website's structure is three kinds of full-bleed section and nothing else: white for reading, black for a scene, and at most one flat, full-strength colour section per page for its single statement. Every section runs edge to edge and centres its content in the one column, `.nc-page`: a single content max-width with side gutters that grow from phone to desktop. Inside a section the content is a single column or a picture-and-text split, and between two sections there is one spacing step. Nothing else on the website sets a page width, and a section adds no frame, no row grid and no gutter texture.
 
-The page grammar this section documents, the 12-column frame with its rows, its centered 10-column active lane, its stage and its markers, is the website register's structure. The Portal and the Nadia desktop app build their own structure by their rulebooks (`## Registers`) and reach for the spacing ladder and the control geometry, not for the frame.
+The Portal and the Nadia desktop app build their own structure by their rulebooks (`## Registers`) and reach for the spacing ladder and the control geometry, not for the website's column.
 
 ### Spacing
 
@@ -460,7 +422,7 @@ Control geometry is foundation, so a control has the same physical size and the
 
 | Token | Value | Owns |
 | --- | --- | --- |
-| `{spacing.guide}` | 1 px | Every ordinary seam, and the crosshair weight |
+| `{spacing.guide}` | 1 px | Every ordinary seam |
 | `{spacing.icon-stroke}` | 1.5 px | The house icon line, on screen, at 16, 20 and 24 px |
 | `{spacing.icon-stroke-sm}` | 1.25 px | The same line at 12 px |
 | `{spacing.focus-outline-width}` | 2 px | The one keyboard focus outline |
@@ -469,99 +431,29 @@ Control geometry is foundation, so a control has the same physical size and the
 | `{spacing.control-padding-inline}` | 10 px | Inline padding of a control |
 | `{spacing.touch-target}` | 44 px | Minimum target on coarse or non-hover input |
 
-Page-grammar geometry and the fixed component heights belong to the website register and are authored in `register.website.layout`; the filter-chip sizes belong to the Portal register and are authored in `register.portal.density`. Both emit today's `--nc-*` names, and the values live in the one `json design-tokens` fence ("CSS Architecture & Token Pipeline").
+The website's column and its section rhythm belong to the website register and are authored in `register.website.layout`; the filter-chip sizes belong to the Portal register and are authored in `register.portal.density`. Both emit today's `--nc-*` names, and the values live in the one `json design-tokens` fence ("CSS Architecture & Token Pipeline"). Six tokens are the whole of the website's geometry; a page that needs a seventh is asking for a section kind the register does not have.
 
-| Family | Tokens | Register |
+| Token | Owns | Register |
 | --- | --- | --- |
-| Band rhythm | `section` | Website |
-| Page shell | `page-pad`, `page-max-mobile`, `page-max-tablet`, `page-max-desktop` | Website |
-| Frame | `frame-max`, `frame-gap`, `cell-padding`, `section-gap` | Website |
-| Crosshair | `cross-size-mobile`, `cross-size-tablet`, `cross-size-desktop` | Website |
-| Cell and strip heights | `h-cell-sm`, `h-cell-md-*`, `h-cell-lg-*`, `h-strip-*` | Website |
-| Media and stage heights | `h-visual-*`, `h-precision-*`, `h-hero-*` | Website |
-| Band and feature heights | `h-action-strip-*`, `h-action-body-*`, `h-action-band`, `h-feature-*`, `h-editorial-feature-*` | Website |
-| Bento heights | `h-bento-primary`, `h-bento-secondary`, `h-bento-mobile-copy`, `h-bento-mobile-main`, `h-bento-strip` | Website |
-| Filter chip | `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | Portal |
-
-### Frame System
-
-- `page-system` adds `--nc-page-pad` horizontal page padding and `{spacing.4xl}` vertical padding, so the frame floats on clear canvas between the sticky nav chrome and the footer instead of stacking against their hairlines.
-- `page-frame` is centered and capped at `--nc-frame-max`. It owns the outer left/right/top borders.
-- `page-row` is the only direct section unit inside `page-frame`. It owns the bottom border for each row.
-- Desktop rows use 12 equal columns with `--nc-frame-gap` gutters.
-- `active-lane` spans columns 2 through 11 on desktop and all columns on smaller viewports.
-- Full-lane rows span all 12 columns only when the content owns columns 1 and 12 explicitly through the `stage` geometry (`nc-stage-frame`/`nc-stage-fill`/`nc-stage-grid`/`nc-stage-active`).
-- Columns 1 and 12 are the page's quiet margin: empty canvas by default. Their presence is the whitespace itself — the grid sizes them whether or not anything paints there, matching the reference container model where structure lives inside bounded modules and never as page-length gutter texture. The diagonal `side-fill` is a scarce structural accent a row opts into with `data-rails="hatch"`; reserve it for the page's anchor rows (the opening hero, the closing conversion row), never as a default on every row. When present, the fill is bounded on both sides — the frame perimeter outside, the fill's own inner rail inside — so the texture reads as a deliberate panel, not an unbounded wash.
-
-### Seam Ownership
-
-Every visible line has one owner. Do not draw borders on both adjacent children at the same coordinate. Use a line-colored parent background plus `{spacing.guide}` gaps, or use a single explicit border owned by the parent row/component.
-
-On a `blueprint-field` surface the model is draw-all-then-occlude: the texture layer owns every line uniformly and opaque content (`cell-solid` or a content slot) occludes the lines it covers. This is distinct from the parent-plus-gap model used by `cell-grid`; both keep exactly one owner per visible line.
-
-The universal guide weight is `{spacing.guide}`. Crosshairs use the same physical weight as the line they mark; they are darker through `{colors.cross}`, not thicker.
+| `content-max` | 1200 px: the widest the reading column ever grows | Website |
+| `gutter-mobile` | 20 px: the side gutter beside that column below 600 px | Website |
+| `gutter-tablet` | 40 px: the same gutter from 600 px | Website |
+| `gutter-desktop` | 64 px: the same gutter from 960 px | Website |
+| `section-step-mobile` | 64 px: the one gap between two sections below 960 px | Website |
+| `section-step-desktop` | 96 px: the same gap from 960 px | Website |
+| `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | The Portal's filter chip | Portal |
 
 ### Responsive Rules
 
-Mobile collapses the 12-column frame to a single content column while preserving the outer frame. Tablet may use 2 or 3 internal tracks for repeated cell grids. Desktop restores the 12-column frame and centered 10-column active lane.
-
-Height tokens are fixed by component family and breakpoint. Components may grow when real content requires it, but the default specimen height comes from the exported height tokens so repeated rows align predictably.
-
-Page shells must prevent horizontal scrollbars when a mathematically aligned full-bleed surface uses viewport width. Clip horizontal overflow at the shell/root level; do not hide overflow on structural cells to mask bad seam math.
-
-Compositions arrange approved primitives for a content role. They must not redefine page-frame math, row seams, marker placement, side-fill ownership, active-lane spans, or global guide primitives. If a composition needs new structural geometry, promote that geometry into the page grammar or a real component first.
-
-### Delivery Tiers
-
-Each reusable concern has one home and one authoring surface, so a member is documented and shipped in exactly one place:
-
-- **Tokens** — exact reusable values live in this contract's `colors`, `spacing`, `rounded`, and `typography` front matter, and in the one `json design-tokens` fence for material, elevation, motion, and the register groups; they export to the generated token layer. No component or section may re-encode a token value.
-- **Framework-agnostic CSS components** — the brand/display CSS components that remain in this package (agent-work artifacts, `image`, and the small label/badge/link metadata components). Their names and semantics live once in `## Components`; design-system CSS realises that catalog without a second recipe or component-token hierarchy.
-- **Reusable compositions and sections** — patterns that arrange the page grammar and lower tiers for a content role. They ship as React shadcn compositions from `@nadicodeai/ui`, composed over the kept page grammar; they are not a pure-CSS section layer and do not add a second component catalog here.
-- **Layout grammar** — the page-frame, row, lane, seam, stage, and marker system documented across this `## Layout` section, carried by the layout CSS layer.
-- **Specimens** — static demonstrations of already-defined primitives. They invent no geometry, seams, heights, or responsive behavior; they only assemble shipped tiers for inspection.
-
-The page grammar below is the `## Layout` home for the structural names; the section-level compositions that arrange them ship from `@nadicodeai/ui`.
-
-### Page Grammar
-
-Page grammar is the NadicodeAI structural system. It defines how pages are built before any content surface appears. These names live in this layout section, not in the component catalog. Exact reusable values are exported through `colors`, `spacing`, `rounded`, and `typography`; the structural semantics live here as layout doctrine, not as interface components.
-
-**`page-frame`** (`nc-page-frame`) — centered bordered frame capped by `--nc-frame-max`. Owns the outer left/right/top seams.
+The website has two breakpoints, 600 px and 960 px. They live in the application CSS layer, never in the generated token layer: `foundation.css` collapses `gutter-*` into `--nc-gutter` and `section-step-*` into `--nc-section-step` at those widths, so a section reads one name and resolves the value for the viewport it is on. No register adds a third breakpoint to this column.
 
-**`page-row`** (`nc-page-row`) — one continuous section row inside `page-frame`. Owns the bottom seam and default row background.
+Page shells must prevent horizontal scrollbars when a full-bleed section uses viewport width. Clip horizontal overflow at the shell or root level; do not hide overflow on an inner surface to mask bad math.
 
-**`active-lane`** — the centered 10-column lane. On desktop it spans columns 2 / 12; on smaller viewports it spans the row.
-
-**`side-fill`** (`nc-side-fill`) — the opt-in owner for columns 1 and 12 when a row uses the active lane. Hidden by default (the quiet-gutter doctrine: the empty margin column is the default treatment); a row enables it with `data-rails="hatch"` on the `page-row`, reserved for the page's anchor rows. When shown, it paints the diagonal filler, expands into the frame gutter so the texture touches the active content edge, and owns its single inner boundary rail (`{colors.line}` on its lane-facing edge) so the hatch is bounded on both sides — frame perimeter outside, fill rail inside.
-
-**`cell-grid`** (`nc-row-grid`) — repeated cell math. Uses `{colors.line}` parent background and `{spacing.guide}` gaps so the seam has one owner. Supports 2, 3, 4, 5, and 6 column desktop variants with responsive collapse.
-
-**`panel-cell`** — a square structural content cell inside `cell-grid`. Uses `--nc-cell-padding` and no local border.
-
-**`marker`** — sparse crosshair marker for major section/frame corners. It marks intersections; it is not decorative chrome for every card. It is placed on a grid-field track intersection and derives its position from the grid, not from a frame-relative offset.
-
-**`diagonal-fill`** — structural filler for outer columns and empty side lanes.
-
-**`dotted-field`** — artifact/canvas background for conversations, outputs, and diagrams. It indicates a work surface, not generic decoration.
-
-**`blueprint-field`** — a feathered structural-pitch background texture that visualizes a grid as graph-paper rather than as load-bearing DOM. Column and row pitch track the meaningful column count so it stays legible; the field is always feathered so it reads as texture, not as paper. On the blueprint surface the lines are drawn once underneath and occluded by opaque content (`cell-solid` or the content slot) — the draw-all-then-occlude model. It is incidental brand texture: if the blueprint field is the first thing you notice, it is too strong.
-
-**`rule-svg`** — bounded dashed connector rule. Uses `{colors.seam}` and never overlaps a cell seam.
-
-Reusable section compositions ship as React components from `@nadicodeai/ui`, composed over the page grammar above; the page grammar is the framework-agnostic foundation they assemble.
-
-### Related Layout Helpers
-
-This live helper is part of the kept page-grammar layout layer. It supports index-style page assemblies rather than naming an interface component.
-
-**`index-grid`** — layout helper for index-style page assemblies (blog, learn, and case-study rows whose guide layer owns the dividers).
-
-`index-card` is the repeated item class inside `index-grid`, not a standalone contract key.
+Compositions arrange approved primitives for a content role. They do not redefine the content max-width, the gutters, or the step between sections. If a composition needs structural geometry this section does not name, promote that geometry here first.
 
 ## Elevation & Depth
 
-Product UI uses one shared material ladder. The workspace is one continuous ground (`{colors.material-workspace}` / `{colors.dark-material-workspace}`); every solid object uses the same fill (`{colors.material-solid}` / `{colors.dark-material-solid}`). In dark mode, both are true black. The workspace remains legible because it carries the existing `dotted-field` texture and solid objects occlude it. Elevation never means progressively greyer cards. Physical distance changes only the falloff of the rung, and the four rungs are the four owned utilities: `nc-elevation-resting` for resting content, then `nc-elevation-raised`, `nc-elevation-floating`, and `nc-elevation-modal` when an object is physically raised, floating, or modal. Each rung is authored per mode, light and dark, and carries its own ring as the recipe's final layer, so an elevated root never adds a border, a second ring, a local ring tint, or an opacity override. Product code chooses only the semantic role.
+Product UI uses one shared material ladder. The workspace is one continuous ground (`{colors.material-workspace}` / `{colors.dark-material-workspace}`); every solid object uses the same fill (`{colors.material-solid}` / `{colors.dark-material-solid}`). In dark mode, both are true black. The workspace remains legible because it carries the existing `dotted-field` texture and solid objects occlude it. Elevation never means progressively greyer cards. Physical distance changes only the falloff of the rung, and the four rungs are the four owned utilities: `nc-elevation-resting` for resting content, then `nc-elevation-raised`, `nc-elevation-floating`, and `nc-elevation-modal` when an object is physically raised, floating, or modal. Each rung is authored per mode, light and dark, and carries its own ring as the recipe's final layer, so an elevated root never adds a border, a second ring, a local ring tint, or an opacity override. In light mode every rung's ring is black at 5%, because the shadow carries the height. On true black the shadows vanish, so the dark ring carries it instead and steps with the rung: resting 12%, raised 16%, floating 22%, modal 28% white. The falloff layers are identical in both modes; only the ring differs. Product code chooses only the semantic role.
 
 Glass is a material variant, not an elevation step. Floating chrome may be glass: menus, popovers, selects, comboboxes, the command palette, and bars, the surfaces that stand over the room and show it through themselves. Content surfaces stay solid: cards, KPIs, tables, inspectors, and dialog, sheet, and drawer bodies, because glass floats but never carries content. Inside the window, glass composites only over our own content; a product whose window the operating system composites states its window material in its register. Glass keeps exactly one separator, the integrated edge ring of its elevation falloff, never ring plus shadow plus border stacked. Reduced-transparency mode replaces glass with the same solid material at the same elevation.
 
@@ -591,32 +483,44 @@ On coarse or non-hover input capability, every interactive target is at least 44
 One radius rounds every surface. The reference is the search field: `{rounded.md}` (6 px). A surface never earns a larger corner by sitting higher on the elevation ladder, and no register may reintroduce a second surface radius.
 
 - Use `{rounded.md}` (6 px) for every surface and every control: resting, raised, outlined, floating, and modal surfaces; cards, KPI cards, chart cards, tables, menus, selects, popovers, dropdowns, dialogs, sheets, drawers, takeovers, tooltips, toasts, inspectors; and buttons, inputs, chips, status tags, and small artifacts.
-- Use `{rounded.none}` for structural page rows, frame edges, grid cells, and structural modules.
+- Use `{rounded.none}` for full-bleed sections, structural cells, and structural modules.
 - Use `{rounded.full}` only for intrinsically circular identity/avatar chrome and compact control marks whose geometry is inherently round or pill-shaped. It never turns a content surface, button, badge, or navigation item into a pill by default.
 
 The radius scale itself is unchanged: `{rounded.xs}` through `{rounded.3xl}` stay exported for inner marks and for geometry a component owns, such as a progress track or a bar end. Only the rung that surfaces take is fixed.
 
-Public page-grammar cells are not cards and remain square because their parent frame supplies the visual system. Product cards use the resting material role. A details composition may divide its header and bound individual facts with the outlined role; each edge has one owner and fact cells add no elevation. Grouping does not justify another ring around the same container or a stronger shadow.
+Structural cells on the website are not cards and remain square, because the section around them supplies the visual system. Product cards use the resting material role. A details composition may divide its header and bound individual facts with the outlined role; each edge has one owner and fact cells add no elevation. Grouping does not justify another ring around the same container or a stronger shadow.
 
 ## Motion
 
-Motion reports state: things move when something changes, briefly, and settle. Continuous, ambient motion is scarce and purposeful — the Agent identity visuals are its natural carrier — and repeated interactions stay fast and quiet. Motion preserves meaning when movement is reduced.
+**One motion law.** Only Agents move on their own. The interface answers a person's action, briefly, and stops: motion follows the action, stays under 300 ms, grows from the element that was pressed, and settles. While a person waits for something they asked for, one waiting line moves and nothing else.
+
+Only Agents move on their own. An idle orb holds still, and under reduced
+motion a thinking or working orb breathes in opacity, 1.6 s ease-in-out from
+full ink to 0.45, so busy still reads as busy while every other orb is still
+([agent orbs](../ui/docs/agent-orb.md)). Opening an Agent in the Portal is the
+one view transition: the orb travels from the list row into the Agent's page
+on `transition` with `in-out-strong`, over a root crossfade on `close`, and
+reduced motion navigates instantly; the Portal's `portal.css` owns those rules
+because that one navigation is the only place the product moves a page.
+
+**One default transition in every product**: `confirm`, 180 ms, `out-strong`. It is set once, on `--default-transition-duration` and `--default-transition-timing-function` in `src/css/motion.css`, so a bounded Tailwind transition utility inherits the cadence and no product declares a default of its own.
 
-The durations and easings live in `core.motion` of the authored token extension ("CSS Architecture & Token Pipeline"). The build emits every duration as `--nc-duration-*` and every easing as `--nc-ease-*`. `src/css/motion.css` owns the keyframes, the `nc-anim-*` and `nc-transition-*` classes, and the reduced-motion law, and references those names; it declares no duration, easing, or alias of its own. A register decides where motion appears; it never picks a duration outside this list.
+**One reduced-motion policy**, stated once in `motion.css` and repeated nowhere: under `prefers-reduced-motion: reduce`, movement stops and paint continues. Transforms and keyframed movement go to their end state; opacity and colour transitions are kept, because a fade or a colour change is the state change itself rather than decoration around it, and an Agent that is thinking or working still has to read as busy. A component never answers reduced motion by turning every transition off.
+
+The durations and easings live in `core.motion` of the authored token extension ("CSS Architecture & Token Pipeline"). The build emits every duration as `--nc-duration-*` and every easing as `--nc-ease-*`. `src/css/motion.css` owns the keyframes, the `nc-anim-*` and `nc-transition-*` classes, and the reduced-motion law, and references those names; it declares no duration, easing, or alias of its own. A register decides where motion appears; it never picks a duration outside this list, and `tests/guards/motion-durations.test.ts` fails on a time literal anywhere in the motion layer.
 
 | Token | Use |
 | --- | --- |
-| `control` | Hover and press on a control in a dense register |
-| `confirm` | Confirmation feedback and instant state flips |
-| `close` / `open` | Floating chrome and overlays leaving and arriving |
-| `transition` | Property transitions on a working surface |
-| `msg-in` | A transcript message arriving |
-| `drawer` / `drawer-swipe` | Sheets and drawers, programmatic and pointer-driven |
-| `stagger` | The step between siblings in one arrival |
-| `spin` | One revolution of a busy spinner |
-| `typing` / `pulse` / `shimmer` | Ambient loops; each has a reduced-motion fallback in `motion.css` |
-
-The easings are `emphasized`, `out-strong`, `in-out-strong`, and `drawer`.
+| `stagger` 60 ms | The step between siblings in one arrival |
+| `control` 100 ms | Hover and press on a control in a dense register |
+| `close` 140 ms / `open` 220 ms | Floating chrome and overlays leaving and arriving |
+| `confirm` 180 ms | Confirmation feedback, instant state flips, and the default transition |
+| `msg-in` 240 ms | A transcript message arriving |
+| `transition` 240 ms | Property transitions on a working surface, and the Agent view transition |
+| `drawer-swipe` 400 ms / `drawer` 450 ms | Sheets and drawers, pointer-driven and programmatic |
+| `wait` 1.6 s | The one waiting line, and nothing else |
+
+The easings are `emphasized`, `out-strong`, `in-out-strong`, and `drawer`. Every remaining duration has a job these rules allow, which is why `spin`, `typing` and `shimmer` retired with the spinner, the typewriter line and the three shimmer systems: a busy spinner is not an Agent, and ambient decoration is not an answer to anything a person did.
 
 ## Registers
 
@@ -626,21 +530,31 @@ A register adds rules. It never redefines a foundation value. A value one regist
 
 | Register | Rulebook | Its own token families | Dark mode |
 | --- | --- | --- | --- |
-| Website | `apps/website/docs/design-doctrine.md` over `## Layout` here | `register.website.layout`: `section`, `page-*`, `frame-*`, `cell-padding`, `section-gap`, `cross-size-*`, every `h-*` height. It speaks `display-xl`, `display-lg`, and `title-lg` | Light only |
+| Website | `apps/website/docs/design-doctrine.md` over `## Layout` here | `register.website.layout`: `content-max`, `gutter-*`, `section-step-*`. It speaks `display-xl`, `display-lg`, and `title-lg` | Light only |
 | Portal | `apps/portal/docs/information-architecture.md` for direction; `apps/portal/docs/design-doctrine.md` for implementation | `register.portal.density`: `filter-chip-gap`, `filter-chip-height`, `filter-chip-icon` | System, light, dark, on the `.dark` class |
 | Nadia desktop app | `apps/nadia/docs/design-doctrine.md` | `register.nadia.*`: colour-role and radius aliases; six deprecated elevation recipes and the legacy overlay border remain as compatibility data. New surfaces consume the foundation's material roles | Follows the operating system, on the `.dark` class |
 
-The website's depth is flat and architectural: hairlines, contrast, dotted fields, diagonal fills, and dark action bands make hierarchy, and the page frame and row grid stay dominant. It uses no rung of the material ladder and no floating card stack as page structure. Marketing bands may use `register.website.layout.section`, emitted as `--nc-section`, when they need the broader inherited hero rhythm. The website uses no negative letter spacing outside the two display tiers.
+The website is built from three kinds of full-bleed section and nothing else: white for reading, black for a scene with a marble figure and the live orb, and at most one flat, full-strength colour section per page for its single statement, in the hue of that page's picture. One content max-width with growing side gutters centres the reading content, a section holds a single column or a picture-and-text split, and one spacing step separates two sections (`## Layout`).
+
+The website's depth is flat and architectural: the three section grounds, contrast, large Geist headlines and the approved pictures make hierarchy. It has no page frame, no row grid, no diagonal fill and no dotted field; the dotted field is the Portal's work surface. It uses no rung of the material ladder and no floating card stack as page structure, and no negative letter spacing outside the two display tiers.
 
 The Portal and the desktop are product shells on the material ladder above, each by its rulebook. The desktop's window material is the operating system's where the OS composites the window; inside the window the foundation's glass law holds.
 
 ## Components
 
-This section is the semantic catalog for framework-agnostic components. Exact reusable values stay in the token maps above; CSS owns component composition. Page grammar and composition semantics live in `## Layout`, while React components and reusable sections live in `@nadicodeai/ui`.
+This section is the semantic catalog for framework-agnostic components. Exact reusable values stay in the token maps above; CSS owns component composition. The section grammar and the content column live in `## Layout`, while React components and reusable sections live in `@nadicodeai/ui`.
+
+### Structural Surfaces
+
+Two surfaces carry structure rather than content. Both are square (`{rounded.none}`), both take no rung of the elevation ladder, and neither draws a border of its own.
+
+**`panel-cell`** — a structural content cell. It pads its content with `{spacing.lg}` and takes its height from what it holds; the surface around it owns any seam.
+
+**`dotted-field`** — the Portal's work surface: the dotted ground behind conversations, outputs, and diagrams, on the material ladder's workspace role ("Elevation & Depth"). It indicates a work surface, never decoration, and the website does not use it.
 
 ### Interface Atoms
 
-Interface CSS components provide small metadata, label, and link chrome. They inherit NadicodeAI tokens and stay subordinate to the page grammar; they must not create independent layout systems or repair structural seams. The generic interactive controls (navigation, buttons, inputs, footer chrome, the marketing card/code/pricing/proof surfaces, the standard sections) ship as React shadcn components from `@nadicodeai/ui`; this contract keeps only the brand/display CSS components and primitives that belong in the framework-agnostic package.
+Interface CSS components provide small metadata, label, and link chrome. They inherit nadicode tokens and stay subordinate to the layout; they must not create independent layout systems or repair structural seams. The generic interactive controls (navigation, buttons, inputs, footer chrome, the marketing card/code/pricing/proof surfaces, the standard sections) ship as React shadcn components from `@nadicodeai/ui`; this contract keeps only the brand/display CSS components and primitives that belong in the framework-agnostic package.
 
 Keyboard focus has one owner: the kit's foundation layer draws the full-opacity `{spacing.focus-outline-width}` `{colors.focus-ring}` / `{colors.dark-focus-ring}` outline at `{spacing.focus-outline-offset}` offset on every `:focus-visible` element. A component never repaints focus with its own ring, hue, or width, and never removes the outline without a contrast-safe equivalent.
 
@@ -654,13 +568,13 @@ Keyboard focus has one owner: the kit's foundation layer draws the full-opacity
 
 ### Content Surfaces
 
-Content surfaces display specific content types inside the grammar. They are valid when the content exists; they do not replace the page frame, row model, or seam rules.
+Content surfaces display specific content types inside a section. They are valid when the content exists; they do not replace the section, the content column, or the seam rules.
 
-**`image`** — editorial media mount, the single home for art-directed imagery inside the grammar. A bounded media fill (img, picture, video, or inline SVG) with an optional mono tag chip overlaid on the media and an optional body-tone caption bar below it, both typed by the generated caption utilities applied in markup. Square-cornered (`{rounded.none}`): a mounted print, not a floating card — the parent frame supplies the visual system. With `data-frame="true"` it draws exactly one hairline (its own `{colors.line}` border), so it sits inside a borderless `panel-cell` or a visual slot without repairing or stacking onto any grid seam. The aspect ratio is the per-instance `--nc-image-ratio` knob (default 4 / 3) — set the prop on the element, never re-derive geometry inline. Variant: `data-strip="true"` is the full-width divider form for thin editorial bands between page rows (thread, texture, panorama) — the ratio unlocks and the height resolves from the responsive `--nc-h-strip-*` tokens through the layout-layer collapsed alias. Use `image` for every illustrated image, photographic surface, or image divider. Conversation artifacts render through assistant-ui rather than a design-system CSS family.
+**`image`** — editorial media mount, the single home for art-directed imagery inside a section. A bounded media fill (img, picture, video, or inline SVG) with an optional mono tag chip overlaid on the media and an optional body-tone caption bar below it, both typed by the generated caption utilities applied in markup. Square-cornered (`{rounded.none}`): a mounted print, not a floating card — the parent frame supplies the visual system. With `data-frame="true"` it draws exactly one hairline (its own `{colors.line}` border), so it sits inside a borderless `panel-cell` or a visual slot without repairing or stacking onto any grid seam. The aspect ratio is the per-instance `--nc-image-ratio` knob (default 4 / 3) — set the prop on the element, never re-derive geometry inline. It has one form: there is no divider-strip variant. Use `image` for every illustrated image and every photographic surface. Conversation artifacts render through assistant-ui rather than a design-system CSS family.
 
 ### Agentic Work Surfaces
 
-Agentic work surfaces are the NadicodeAI-specific display layer outside the conversation renderer. They show concrete work output or workflow state such as memory, state, run progress, identity, and handoffs. Conversation messages, tools, artifacts, approvals, and pending indicators belong to assistant-ui.
+Agentic work surfaces are the nadicode-specific display layer outside the conversation renderer. They show concrete work output or workflow state such as memory, state, run progress, identity, and handoffs. Conversation messages, tools, artifacts, approvals, and pending indicators belong to assistant-ui.
 
 Agent identity is decorative product identity, not a work artifact or a status signal: the Agent orbs, owned by [`packages/ui/docs/agent-orb.md`](../ui/docs/agent-orb.md).
 
@@ -697,30 +611,41 @@ whole map in one module.
 
 ## System activity
 
-System activity, measured progress and settled status share one visual
-language. Activity is transient: it communicates ongoing work, then gives way
-to content or outcome feedback. The activity family uses neutral ink for its
-structure and the cobalto info role for moving foreground particles; success,
-warning and error keep their meanings. Measurable completion uses progress,
-and waiting for a person or a failed operation uses the feedback treatment.
-
-The renderer is `ActivityOrb` in `@nadicodeai/ui`, with three activities:
-loading, connecting and processing. Its motion recipes, operation mapping,
-sizes and runtime behaviour are owned by
-[`packages/ui/docs/activity.md`](../ui/docs/activity.md); a consuming app
-chooses the activity and supplies its readable meaning.
+Who does the work decides how it looks. An Agent's work shows that Agent's orb
+in its state and a sentence saying what it is doing; Nadia connecting is
+Nadia's ribbon, working. Everything below is the system's own work, and an orb
+means an Agent, so no system wait takes one.
+
+System work under about a second is a still pending label on the control: its
+own word changes, it holds its place and its icon, and it carries `disabled`
+and `aria-busy`. Past a second, one 2 px waiting line of ink moves beside the
+work, a 32% segment crossing its track linearly on `wait`; nothing else on the
+screen moves while it does. Measurable work is a progress line with a written
+count. A page load shows still placeholders in the shape of the content.
+Reduced motion drops the travel and breathes the whole line in opacity.
+
+The colour of a wait is ink: the cobalto info role belonged to the retired
+activity particles and marks no system wait now. Success, warning and error
+keep their meanings; waiting for a person or a failed operation uses the
+feedback treatment, not an activity one.
+
+The renderers are `PendingLabel`, `WaitingLine`, `Progress` and `Skeleton` in
+`@nadicodeai/ui`. The one-second delay, the geometry, the ink and the motion
+are owned by [`packages/ui/docs/activity.md`](../ui/docs/activity.md); the
+motion vocabulary owns `.nc-anim-wait` and its reduced-motion law; a consuming
+app chooses the wait and supplies its readable words.
 
 ## Do's and Don'ts
 
 This section states the correct form; a complete positive definition is the whole rule.
 
-- Website pages are continuous `page-row` sequences inside one `page-frame`; centered content sits in the 10-column `active-lane` with columns 1 and 12 visibly owned — by empty canvas, `side-fill`, guide strips, or component-owned fillers.
-- Every visible line has one owner: ordinary seams are `{spacing.guide}` at `{colors.line}`, tuned only at the token contract; required control boundaries are `{colors.input}` / `{colors.dark-input}`; named collection controls may use the optional-perimeter rule above; keyboard focus is the dedicated focus-ring roles; crosshairs are `{colors.cross}` at `{spacing.guide}` weight.
-- Page structure is architectural: hairlines, luminance, spacing, and the grammar above. One material role per product container; structural page-grammar cells are border-only; the four `nc-elevation-*` rungs are the complete shadow vocabulary; modal scrims stay unblurred.
-- Typography uses fixed token sizes stepped by breakpoint; components take their default heights from the exported height tokens and grow only when real content requires it.
-- Agent orbs identify an Agent; conversations, artifacts, review states, and work output belong to assistant-ui and the agentic work surfaces. Text beside `{colors.verde-vivo}` sits on the canvas.
-- Components are named as NadicodeAI-owned primitives, and this file carries contract only: tokens, semantics, and application rules — component prop APIs, state matrices, screenshots, and page-specific material live with their owners.
-- Each register keeps its own structure and chrome: the page grammar on the website, the material ladder in the Portal and the desktop, the desktop window following the operating system.
+- A website page is a sequence of full-bleed sections in three kinds only: white for reading, black for a scene, and at most one flat colour section for one statement. Each one centres its content in the same column, capped at `content-max` with the gutter its viewport gives it, and the sections sit one spacing step apart.
+- Every visible line has one owner: ordinary seams are `{spacing.guide}` at `{colors.line}`, tuned only at the token contract; required control boundaries are `{colors.input}` / `{colors.dark-input}`; named collection controls may use the optional-perimeter rule above; keyboard focus is the dedicated focus-ring roles.
+- Page structure is architectural: hairlines, luminance, spacing, and the section grammar above. One material role per product container; structural cells carry no elevation; the four `nc-elevation-*` rungs are the complete shadow vocabulary; modal scrims stay unblurred.
+- Typography uses fixed token sizes stepped by breakpoint; a component's height comes from its content and the spacing ladder, never from a fixed height of its own.
+- Agent orbs identify an Agent; conversations, artifacts, review states, and work output belong to assistant-ui and the agentic work surfaces. Text sits on the canvas beside an identity mark, never on it.
+- Components are named as nadicode-owned primitives, and this file carries contract only: tokens, semantics, and application rules — component prop APIs, state matrices, screenshots, and page-specific material live with their owners.
+- Each register keeps its own structure and chrome: the three section kinds on the website, the material ladder in the Portal and the desktop, the desktop window following the operating system.
 
 ## Iconography
 
@@ -729,7 +654,7 @@ discipline below, the sizes, the stroke, and the decorative-versus-named rule,
 is foundation and holds in every register.
 
 The website, the Portal, and `@nadicodeai/ui` draw from Lucide (ISC). Lucide's
-shapes are never edited; the NadicodeAI house render changes only how they are
+shapes are never edited; the nadicode house render changes only how they are
 drawn: a line of `{spacing.icon-stroke}` on screen at every size, held there by
 `vector-effect: non-scaling-stroke` on each shape, round caps, round joins, no
 fill, and `currentColor` inheritance. A 12 px icon takes
@@ -758,31 +683,31 @@ carry an accessible name.
 
 ## Brand media authority
 
-The NadicodeAI logo has three approved forms:
+The company is **nadicode**, lowercase ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md)). Its logo has three approved forms:
 
-1. **Horizontal lockup.** One interlocked-link mark followed by one NadicodeAI wordmark. The mark sits on the left, is scaled to the wordmark's capital height, and shares its baseline. Use this form when a company identifier needs both the mark and the readable name.
-2. **Mark.** The two interlocked rounded-square links may stand alone where space is tight: favicons, app icons, avatars, watermarks, stamps, and compact navigation. A containing link or control names NadicodeAI when the mark is used without visible text.
-3. **Wordmark.** The NadicodeAI letterforms may stand alone where the name must read by itself, including document headers and editorial layouts.
+1. **Wordmark.** nadicode drawn in one geometric line, with one dot over the i. The dot is the only colour in the logo: where an Agent sits. Use it wherever the company must be named.
+2. **Mark.** The plain n cut from the wordmark, never with a dot or any other shape added. It stands alone where the name does not fit: compact navigation, headers inside the product.
+3. **Icon.** The white n on a `{colors.identity-cobalto}` tile with rounded corners: app icons, favicons and avatars. The tile is the one place the brand colour fills a field.
 
-Other companies' marks are not NadicodeAI company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`; [`packages/ui/docs/contract.md`](../ui/docs/contract.md) carries their rules. A third-party mark never enters a NadicodeAI logo form, composition, or clear-space measurement.
+Other companies' marks are not nadicode company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`; [`packages/ui/docs/contract.md`](../ui/docs/contract.md) carries their rules. A third-party mark never enters a nadicode logo form, composition, or clear-space measurement.
 
-Agent orbs, Nadia's included, and generated imagery are not NadicodeAI company logos. The orbs live in [`packages/ui/docs/agent-orb.md`](../ui/docs/agent-orb.md); editorial imagery routes through [`skills/marketing/blog-imagegen/references/editorial-register.md`](../../skills/marketing/blog-imagegen/references/editorial-register.md). This contract owns only the package delivery interface.
+Agent orbs, Nadia's included, and generated imagery are not nadicode company logos. The orbs live in [`packages/ui/docs/agent-orb.md`](../ui/docs/agent-orb.md); editorial imagery routes through [`skills/marketing/blog-imagegen/references/editorial-register.md`](../../skills/marketing/blog-imagegen/references/editorial-register.md). This contract owns only the package delivery interface.
 
-All three forms derive from one authored, framework-neutral geometry source exported as `@nadicodeai/design-system/assets/logo-geometry`. The lockup combines the shared mark and wordmark geometry at the established proportion and spacing. No SVG, React component, favicon, document, or app re-authors, traces, typesets, or rearranges those shapes.
+All forms derive from one authored, framework-neutral geometry source exported as `@nadicodeai/design-system/assets/logo-geometry`: on a 100-unit x-height, an 18-unit stroke with flat ends, bowls and the n's arch of radius 41, and the dot of radius 14 centred 79 units above the baseline over the i's stem. No SVG, React component, favicon, document, or app re-authors, traces, typesets, or rearranges those shapes. The eight reference files beside the ADR are the target each generated output matches, byte for byte, and the package guard fails on any output that drifts from them.
 
-Use the positive form on `{colors.canvas}` and the soft neutral canvases: ink letterforms and link with the primary verde link and `AI` suffix. Use the inverse form on `{colors.identity-ink}`: `{colors.identity-white}` letterforms and link with the dark-primary verde link and `AI` suffix. On `{colors.identity-verde}`, use the supplied on-verde form with one ink link and one white link. On photography, place the logo in a quiet area or over a scrim that keeps every part legible; when neither is available, mount it on an approved solid field. One surface uses one treatment.
+On `{colors.canvas}` and the soft neutral canvases, the letters are ink and the dot is `{colors.logo-dot}`. On `{colors.identity-ink}` and other dark grounds, the letters are `{colors.identity-white}` and the dot is `{colors.dark-logo-dot}`, a brighter cobalt, so it does not sink into black. `{colors.logo-dot}` is the logo's own colour role and the only token a consumer paints the dot with; the generated mode layer flips it under any dark ancestor, so React draws one form on both grounds. A one-ink form, letters and dot in one colour, exists only where a single ink prints: embossing, stamps, one-colour print. On photography, place the logo in a quiet area or over a scrim that keeps every part legible; when neither is available, mount it on an approved solid field. One surface uses one treatment.
 
-The clear-space unit is the rendered width of one link stroke in the mark. Keep at least one unit free on every side of the mark and lockup, with no text, rule, image, or container edge inside it. A wordmark used alone keeps the same unit that the mark would have at the wordmark's capital height. Minimum rendered sizes are 16 CSS pixels or 5 mm for the mark, 130 CSS pixels or 32 mm wide for the lockup, and 96 CSS pixels or 25 mm wide for the wordmark. Browser and operating-system icon slots use the supplied favicon or app-icon files at the platform's required size and are exempt from the screen minimum. Never compress, crop, or distort a logo to fit.
+The clear-space unit is one stroke width of the rendered wordmark or mark. Keep at least one unit free on every side, with no text, rule, image, or container edge inside it. Minimum rendered sizes are 72 CSS pixels wide for the wordmark, 12 CSS pixels for the mark, and 16 CSS pixels for the favicon. Browser and operating-system icon slots use the supplied favicon or app-icon files at the platform's required size. Never compress, crop, or distort a logo to fit.
 
-For a meaningful standalone image, use the accessible name `NadicodeAI`; the accessible name is the label that identifies an image, link, or control to assistive technology. When a containing link or control already has that accessible name, hide the logo image from assistive technology with empty alt text. Never repeat the same accessible name on both the container and the image.
+For a meaningful standalone image, use the accessible name `nadicode`; the accessible name is the label that identifies an image, link, or control to assistive technology. When a containing link or control already has that accessible name, hide the logo image from assistive technology with empty alt text. Never repeat the same accessible name on both the container and the image.
 
-Do not redraw, retype, reorder, stretch, crop, rotate, recolor, outline, shadow, animate, or add effects or gradients to a logo form. Do not flatten the over-under interlock, add a third link, alter the proportions or lockup spacing, stack the forms, embed the mark inside the wordmark, place the mark after the wordmark, combine it with another mark, or substitute Nadia imagery for it.
+Do not redraw, retype, reorder, stretch, crop, rotate, recolor, outline, shadow, animate, or add effects or gradients to a logo form. Do not add a dot or any shape to the mark, move the dot off the i, or substitute Nadia imagery for the logo.
 
-The package build renders and publicly exports full-colour, mono-ink, inverse, and on-verde SVG and transparent PNG files for the lockup, mark, and wordmark from the geometry and current `colors.*` contract. React consumers use `BrandLockup`, `BrandMark`, or `BrandWordmark` according to the roles above. The operator-only favicon generator wraps the same mark geometry in the platform tile and may adapt tile radius, output size, and fixed-tile paint roles; it does not substitute another mark. Private geometry templates do not ship. A contract or geometry change is completed by regeneration, never by repainting an output or updating a fallback by hand.
+The package build renders and publicly exports seven files as SVG and transparent PNG from the geometry and the current `colors.*` contract: `assets/logo` and `assets/logo-white`, `assets/logo-one-ink` and `assets/logo-one-ink-white`, `assets/mark` and `assets/mark-white`, and `assets/app-icon`. React consumers use `BrandMark` or `BrandWordmark` according to the roles above; there is no lockup adapter, because the wordmark is the logo and the mark is already inside it, so no surface places the two together. The operator-only favicon generator draws the same icon tile at the sizes a browser and a platform ask for; it does not substitute another mark. Private geometry templates do not ship. A contract or geometry change is completed by regeneration, never by repainting an output or updating a fallback by hand.
 
 ## CSS Architecture & Token Pipeline
 
-How this contract becomes shipped CSS. The private CSS authoring graph lives in `src/css/`; the build flattens that graph and inlines its component icon dependencies into the single public `dist/css/index.css` artifact exported as `@nadicodeai/design-system/css`. Generated files and partials never ship as package subpaths. The cascade is `@layer tokens, theme, reset, foundation, motion, layout, primitives, components;` with no `sections` layer. The bundle ships only framework-agnostic brand and display CSS components; generic marketing and SaaS components ship as React components from `@nadicodeai/ui`.
+How this contract becomes shipped CSS. The private CSS authoring graph lives in `src/css/`; the build flattens that graph and inlines its component icon dependencies into the single public `dist/css/index.css` artifact exported as `@nadicodeai/design-system/css`. Generated files and partials never ship as package subpaths. The cascade is `@layer tokens, theme, reset, foundation, motion, primitives, components;` with no `layout` and no `sections` layer. The bundle ships only framework-agnostic brand and display CSS components; generic marketing and SaaS components ship as React components from `@nadicodeai/ui`.
 
 ### Public style interfaces
 
@@ -795,17 +720,17 @@ Callers never import generated files, CSS partials, or framework adapters direct
 
 ### Authoring homes
 
-Each delivery tier (see Layout, "Delivery Tiers") has exactly one authoring file:
+Each part of the shipped CSS has exactly one authoring file:
 
-- Tokens: `src/css/tokens.generated.css`, built from this contract and never hand-edited. Runtime composition belongs to the owning layer, such as responsive switching in `layout.css`; there is no hand-authored token partial.
+- Tokens: `src/css/tokens.generated.css`, built from this contract and never hand-edited. Runtime composition belongs to the owning layer, such as the website's responsive switching in `foundation.css`; there is no hand-authored token partial.
 - Type utilities: the `.nc-type-*` classes live in `foundation.css`.
-- Page grammar: `layout.css`, which also owns all responsive `@media` switching.
+- The website's content column, `.nc-page`, and the responsive `@media` switching behind it: `foundation.css`.
 - CSS primitives and components: `primitives.css` plus `components/*`. Every shipped component is named once in `## Components`; the two-way guard derives the CSS relationship from that catalog.
 - Specimens: `examples/`, which only assemble already-defined tiers.
 
 ### Authored token extension
 
-The YAML front matter carries the four groups the Google design schema defines: colors, typography, rounded, spacing. Everything else this contract owns is authored in the one `json design-tokens` fence below, as DTCG 2025.10. It holds `core.material`, `core.elevation` (four rungs per mode, each recipe ending in its own ring), `core.motion.duration` and `core.motion.ease`, and the register groups: `register.website.layout` (the page-grammar geometry), `register.portal.density` (the filter-chip sizes), and `register.nadia` (the desktop's colour and radius aliases onto `core`, plus deprecated elevation data retained for older consumers).
+The YAML front matter carries the four groups the Google design schema defines: colors, typography, rounded, spacing. Everything else this contract owns is authored in the one `json design-tokens` fence below, as DTCG 2025.10. It holds `core.material`, `core.elevation` (four rungs per mode, each recipe ending in its own ring), `core.motion.duration` and `core.motion.ease`, and the register groups: `register.website.layout` (the website's column and section rhythm), `register.portal.density` (the filter-chip sizes), and `register.nadia` (the desktop's colour and radius aliases onto `core`, plus deprecated elevation data retained for older consumers).
 
 An alias is written in the short `{core.color.canvas}` form here; the build rewrites it to the public rooted form `{nadicode.core.color.canvas}` in `dist/tokens/nadicode.dtcg.json`. `$extensions."ai.nadicode.targets"` on a register group lists where its values go: `css` puts them in the generated stylesheets, `data` keeps them in the token files only. A register group without that key fails the build. `core` carries no key and always reaches both.
 
@@ -871,7 +796,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":5.25,"unit":"px"},"blur":{"value":7,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2.79,"unit":"px"},"blur":{"value":3.72,"unit":"px"},"spread":{"value":-2,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.01}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1.16,"unit":"px"},"blur":{"value":1.5,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.01}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.18}}
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.12}}
           ]
         },
         "raised": {
@@ -881,7 +806,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":6,"unit":"px"},"blur":{"value":12,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.03}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":3,"unit":"px"},"blur":{"value":6,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1.5,"unit":"px"},"blur":{"value":3,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.18}}
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.16}}
           ]
         },
         "floating": {
@@ -891,7 +816,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":10,"unit":"px"},"blur":{"value":20,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":5,"unit":"px"},"blur":{"value":10,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.03}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.02}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.18}}
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.22}}
           ]
         },
         "modal": {
@@ -901,7 +826,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":15,"unit":"px"},"blur":{"value":30,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.05}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":7.5,"unit":"px"},"blur":{"value":15,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.04}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":3,"unit":"px"},"blur":{"value":6,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.03}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.18}}
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.28}}
           ]
         }
       }
@@ -918,10 +843,7 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
         "transition": {"$value":{"value":240,"unit":"ms"}},
         "drawer-swipe": {"$value":{"value":400,"unit":"ms"}},
         "drawer": {"$value":{"value":450,"unit":"ms"}},
-        "spin": {"$value":{"value":600,"unit":"ms"}},
-        "typing": {"$value":{"value":1,"unit":"s"}},
-        "pulse": {"$value":{"value":1.6,"unit":"s"}},
-        "shimmer": {"$value":{"value":2,"unit":"s"}}
+        "wait": {"$value":{"value":1.6,"unit":"s"}}
       },
       "ease": {
         "$type": "cubicBezier",
@@ -937,51 +859,12 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
       "$extensions": {"ai.nadicode.targets":["css","data"]},
       "layout": {
         "$type": "dimension",
-        "section": {"$value":{"value":192,"unit":"px"}},
-        "page-pad": {"$value":{"value":24,"unit":"px"}},
-        "page-max-mobile": {"$value":{"value":448,"unit":"px"}},
-        "page-max-tablet": {"$value":{"value":624,"unit":"px"}},
-        "page-max-desktop": {"$value":{"value":1440,"unit":"px"}},
-        "frame-max": {"$value":{"value":1392,"unit":"px"}},
-        "frame-gap": {"$value":{"value":24,"unit":"px"}},
-        "cell-padding": {"$value":{"value":24,"unit":"px"}},
-        "section-gap": {"$value":{"value":48,"unit":"px"}},
-        "cross-size-mobile": {"$value":{"value":11,"unit":"px"}},
-        "cross-size-tablet": {"$value":{"value":15,"unit":"px"}},
-        "cross-size-desktop": {"$value":{"value":21,"unit":"px"}},
-        "h-strip-mobile": {"$value":{"value":72,"unit":"px"}},
-        "h-strip-tablet": {"$value":{"value":80,"unit":"px"}},
-        "h-strip-desktop": {"$value":{"value":88,"unit":"px"}},
-        "h-cell-sm": {"$value":{"value":120,"unit":"px"}},
-        "h-cell-md-mobile": {"$value":{"value":144,"unit":"px"}},
-        "h-cell-md-tablet": {"$value":{"value":160,"unit":"px"}},
-        "h-cell-md-desktop": {"$value":{"value":168,"unit":"px"}},
-        "h-cell-lg-mobile": {"$value":{"value":220,"unit":"px"}},
-        "h-cell-lg-desktop": {"$value":{"value":240,"unit":"px"}},
-        "h-visual-mobile": {"$value":{"value":276,"unit":"px"}},
-        "h-visual-tablet": {"$value":{"value":318,"unit":"px"}},
-        "h-visual-desktop": {"$value":{"value":360,"unit":"px"}},
-        "h-precision-mobile": {"$value":{"value":276,"unit":"px"}},
-        "h-precision-tablet": {"$value":{"value":480,"unit":"px"}},
-        "h-precision-desktop": {"$value":{"value":720,"unit":"px"}},
-        "h-hero-mobile": {"$value":{"value":560,"unit":"px"}},
-        "h-hero-desktop": {"$value":{"value":720,"unit":"px"}},
-        "h-action-strip-mobile": {"$value":{"value":20,"unit":"px"}},
-        "h-action-strip-desktop": {"$value":{"value":32,"unit":"px"}},
-        "h-action-body-mobile": {"$value":{"value":320,"unit":"px"}},
-        "h-action-body-tablet": {"$value":{"value":338,"unit":"px"}},
-        "h-action-band": {"$value":{"value":260,"unit":"px"}},
-        "h-feature-mobile": {"$value":{"value":360,"unit":"px"}},
-        "h-feature-tablet": {"$value":{"value":400,"unit":"px"}},
-        "h-feature-desktop": {"$value":{"value":456,"unit":"px"}},
-        "h-editorial-feature-mobile": {"$value":{"value":360,"unit":"px"}},
-        "h-editorial-feature-tablet": {"$value":{"value":440,"unit":"px"}},
-        "h-editorial-feature-desktop": {"$value":{"value":560,"unit":"px"}},
-        "h-bento-primary": {"$value":{"value":384,"unit":"px"}},
-        "h-bento-secondary": {"$value":{"value":240,"unit":"px"}},
-        "h-bento-mobile-copy": {"$value":{"value":248,"unit":"px"}},
-        "h-bento-mobile-main": {"$value":{"value":537,"unit":"px"}},
-        "h-bento-strip": {"$value":{"value":20,"unit":"px"}}
+        "content-max": {"$value":{"value":1200,"unit":"px"}},
+        "gutter-mobile": {"$value":{"value":20,"unit":"px"}},
+        "gutter-tablet": {"$value":{"value":40,"unit":"px"}},
+        "gutter-desktop": {"$value":{"value":64,"unit":"px"}},
+        "section-step-mobile": {"$value":{"value":64,"unit":"px"}},
+        "section-step-desktop": {"$value":{"value":96,"unit":"px"}}
       }
     },
     "portal": {