@nadicodeai/design-system 2.0.0 → 2.1.0

package/AGENTS.md

@@ -4,7 +4,13 @@ The `@nadicodeai/design-system` npm workspace. `DESIGN.md` is the normative cont
 
 ## Commands
 
-Proof escalates by the ladder in the root `AGENTS.md` "Commands": `npm run check -w @nadicodeai/design-system` and `npm run test -w @nadicodeai/design-system` before pushing. `check` carries the `DESIGN.md` contract lint, so a contract edit needs no separate command. This workspace has no app to boot: it ships a package, and `examples/` specimens are static HTML pages served from the repo root by `../../scripts/lib/static-design-server.ts`, which `npm run test:visual` starts.
+Proof follows [the repository pipeline](../../docs/agents/develop.md#the-pipeline):
+`npm run check -w @nadicodeai/design-system` and
+`npm run test -w @nadicodeai/design-system` before pushing. `check` carries the
+`DESIGN.md` contract lint, so a contract edit needs no separate command. This
+workspace has no app to boot: it ships a package, and `examples/` specimens are
+static HTML pages served from the repo root by
+`../../scripts/lib/static-design-server.ts`, which `npm run test:visual` starts.
 
 | Command | When |
 | --- | --- |
@@ -27,7 +33,7 @@ Proof escalates by the ladder in the root `AGENTS.md` "Commands": `npm run check
 | React consumption | `../ui/docs/consuming-cross-repo.md` |
 | Logo hierarchy, usage, geometry, and asset delivery | `DESIGN.md` "Brand media authority". Static package routes in `README.md`. Implementation routes through `src/assets/`. `dist/` is generated, never hand-edited |
 | `examples/` specimen work | `examples/` plus the `write-clearly` skill for specimen copy (guard: `tests/guards/examples-package-coherence.test.ts`) |
-| Releasing a change to package-consumed output | `../../docs/agents/npm-publishing.md` |
+| Releasing a change to package-consumed output | `../../docs/agents/publish.md` |
 | Visual test implementation | `playwright.visual.config.ts` and `tests/visual/` |
 
 ## Boundaries
@@ -40,5 +46,5 @@ Proof escalates by the ladder in the root `AGENTS.md` "Commands": `npm run check
 - Seams and grids are computed, single-owner, never eyeballed (doctrine home: `DESIGN.md` "## Layout" and "Seam Ownership").
 - Authoring is contract-first: a visual behavior comes from `DESIGN.md`, from our own shipped surfaces, or from an explicit user approval, never from another product's rendered output. Screenshots verify, they never author. Ask when the contract leaves a decision open, and stop and re-read `DESIGN.md` before a second visual patch to the same component.
 - Name everything as NadicodeAI-owned primitives. A source brand never appears in a name, a comment, a contract, or any living design document.
-- Any change to package-consumed output ends with an explicit release decision, a version bump or a `[no-publish]` commit marker (enforced by the pre-push release gate, procedure: `../../docs/agents/npm-publishing.md`).
+- Any change to package-consumed output ends with an explicit release decision, a version bump or a `[no-publish]` commit marker (enforced by the pre-push release gate, procedure: `../../docs/agents/publish.md`).
 - The deleted `design-canvas/` prototypes and static chat/autoplay surface live only in git history. `src/css/motion.css` owns shared runtime motion primitives. Never reconstruct the prototypes or add a runtime JS surface.

package/CONTEXT.md

@@ -1,87 +1,46 @@
 # Design Language
 
-NadicodeAI's shared vocabulary for reusable visual decisions and interface structures. This context lets the design system, React UI package, website, and Portal describe the same visual ideas without inventing package-specific synonyms.
+The shared vocabulary for NadicodeAI's reusable visual decisions and interface structures.
 
 ## Language
 
 ### Foundations
 
-**Design contract**:
-The normative specification for reusable design tokens, page grammar, component semantics, and visual-surface meanings. Implementations realize the contract; they do not redefine it.
-
-**Design token**:
-A named reusable visual value from the design contract, such as a color, spacing, radius, or typography value. A one-off component detail is not a token.
-
 **Foundation**:
-The design-contract values owned by no single product and available to every product: colour roles and their dark pairs, the two type families and the type scale, spacing, radius, material, elevation, motion, the icon render, and the brand marks and fonts. A value stays foundation whether one product renders it or three.
+The visual values shared by every NadicodeAI product, including colour roles, typography, spacing, shape, material, elevation, motion, icons, and brand assets.
 _Avoid_: Palette, base theme
 
 **Register**:
-One product's way of applying the foundation: its direction, density, which steps of each scale it uses and where, its dark-mode stance, its structural grammar, and its motion budget. There are three, one rulebook each: website, Portal, and the Nadia desktop app; a register adds rules and redefines no foundation value.
+One product's visual rules for applying the Foundation. NadicodeAI has three Registers: website, Portal, and Nadia desktop.
 _Avoid_: Theme, skin
 
-**Scale step**:
-One numbered value in a functional color scale whose number carries the same interaction or contrast role across every scale.
-_Avoid_: Shade, tint
-
 **Brand tier**:
-The full-strength campi used for identity, imagery, and section grounds. Brand-tier colors are planes, not interface states.
+The Campo fields used for brand identity, imagery, and large surface grounds.
 
 **Functional tier**:
-The numeric color scales and semantic roles used by product UI, charts, and status. Functional-tier colors express interaction and meaning rather than brand fields.
+The semantic colour roles and chart colours used for interface state and data.
 
 **Campo**:
-A named, full-strength brand color field from the design contract. A campo has no steps or hover variants.
+A named, full-strength brand colour field.
 _Avoid_: Swatch, theme color
 
-**One campo per room**:
-The composition rule that one section or image field owns one campo, with adjacent fields separated by a clear luminance change.
-
-**Luminance jump**:
-The perceptual brightness difference that makes the edge between adjacent campi, or between a campo and its text, read clearly.
-
 ### Structure and surfaces
 
 **Page grammar**:
-The shared structural system of frames, rows, lanes, fills, seams, markers, grids, and stages used to compose NadicodeAI pages.
+The shared structural vocabulary of frames, rows, lanes, fills, seams, markers, grids, and stages.
 
 **Seam**:
-A visible structural line in the page grammar: the shared edge where a frame, row, lane, or grid cell meets its neighbour. Exactly one element owns and draws each seam, so no coordinate is ever drawn twice, and seam placement is computed from grid math rather than eyeballed; the rule and the tokens that colour it live in `packages/design-system/DESIGN.md` "Seam Ownership" and "Layout". This is the visual sense of the word only. Its architectural sense, a boundary in code a test can substitute, is general software vocabulary and not part of the design language.
-
-**CSS primitive**:
-A low-level, framework-agnostic CSS helper for geometry, type, seams, fills, or structural behavior. It carries no product-specific meaning.
-
-**CSS component**:
-A framework-agnostic visual component that remains useful on both static and interactive surfaces without owning an app feature.
+The visible structural line where parts of the Page grammar meet.
 
 **Status vocabulary**:
-The one way the product shows a status. What it is, which carrier renders it, and which tone each value takes live in `packages/design-system/DESIGN.md` "Status Vocabulary".
+The shared five-tone visual language for product status. Each product owns its status families, values, and mapping to those tones.
 
 **Content surface**:
-A visual family for presenting a concrete content type, such as an image or artifact, inside the page grammar.
+A visual family for presenting a specific kind of content inside the Page grammar.
 
 **Agentic work surface**:
-A NadicodeAI visual family for showing people and agents working together through conversations, artifacts, approvals, tools, handoffs, traces, and inspectable state.
+A visual family outside the conversation renderer for work output and workflow state, such as memory, run progress, identity, and handoffs.
 
 **Agent visual**:
-The decorative metaball identity assigned explicitly to a persistent Agent by
-type. It identifies the Agent across products without carrying status, runtime
-activity, capability, or work output.
+The decorative metaball identity assigned to an Agent type across products.
 _Avoid_: Agent glyph, Agent avatar
-
-**App-owned product feature**:
-A product-specific route, screen, use case, or behavior owned by the consuming app rather than by the reusable design or UI packages.
-
-### React composition
-
-**React adapter**:
-A thin typed React interface over approved design-system CSS grammar or assets. It exposes the shared implementation without taking ownership of it.
-
-**Reusable composition**:
-A React component that combines shared grammar, primitives, slots, variants, and responsive behavior into a repeatable product or marketing pattern.
-
-**Reusable section**:
-A reusable composition for one recurring content role, such as an introduction, proof area, media block, or call to action.
-
-**Specimen**:
-A runnable example that assembles shipped pieces for inspection without inventing new design rules.

package/DESIGN.md

@@ -10,10 +10,10 @@ description: >-
 colors:
   primary: "#007a3c"
   on-primary: "#ffffff"
-  action: "#007a3c"
+  action: "#111111"
   action-foreground: "#ffffff"
-  action-hover: "#00602f"
-  action-active: "#00301a"
+  action-hover: "#2e2e2e"
+  action-active: "#000000"
   ink: "#111111"
   body: "#444444"
   muted: "#6b6b6b"
@@ -92,10 +92,10 @@ colors:
   dark-seam: "#1a1a1a"
   dark-primary: "#2fd584"
   dark-on-primary: "#0a0a0a"
-  dark-action: "#2fd584"
+  dark-action: "#ffffff"
   dark-action-foreground: "#0a0a0a"
-  dark-action-hover: "#4ecf8c"
-  dark-action-active: "#17bd68"
+  dark-action-hover: "#e4e4e4"
+  dark-action-active: "#d6d6d6"
   dark-link: "#4ecf8c"
   dark-link-deep: "#93e3b8"
   dark-link-bg-soft: "#00351c"
@@ -290,7 +290,7 @@ spacing:
 
 ## Overview
 
-NadicodeAI is an AI agency for SMBs. The design system exists to make the public website and the shipped product feel engineered, clear, and serious without becoming enterprise software theatre. The interface should help a pragmatic buyer understand the work: repeated workflows, agents trained with people, inspectable outputs, human approval, and one useful first use case.
+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 — Nadia's portrait, the Agent identity visuals, 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.
 
@@ -300,16 +300,16 @@ The kernel is the reusable implementation layer. `DESIGN.md` defines the reusabl
 
 ## Colors
 
-The colour system is two families that never mix. The **functional tier** — the semantic role tokens plus the chart series — drives every product and interface state. The **brand tier** — the campi — paints marketing and identity surfaces only. A functional role is never a poster field, and a campo is never a UI state.
+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, never as identity colour. Verde stays on action, links, presence, and success; cobalto stays on info and running. A hover ground is a neutral step; the only hue a hover carries is a semantic fill stepping inside its own family, as `{colors.action-hover}` does on the action control.
+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.
 
-Every value a role needs is carried by the role token itself; the ten-step numeric scale families were removed deliberately and must not be reintroduced. Two neutral page grounds sit under the roles below: `{colors.background-100}` (page default, white) and `{colors.background-200}` (soft, used sparingly). The neutral spine — `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, `{colors.seam}` — is strictly achromatic: every neutral is an equal-channel gray (OKLCH chroma 0) in both themes. The five campi are cross-spectrum equals, so any neutral bias would flatter one field and dirty another; hue arrives full-strength through the chromatic roles or not at all, and no tint ever paints an app surface. Colours are authored as sRGB hex here and emitted as `oklch()` in the generated CSS.
+Every value a role needs is carried by the role token itself; the ten-step numeric scale families were removed deliberately and must not be reintroduced. Two neutral page grounds sit under the roles below: `{colors.background-100}` (page default, white) and `{colors.background-200}` (soft, used sparingly). The neutral spine — `{colors.ink}`, `{colors.body}`, `{colors.muted}`, `{colors.canvas}`, `{colors.canvas-soft}`, `{colors.canvas-soft-2}`, `{colors.line}`, `{colors.seam}` — is strictly achromatic: every neutral is an equal-channel gray (OKLCH chroma 0) in both themes. The five identity-palette hues are cross-spectrum equals, so any neutral bias would flatter one and dirty another; hue arrives full-strength through the chromatic roles or not at all, and no tint ever paints an app surface. Colours are authored as sRGB hex here and emitted as `oklch()` in the generated CSS.
 
 ### Semantic roles (functional tier)
 
-- **Primary brand anchor** (`{colors.primary}` = deep verde `#007a3c`): identity marks and brand accents in UI. Text on the deep verde field is white (`{colors.on-primary}`), which clears AA comfortably at this depth; the brighter campo verde `#00a85a` stays the imagery-tier anchor and never carries normal-size white text.
-- **Action** (`{colors.action}` = deep verde, `{colors.action-foreground}` = white, `{colors.action-hover}`, `{colors.action-active}`): the primary-control family — a white label on the deep verde field, hover and active stepping darker. The shadcn `primary` roles map here. Dark mode uses the `dark-action-*` roles, a brightened verde that clears the dark canvas and carries a near-black label.
+- **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.
 - **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. 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.
@@ -317,38 +317,27 @@ Every value a role needs is carried by the role token itself; the ten-step numer
 - **Link** (`{colors.link}`, `{colors.link-deep}`, `{colors.link-bg-soft}`): inline links, navigational accents, approved/example proof states, and the green entity-status tone. Green, keeping the Italian signal without turning the interface into flag decoration; `link` and `link-deep` clear AA as text on canvas, and `link-bg-soft` is the tinted green ground for link and tag chrome only: a message or conversation plane is a neutral surface, never a link-tinted one.
 - **Navigation selection** (`{colors.navigation-selection-bg}`, `{colors.navigation-selection-fg}`, `{colors.navigation-selection-hover}`): the selected destination in persistent product navigation, a neutral ink pill. 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 pill 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`): the attention accent for highlights, exception flags, and emphasis marks. It is an accent only — never a fill, background, or body-text colour, and it never carries text. Do not conflate this functional `accent` with the identically-named shadcn surface role: that role is a neutral (`{colors.canvas-soft-2}` in light, `{colors.dark-canvas-soft-2}` in dark) and carries no hue despite the shared word.
+- **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.
 - **Flag Red** (`{colors.flag-red}` = `#d3302f`): the identity-mark red alias. It shares its hex with `{colors.error}` but stays a distinct role name — `flag-red` is identity, `error` is validation feedback. The attention accent is arancio, not flag red.
 - **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*: the first-run medallion, a live-presence indicator beside her portrait. 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 and bullet segments, 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)
 
-- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, giallo, rosso, plus a functional-only teal and viola. Functional only: never place chart colours on marketing surfaces, campi, or generated imagery. Two light slots are series-tuned so the set clears the categorical data bands on the white data surface: `chart-3` steps the giallo darker (the campo giallo `{colors.campo-giallo}` overshoots the categorical lightness band and reads too pale as a mark) and `chart-5` makes the teal more chromatic (the raw functional teal otherwise sits under the chroma floor and reads gray). The darker giallo still falls below the 3:1 mark-contrast line and is carried by the always-on legend/direct-label/table relief the charting method already mandates — never a per-surface patch. On the dark canvas all six series carry dark-tuned steps (`{colors.dark-chart-1}`…`{colors.dark-chart-6}`), remapped in the `.dark` scope so any consumer reading the semantic token gets the right hue in both modes. Clearing the 3:1 WCAG 1.4.11 data-mark floor is necessary but not sufficient on the black canvas: full-strength hues read as loud blocks there, so each dark step lightens or desaturates while keeping series identity — the dark giallo and teal deliberately stay bright to hold their per-series deuteranopia separation from rosso — and all six clear 3:1 against `{colors.dark-canvas}`.
+- **Charts** (`{colors.chart-1}`…`{colors.chart-6}`): the categorical series palette — cobalto, verde, giallo, rosso, plus a functional-only teal and viola. Chart colours belong to data surfaces only; identity planes and generated imagery draw from the Agent identity palette. Two light slots are series-tuned so the set clears the categorical data bands on the white data surface: `chart-3` steps the giallo darker (the campo giallo `{colors.campo-giallo}` overshoots the categorical lightness band and reads too pale as a mark) and `chart-5` makes the teal more chromatic (the raw functional teal otherwise sits under the chroma floor and reads gray). The darker giallo still falls below the 3:1 mark-contrast line and is carried by the always-on legend/direct-label/table relief the charting method already mandates — never a per-surface patch. On the dark canvas all six series carry dark-tuned steps (`{colors.dark-chart-1}`…`{colors.dark-chart-6}`), remapped in the `.dark` scope so any consumer reading the semantic token gets the right hue in both modes. Clearing the 3:1 WCAG 1.4.11 data-mark floor is necessary but not sufficient on the black canvas: full-strength hues read as loud blocks there, so each dark step lightens or desaturates while keeping series identity — the dark giallo and teal deliberately stay bright to hold their per-series deuteranopia separation from rosso — and all six clear 3:1 against `{colors.dark-canvas}`.
 - **Categorical distinguishability**: the same-family neighbours are held apart — `chart-3`/`chart-4` (giallo/rosso) and `chart-2`/`chart-5` (verde/teal) each clear a CIEDE2000 ≥ 20 normal / ≥ 15 deuteranopia-simulated floor, in the light set and the dark-tuned set alike. Two proximities are brand-locked and exempt from the numeric floor: `chart-2`/`chart-4` (verde/rosso, the flag pair, which collapses under red-green deficiency by identity) and `chart-1`/`chart-6` (cobalto/viola, adjacent blue-violet). Charts using the full six carry redundant encoding (direct labels, position, or pattern), never hue alone, so these two pairs stay readable under colour-vision deficiency.
 
