@nadicodeai/design-system 12.1.107 → 12.1.109

package/DESIGN.md

@@ -26,7 +26,7 @@ colors:
   line: "#e5e5e5"
   input: "#757575"
   focus-ring: "#111111"
-  scrim: "#000000"
+  scrim: "#f2f2f2"
   link: "#0068d6"
   link-deep: "#0055b3"
   link-bg-soft: "#ebf5ff"
@@ -156,10 +156,11 @@ colors:
   dark-canvas-soft-2: "#1a1a1a"
   dark-material-workspace: "#000000"
   dark-material-solid: "#000000"
-  dark-material-resting: "#0c0c0c"
-  dark-material-raised: "#111111"
-  dark-material-floating: "#151515"
-  dark-material-modal: "#151515"
+  dark-material-resting: "#0a0a0a"
+  dark-material-raised: "#0f0f0f"
+  dark-material-floating: "#0f0f0f"
+  dark-material-modal: "#0f0f0f"
+  card-graphite: "#151515"
   dark-ink: "#ededed"
   dark-body: "#a1a1a1"
   dark-muted: "#9e9e9e"
@@ -527,7 +528,7 @@ nadicode puts AI Agents to work inside small and mid-sized companies. Its sites
 
 - **Neutral structure.** Chrome, controls and text sit on an achromatic spine, so a desaturated screen loses nothing structural. The strongest contrast on a screen belongs to the action.
 - **Colour as stage.** The five identity hues appear at full strength only in the places "Colour as stage" lists, the colour of Agents among them, and never as a section's ground. They carry the brand; they never decorate a control. Semantic colour identifies statuses, categories and named actions through the component palette below.
-- **Real depth.** Surfaces sit at four heights. In light, an edge and shadows that grow with the height show it; in dark, each height is a step lighter, lit along its top edge. Glass floats over content that scrolls or moves under it.
+- **Real depth.** Surfaces sit at four heights. Content lies on the page with a 1 px edge and no grey fill; what floats takes its depth from light: deeper shadows in light, and in dark a line of light along its top, a brighter edge and a deep black shadow. Glass goes only where something moves under it.
 
 The products are still: only Agents move on their own. The website moves with purpose: the product at work, Agents and its few shader objects ("Motion").
 
@@ -551,7 +552,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
 - **Focus** (`{colors.focus-ring}`): a full-opacity outline of `{spacing.focus-outline-width}` at `{spacing.focus-outline-offset}`, the maximum-contrast neutral on each ground, never a box-shadow ring and never a hue.
 - **Blue on a choice** is info and appears only where Geist puts it: the on switch, the filled part of a slider, and a selected choice tile (border, tint, words, corner mark). Checkbox, radio, segmented control and toggle group stay neutral, and a disabled switch or slider fill turns grey, never a faded blue.
 - **Interaction states** are contrast steps on the spine. Hover takes the `accent` role (`{colors.canvas-soft-2}`) and a selected row the `muted` role (`{colors.canvas-soft}`); a control's own hover is a step inside its family, as `{colors.action-hover}` is. Persistent navigation marks the current destination with `{colors.navigation-selection-bg}` and `{colors.navigation-selection-fg}`, and local tabs mark the current view with the same pair through the `selection` role. A segmented choice, `SegmentedControl` and the theme switcher's tiles, marks its chosen option with that pair too (with the resting elevation), and the fill never comes without its foreground: on the `selection` ground, a radio's on-primary label reads white on near-white in light and black on black in dark.
-- **Scrim** (`{colors.scrim}`): the modal overlay, black in both themes at the `scrim-opacity` material value, never blurred: the page behind steps back and the panel in front keeps its full contrast; an overlay never greys the page.
+- **Scrim** (`{colors.scrim}`): the overlay behind dialogs, sheets and drawers, never blurred. In light it is a near-white wash at the `scrim-opacity` material value, as Vercel's is; in dark it is black at `dark-scrim-opacity`, never grey. The page behind steps back and the panel in front keeps its full contrast.
 
 ### Colour as stage
 
@@ -640,7 +641,7 @@ A hue follows its entity, never its rank or position: one assignment per surface
 
 ## Typography
 
