@nadicodeai/design-system 12.1.99 → 12.1.101

package/DESIGN.md

@@ -60,11 +60,97 @@ colors:
   identity-white: "#ffffff"
   logo-dot: "#1e3cff"
   chart-1: "#1e3cff"
-  chart-2: "#00a85a"
-  chart-3: "#ddaa00"
-  chart-4: "#d3302f"
+  chart-2: "#e5468f"
+  chart-3: "#6f42c1"
+  chart-4: "#ff5a1f"
   chart-5: "#0096a7"
-  chart-6: "#6f42c1"
+  chart-6: "#d3302f"
+  chart-7: "#e2aa00"
+  chart-8: "#00a85a"
+  chart-9: "#7aa0ff"
+  chart-10: "#ffabc9"
+
+  cobalto-100: "#f3f7ff"
+  cobalto-200: "#e9f0ff"
+  cobalto-300: "#dde8ff"
+  cobalto-400: "#cddcff"
+  cobalto-500: "#aec7ff"
+  cobalto-600: "#7aa0ff"
+  cobalto-700: "#1e3cff"
+  cobalto-800: "#1829f0"
+  cobalto-900: "#1425d3"
+  cobalto-1000: "#07117a"
+  rosso-100: "#fff4f2"
+  rosso-200: "#ffebe8"
+  rosso-300: "#ffdfdb"
+  rosso-400: "#ffcfc9"
+  rosso-500: "#ffb0a7"
+  rosso-600: "#ff7267"
+  rosso-700: "#d3302f"
+  rosso-800: "#c51e22"
+  rosso-900: "#af1e20"
+  rosso-1000: "#540004"
+  arancio-100: "#fff4f1"
+  arancio-200: "#ffebe5"
+  arancio-300: "#ffe0d7"
+  arancio-400: "#ffd0c2"
+  arancio-500: "#ffb19a"
+  arancio-600: "#ff835d"
+  arancio-700: "#ff5a1f"
+  arancio-800: "#f04c03"
+  arancio-900: "#ac3300"
+  arancio-1000: "#4c1200"
+  giallo-100: "#fffaef"
+  giallo-200: "#fef4e1"
+  giallo-300: "#fdefd1"
+  giallo-400: "#fde5b5"
+  giallo-500: "#ffd989"
+  giallo-600: "#ffcc5c"
+  giallo-700: "#ffc220"
+  giallo-800: "#e2aa00"
+  giallo-900: "#8a6500"
+  giallo-1000: "#422f00"
+  verde-100: "#effaf2"
+  verde-200: "#e4f6e8"
+  verde-300: "#d4f0db"
+  verde-400: "#bceac8"
+  verde-500: "#78e29c"
+  verde-600: "#37c171"
+  verde-700: "#00a85a"
+  verde-800: "#009a52"
+  verde-900: "#00773e"
+  verde-1000: "#003317"
+  acqua-100: "#eff9fb"
+  acqua-200: "#e4f4f6"
+  acqua-300: "#d5edf1"
+  acqua-400: "#bde5eb"
+  acqua-500: "#7cd8e7"
+  acqua-600: "#3fb7c8"
+  acqua-700: "#0096a7"
+  acqua-800: "#008998"
+  acqua-900: "#00707d"
+  acqua-1000: "#002f36"
+  viola-100: "#f7f5ff"
+  viola-200: "#f1edff"
+  viola-300: "#e9e3ff"
+  viola-400: "#ded6ff"
+  viola-500: "#cbbbff"
+  viola-600: "#ad8dff"
+  viola-700: "#6f42c1"
+  viola-800: "#6435b4"
+  viola-900: "#582f9e"
+  viola-1000: "#2f1659"
+  rosa-100: "#fff3f7"
+  rosa-200: "#ffeaf0"
+  rosa-300: "#ffdee8"
+  rosa-400: "#ffccdd"
+  rosa-500: "#ffabc9"
+  rosa-600: "#ff65a7"
+  rosa-700: "#e5468f"
+  rosa-800: "#d73783"
+  rosa-900: "#ad1f66"
+  rosa-1000: "#50002a"
+
   dark-canvas: "#000000"
   dark-canvas-soft: "#111111"
   dark-canvas-soft-2: "#1a1a1a"
@@ -110,12 +196,97 @@ colors:
   dark-navigation-selection-bg: "#1f1f1f"
   dark-navigation-selection-fg: "#ededed"
   dark-navigation-selection-hover: "#262626"