-### Brand tier — i campi
+### Agent identity palette
 
-The campi are full-strength named brand fields. They carry NO tints, NO steps, and NO hover variants; UI states always come from the functional roles, never from a campo.
-
-- `{colors.campo-verde}` (Verde Bandiera), `{colors.campo-rosso}` (Rosso Bandiera), and `{colors.campo-cobalto}` pair with `{colors.campo-bianco}` (white) type.
-- `{colors.campo-arancio}` (vermilion) and `{colors.campo-giallo}` (giallo) pair with `{colors.campo-inchiostro}` (ink) type.
-- `{colors.campo-inchiostro}` pairs with white type; `{colors.campo-bianco}` pairs with ink type.
-
-Four campo rules govern their use:
-
-1. **One campo per room.** A section owns exactly one field; adjacent sections must jump in luminance, so two mid-tone rooms never touch.
-2. **Type on a campo is bianco or inchiostro only.** Arancio and Giallo carry ink; Verde, Rosso, Cobalto, and Inchiostro carry white. No tinted text on fields.
-3. **Campi are planes, not chips.** The minimum duty of a campo is a section ground, poster field, or full media mount. UI states come from the functional roles, never campi.
-4. **One paint box.** Generated editorial imagery draws its flat fields from these values; `skills/marketing/blog-imagegen/references/editorial-register.md` references these tokens and keeps no private palette.
+Five full-strength hues are the system's expressive chromatic range: verde `{colors.campo-verde}`, rosso `{colors.campo-rosso}`, cobalto `{colors.campo-cobalto}`, arancio `{colors.campo-arancio}`, and giallo `{colors.campo-giallo}`, with `{colors.campo-bianco}` and `{colors.campo-inchiostro}` as the white and ink poles that carry type beside them. They live in exactly three places: the Agent identity visuals (the metaball recipes in [`packages/ui/docs/agent-visual.md`](../ui/docs/agent-visual.md)), the brand book's identity planes, and generated editorial imagery (`skills/marketing/blog-imagegen/references/editorial-register.md` reads these tokens and keeps no private palette). They appear at full strength with no tints, steps, or hover variants; interface states come from the semantic roles. The `campo-*` spelling is the emitted compatibility token name; renaming this family across its consumers is its own tracked migration.
 
 ### 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. Chroma lives only in the intentional accents: `dark-primary`/`dark-action`/`dark-action-hover`/`dark-action-active` are a brightened verde for the primary control (ink-labelled), `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-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.
 
