@nadicodeai/design-system 12.1.51 → 12.1.53

package/DESIGN.md

@@ -235,7 +235,7 @@ nadicode puts AI Agents to work inside small and mid-sized companies. Its sites
 - **Colour as stage.** The five identity hues are full-strength grounds for sections, stages behind product views and glass, and the colour of Agents. They carry the brand; they never decorate a control.
 - **Real depth.** Surfaces sit at four heights. In light, shadow shows the height; in dark, tone shows it. Glass floats over colour and moving Agents.
 
-The brand is still: only Agents move on their own ("Motion").
+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").
 
 One foundation serves four registers. The foundation is every value in this file. A register is one product's way of applying it: the website, the Portal, the Nadia desktop app and the Alveare desktop app ("Registers"). A register adds rules and chooses which values it uses; it never redefines a value or mints one. A value one register needs is authored here under `register.<name>`, and a value two registers share moves to `core`.
 
@@ -256,12 +256,13 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
 
 The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has one job: the first stripe of Nadia's ribbon.
 
-The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places:
+The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places. The one exception is the website's shader objects, each the material of one object and never a section's ground: Nadia's ribbon behind a page's hero, a twisting band of fine lines in her four stripes that crowd into solid colour where it turns edge-on; the threads she holds, a fan of lines in her stripes from her orb to her colleagues, on black; Alveare's hive, cells that light in its hues as the work passes; and the company card's holographic foil ("Company card"). Stripes and cells stay pure bands of their hues, never a colour between two of them. Ruled by the founder on 27 September 2026: "shaders are not backgrounds all over the place".
 
-- **Section grounds on the website.** A section may take one identity hue as its whole ground. Colour sections alternate with white, soft and black ones, and two neighbouring sections never share a ground.
-- **Stages.** The ground behind a floating product view, and the colour a glass surface shows through ("Elevation & Depth").
+- **Section grounds on the website.** A section's ground is white, soft or black, and two neighbouring sections never share one; colour lives in the pictures, the objects, the Agents and the shader objects, never as a section's ground.
+- **Glass.** The colour a glass surface shows through ("Elevation & Depth").
 - **Accents on the website.** A 2 px rule that marks one item of a set, one hue per item.
 - **Agents.** The orbs ("Agent orbs").
+- **Objects.** The saturated pieces of the art direction's objects, one per benefit ("Iconography").
 - **The logo.** The dot of the wordmark and the icon tile ("Brand media authority").
 - **Imagery.** Art direction reads these tokens and keeps no private palette.
 
@@ -330,6 +331,10 @@ Geist and Geist Mono are the two families. The twelve tokens are named by role,
 
 A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens through the `nc-type-*` classes; product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
 
+### The website's text
+
+The website keeps one token per role on every page: a hero's title `{typography.display-lg}` (`{typography.display-md}` under 640 px), a section's title `{typography.display-md}` (`{typography.heading-lg}` under 768 px), a lead `{typography.body-lg}` at a measure of 60 characters, a card's or a tour stop's title `{typography.heading-md}`, an item's title `{typography.heading-sm}` and its words `{typography.body-md}`, and a product view's caption `{typography.label-mono}`. A section's words start at the column's edge; only a page's hero and its showcase centre them. A page's calls to action are the large button, in its hero and its closing band; every other way onward is a link with an arrow.
+
 ### Entry screens
 
 Installation, startup, sign-in and recovery use `{typography.body-md}` for their
@@ -433,7 +438,7 @@ Every surface and control takes `{rounded.md}` (6 px): cards, tables, menus, pop
 
 UI text stays static: no shimmer, typing, scrambling, pulsing or animated dots. Status labels use sentence case without trailing ellipses; complete instructional sentences keep their punctuation.
 
-Only Agents move on their own. The interface answers a person's action, briefly, and stops: motion follows the action, grows from the element that was pressed, and settles, within 300 ms; sheets and drawers that follow the pointer take their own durations. Keyboard actions and anything used a hundred times a day are instant. While a person waits for something they asked for, one waiting line moves and nothing else ("System activity"). Nothing on the website moves but Agents and the product at work: no parallax, scroll reveal, marquee or shimmer.
+Only Agents move on their own. The interface answers a person's action, briefly, and stops: motion follows the action, grows from the element that was pressed, and settles, within 300 ms; sheets and drawers that follow the pointer take their own durations. Keyboard actions and anything used a hundred times a day are instant. While a person waits for something they asked for, one waiting line moves and nothing else ("System activity"). On the website three things move: Agents, the product at work, and the shader objects. A product scene runs the real components through their states in beats while it is half in view, rests on the finished work, loops, stops off-screen, and holds the finished work under reduced motion; a part of a scene arrives with `.nc-arrive`: it holds its place from the start and comes into focus there on the message-arrival timing, so a playing scene never shifts the page. Nadia's ribbon draws itself in once along its length and then sways slowly; the threads, the hive and the card's foil move at their own slow pace; each stops off-screen and holds one frame under reduced motion. Words never move, and there is no parallax, scroll reveal of text, marquee or shimmer. Ruled by the founder on 26 September 2026: a Stripe-grade product site, with shaders adjusted to the art direction and the products shown working.
 
 The default transition in every product is `confirm`, 180 ms, `out-strong`. Under reduced motion, movement stops and paint continues: transforms and keyframed movement go to their end state, and opacity and colour transitions stay, because a fade or a colour change is the state change itself. A component never answers reduced motion by turning every transition off.
 
