@nadicodeai/design-system 2.1.0 → 3.1.0

package/CONTEXT.md

@@ -14,16 +14,19 @@ _Avoid_: Palette, base theme
 One product's visual rules for applying the Foundation. NadicodeAI has three Registers: website, Portal, and Nadia desktop.
 _Avoid_: Theme, skin
 
-**Brand tier**:
-The Campo fields used for brand identity, imagery, and large surface grounds.
+**Neutral spine**:
+The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour is reserved for the semantic feedback roles, the verde brand accent in its scoped duties, the chart palettes, and the Agent identity palette.
 
 **Functional tier**:
 The semantic colour roles and chart colours used for interface state and data.
 
-**Campo**:
-A named, full-strength brand colour field.
+**Agent identity palette**:
+The five full-strength hues, plus the white and ink poles, that paint Agent identity visuals, the brand book's identity planes, and generated editorial imagery. Emitted as the `identity-*` colour tokens.
 _Avoid_: Swatch, theme color
 
+**Identity plane**:
+A surface painted edge to edge in one Agent identity palette colour.
+
 ### Structure and surfaces
 
 **Page grammar**:

package/DESIGN.md

@@ -58,13 +58,13 @@ colors:
   state-complete: "#00a85a"
   background-100: "#ffffff"
   background-200: "#fafafa"
-  campo-verde: "#00a85a"
-  campo-rosso: "#d3302f"
-  campo-arancio: "#ff5a1f"
-  campo-giallo: "#ffc220"
-  campo-cobalto: "#1e3cff"
-  campo-inchiostro: "#000000"
-  campo-bianco: "#ffffff"
+  identity-verde: "#00a85a"
+  identity-rosso: "#d3302f"
+  identity-arancio: "#ff5a1f"
+  identity-giallo: "#ffc220"
+  identity-cobalto: "#1e3cff"
+  identity-ink: "#000000"
+  identity-white: "#ffffff"
   chart-1: "#1e3cff"
   chart-2: "#00a85a"
   chart-3: "#ddaa00"
@@ -324,12 +324,12 @@ Every value a role needs is carried by the role token itself; the ten-step numer
 
 ### 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. 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}`.