-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 explicit semantic roles: `primary`, `destructive`, `success`, and `warning`. 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.
+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.
 
-Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
+A colour leaves this contract only through an explicit palette migration decision; what the current website kernel happens to consume is not palette authority.
 
 ## Data Visualization
 
@@ -577,7 +566,7 @@ Public page-grammar cells are not cards and remain square because their parent f
 
 ## Motion
 
-Motion clarifies state, feedback, hierarchy, or continuity; it does not decorate routine work. Repeated interactions stay fast and quiet, while rare explanatory moments may be more expressive. Motion preserves meaning when movement is reduced.
+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 Google design schema defines no motion group. 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.
 
@@ -681,41 +670,16 @@ whole map in one module and no surface picks a status colour anywhere else.
 
 ## Do's and Don'ts
 
-### Do
-
-- Do build pages as continuous `page-row` sequences inside one `page-frame`.
-- Do keep centered content in the 10-column `active-lane` while preserving visible ownership of columns 1 and 12.
-- Do use `side-fill`, guide strips, or component-owned fillers whenever content does not occupy the outer columns.
-- Do use `{spacing.guide}` and `{colors.line}` for ordinary seams.
-- Do use `{colors.input}` / `{colors.dark-input}` for resting control boundaries and the dedicated focus-ring roles for keyboard focus.
-- Do use exactly one material role per product container; structural page-grammar cells remain border-only, while product cards, menus, popovers, dialogs, sheets, and takeovers use their specified material treatment.
-- Do tune line visibility by changing `{colors.line}` at the token contract, then rebuilding generated exports.
-- Do use `{colors.cross}` for crosshair color while keeping crosshair weight equal to `{spacing.guide}`.
-- Do use fixed height tokens for default component/specimen height and let content grow only when required.
-- Do separate different story beats into separate rows.
-- Do use the full-lane `stage` geometry for one major use-case/artifact story, not as a container for every page concept.
-- Do use Agent identity visuals only to identify an Agent or its explicit type; use assistant-ui and the agentic work surfaces above for conversations, artifacts, review states, and work output.
-- Do keep ordinary CSS components compact and subordinate to the page grammar.
-- Do use pricing, logo, banner, and showcase compositions only when the page truly contains that content type.
-
-### Don't
-
-- Don't create naked centered 10-column sections without visible ownership of columns 1 and 12.
-- Don't draw the same seam from two adjacent elements.
-- Don't add borders inside cells to fix visual seams; fix the owner layer.
-- Don't use a 1 px decorative line as an input boundary, or locally increase card border weight to manufacture hierarchy.
-- Don't stack borders or rings around an elevated surface, promote a resting card because its content is important, or blur modal scrims.
-- Don't tune seam contrast with local opacity, raw colors, or component-specific border colors.
-- Don't use viewport-scaled typography.
-- Don't use gradients, decorative blobs, or atmospheric chrome as the page structure.
-- Don't apply the page grammar or the Portal's glass to the desktop; each register's structure and chrome are its own.
-- Don't put text on a `{colors.verde-vivo}` fill.
-- Don't reach for a vendor shadow utility; the four `nc-elevation-*` rungs are the ladder this contract owns.
-- Don't name NadicodeAI components after external reference brands.
-- Don't promote homepage-specific copy, one-off page order, or prototype-only modules into this contract.
-- Don't use one full-lane stage to present multiple unrelated use cases.
-- Don't add component prop APIs, state matrices, screenshots, component implementation notes, page placement examples, or framework-specific instructions to this file. (The token-pipeline architecture section is contract, not component documentation.)
-- Don't use pricing, logo, or banner compositions as placeholder credibility or decoration when the underlying content does not exist.
+This section states the correct form; a complete positive definition is the whole rule.
+
+- 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; control boundaries are `{colors.input}` / `{colors.dark-input}`; 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.
+- Each row carries one story beat; the full-lane `stage` presents one major use-case story; pricing, logo, banner, and showcase compositions appear when the page truly contains that content, with real, approved material.
+- Agent identity visuals identify an Agent or its explicit type; 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.
 
 ## Iconography
 