-  dark-chart-1: "#4d6bff"
-  dark-chart-2: "#00a85a"
-  dark-chart-3: "#ffd866"
-  dark-chart-4: "#e8615f"
-  dark-chart-5: "#33d1cb"
-  dark-chart-6: "#9575cd"
+  dark-chart-1: "#4372ff"
+  dark-chart-2: "#e95395"
+  dark-chart-3: "#8a64de"
+  dark-chart-4: "#f35822"
+  dark-chart-5: "#2fa2b2"
+  dark-chart-6: "#dd4640"
+  dark-chart-7: "#ffc220"
+  dark-chart-8: "#28ad62"
+  dark-chart-9: "#a0bcff"
+  dark-chart-10: "#ff9ac0"
+
+  dark-cobalto-100: "#030b3f"
+  dark-cobalto-200: "#040e50"
+  dark-cobalto-300: "#061566"
+  dark-cobalto-400: "#0a1b7d"
+  dark-cobalto-500: "#1129a5"
+  dark-cobalto-600: "#4372ff"
+  dark-cobalto-700: "#1e3cff"
+  dark-cobalto-800: "#1829f0"
+  dark-cobalto-900: "#a0bcff"
+  dark-cobalto-1000: "#ecf2ff"
+  dark-rosso-100: "#2c0303"
+  dark-rosso-200: "#390304"
+  dark-rosso-300: "#490406"
+  dark-rosso-400: "#5b0608"
+  dark-rosso-500: "#790e11"
+  dark-rosso-600: "#dd4640"
+  dark-rosso-700: "#d3302f"
+  dark-rosso-800: "#c51e22"
+  dark-rosso-900: "#ffa096"
+  dark-rosso-1000: "#ffedeb"
+  dark-arancio-100: "#2a0600"
+  dark-arancio-200: "#350900"
+  dark-arancio-300: "#440f00"
+  dark-arancio-400: "#541400"
+  dark-arancio-500: "#721f00"
+  dark-arancio-600: "#f35822"
+  dark-arancio-700: "#ff5a1f"
+  dark-arancio-800: "#f04c03"
+  dark-arancio-900: "#ffa286"
+  dark-arancio-1000: "#ffede8"
+  dark-giallo-100: "#1c1200"
+  dark-giallo-200: "#241800"
+  dark-giallo-300: "#302100"
+  dark-giallo-400: "#3c2b00"
+  dark-giallo-500: "#523c00"
+  dark-giallo-600: "#b88a00"
+  dark-giallo-700: "#ffc220"
+  dark-giallo-800: "#f1b500"
+  dark-giallo-900: "#edb41a"
+  dark-giallo-1000: "#faf1df"
+  dark-verde-100: "#001a09"
+  dark-verde-200: "#00220d"
+  dark-verde-300: "#002d14"
+  dark-verde-400: "#00381a"
+  dark-verde-500: "#004d26"
+  dark-verde-600: "#28ad62"
+  dark-verde-700: "#00a85a"
+  dark-verde-800: "#009a52"
+  dark-verde-900: "#60da8d"
+  dark-verde-1000: "#e6f7ea"
+  dark-acqua-100: "#00181c"
+  dark-acqua-200: "#001f24"
+  dark-acqua-300: "#002a30"
+  dark-acqua-400: "#00353c"
+  dark-acqua-500: "#004952"
+  dark-acqua-600: "#2fa2b2"
+  dark-acqua-700: "#0096a7"
+  dark-acqua-800: "#008998"
+  dark-acqua-900: "#65d0e0"
+  dark-acqua-1000: "#e6f5f7"
+  dark-viola-100: "#170b2d"
+  dark-viola-200: "#1e0f3b"
+  dark-viola-300: "#29164c"
+  dark-viola-400: "#331d5d"
+  dark-viola-500: "#472b7c"
+  dark-viola-600: "#8a64de"
+  dark-viola-700: "#6f42c1"
+  dark-viola-800: "#6435b4"
+  dark-viola-900: "#c3afff"
+  dark-viola-1000: "#f2efff"
+  dark-rosa-100: "#2a0215"
+  dark-rosa-200: "#36021b"
+  dark-rosa-300: "#460225"
+  dark-rosa-400: "#57032f"
+  dark-rosa-500: "#740a41"
+  dark-rosa-600: "#e95395"
+  dark-rosa-700: "#e5468f"
+  dark-rosa-800: "#d73783"
+  dark-rosa-900: "#ff9ac0"
+  dark-rosa-1000: "#ffecf2"
 
   category-teal-soft: "#e0f7f4"
   category-teal-deep: "#08665e"