@@ -562,6 +567,8 @@ Every product draws Lucide's shapes, unedited, in the house render: a 1.5 px lin
 
 Three icons are the house's own, drawn on Lucide's grid in the same render: `arch` for the company and its doors, `approvals`, the arch with a check, for work waiting on a person, and `agent`, the orb seen face-on with the Agent as the dot on its path. They name those three things wherever an icon does, and no Lucide glyph stands in for them. An icon beside text is decorative; an icon-only control carries an accessible name.
 
+A benefit of nadicode, and each piece of office work Nadia arrives ready for, is drawn on the website by its object: one transparent object of the art direction, something old from Italy with one piece of today in it, in two identity hues, in the family of the Portal's email pictures (the key ring with its security key). The objects are a library (`brand/visual-design/images/website-objects/`, briefed in `brand/refs/briefs/website-benefits.json`), and the same object stands for the same benefit wherever the brand names it: the website, the docs, a deck, a post. On a page they stand at one size, above their title, and never move. Lucide glyphs stay the products' own icons and never stand for a benefit on the website.
+
 ## Brand media authority
 
 The company is **nadicode**, lowercase. Its logo has three forms:

package/dist/css/index.css

@@ -607,6 +607,37 @@
   .nc-section-step-lead {
     padding-block-start: var(--nc-section-step);
   }
+  .nc-product-scale {
+    --nc-product-width: 1100;
+    --nc-product-height: 640;
+    --nc-product-scale-min: 0.56;
+    --nc-product-min-width: 1100;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    height: clamp(calc(var(--nc-product-height) * var(--nc-product-scale-min) * 1px), calc(100cqw * var(--nc-product-height) / var(--nc-product-width)), calc(var(--nc-product-height) * 1px));
+  }
+  .nc-product-scale[data-reflow] {
+    height: min(calc(var(--nc-product-height) * 1px), max(calc(100cqw * var(--nc-product-height) / var(--nc-product-width)), min(calc(var(--nc-product-height) * 0.85px), calc(100cqw * var(--nc-product-height) / var(--nc-product-min-width)))));
+  }
+  .nc-product-scale-view {
+    --nc-product-scale: 1;
+    --nc-product-left: 0px;
+    --nc-product-layout: var(--nc-product-width);
+    container-type: inline-size;
+    position: absolute;
+    top: 0;
+    left: var(--nc-product-left);
+    width: calc(var(--nc-product-layout) * 1px);
+    height: calc(var(--nc-product-height) * 1px);
+    transform-origin: top left;
+    transform: scale(var(--nc-product-scale));
+  }
+  @media (min-width: 1024px) {
+    .nc-bleed-end {
+      margin-inline-end: calc(-1 * ((100vw - min(100vw, var(--nc-content-max) + (var(--nc-gutter) * 2))) / 2 + var(--nc-gutter)));
+    }
+  }
   .nc-type-display-xl {
     font-family: var(--nc-type-display-xl-font-family);
     font-size: var(--nc-type-display-xl-font-size);
@@ -740,6 +771,17 @@
       animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
     }
   }
+  .nc-arrive {
+    opacity: 0;
+    filter: blur(2px);
+    transition-property: opacity, filter;
+    transition-duration: var(--nc-duration-msg-in);
+    transition-timing-function: var(--nc-ease-out-strong);
+  }
+  .nc-arrive[data-shown] {
+    opacity: 1;
+    filter: none;
+  }
   @media (prefers-reduced-motion: reduce) {
     .nc-anim-msg-in {
       animation: none;
@@ -749,6 +791,10 @@
     .nc-transition-transform {
       transition: none;
     }
+    .nc-arrive {
+      filter: none;
+      transition-property: opacity;
+    }
   }
 }
 

package/package.json

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