@@ -961,15 +925,15 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "muted-foreground": {"$value":"{core.color.body}"},
           "popover": {"$value":"{core.color.canvas}"},
           "popover-foreground": {"$value":"{core.color.ink}"},
-          "primary": {"$value":"{core.color.primary}"},
-          "primary-foreground": {"$value":"{core.color.on-primary}"},
+          "primary": {"$value":"{core.color.action}"},
+          "primary-foreground": {"$value":"{core.color.action-foreground}"},
           "secondary": {"$value":"{core.color.canvas-soft}"},
           "secondary-foreground": {"$value":"{core.color.ink}"},
           "accent": {"$value":"{core.color.canvas-soft-2}"},
           "accent-foreground": {"$value":"{core.color.ink}"},
           "border": {"$value":"{core.color.line}"},
           "input": {"$value":"{core.color.seam}"},
-          "ring": {"$value":"{core.color.primary}"},
+          "ring": {"$value":"{core.color.focus-ring}"},
           "midground": {"$value":"{core.color.body}"},
           "composer-ring": {"$value":"{core.color.primary}"},
           "destructive": {"$value":"{core.color.error}"},
@@ -990,15 +954,15 @@ An alias is written in the short `{core.color.canvas}` form here; the build rewr
           "muted-foreground": {"$value":"{core.color.dark-muted}"},
           "popover": {"$value":"{core.color.dark-canvas}"},
           "popover-foreground": {"$value":"{core.color.dark-ink}"},