@@ -404,6 +575,19 @@ Text on a colour ground is the pole that clears AA on that hue: `{colors.identit
 
 Labels and their icons may carry blue, teal, purple or pink to distinguish named categories. `Tag` owns these categorical tones; `Badge` also offers the teal, purple and pink soft fills with their contrasting foregrounds, and no status fill. The same category keeps the same tone across a surface and after sorting. A word remains visible, and a colour never invents status. Green, amber and red remain feedback meanings; the five-tone `StatusBadge` owns those. Icons inherit the tone of their label rather than adding a second colour. Brand marks keep their genuine colours. This uses Geist’s light fill / strong text technique with nadicode’s semantic roles; agents never choose raw palette values in pages.
 
+### Scales
+
+Eight hue scales give product colour its steps, on the structure of [Geist's colours](https://vercel.com/geist/colors): cobalto, rosso, arancio, giallo, verde, acqua, viola and rosa, each from `{colors.cobalto-100}` to `{colors.cobalto-1000}` with a `dark-` value for every step. Step 700 is the hue itself: the identity hex for cobalto (`{colors.cobalto-700}`), rosso, arancio, giallo and verde, the categorical teal and violet for acqua and viola, and a pink beside the category pink for rosa. Neutrals stay on the spine above; there is no grey scale.
+
+| Steps | Job |
+| --- | --- |
+| 100, 200, 300 | A tinted ground: default, hover, active |
+| 400, 500, 600 | A border or a soft mark: default, hover, active |
+| 700, 800 | A solid fill and its hover |
+| 900, 1000 | Text and icons: secondary, primary |
+
+Step 900 clears AA text on its own 100, 200 and 300 and on the canvas in both themes, and the build refuses a scale that loses it. Lightness climbs with the step in light. In dark, as in Geist's dark scales, 600 is the brightened mark a chart draws on black and sits above 700 and 800, and giallo's 900 sits below its 700, so a dark ramp is chosen by step, not by assuming lightness order. A step reaches a page through a role or a component tone, never as a raw hex. The scales are product colour: a place in "Colour as stage" keeps its identity hue at full strength, and no scale step tints it.
+
 ### Dark mode
 
 Every token `X` with a `dark-X` pair takes the dark value under a `.dark` ancestor; a component uses the same role in both modes and never ships a `dark:` utility or a mode branch of its own. The dark page is true black, `{colors.dark-canvas}`. Elevated surfaces lift from it by tone ("Elevation & Depth"); the soft steps `{colors.dark-canvas-soft}` and `{colors.dark-canvas-soft-2}` are interaction fills and never become a page, section or panel ground. On a lifted surface the hover and muted fills step up from that surface's own tone. Dark feedback and chart values are brightened so they read on black; `{colors.dark-input}` stays brighter than `{colors.dark-line}` so a field's edge clears 3:1. A surface that is dark by nature, such as Nadia's entry screen, a terminal console, a black website section or a black brand plane inside a product (`BrandField`), stays dark in every theme as one fixed treatment: it scopes `.dark`, so every role and control inside it takes its dark value.
@@ -430,9 +614,17 @@ No pie, donut, radar, radial or dual-axis chart, and no mark or logo inside a le
 
 ### Palette and assignment
 
-Six categorical series colour data and nothing else: `{colors.chart-1}` cobalto through `{colors.chart-6}` viola. Same-family neighbours (chart-3 and chart-4, chart-2 and chart-5) are held apart in normal and deuteranopia-simulated vision by the build. The light chart-3 sits below 3:1 on white, so a chart relies on its always-on legend and never on hue alone. Dark steps (`{colors.dark-chart-1}` and the rest) clear 3:1 on black.
+Ten categorical series colour data and nothing else, in this order: cobalto, rosa, viola, arancio, acqua, rosso, giallo, verde, then a light cobalto and a light rosa, `{colors.chart-1}` to `{colors.chart-10}`. Each slot is a step of a scale ("Scales"). In light it is the 700 step, with giallo at 800 so a yellow bar keeps an edge on white, and the tints at cobalto-600 and rosa-500. In dark it is the 600 step, with giallo at 700 and the tints at cobalto-900 and rosa-900, and every slot clears 3:1 on black. Cobalto leads, as in the logo.
+
+The order is the colour-blind safety for marks drawn in slot order, as a stack, a group and the legend draw them: the build holds every neighbouring pair apart in normal and deuteranopia-simulated vision in both themes (CIEDE2000 20 and 15) and refuses a slot that is not a scale step. Slots further apart carry no such floor: cobalto and viola (slots 1 and 3) stay close for a deuteranope, and a chart that draws a later slot beside an earlier one, such as a second ranking on a surface whose map follows the first, can put close slots side by side. Giallo and the two tints sit below 3:1 on white. A chart therefore relies on its always-on legend and its tooltip, never on hue alone.
+
+Rosso enters at slot 6 and verde at slot 8, so a surface whose map holds five entities or fewer never shows a red or a green that reads as error or success; past five, the legend's words carry the meaning and the hue only tells series apart.
+
+- **One series**: `{colors.chart-1}`, titled, with no legend.
+- **Two to ten**: the slots in order, with the legend below the plot.
+- **More than ten**: the eleventh entity and every later one fold into one neutral "Everything else" in `{colors.muted}`; the page lists its entities largest first, so the tail is the smallest.
 
-A hue follows its entity, never its rank or position: one assignment per surface, the same in a chart and its table, stable under filtering and sorting. Past six entities the tail folds into one neutral "other" in `{colors.muted}`.
+A hue follows its entity, never its rank or position: one assignment per surface, the same in a chart and its table, stable under filtering and sorting.
 
 ### Meters, deltas and labels
 
@@ -816,7 +1008,7 @@ Choose the owner for the whole task. Keep its slots and state handling together
 
 | Task | Shared composition | What the product adapter supplies |
 | --- | --- | --- |
-| Settings | `SettingsPage` → `SettingsSection` with its `save` → `SettingsField`. | The section's title and one line, its fields, what saving does (`save.action`), the save's words and its hint. The section owns the changed state, Save, "Saved" and a failure under its field. |
+| Settings | `SettingsPage` → `SettingsSection` with its `save` → `SettingsField`. | The section's title and one line, its fields, what saving does (`save.action`), the product's toast for a save that went through (`save.saved`), the save's words and, where the card has something specific to say, its hint. The section owns the changed state, Save and a failure under its field. |
 | Read-only facts | `ObjectPage`'s `facts`, `SettingsFactsSection` or `ObjectFacts`, with `TableValue` for missing facts. | Label/value pairs, actual timestamps, identifier format, links and permission-aware actions. Unknown remains distinct from zero. |
 | Entity collection | `CollectionPage` on `RecordList`: the title's actions, the line tabs, search, filters and sort, then rows that identify themselves (`RecordIdentity` with its `IdentityMark` and `detail`, a status only for the exception, `RecordTime`), the row's command or menu, an action's failure inside its row, the edit inside its row (`RowEditForm`), and its loading, empty and no-match states. | The records, what each one says, its commands as data, its catalogue message when an action fails, and the edit form. Never its own toolbar, table, rows or menus. |
 | A list inside another page | `RecordList` with its `heading`: an overview's exceptions, an object's "Needs attention". | The same as a collection's rows, and the heading's title. |
@@ -858,7 +1050,7 @@ Keep Geist's hierarchy, control metrics, typography roles, neutral surface zones
 
 ### Cards and sections
 
-`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A card's or a section's title carries no icon, unless the card stands for one external system, whose mark it then carries. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. On a settings page each card saves its own fields through its own `save`, with its own Save in its footer: always visible and off until something in that card differs from what is saved; while saving, its pending word; once saved, "Saved" with the ok check in the footer's left until the next change; a failure keeps every value and shows under the field it is about. An object's section that edits in place swaps to the same section with Cancel before Save. Nothing on a settings page applies on change. Only the preferences in the account menu, Theme and Language, apply at once. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-canvas}` below the resting body in dark: an optional hint on the left, such as the plan a feature needs or a link to learn more, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison; its label is words alone, with no icon.
+`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A card's or a section's title carries no icon, unless the card stands for one external system, whose mark it then carries. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. On a settings page each card saves its own fields through its own `save`, with its own Save in its footer: always visible and off until something in that card differs from what is saved; while saving, its pending word; a save that succeeds is announced by the product's toast and leaves no saved state in the footer; a failure keeps every value and shows under the field it is about. An object's section that edits in place swaps to the same section with Cancel before Save. Nothing on a settings page applies on change. Only the preferences in the account menu, Theme and Language, apply at once. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-canvas}` below the resting body in dark: an optional hint on the left, only where it says something specific to that card (a limit such as "Please use 32 characters at maximum.", what a value is for, the plan a feature needs or a link to learn more) and never one sentence every card repeats, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison; its label is words alone, with no icon.
 
 ### Menus and commands