-Geist and Geist Mono are the two families. The role scale follows the measured [Geist typography](https://vercel.com/geist/typography): headings, buttons, single-line labels and multiline copy each have their own line height and weight. The `label-mono` family and `code` use Geist Mono. Fonts ship with the package and their SIL Open Font License; no network font fetch is required.
+Geist and Geist Mono are the two families. The role scale follows the measured [Geist typography](https://vercel.com/geist/typography): headings, buttons, single-line labels and multiline copy each have their own line height and weight. The `label-mono` family and `code` use Geist Mono. Fonts ship with the package and their SIL Open Font License; no network font fetch is required. Text is antialiased in every product and on the website, as Vercel's is: grayscale smoothing (`-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`), set once by the package's stylesheet.
 
 | Token | Size / line height | Use |
 | --- | --- | --- |
@@ -804,29 +805,32 @@ A section earns a card when it owns a decision, not for every label and value. A
 
 Product UI sits on one continuous workspace ground, `{colors.material-workspace}` (true black in dark), and solid objects rise above it at four heights: `nc-elevation-resting` for resting content, then `nc-elevation-raised`, `nc-elevation-floating` and `nc-elevation-modal` when an object is physically raised, floating or modal. Physical role chooses the height, never the importance of the content. Each recipe carries its own edge, so an elevated surface never adds a border, a ring or a second shadow.
 
-**In light, shadows carry height** (the owner's adoption of the depth-and-glass board, 16 October 2026: [depth and glass](../../docs/adr/2026-09-23-the-nadicode-design-system/depth-and-glass.html)). Each recipe opens with the same 1 px edge, black at 8%, then a tight contact shadow where the surface touches the one below and a soft ambient shadow, pushed down with negative spread so it stays under the surface, that grows with each height: resting 8 px, raised 32 px, floating 64 px, modal 128 px of blur, at 5% to 26% black. Shadows stay black: a tinted shadow belongs only to a product view on a colour ground of the website.
+The owner approved the materials on 18 October 2026: Vercel's surfaces with a little more depth on what floats, and glass only where it is useful. [The materials reference](../../docs/adr/2026-09-23-the-nadicode-design-system/depth-and-glass.html) shows each height and the glass in both modes. Four rules decide them.
 
-**Only a tooltip has a stem.** A tooltip points at its trigger with a small triangle; no other floating surface (menu, popover, select, hover card, dialog) draws a pointer, so a surface that opens from a trigger is placed beside it with its offset alone.
+**Content lies on the page.** Cards, KPIs, tables, lists and settings take the resting height: white in light and `{colors.dark-material-resting}` in dark, on the black page. Their edge is a 1 px line, black at 8% in light; in dark white at 14.5%, with a 1 px black ring outside it, so the edge stays sharp where one surface overlaps another. They have no grey fill, as Vercel's cards have none.
 
-**In dark, surfaces stay black and light carries height** (the owner's ruling of 16 October 2026: perspective, elevation and glass, never a grey surface). The page is `{colors.dark-canvas}`; each surface a small shade above it, as the depth-and-glass page steps them, and never past `{colors.dark-material-modal}`, well below the grey a large panel would read as: resting `{colors.dark-material-resting}`, raised `{colors.dark-material-raised}`, floating `{colors.dark-material-floating}`, modal `{colors.dark-material-modal}`. Height shows in light, not in a grey fill: a 1 px line of light along the top edge inside, a white hairline outside the surface where no header or footer of its own can cover it (14% on what floats, as Vercel's edges are), a black shadow under it, all stronger with each height; floating and modal surfaces are also lit from above, a white wash that fades out over their first 120 px, so a menu, a dialog or a drawer reads as lifted toward the light; glass on what floats over content. A field inside a surface is a darker well of it (that surface mixed 45% toward black) inside its edge, so every field stays visible; a footer or striped row is a quarter darker. The design-system checks fail a height darker than the one below it or past 1.16:1 against the page. `{colors.dark-ink}` and `{colors.dark-muted}` keep the WCAG AA text floor on the top step. Hover and selected fills step up from the surface they sit on. A component names only its height and its role (`bg-card`, `bg-popover`); `@nadicodeai/ui/globals.css` sets those roles to the height's tone on the element.
+**What floats takes its depth from light, not from grey.** Raised (selected or dragged work), floating (menus, popovers, toasts, tooltips) and modal (dialogs, sheets, drawers, the command palette) surfaces stay white in light, and their shadows go slightly deeper than Vercel's at each height. Shadows stay black: a tinted shadow belongs only to a product view on a colour ground of the website. In dark they lift one barely visible step, `{colors.dark-material-raised}` for all three, and show their height with a line of light along the top inside, a white edge of 16 to 18% outside with the black ring beyond it, and a deep black shadow, all stronger with each height. The design-system checks fail a dark height darker than the one below it or lighter than that step (1.10:1 against the page), so a grey surface cannot ship; `{colors.dark-ink}` and `{colors.dark-muted}` keep the WCAG AA text floor on it. A field inside a surface is a darker well of it (that surface mixed 45% toward black) inside its edge, so every field stays visible; a footer or striped row is a quarter darker. Hover and selected fills step up from the surface they sit on. A component names only its height and its role (`bg-card`, `bg-popover`); `@nadicodeai/ui/globals.css` sets those roles to the height's tone on the element.
 
 | Surface | Fill | Height | Use |
 | --- | --- | --- | --- |
 | Workspace | `{colors.material-workspace}` | None | The work area behind product objects. |
-| Resting | `{colors.material-resting}` | `nc-elevation-resting` | Cards, KPIs, chart cards, tables, settings. The default. |
-| Raised | `{colors.material-raised}` | `nc-elevation-raised` | Active or selected work, an attached inspector. |
-| Floating | `{colors.material-floating}` | `nc-elevation-floating` | Tooltips and hover cards; menus, popovers, selects and toasts, which add glass. |
-| Modal | `{colors.material-modal}` | `nc-elevation-modal` | Dialogs, sheets, drawers. |
+| Resting | `{colors.material-resting}` | `nc-elevation-resting` | Cards, KPIs, chart cards, tables, lists, settings. The default. |
+| Raised | `{colors.material-raised}` | `nc-elevation-raised` | Selected or dragged work, an attached inspector. |
+| Floating | `{colors.material-floating}` | `nc-elevation-floating` | Menus, context menus, popovers, selects, comboboxes, toasts, tooltips and hover cards. |
+| Modal | `{colors.material-modal}` | `nc-elevation-modal` | Dialogs, sheets, drawers, the command palette. |
 | Outlined | `{colors.material-solid}` | None; one `line` border | A flat panel: fact cells inside a record, the website's explanatory cards. |
 | Plain | `{colors.material-solid}` | None | A structural card with no edge of its own. |
 
-**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the glass recipe (`nc-glass`): a line of light along the top, an inner hairline, an outer edge and the floating height's shadows, and a 5% monochrome grain keeps the blurred colour from banding. Glass goes on floating chrome, where something behind it moves or carries colour:
+**Glass only where something moves under it.** Glass is a material, not a height: the resting surface's colour at `glass-opacity` over a backdrop blur (`glass-blur`) at `glass-saturation`, so the colour passing under it comes through and its text stays readable, with a 5% monochrome grain that keeps the blurred colour from banding. Its edge is the glass recipe (`nc-glass`): a line of light along the top and a hairline edge. It goes only where content passes under it:
 
-- floating chrome over our own content: menus, popovers, selects, comboboxes, the command palette, toasts and control bars, including a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own) and Nadia's chat bar over her conversation;
+- a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own);
+- Nadia's chat bar over her conversation;
 - the website header as the page scrolls under it;
-- a small floating card over moving Agents.
+- a small card over Agent orbs or a shader object.
+
+**No glass over a plain page.** Menus, context menus, popovers, selects, comboboxes, the command palette, toasts, dialogs, sheets and drawers are solid: over a plain white or black page glass has nothing to show and reads as a grey box. Content stays solid too: cards, KPIs, tables, chat and forms. Reduced transparency and browsers without backdrop-filter replace glass with the solid resting surface. Transparency never reduces the opacity of labels or controls.
 
-Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and drawer bodies; a toast with a tone keeps its solid fill. A dropdown menu and a context menu are both glass, so one set of commands reached both ways looks the same both ways. Glass over a plain white or black ground shows nothing, so it never goes there. Reduced transparency and browsers without backdrop-filter replace glass with the same solid surface at the same height. Transparency never reduces the opacity of labels or controls.
+**Only a tooltip has a stem.** A tooltip points at its trigger with a small triangle; no other floating surface (menu, popover, select, hover card, dialog) draws a pointer, so a surface that opens from a trigger is placed beside it with its offset alone.
 
 **Product views on the website** preserve the real interface. Nadia uses captures of the running application, with the unchanged full-size image linked and capture provenance recorded in the repository, following the founder's 12 October correction of invented UI. Portal and Alveare may use inert scenes built from real components with fictional example data recorded in the repository. Never invent interface controls or frame a view in a device mockup. A product window takes the raised height on its ground; a card that overlaps it floats. Live components use dark mode in a black section; captures preserve the application's captured theme.
 
@@ -843,7 +847,7 @@ The quiet lines (`nothingYet`, `noResults`, `cleared`) carry no live role of the
 
 A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field. A notice carries one action, a 32 px outline button, and at most a second one after it, such as Nadia's Ask Nadia after Try again, and has no close button: it stays until the state changes, and one note stands for one concept. A section notice is always the framed note, with or without its action; the page or the account gets a `NoticeBanner`, which carries its one fix as a command (never a ready-made button), reads at 16 px and draws its button as a pill. A toast leaves after 6 s, which is also the Undo window; a failure the person must handle is never a toast alone but a very short toast beside a persistent notice. A notice, a failed read, a confirmation's error and a toast each show a message its product's catalogue worded, never a sentence written where it shows: `MessageNotice` under the control whose write failed (`action`) or atop the section it concerns (`section`), `EmptyState` `failed`, `ConfirmDialog`'s error and the toast. Each wraps a long word, never truncates, closes its title with a full stop before a body that follows on the same line, and shows a body only when it says more than the title ([the decision](../../docs/adr/2026-10-08-every-message-a-customer-reads-is-a-code-its-products-catalogue-words.md)).
 
-Modal overlays use the scrim with no blur. Focus is not elevation: it is always the focus outline.
+Dialogs, sheets, drawers and the command palette sit over the scrim ("Colors"); popovers, selects and toasts float without one. Focus is not elevation: it is always the focus outline.
 
 ## Shapes
 
@@ -1077,7 +1081,7 @@ The owner's decisions where Geist and ours differ:
 
 ### Menus and commands
 
-A record's primary destination is its visible name or a labelled link. Navigation is never hidden in its action menu. Keep the main task visible: Edit opens the record inside its row, as in Vercel Domains; Connect belongs beside an available connection. Additional mutations use an end-aligned `ActionMenu`, the same commands on a right-click through `ActionContextMenu`; a menu is not required when the row has no secondary mutations. Commands reach a person only through `PageActions` (a page), `ActionMenu` and `ActionContextMenu` (a record) and `AccountMenu` (the account), each taking its commands as data (`menu-owner`). The three-dot trigger is a `{spacing.control-height}` ghost icon button named for its record, "More for pec@acme.it", and comes last, after any button. A record's or a page's menu opens under its trigger at the floating height and draws, top to bottom: its first line naming the record it acts on, in muted type; the commands, each with its icon leading the label, as Geist and Vercel draw them; then, after a divider, the destructive command last, in the error colour. A command that cannot run now is disabled and stays in place with its reason under its label; a command the person may not run is locked: it stays in place, inert, with a lock at its end and the reason under its label, which is required. A menu holds about ten commands at most, and one level of submenu at most, never for a destructive command. A destructive command never becomes the loudest repeated action: it is never a button on every row. The lists of a Select, a Combobox and a MultiSelect share this geometry: a 12 px corner, a 6 px inset (8 px for MultiSelect), rows 36 px (28 px for MultiSelect) with no gap, opened 8 px from their trigger; they keep glass, and a row that cannot be chosen turns its text muted, never dimmed. Ruled by the owner on 14 October 2026. The account menu is the one exception, drawn as Vercel's below: its icons trail their labels and Sign out is in the body colour.
+A record's primary destination is its visible name or a labelled link. Navigation is never hidden in its action menu. Keep the main task visible: Edit opens the record inside its row, as in Vercel Domains; Connect belongs beside an available connection. Additional mutations use an end-aligned `ActionMenu`, the same commands on a right-click through `ActionContextMenu`; a menu is not required when the row has no secondary mutations. Commands reach a person only through `PageActions` (a page), `ActionMenu` and `ActionContextMenu` (a record) and `AccountMenu` (the account), each taking its commands as data (`menu-owner`). The three-dot trigger is a `{spacing.control-height}` ghost icon button named for its record, "More for pec@acme.it", and comes last, after any button. A record's or a page's menu opens under its trigger at the floating height and draws, top to bottom: its first line naming the record it acts on, in muted type; the commands, each with its icon leading the label, as Geist and Vercel draw them; then, after a divider, the destructive command last, in the error colour. A command that cannot run now is disabled and stays in place with its reason under its label; a command the person may not run is locked: it stays in place, inert, with a lock at its end and the reason under its label, which is required. A menu holds about ten commands at most, and one level of submenu at most, never for a destructive command. A destructive command never becomes the loudest repeated action: it is never a button on every row. The lists of a Select, a Combobox and a MultiSelect share this geometry: a 12 px corner, a 6 px inset (8 px for MultiSelect), rows 36 px (28 px for MultiSelect) with no gap, opened 8 px from their trigger; they are solid, as every menu is ("Elevation & Depth"), and a row that cannot be chosen turns its text muted, never dimmed. Ruled by the owner on 14 October 2026. The account menu is the one exception, drawn as Vercel's below: its icons trail their labels and Sign out is in the body colour.
 
 Choose the surface by where the thing being changed is shown and how big the job is, never by the page that happens to need it: the same job takes the same surface in every product. Adding a skill is the catalogue drawer in the Portal and in Nadia, and editing a task or an MCP server opens its row in both. Each surface has one owner:
 
@@ -1193,7 +1197,7 @@ An Agent is shown as one card shape wherever it appears as an object, in the Por
 
 ### Company card
 
-The sign-up page draws the account being made as the company's card: one object of the ID-1 proportion, dark by nature in every theme, carrying on its top line the wordmark and, once Sofia has found it on the company's site, the company's own logo after a hairline, stamped in `{colors.identity-white}` as one ink (a company with no logo found has the wordmark alone); below, the holder's name and the company's domain. No Agent stands on it, and nothing sits in the engraving: a guilloché engraving in `{colors.identity-white}` at 10%. Beside a wide form it fills in as the form is typed and answers the pointer; on a phone the form keeps the screen, and the card appears once it is issued. It is the one object besides an Agent that moves on its own, once: when it first appears, and again when the account is asked for and it is issued, it turns in the light in 2.2 s, leaning one way and back while the light crosses it from corner to corner, so a person sees it is a card that answers the hand, and then it is still. The foil wakes as the pointer comes within one card width and eases toward it; a pointer that near ends the turn, and a pointer anywhere else on the page moves nothing. The account's Profile shows the person the same card, and the Partner invitation panel opens with its card, the Partner edition, on the identity plane, as the invitation it shares. Arriving through a Partner's referral link, the sign-up plane stands the Partner's card behind the one being made, leaning back, so the person's own card stays in front and whole; the Partner's email invitation dialog shows the card the invited company will be issued. Where the browser has WebGPU, its foil is vgpu's holographic card shader: matte graphite (`{colors.dark-material-floating}`) whose etched contours diffract the pointer's light, turning toward it by at most 9°. The diffraction and its pearlescent wash fall in pure bands of the identity hues, never a colour between two of them: a company's card takes the cool half, cobalto, azzurro and verde, and a Partner's the warm half, giallo, arancio and rosso. Without WebGPU the engraving catches the light as flat, hard-edged stripes of the same hues. Under reduced motion the card keeps still and the light still finds the foil. The form owns every word the card repeats, so the card is hidden from assistive technology.
+The sign-up page draws the account being made as the company's card: one object of the ID-1 proportion, dark by nature in every theme, carrying on its top line the wordmark and, once Sofia has found it on the company's site, the company's own logo after a hairline, stamped in `{colors.identity-white}` as one ink (a company with no logo found has the wordmark alone); below, the holder's name and the company's domain. No Agent stands on it, and nothing sits in the engraving: a guilloché engraving in `{colors.identity-white}` at 10%. Beside a wide form it fills in as the form is typed and answers the pointer; on a phone the form keeps the screen, and the card appears once it is issued. It is the one object besides an Agent that moves on its own, once: when it first appears, and again when the account is asked for and it is issued, it turns in the light in 2.2 s, leaning one way and back while the light crosses it from corner to corner, so a person sees it is a card that answers the hand, and then it is still. The foil wakes as the pointer comes within one card width and eases toward it; a pointer that near ends the turn, and a pointer anywhere else on the page moves nothing. The account's Profile shows the person the same card, and the Partner invitation panel opens with its card, the Partner edition, on the identity plane, as the invitation it shares. Arriving through a Partner's referral link, the sign-up plane stands the Partner's card behind the one being made, leaning back, so the person's own card stays in front and whole; the Partner's email invitation dialog shows the card the invited company will be issued. Where the browser has WebGPU, its foil is vgpu's holographic card shader: matte graphite (`{colors.card-graphite}`, its own tone, so the card keeps its look whatever the heights do) whose etched contours diffract the pointer's light, turning toward it by at most 9°. The diffraction and its pearlescent wash fall in pure bands of the identity hues, never a colour between two of them: a company's card takes the cool half, cobalto, azzurro and verde, and a Partner's the warm half, giallo, arancio and rosso. Without WebGPU the engraving catches the light as flat, hard-edged stripes of the same hues. Under reduced motion the card keeps still and the light still finds the foil. The form owns every word the card repeats, so the card is hidden from assistive technology.
 
 ### Identity marks
 
@@ -1274,15 +1278,15 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - **Website.** The page grammar is "The website column": full-bleed sections on white, soft and black grounds, alternating, with product views on them. Its cards are outlined; its product views take their real heights.
 - **Portal.** A product shell on the workspace ground, built from the page compositions and the package components, with `globals.css` giving every elevated surface its tone.
 - **Nadia.** Nadia draws her own window through Hermes's `window.shell` area, inside Hermes's app, which owns Tailwind and its own surface layering. Nadia's theme paints Hermes's roles with the shared `semantic` roles and core radii, and imports `@nadicodeai/ui/components.css` with the design system's host stylesheet, so the package components render with the same recipes and glass. The window follows the operating system's material where the system composites it. Hermes answers reduced motion by cutting every transition and animation; Nadia's stylesheet gives her own parts, the package overlays, the entry screen and the waiting line, the reduced-motion policy in "Motion" back.
-  Her conversation is one centred column of `56rem` holding her replies, the person's messages and the chat bar: her reply is plain text across the column, only the person's message is a bubble, grey (`{colors.canvas-soft-2}`) at the `raised` height in both modes, at the column's trailing edge, and the chat bar floats over the messages as the lightest step, in glass. The selected Agent row carries the sidebar's selected fill, as the Agents list draws it.
+  Her conversation is one centred column of `56rem` holding her replies, the person's messages and the chat bar: her reply is plain text across the column, only the person's message is a bubble, grey (`{colors.canvas-soft-2}`) at the `raised` height in both modes, at the column's trailing edge, and the chat bar floats over the messages in glass ("Elevation & Depth"). The selected Agent row carries the sidebar's selected fill, as the Agents list draws it.
 - **Alveare.** The desktop keeps Buzz's components and layout, styled through an adapter as Nadia styles Hermes: Buzz's colour roles read the shared `semantic` roles, tokens only and never a copied value, every text takes a type role, and Buzz's shared components take the package's geometry, states, focus and motion, over the design system's host stylesheet and `@nadicodeai/ui/components.css`. For the four jobs the products share, Alveare mounts the package's own component in place of Buzz's: every empty state is `EmptyState`, the account menu is `AccountMenu`, a status is `StatusBadge`, and the three dots are `ActionMenu`. Agents appear as their orbs, and a person never reads "Buzz". Ruled by the owner on 14 October 2026.
 
 ## Do's and Don'ts
 
 - Do keep the brand still: only Agents, the product at work and the website's shader objects move. Don't animate sections, pictures or scrolling, apart from the bounded homepage figure response and a first use's one arrival in Motion.
 - Do use the identity hues at full strength in the places "Colour as stage" lists, with the text pole that clears AA. Don't tint them, grade them, or paint a control, chrome or a status with them.
-- Do choose a surface's height by its physical role, and let its recipe show it: shadows in light, a top highlight and an outer hairline on black in dark. Don't add a border, ring or second shadow to an elevated surface.
-- Do put glass on floating chrome over content that scrolls or moves under it. Don't make content glass, or put glass over a plain ground.
+- Do choose a surface's height by its physical role, and let its recipe show it. Don't add a border, ring, second shadow or grey fill to an elevated surface.
+- Do put glass only where content scrolls or moves under it. Don't make content, a menu, a popover, a toast or a dialog glass, or put glass over a plain page.
 - Do show authentic captures or real-component scenes as "Product views on the website" specifies, with provenance recorded in the repository. Don't use device frames or invented interfaces.
 - Do give each thing the corner its role takes on the scale ("Shapes"). Don't choose a corner at the call site: a raised card, like any medium or large surface, takes the larger corner with its material.
 - Do give every line one owner, and draw focus only with the focus outline.
@@ -1296,7 +1300,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 
 ## Token extension
 
-The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values), `core.elevation` (four recipes per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
+The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values, a `dark-` value beside one that differs in dark), `core.elevation` (the four heights and the glass edge, per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
 
 ```json design-tokens
 {
@@ -1304,11 +1308,14 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
     "material": {
       "$type": "number",
       "scrim-opacity": {
-        "$value": 0.5
+        "$value": 0.8
       },
-      "glass-opacity": {
+      "dark-scrim-opacity": {
         "$value": 0.6
       },
+      "glass-opacity": {
+        "$value": 0.72
+      },
       "glass-saturation": {
         "$value": 1.8
       },
@@ -1358,7 +1365,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 1,
+                "value": 2,
                 "unit": "px"
               },
               "blur": {
@@ -1376,34 +1383,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.05
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 2,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 8,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -2,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.06
+                "alpha": 0.04
               }
             }
           ]
@@ -1443,7 +1423,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 1,
+                "value": 2,
                 "unit": "px"
               },
               "blur": {
@@ -1461,7 +1441,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.06
+                "alpha": 0.04
               }
             },
             {
@@ -1470,11 +1450,11 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 6,
+                "value": 8,
                 "unit": "px"
               },
               "blur": {
-                "value": 12,
+                "value": 16,
                 "unit": "px"
               },
               "spread": {
@@ -1490,33 +1470,6 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 ],
                 "alpha": 0.08
               }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
-                "value": 16,
-                "unit": "px"
-              },
-              "blur": {
-                "value": 32,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -8,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.1
-              }
             }
           ]
         },
@@ -1555,11 +1508,11 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 2,
+                "value": 1,
                 "unit": "px"
               },
               "blur": {
-                "value": 4,
+                "value": 1,
                 "unit": "px"
               },
               "spread": {
@@ -1573,7 +1526,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.06
+                "alpha": 0.02
               }
             },
             {
@@ -1582,15 +1535,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 12,
+                "value": 4,
                 "unit": "px"
               },
               "blur": {
-                "value": 24,
+                "value": 8,
                 "unit": "px"
               },
               "spread": {
-                "value": -6,
+                "value": -4,
                 "unit": "px"
               },
               "color": {
@@ -1600,7 +1553,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.12
+                "alpha": 0.06
               }
             },
             {
@@ -1609,15 +1562,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 32,
+                "value": 16,
                 "unit": "px"
               },
               "blur": {
-                "value": 64,
+                "value": 32,
                 "unit": "px"
               },
               "spread": {
-                "value": -16,
+                "value": -8,
                 "unit": "px"
               },
               "color": {
@@ -1627,7 +1580,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.16
+                "alpha": 0.1
               }
             }
           ]
@@ -1667,40 +1620,13 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 2,
+                "value": 8,
                 "unit": "px"
               },
               "blur": {
-                "value": 4,
-                "unit": "px"
-              },
-              "spread": {
-                "value": 0,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.06
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
                 "value": 24,
                 "unit": "px"
               },
-              "blur": {
-                "value": 48,
-                "unit": "px"
-              },
               "spread": {
                 "value": -12,
                 "unit": "px"
@@ -1712,7 +1638,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.18
+                "alpha": 0.12
               }
             },
             {
@@ -1721,15 +1647,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 64,
+                "value": 32,
                 "unit": "px"
               },
               "blur": {
-                "value": 128,
+                "value": 72,
                 "unit": "px"
               },
               "spread": {
-                "value": -32,
+                "value": -12,
                 "unit": "px"
               },
               "color": {
@@ -1739,7 +1665,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.26
+                "alpha": 0.12
               }
             }
           ]
@@ -1826,7 +1752,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.07
+                "alpha": 0.08
               }
             },
             {
@@ -1835,15 +1761,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 2,
+                "value": 4,
                 "unit": "px"
               },
               "blur": {
-                "value": 4,
+                "value": 8,
                 "unit": "px"
               },
               "spread": {
-                "value": 0,
+                "value": -4,
                 "unit": "px"
               },
               "color": {
@@ -1862,42 +1788,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 12,
+                "value": 16,
                 "unit": "px"
               },
               "blur": {
-                "value": 24,
-                "unit": "px"
-              },
-              "spread": {
-                "value": -6,
-                "unit": "px"
-              },
-              "color": {
-                "colorSpace": "srgb",
-                "components": [
-                  0,
-                  0,
-                  0
-                ],
-                "alpha": 0.12
-              }
-            },
-            {
-              "offsetX": {
-                "value": 0,
-                "unit": "px"
-              },
-              "offsetY": {
                 "value": 32,
                 "unit": "px"
               },
-              "blur": {
-                "value": 64,
-                "unit": "px"
-              },
               "spread": {
-                "value": -16,
+                "value": -8,
                 "unit": "px"
               },
               "color": {
@@ -1907,7 +1806,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.16
+                "alpha": 0.08
               }
             }
           ]
@@ -1922,7 +1821,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 1,
+                "value": 0,
                 "unit": "px"
               },
               "blur": {
@@ -1930,7 +1829,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "spread": {
-                "value": 0,
+                "value": 1,
                 "unit": "px"
               },
               "color": {
@@ -1940,9 +1839,8 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.05
-              },
-              "inset": true
+                "alpha": 0.145
+              }
             },
             {
               "offsetX": {
@@ -1958,17 +1856,17 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "spread": {
-                "value": 1,
+                "value": 2,
                 "unit": "px"
               },
               "color": {
                 "colorSpace": "srgb",
                 "components": [
-                  1,
-                  1,
-                  1
+                  0,
+                  0,
+                  0
                 ],
-                "alpha": 0.08
+                "alpha": 1
               }
             },
             {
@@ -1995,7 +1893,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.6
+                "alpha": 0.5
               }
             }
           ]
@@ -2026,7 +1924,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.07
+                "alpha": 0.06
               },
               "inset": true
             },
@@ -2054,7 +1952,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.1
+                "alpha": 0.16
               }
             },
             {
@@ -2063,11 +1961,38 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 16,
+                "value": 0,
                 "unit": "px"
               },
               "blur": {
-                "value": 32,
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 2,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 12,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 24,
                 "unit": "px"
               },
               "spread": {
@@ -2081,7 +2006,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.6
+                "alpha": 0.8
               }
             }
           ]
@@ -2112,7 +2037,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.09
+                "alpha": 0.08
               },
               "inset": true
             },
@@ -2140,7 +2065,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.12
+                "alpha": 0.16
               }
             },
             {
@@ -2149,15 +2074,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 32,
+                "value": 0,
                 "unit": "px"
               },
               "blur": {
-                "value": 64,
+                "value": 0,
                 "unit": "px"
               },
               "spread": {
-                "value": -16,
+                "value": 2,
                 "unit": "px"
               },
               "color": {
@@ -2167,7 +2092,34 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.7
+                "alpha": 1
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -12,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 0.9
               }
             }
           ]
@@ -2198,7 +2150,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.11
+                "alpha": 0.1
               },
               "inset": true
             },
@@ -2226,7 +2178,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.14
+                "alpha": 0.18
               }
             },
             {
@@ -2235,15 +2187,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 64,
+                "value": 0,
                 "unit": "px"
               },
               "blur": {
-                "value": 128,
+                "value": 0,
                 "unit": "px"
               },
               "spread": {
-                "value": -32,
+                "value": 2,
                 "unit": "px"
               },
               "color": {
@@ -2253,7 +2205,34 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.8
+                "alpha": 1
+              }
+            },
+            {
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              },
+              "color": {
+                "colorSpace": "srgb",
+                "components": [
+                  0,
+                  0,
+                  0
+                ],
+                "alpha": 1
               }
             }
           ]
@@ -2284,7 +2263,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.12
+                "alpha": 0.1
               },
               "inset": true
             },
@@ -2312,7 +2291,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   1,
                   1
                 ],
-                "alpha": 0.12
+                "alpha": 0.14
               }
             },
             {
@@ -2321,15 +2300,15 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                 "unit": "px"
               },
               "offsetY": {
-                "value": 32,
+                "value": 16,
                 "unit": "px"
               },
               "blur": {
-                "value": 64,
+                "value": 32,
                 "unit": "px"
               },
               "spread": {
-                "value": -16,
+                "value": -12,
                 "unit": "px"
               },
               "color": {
@@ -2339,7 +2318,7 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
                   0,
                   0
                 ],
-                "alpha": 0.7
+                "alpha": 0.8
               }
             }
           ]