-          "primary": {"$value":"{core.color.dark-primary}"},
-          "primary-foreground": {"$value":"{core.color.dark-on-primary}"},
+          "primary": {"$value":"{core.color.dark-action}"},
+          "primary-foreground": {"$value":"{core.color.dark-action-foreground}"},
           "secondary": {"$value":"{core.color.dark-canvas-soft-2}"},
           "secondary-foreground": {"$value":"{core.color.dark-body}"},
           "accent": {"$value":"{core.color.dark-canvas-soft-2}"},
           "accent-foreground": {"$value":"{core.color.dark-ink}"},
           "border": {"$value":"{core.color.dark-line}"},
           "input": {"$value":"{core.color.dark-input}"},
-          "ring": {"$value":"{core.color.dark-primary}"},
+          "ring": {"$value":"{core.color.dark-focus-ring}"},
           "midground": {"$value":"{core.color.dark-muted}"},
           "composer-ring": {"$value":"{core.color.dark-success}"},
           "destructive": {"$value":"{core.color.flag-red}"},

package/dist/css/index.css

@@ -43,10 +43,10 @@
   :root {
     --nc-primary: oklch(0.5075 0.1338 151.91);
     --nc-on-primary: oklch(1.0000 0.0000 0.00);
-    --nc-action: oklch(0.5075 0.1338 151.91);
+    --nc-action: oklch(0.1776 0.0000 0.00);
     --nc-action-foreground: oklch(1.0000 0.0000 0.00);
-    --nc-action-hover: oklch(0.4285 0.1117 152.40);
-    --nc-action-active: oklch(0.2722 0.0643 157.47);
+    --nc-action-hover: oklch(0.3012 0.0000 0.00);
+    --nc-action-active: oklch(0.0000 0.0000 0.00);
     --nc-ink: oklch(0.1776 0.0000 0.00);
     --nc-body: oklch(0.3867 0.0000 0.00);
     --nc-muted: oklch(0.5278 0.0000 0.00);
@@ -125,10 +125,10 @@
     --nc-dark-seam: oklch(0.2178 0.0000 0.00);
     --nc-dark-primary: oklch(0.7727 0.1753 155.96);
     --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
-    --nc-dark-action: oklch(0.7727 0.1753 155.96);
+    --nc-dark-action: oklch(1.0000 0.0000 0.00);
     --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
-    --nc-dark-action-hover: oklch(0.7661 0.1498 157.10);
-    --nc-dark-action-active: oklch(0.7019 0.1753 153.20);
+    --nc-dark-action-hover: oklch(0.9189 0.0000 0.00);
+    --nc-dark-action-active: oklch(0.8761 0.0000 0.00);
     --nc-dark-link: oklch(0.7661 0.1498 157.10);
     --nc-dark-link-deep: oklch(0.8524 0.0996 159.83);
     --nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32);
