@nadicodeai/design-system 12.1.26 → 12.1.28

package/DESIGN.md

@@ -445,7 +445,7 @@ The default transition in every product is `confirm`, 180 ms, `out-strong`. Unde
 | `msg-in` 240 ms | A message arriving in a conversation |
 | `transition` 240 ms | Property transitions on a working surface, and the Portal's one page transition, which carries an Agent's orb from a list row into its page |
 | `drawer-swipe` 400 ms, `drawer` 450 ms | Sheets and drawers, pointer-driven and programmatic |
-| `wait` 1.6 s | The waiting line, and nothing else |
+| `wait` 1.6 s | Every waiting indicator: the waiting line on our own screens, which use nothing else, and the spinner or pulse a kept Hermes screen draws |
 
 The easings are `emphasized`, `out-strong`, `in-out-strong` and `drawer`; the waiting line alone travels at constant speed (`linear`). A CSS transition or animation takes its duration and easing from these tokens; the design system's own stylesheets are held to it by a guard.
 
@@ -502,6 +502,17 @@ Who does the work decides how it looks. An Agent's work is that Agent's orb in i
 
 One wait gets one indicator. A request waiting for a person is not a wait: queued, paused, blocked, failed and done take the status or feedback treatment. A wait is ink; info blue never marks one. Under reduced motion the waiting line breathes in opacity instead of travelling.
 
+### Failure surfaces
+
+A page that cannot show what was asked for is a picture with the words standing in it. The picture is art direction's, built around the gap, and it fills the plane behind the page in a product and stands beside the words on the website; in the gap sit a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The words keep their contrast over the picture at every width, and the picture yields to them when the viewport is too small to hold both.
+
+Two registers share that composition:
+
+- **An absence** is an address or a record that is not there. In its gap, beside the words, stands a short note signed by Nadia. The note is authored copy, not a report of anything an Agent did; it is never the instruction, which is the plain sentence and the action. Where the picture leaves a place for it, Nadia's orb turns there in ambient motion and claims no activity ("Agent orbs"); where the picture does not, the note stands alone. Nothing went wrong, so nothing takes a feedback role and no glyph stands in for the failure. Without a picture the note takes the dashed absence boundary at page scale ("Absence follows its container").
+- **A fault** is a request the product stopped. Its picture is calm and never a joke about lost work, and it carries no note and no Agent, because a stopped request is not a moment for one to perform in. Beside the words stands the evidence: the diagnostic code, the label that names it and one line saying what to do with it. The error pair marks the eyebrow.
+
+A failure inside a product's own chrome takes no picture: the picture is the plane the chrome stands on, never something inside it, so an in-chrome failure keeps the words, the note where there is one, and the dashed absence boundary. Identity hue reaches a product failure surface only through the picture and the orb. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
+
 ### Agent orbs
 
 An Agent is its orb, in every product; there is no other Agent picture. An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it is the error red. Nadia alone is her striped ribbon, the form `nadia`, azzurro, verde, the text colour and rosso along its whole length, the same at every size and in every state.
@@ -569,7 +580,7 @@ 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, black and colour grounds, alternating, with product views floating 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.** The desktop runs inside Hermes's shell, 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.
+- **Nadia.** The desktop runs inside Hermes's shell, 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.
 - **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, 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`.
 
 ## Do's and Don'ts
@@ -582,6 +593,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - Do round every surface and control at `{rounded.md}`. Don't give a higher surface a bigger corner.
 - Do give every line one owner, and draw focus only with the focus outline.
 - Do say a status with a Badge tone, a mark and a word. Don't use colour alone or a bare dot.
+- Do build a failure page around its picture's gap, with the recovery action leading in it: Nadia's note for a thing that is not there, the diagnostic code for a request that stopped. Don't apologise, and don't put a note or an Agent on a fault.
 - Do use the dotted field only on a canvas where things are arranged. Don't put it behind lists, dashboards, settings or website sections.
 - Do add a rule here before a product needs it. Don't restate a rule in another document; link to it.
 

package/package.json

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