+- **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 identity giallo `{colors.identity-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.
 
 ### Agent identity 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.
+Five full-strength hues are the system's expressive chromatic range: verde `{colors.identity-verde}`, rosso `{colors.identity-rosso}`, cobalto `{colors.identity-cobalto}`, arancio `{colors.identity-arancio}`, and giallo `{colors.identity-giallo}`, with `{colors.identity-white}` and `{colors.identity-ink}` as the white and ink poles that carry type beside them. The family emits under the `identity-*` spelling, and that is the one name every consumer uses. 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.
 
 ### Dark primitives
 
@@ -1109,7 +1109,7 @@ The approved transparent Nadia master ships at `assets/nadia-solid-surface`. The
 
 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.
 
-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.campo-inchiostro}`: campo-bianco letterforms and link with the dark-primary verde link and `AI` suffix. On `{colors.campo-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.
+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 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.
 

package/README.md

@@ -51,15 +51,21 @@ For direct HTML or CDN delivery, use a version-pinned file URL such as
 The clear-space, minimum-size, accessibility, background, and prohibited-use rules live only in
 [`DESIGN.md`, "Brand media authority"](./DESIGN.md#brand-media-authority).
 
-### Nadia asset
+### Nadia assets
 
-The approved background-neutral transparent Nadia master is available through:
+The approved background-neutral transparent Nadia master and its approved derivations are available through:
 
 | Asset | Import |
 | --- | --- |
 | Canonical Nadia | `@nadicodeai/design-system/assets/nadia-solid-surface` |
-
-The import resolves to the approved transparent PNG. Identity and composition are owned by [`brand/AGENTS.md`](../../brand/AGENTS.md); this package README documents only the import surface.
+| Square, full silhouette | `@nadicodeai/design-system/assets/nadia-square-full` |
+| Square, head | `@nadicodeai/design-system/assets/nadia-square-head` |
+| Detail, gaze | `@nadicodeai/design-system/assets/nadia-detail-gaze` |
+| Detail, earring | `@nadicodeai/design-system/assets/nadia-detail-earring` |
+| Daylight (light grounds) | `@nadicodeai/design-system/assets/nadia-daylight` |
+| Daylight tonal lift (full resolution) | `@nadicodeai/design-system/assets/nadia-daylight-lift` |
+
+Each import resolves to the approved PNG. Identity and composition are owned by [`brand/AGENTS.md`](../../brand/AGENTS.md); this package README documents only the import surface.
 
 ## Data-only consumption
 

package/dist/css/index.css

@@ -91,13 +91,13 @@
     --nc-state-complete: oklch(0.6415 0.1644 153.23);
     --nc-background-100: oklch(1.0000 0.0000 0.00);
     --nc-background-200: oklch(0.9851 0.0000 0.00);
-    --nc-campo-verde: oklch(0.6415 0.1644 153.23);
-    --nc-campo-rosso: oklch(0.5688 0.1995 26.59);
-    --nc-campo-arancio: oklch(0.6824 0.2108 37.70);
-    --nc-campo-giallo: oklch(0.8466 0.1678 84.63);
-    --nc-campo-cobalto: oklch(0.5005 0.2804 266.17);
-    --nc-campo-inchiostro: oklch(0.0000 0.0000 0.00);
-    --nc-campo-bianco: oklch(1.0000 0.0000 0.00);
+    --nc-identity-verde: oklch(0.6415 0.1644 153.23);
+    --nc-identity-rosso: oklch(0.5688 0.1995 26.59);
+    --nc-identity-arancio: oklch(0.6824 0.2108 37.70);
+    --nc-identity-giallo: oklch(0.8466 0.1678 84.63);
+    --nc-identity-cobalto: oklch(0.5005 0.2804 266.17);
+    --nc-identity-ink: oklch(0.0000 0.0000 0.00);
+    --nc-identity-white: oklch(1.0000 0.0000 0.00);
     --nc-chart-1: oklch(0.5005 0.2804 266.17);
     --nc-chart-2: oklch(0.6415 0.1644 153.23);
     --nc-chart-3: oklch(0.7638 0.1562 86.86);
@@ -602,7 +602,7 @@
     --accent: var(--nc-canvas-soft-2);
     --accent-foreground: var(--nc-ink);
     --destructive: var(--nc-error);
-    --destructive-foreground: var(--nc-campo-bianco);
+    --destructive-foreground: var(--nc-identity-white);
     --warning: var(--nc-warning);
     --warning-foreground: var(--nc-ink);
     --success: var(--nc-success);
@@ -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.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 { --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-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: 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

@@ -52,13 +52,13 @@
         "state-complete": "#00a85a",
         "background-100": "#ffffff",
         "background-200": "#fafafa",
-        "campo-verde": "#00a85a",
-        "campo-rosso": "#d3302f",
-        "campo-arancio": "#ff5a1f",
-        "campo-giallo": "#ffc220",
-        "campo-cobalto": "#1e3cff",
-        "campo-inchiostro": "#000000",
-        "campo-bianco": "#ffffff",
+        "identity-verde": "#00a85a",
+        "identity-rosso": "#d3302f",
+        "identity-arancio": "#ff5a1f",
+        "identity-giallo": "#ffc220",
+        "identity-cobalto": "#1e3cff",
+        "identity-ink": "#000000",
+        "identity-white": "#ffffff",
         "chart-1": "#1e3cff",
         "chart-2": "#00a85a",
         "chart-3": "#ddaa00",

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

@@ -555,7 +555,7 @@
             "hex": "#fafafa"
           }
         },
-        "campo-verde": {
+        "identity-verde": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -566,7 +566,7 @@
             "hex": "#00a85a"
           }
         },
-        "campo-rosso": {
+        "identity-rosso": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -577,7 +577,7 @@
             "hex": "#d3302f"
           }
         },
-        "campo-arancio": {
+        "identity-arancio": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -588,7 +588,7 @@
             "hex": "#ff5a1f"
           }
         },
-        "campo-giallo": {
+        "identity-giallo": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -599,7 +599,7 @@
             "hex": "#ffc220"
           }
         },
-        "campo-cobalto": {
+        "identity-cobalto": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -610,7 +610,7 @@
             "hex": "#1e3cff"
           }
         },
-        "campo-inchiostro": {
+        "identity-ink": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -621,7 +621,7 @@
             "hex": "#000000"
           }
         },
-        "campo-bianco": {
+        "identity-white": {
           "$value": {
             "colorSpace": "srgb",
             "components": [

package/dist/tokens/nadicode.dtcg.json

@@ -555,7 +555,7 @@
             "hex": "#fafafa"
           }
         },
-        "campo-verde": {
+        "identity-verde": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -566,7 +566,7 @@
             "hex": "#00a85a"
           }
         },
-        "campo-rosso": {
+        "identity-rosso": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -577,7 +577,7 @@
             "hex": "#d3302f"
           }
         },
-        "campo-arancio": {
+        "identity-arancio": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -588,7 +588,7 @@
             "hex": "#ff5a1f"
           }
         },
-        "campo-giallo": {
+        "identity-giallo": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -599,7 +599,7 @@
             "hex": "#ffc220"
           }
         },
-        "campo-cobalto": {
+        "identity-cobalto": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -610,7 +610,7 @@
             "hex": "#1e3cff"
           }
         },
-        "campo-inchiostro": {
+        "identity-ink": {
           "$value": {
             "colorSpace": "srgb",
             "components": [
@@ -621,7 +621,7 @@
             "hex": "#000000"
           }
         },
-        "campo-bianco": {
+        "identity-white": {
           "$value": {
             "colorSpace": "srgb",
             "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -117,21 +117,45 @@
       "default": "./src/assets/logo-geometry.js"
     },
     "./assets/nadia-solid-surface": {
-      "types": "./src/assets/nadia-material-state.d.ts",
+      "types": "./src/assets/nadia-asset.d.ts",
       "default": "./dist/assets/nadia-01-solid-surface.png"
     },
     "./assets/nadia-ordered-points": {
-      "types": "./src/assets/nadia-material-state.d.ts",
+      "types": "./src/assets/nadia-asset.d.ts",
       "default": "./dist/assets/nadia-02-ordered-points.png"
     },
     "./assets/nadia-triangulated-wire": {
-      "types": "./src/assets/nadia-material-state.d.ts",
+      "types": "./src/assets/nadia-asset.d.ts",
       "default": "./dist/assets/nadia-03-triangulated-wire.png"
     },
     "./assets/nadia-irregular-particles": {
-      "types": "./src/assets/nadia-material-state.d.ts",
+      "types": "./src/assets/nadia-asset.d.ts",
       "default": "./dist/assets/nadia-04-irregular-particles.png"
     },
+    "./assets/nadia-square-full": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-square-full.png"
+    },
+    "./assets/nadia-square-head": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-square-head.png"
+    },
+    "./assets/nadia-detail-gaze": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-detail-gaze.png"
+    },
+    "./assets/nadia-detail-earring": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-detail-earring.png"
+    },
+    "./assets/nadia-daylight": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-daylight.png"
+    },
+    "./assets/nadia-daylight-lift": {
+      "types": "./src/assets/nadia-asset.d.ts",
+      "default": "./dist/assets/nadia-daylight-lift.png"
+    },
     "./assets/fonts/geist.css": "./src/assets/fonts/geist.css",
     "./assets/fonts/*": "./src/assets/fonts/*"
   },