@@ -670,7 +670,7 @@
     --sidebar-border: var(--nc-dark-line);
     --sidebar-ring: var(--nc-dark-focus-ring);
   }
-  @theme { --color-*: initial; --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.5075 0.1338 151.91); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.4285 0.1117 152.40); --color-nc-action-active: oklch(0.2722 0.0643 157.47); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-verde-vivo: oklch(0.5604 0.1485 151.68); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9851 0.0000 0.00); --color-nc-campo-verde: oklch(0.6415 0.1644 153.23); --color-nc-campo-rosso: oklch(0.5688 0.1995 26.59); --color-nc-campo-arancio: oklch(0.6824 0.2108 37.70); --color-nc-campo-giallo: oklch(0.8466 0.1678 84.63); --color-nc-campo-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-campo-inchiostro: oklch(0.0000 0.0000 0.00); --color-nc-campo-bianco: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.7727 0.1753 155.96); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.7661 0.1498 157.10); --color-nc-dark-action-active: oklch(0.7019 0.1753 153.20); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-section: 192px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
+  @theme { --color-*: initial; --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-verde-vivo: oklch(0.5604 0.1485 151.68); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9851 0.0000 0.00); --color-nc-campo-verde: oklch(0.6415 0.1644 153.23); --color-nc-campo-rosso: oklch(0.5688 0.1995 26.59); --color-nc-campo-arancio: oklch(0.6824 0.2108 37.70); --color-nc-campo-giallo: oklch(0.8466 0.1678 84.63); --color-nc-campo-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-campo-inchiostro: oklch(0.0000 0.0000 0.00); --color-nc-campo-bianco: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.6px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-section: 192px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
   @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
 }
 

package/dist/tailwind/nadicode.tailwind.json

@@ -4,10 +4,10 @@
       "colors": {
         "primary": "#007a3c",
         "on-primary": "#ffffff",
-        "action": "#007a3c",
+        "action": "#111111",
         "action-foreground": "#ffffff",
-        "action-hover": "#00602f",
-        "action-active": "#00301a",
+        "action-hover": "#2e2e2e",
+        "action-active": "#000000",
         "ink": "#111111",
         "body": "#444444",
         "muted": "#6b6b6b",
@@ -86,10 +86,10 @@
         "dark-seam": "#1a1a1a",
         "dark-primary": "#2fd584",
         "dark-on-primary": "#0a0a0a",
-        "dark-action": "#2fd584",
+        "dark-action": "#ffffff",
         "dark-action-foreground": "#0a0a0a",
-        "dark-action-hover": "#4ecf8c",
-        "dark-action-active": "#17bd68",
+        "dark-action-hover": "#e4e4e4",
+        "dark-action-active": "#d6d6d6",
         "dark-link": "#4ecf8c",
         "dark-link-deep": "#93e3b8",
         "dark-link-bg-soft": "#00351c",

package/dist/tokens/nadicode.dtcg-resolved.json

@@ -31,11 +31,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0,
-              0.478,
-              0.235
+              0.067,
+              0.067,
+              0.067
             ],
-            "hex": "#007a3c"
+            "hex": "#111111"
           }
         },
         "action-foreground": {
@@ -53,11 +53,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0,
-              0.376,
-              0.184
+              0.18,
+              0.18,
+              0.18
             ],
-            "hex": "#00602f"
+            "hex": "#2e2e2e"
           }
         },
         "action-active": {
@@ -65,10 +65,10 @@
             "colorSpace": "srgb",
             "components": [
               0,
-              0.188,
-              0.102
+              0,
+              0
             ],
-            "hex": "#00301a"
+            "hex": "#000000"
           }
         },
         "ink": {
@@ -933,11 +933,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.184,
-              0.835,
-              0.518
+              1,
+              1,
+              1
             ],
-            "hex": "#2fd584"
+            "hex": "#ffffff"
           }
         },
         "dark-action-foreground": {
@@ -955,22 +955,22 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.306,
-              0.812,
-              0.549
+              0.894,
+              0.894,
+              0.894
             ],
