@nadicodeai/design-system 9.2.0 → 9.2.1

package/DESIGN.md

@@ -286,7 +286,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, 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.
 
 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,8 +294,12 @@ 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
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2266): two greens. `link` #00713d, dark #4ecf8c, is the only green in text; identity verde #00a85a is the only green mark. The brand-mark role of `primary` #007a3c and `verde-vivo` #008c45, with their dark pairs, retire. Neutrals, true black and the identity palette are unchanged.
+
 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.
 
 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.
@@ -407,6 +411,8 @@ is never the only explanation.
 
 ## Typography
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2267): Geist and Geist Mono stay the only families. Twelve sizes named by role replace the tokens below: `display-xl` 72/74, `display-lg` 52/54, `display-md` 40/42, `heading-lg` 30/32, `heading-md` 24/32, `heading-sm` 20/28, `body-lg` 18/27, `body-md` 16/25, `body-sm` 14/20, `caption` 12/16, `code` 13/20 and `label-mono` 12/16; strong becomes a weight, not a token. The ADR holds the old-to-new mapping.
+
 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`.
@@ -434,6 +440,8 @@ All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not
 
 ## Layout
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2270): the website parts of this section retire with the website rebuild: the Frame System, Seam Ownership, Delivery Tiers, the Page Grammar with its markers, side-fills, guide strips, hatched rails and dotted field, and the `register.website.layout` tokens. The website keeps one content max-width with side gutters that grow from phone to desktop, full-bleed white, black and colour sections, and one spacing step between them. Spacing, responsive rules and control geometry that the products use stay. The Portal's dotted workspace belongs to the material ladder and is unaffected.
+
 Layout is mathematical and single-owner in every register: one owner per visible line, every gap and height from the tokens below, never eyeballed.
 
 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.
@@ -485,6 +493,8 @@ Page-grammar geometry and the fixed component heights belong to the website regi
 
 ### Frame System
 
+**Target state** (#2270): retires from the website with the rebuild; see `## Layout`.
+
 - `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.
@@ -495,6 +505,8 @@ Page-grammar geometry and the fixed component heights belong to the website regi
 
 ### Seam Ownership
 
+**Target state** (#2270): retires from the website with the rebuild; see `## Layout`.
+
 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.
@@ -513,6 +525,8 @@ Compositions arrange approved primitives for a content role. They must not redef
 
 ### Delivery Tiers
 
+**Target state** (#2270): retires from the website with the rebuild; see `## Layout`.
+
 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.
@@ -525,6 +539,8 @@ The page grammar below is the `## Layout` home for the structural names; the sec
 
 ### Page Grammar
 
+**Target state** (#2270): retires from the website with the rebuild; see `## Layout`.
+
 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.
@@ -561,6 +577,8 @@ This live helper is part of the kept page-grammar layout layer. It supports inde
 
 ## Elevation & Depth
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2268): in dark mode the four rungs step their ring, 12, 16, 22 and 28% white, in place of one 18% ring on every rung. Light mode and the shadows are unchanged.
+
 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.
 
 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.
@@ -600,6 +618,8 @@ Public page-grammar cells are not cards and remain square because their parent f
 
 ## Motion
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2264, #2265, #2260): only Agents move on their own; the interface answers a person's action briefly and stops. `pulse` becomes `wait`, 1.6 s, for the waiting line only; `typing`, `shimmer` and `spin` retire. One default transition in every product: `confirm`, out-strong. Reduced motion is one policy: movement off, opacity and colour kept, a thinking or working orb breathes in opacity. Opening an Agent is a view transition in which the orb travels from the row into the page, on `transition` with in-out-strong. An idle orb holds still.
+
 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.
 
 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.
@@ -630,6 +650,8 @@ A register adds rules. It never redefines a foundation value. A value one regist
 | 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 |
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2270): the website is rebuilt from three kinds of full-bleed section only: 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. The 12-column page grammar and the `register.website.layout` family retire from the website entirely; one content max-width with growing side gutters, a single column or a picture-and-text split inside a section, and one spacing step between sections replace them. The rows below describe the current draft until that rebuild.
+
 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 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.
@@ -697,6 +719,8 @@ whole map in one module.
 
 ## System activity
 
+**Target state** ([ADR](../../docs/adr/2026-09-23-the-nadicode-design-system.md), #2261, #2262, #2263): who does the work decides how it looks. An Agent's work shows that Agent's orb in its state and a sentence; Nadia connecting is Nadia's ribbon, working. System work under about a second is a still pending label on the control; beyond a second one 2 px ink waiting line moves linearly on `wait`; measurable work is a progress line with a written count; page loads show still placeholders. `ActivityOrb`, the spinners and the shimmer text retire.
+
 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
@@ -758,27 +782,29 @@ 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. **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.
 
-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.
+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.
 
-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.
+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.
 
-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.
+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 11.5 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.
 
-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.
+On `{colors.canvas}` and the soft neutral canvases, the letters are ink and the dot is `{colors.identity-cobalto}`. On `{colors.identity-ink}` and other dark grounds, the letters are `{colors.identity-white}` and the dot is the brighter cobalt #4d6bff, so it does not sink into black. 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.
 
-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.
+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.
 
-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.
+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.
 
-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.
+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.
 
-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.
+The package build renders and publicly exports the positive, reversed and one-ink SVG and transparent PNG files for the wordmark and mark, and the icon tile, from the geometry and the 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; 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 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.
+**Target state** (#2272): the geometry source and every generated output, favicon and React component still draw the previous interlocked-link NadicodeAI lockup with its verde AI suffix; #2272 replaces them with the forms above and regenerates everything.
 
 ## CSS Architecture & Token Pipeline
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"