-            "hex": "#4ecf8c"
+            "hex": "#e4e4e4"
           }
         },
         "dark-action-active": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.09,
-              0.741,
-              0.408
+              0.839,
+              0.839,
+              0.839
             ],
-            "hex": "#17bd68"
+            "hex": "#d6d6d6"
           }
         },
         "dark-link": {
@@ -3835,11 +3835,11 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0,
-                  0.478,
-                  0.235
+                  0.067,
+                  0.067,
+                  0.067
                 ],
-                "hex": "#007a3c"
+                "hex": "#111111"
               }
             },
             "primary-foreground": {
@@ -3923,11 +3923,11 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0,
-                  0.478,
-                  0.235
+                  0.067,
+                  0.067,
+                  0.067
                 ],
-                "hex": "#007a3c"
+                "hex": "#111111"
               }
             },
             "midground": {
@@ -4124,11 +4124,11 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.184,
-                  0.835,
-                  0.518
+                  1,
+                  1,
+                  1
                 ],
-                "hex": "#2fd584"
+                "hex": "#ffffff"
               }
             },
             "primary-foreground": {
@@ -4212,11 +4212,11 @@
               "$value": {
                 "colorSpace": "srgb",
                 "components": [
-                  0.184,
-                  0.835,
-                  0.518
+                  0.929,
+                  0.929,
+                  0.929
                 ],
-                "hex": "#2fd584"
+                "hex": "#ededed"
               }
             },
             "midground": {

package/dist/tokens/nadicode.dtcg.json

@@ -31,11 +31,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0,
-              0.478,
-              0.235
+              0.067,
+              0.067,
+              0.067
             ],
-            "hex": "#007a3c"
+            "hex": "#111111"
           }
         },
         "action-foreground": {
@@ -53,11 +53,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0,
-              0.376,
-              0.184
+              0.18,
+              0.18,
+              0.18
             ],
-            "hex": "#00602f"
+            "hex": "#2e2e2e"
           }
         },
         "action-active": {
@@ -65,10 +65,10 @@
             "colorSpace": "srgb",
             "components": [
               0,
-              0.188,
-              0.102
+              0,
+              0
             ],
-            "hex": "#00301a"
+            "hex": "#000000"
           }
         },
         "ink": {
@@ -933,11 +933,11 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.184,
-              0.835,
-              0.518
+              1,
+              1,
+              1
             ],
-            "hex": "#2fd584"
+            "hex": "#ffffff"
           }
         },
         "dark-action-foreground": {
@@ -955,22 +955,22 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.306,
-              0.812,
-              0.549
+              0.894,
+              0.894,
+              0.894
             ],
-            "hex": "#4ecf8c"
+            "hex": "#e4e4e4"
           }
         },
         "dark-action-active": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.09,
-              0.741,
-              0.408
+              0.839,
+              0.839,
+              0.839
             ],
-            "hex": "#17bd68"
+            "hex": "#d6d6d6"
           }
         },
         "dark-link": {
@@ -3768,10 +3768,10 @@
               "$value": "{nadicode.core.color.ink}"
             },
             "primary": {
-              "$value": "{nadicode.core.color.primary}"
+              "$value": "{nadicode.core.color.action}"
             },
             "primary-foreground": {
-              "$value": "{nadicode.core.color.on-primary}"
+              "$value": "{nadicode.core.color.action-foreground}"
             },
             "secondary": {
               "$value": "{nadicode.core.color.canvas-soft}"
@@ -3792,7 +3792,7 @@
               "$value": "{nadicode.core.color.seam}"
             },
             "ring": {
-              "$value": "{nadicode.core.color.primary}"
+              "$value": "{nadicode.core.color.focus-ring}"
             },
             "midground": {
               "$value": "{nadicode.core.color.body}"
@@ -3849,10 +3849,10 @@
               "$value": "{nadicode.core.color.dark-ink}"
             },
             "primary": {
-              "$value": "{nadicode.core.color.dark-primary}"
+              "$value": "{nadicode.core.color.dark-action}"
             },
             "primary-foreground": {
-              "$value": "{nadicode.core.color.dark-on-primary}"
+              "$value": "{nadicode.core.color.dark-action-foreground}"
             },
             "secondary": {
               "$value": "{nadicode.core.color.dark-canvas-soft-2}"
@@ -3873,7 +3873,7 @@
               "$value": "{nadicode.core.color.dark-input}"
             },
             "ring": {
-              "$value": "{nadicode.core.color.dark-primary}"
+              "$value": "{nadicode.core.color.dark-focus-ring}"
             },
             "midground": {
               "$value": "{nadicode.core.color.dark-muted}"

package/package.json

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