@nurix/etna 0.18.19 → 0.18.21

package/data/harnesses/code/skills/design/data/design-md/library/kraken.md

@@ -0,0 +1,156 @@
+---
+schema: design-md/v1
+product: Kraken
+provenance: library
+sourced: 2026-07-04
+---
+
+# Kraken — the operator reading
+
+The operator reading of Kraken's brand — a clean, trustworthy crypto-exchange look built on a
+commanding purple. Kraken's own surfaces are marketing-editorial: a Kraken-Brand display face at
+hero scale (48/36/28px, weight 700, hard negative tracking) over a pure-white canvas. This entry
+keeps what survives at operator scale — the white canvas, the single commanding Kraken Purple
+accent, the cool near-black ink, the cool blue-gray neutral field, the firm 12px rounded-not-pill
+geometry, the whisper-level shadows, the negative-tracking type voice — and leaves the hero-scale
+display behind. Purple reads commanding in marketing; at operator scale it stays the one reserved
+accent.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat: hierarchy comes from cool hairline `border`, type weight, and
+color contrast — never decorative shadow (the brand's shadows are whisper-level). A single accent —
+Kraken Purple `primary` (`#7132f5`) — commands the one action that matters, active nav, and the inline
+brand link. Ink is a cool near-black `foreground` (`#101114`) on a pure-white `background` (`#ffffff`);
+the neutral field is a cool blue-gray ladder (`#686b82` → `#9497a9` → `#dedee5`) that reads
+engineered, not flatly warm. The geometry is firmly rounded — 12px controls, never a pill. Density is
+`standard`; the anchor surface is a white canvas beside a faintly cool `sidebar`.
+
+## 2 Color Roles
+
+Light values. One accent: `primary` is the only chromatic hue that carries brand meaning; the
+positive/negative trading hues speak status only.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | pure white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
+| `foreground` | cool near-black `#101114` | all primary ink and headings |
+| `muted` | faint cool gray `#f2f2f5` | hover rows, subtle fills, quiet bands |
+| `secondary` | soft cool gray `#f6f6f8` | secondary button fill, one step off the canvas |
+| `muted-foreground` | cool gray `#686b82` | labels, captions, secondary running text (dims to silver-blue `#9497a9` for the quietest meta) |
+| `border` / `input` | cool hairline `#dedee5` | every separator, grid line, and field edge — the highest-frequency token |
+| `primary` | Kraken Purple `#7132f5` (dark `#5741d8`, deep `#5b1ecf`) | the one primary action; active nav; the inline brand link — reserved |
+| `accent` | purple wash `#ebe5fe` | selected/hovered rows and nav — a light wash of `primary`, on-accent surfaces only |
+| `ring` | `primary` purple | the focus outline — inputs focus to a 2px Kraken Purple edge |
+| `destructive` | sell/down red `#cf2e3f` | destructive actions, error state, and down-moves |
+| `success` | positive green `#149e61` | success status and up-moves (badge text darkens to `#026b3f`) |
+| `warning` | amber `#e08c0a` | caution status only — never a chrome fill |
+
+Kraken Purple has documented dark (`#5741d8`) and deep (`#5b1ecf`) variants for outlined edges and
+press states, and a 16%-alpha subtle fill — but it stays the single scarce accent (§7); the trading
+up/down hues live only in figures and status.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is IBM Plex Sans — the corpus's own documented fallback for the
+proprietary Kraken-Brand/Kraken-Product pair; the single sans serves UI, body, headings, and labels,
+with heading weight and the negative tracking carrying the display voice. `font-mono` is IBM Plex Mono
+— the fintech number voice for asset prices, percent changes, IDs, and timestamps. Numeric columns
+render `tabular-nums` so figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, uppercase |
+| number | table figures, prices | 14px / 1.4 · 500 | `font-mono`, `tabular-nums` |
+
+The corpus's signature — the Kraken-Brand display at 48/36/28px, weight 700, with `-1px` / `-0.5px`
+tracking — is a marketing hero and stays behind; at operator heading scale the weight steps to
+`font-weight-strong` (600) while the negative tracking carries.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled Kraken Purple on `primary-foreground`, `radius` (12px), no pill.
+  Outlined: `background` fill, 1px `primary`-dark `border`, `primary` text. Subtle: the 16% purple
+  wash (`accent`) with `primary` text. Secondary: `secondary` gray fill, `foreground`.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
+  2px Kraken Purple edge, no glow.
+- **Card** — `card` surface on a 1px `border`, `radius`; shadow only when a card must lift off the
+  canvas, and then only the whisper tier.
+- **Table / asset row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection
+  tints `accent`; price/amount cells take `font-mono` + `tabular-nums`; direction cells take `success`
+  (up) / `destructive` (down) as text color, never a fill.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — hairline `border`, `muted` / status fill at low alpha, uppercase caption; status badges
+  take `success` / `warning` / `destructive`, never `primary` (corpus badges: success green on a 16%
+  wash, neutral gray on a 12% wash).
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the corpus's odd
+marketing steps — 3/5/6/13/15/25 — stay behind). Shell dimensions map one-to-one to the layout
+primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
+panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
+tables full-width. Density is governed globally by `density-tier` and stepped per archetype by the
+surface catalog — never by absolute overrides; the layout reads clean and calm, not cramped.
+
+## 6 Depth
+
+Flat, hairline-first. Hierarchy comes from the surface ladder and cool hairlines, not shadow:
+
+- **0 — canvas** `background` (`#ffffff`), no border.
+- **1 — panel / card** `card` on a 1px `border`; rank reads by hairline and position, not brightness.
+  The whisper micro shadow (`rgba(16,24,40,0.04) 0 1px 4px`) lifts a card only when it must.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the soft
+  subtle tier (`rgba(0,0,0,0.03) 0 4px 24px`); no level stacks a heavier shadow to signal rank.
+
+Focus is a 2px `ring` (Kraken Purple) outline, never a glow, on every interactive element; three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` (Kraken Purple) for the single most important action, active nav, and inline
+  brand links. Commanding on marketing, scarce on an operator surface.
+- **Do** keep controls at 12px `radius` — firmly rounded, never a pill; badges and chips may step down
+  to 6–8px.
+- **Do** carry every figure in `font-mono` with `tabular-nums`; direction rides `success` /
+  `destructive` as text color, never a fill.
+- **Don't** introduce a second brand accent, and never reach for a purple outside the defined scale
+  (`#7132f5` / `#5741d8` / `#5b1ecf`) — off-scale purples read off-brand.
+- **Don't** pill the primary CTA — 12px is the button ceiling; pill radius is for badges only.
+- **Don't** signal elevation with heavy or stacked drop shadows — the system has two whisper tiers and
+  nothing louder.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; asset rows stack ticker over price |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Anchor on the pure-white canvas; accent only the primary action, active nav, and inline links in
+  Kraken Purple. If two things want the purple, one is not primary.
+- Keep controls at 12px `radius` — firmly rounded, never a pill. Badges and chips step down to 6–8px.
+- Every numeric column is `tabular-nums` and every price / ID / timestamp is `font-mono`; direction and
+  status ride `success` / `destructive` as text color, never a fill.
+- Stay flat — cool hairline and the surface ladder before any shadow; reach past the two whisper tiers
+  only for a true overlay. Emphasise by weight, not size; carry the negative `heading-tracking` on
+  headings.
+- Leave the marketing skin behind: the Kraken-Brand hero display at 48/36/28px weight 700 stays behind.
+  What carries: the palette, its cool temperature, the single commanding purple, the firm 12px rounded
+  geometry, the whisper-shadow depth, and the tabular fintech number voice.

package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md

@@ -0,0 +1,122 @@
+---
+schema: design-md/v1
+product: Linear
+provenance: library
+sourced: 2026-07-04
+---
+
+# Linear — near-black product-craft operator design
+
+## 1 Visual Theme
+
+Linear is engineered, quiet, dense, luxurious-by-restraint, and **categorically dark** — this entry
+inverts the operator light-default: dark is the signature theme a tool wears, and a valued light daytime
+mode ships alongside. Flat: rank is a surface ladder (canvas → card → muted → popover) and hairline
+`border`, never drop shadow — Linear resists shadow almost entirely. The single accent, lavender-blue
+`primary` `#5e6ad2`, appears only on the brand mark, the one primary action, the focus `ring`, and link
+emphasis. The neutral ramp is a cool blue-gray so the UI reads engineered, not flatly gray. Anchor
+surface: the near-black canvas `#010102` (a true black warmed by a faint blue tint) with charcoal panels
+a hairline above it. Density is `dense` — tight rows, minimal chrome, technical.
+
+## 2 Color Roles
+
+The signature is dark; both themes are valued (light listed first). One chromatic accent — `primary`
+is the only hue that carries meaning; status hues speak only status.
+
+| Role | Light | Dark (signature) | Allowed where |
+| --- | --- | --- | --- |
+| `background` / `card` / `popover` | `#ffffff` | canvas `#010102`, card `#0f1011`, popover `#18191a` | page, panels, overlays |
+| `foreground` | `#0d0e10` | ink `#f7f8f8` | all primary ink |
+| `muted` / `secondary` | `#f4f5f8` | `#141516` / `#0f1011` | hover fills, secondary buttons |
+| `muted-foreground` | `#6b7280` | `#8a8f98` | labels, captions, secondary text |
+| `border` / `input` | `#e6e7eb` / `#d9dbe0` | `#23252a` / `#34343a` | separators, grid lines, field edges |
+| `primary` | `#5e6ad2` | `#5e6ad2` | primary action; brand mark; active nav; link emphasis |
+| `accent` | `#eceefb` | `#1c1d2b` | selected/hovered rows — a faint lavender wash |
+| `ring` | `#5e69d1` | `#5e69d1` | the lavender focus outline, keyboard-first |
+| `destructive` | `#eb5757` | `#eb5757` | destructive actions and error state only |
+| `success` / `warning` | `#27a644` / `#f2994a` | same | status only, never chrome |
+
+Lavender hover is `#828fff`, pressed/focus `#5e69d1`; marketing's deeper ladder steps stay behind.
+
+## 3 Typography
+
+One sans, one mono, single continuous voice. The free operator substitute for Linear's proprietary cut
+is **Inter** (500/600/700), fallback `SF Pro Display, -apple-system, system-ui`; `font-mono` is Geist
+Mono (JetBrains Mono viable) for IDs, codes, timestamps, log lines. Numeric columns render
+`tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `-0.01em` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, dense table | 13px / 1.4 | `font-weight-normal` |
+| eyebrow | uppercase taxonomy | 12px / 1.3 | `font-weight-strong`, `+0.4px` positive (Linear's signature contrast) |
+| mono | IDs, codes, log lines | 13px / 1.5 | `font-weight-normal` |
+
+Pair display 600 with body 400 — Linear resists 700+. Bump weight to emphasize, never size.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` 8px, no pill, hover lifts
+  to `#828fff`. Secondary: `secondary` fill, 1px `border`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `input` edge, `radius`; focus draws the lavender `ring` at 2px, no
+  glow.
+- **Card** — `card` a hairline above canvas, 1px `border`, `radius` steps to 12px for large panels;
+  shadow only when it must truly lift.
+- **Table row** — height `table-row-height` (dense); `border` grid; `muted` on hover; selection tints
+  `accent`; `tabular-nums` on numerics.
+- **Side panel** — entity detail opens beside the work (`side-panel-width` / `side-panel-width-rich`),
+  never over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase eyebrow; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base unit 4px; on-scale ramp `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (marketing's 96px section gap
+stays behind). Shell maps one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
+`sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
+`side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`, tables full-width. Density is
+`dense` globally (compact ~8px/14px button padding), stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat — rank from the surface ladder and hairlines, not shadow. **0 canvas** `background` (`#010102`
+dark / white light), no border. **1 panel** `card` a hairline above canvas on a 1px `border`, with a
+faint top-edge highlight; shadow only when it must lift. **2 overlay** `popover` / side panel / modal —
+the rare soft shadow on light, a deeper surface step on dark. Focus is a 2px lavender `ring` (never a
+glow), always visible. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** default to dark — it is Linear's identity; ship light as an equal daytime mode, not the primary.
+- **Do** reserve lavender `primary` for the brand mark, the one primary action, focus, and link
+  emphasis — nowhere else.
+- **Do** carry hierarchy with the surface ladder, hairlines, and weight; don't skip ladder steps.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps.
+- **Don't** use lavender as a background or card fill, or add a second chromatic accent.
+- **Don't** use pure `#000000` — the faint blue tint of `#010102` is intentional.
+- **Don't** pill the CTA, reach past `radius-scale`, or signal elevation with heavy shadows.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → drawer; two-pane stacks; side panel → full sheet; density holds |
+| 768 | sidebar → icon rail (`sidebar-width-collapsed`); tables scroll overflow; nav → hamburger |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use full width |
+
+## 9 Agent Prompt Guide
+
+- Wear the dark theme by default (`data-theme="dark"`); light is the opt-in daytime mode.
+- Lead every list surface with its dense table; lead every entity with its primary read, not chrome.
+- Accent only the primary action, brand mark, focus, and links — if two things want lavender, one is
+  not primary. Carry depth with the surface ladder and hairlines; past a hairline only for a true overlay.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace. Every numeric column
+  is `tabular-nums`; every ID / code / timestamp is `font-mono`; the `ring` is always visible.
+- Leave marketing behind: hero display (40–80px), the -3px display tracking, product screenshots as the
+  page protagonist, 96px section rhythm, pill toggles, the inverse-white CTA.

package/data/harnesses/code/skills/design/data/design-md/library/lovable.md

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: Lovable
+provenance: library
+sourced: 2026-07-04
+---
+
+# Lovable — warm parchment operator design
+
+An operator reading of Lovable's warm, humanist brand. This entry keeps what carries onto a dense
+internal tool — the cream-and-charcoal palette, the opacity-derived neutral ramp, the soft warm
+radius character, the humanist type voice, the flat border-over-shadow depth — and leaves the
+marketing behind: hero-scale display type, negative tracking at 48–60px, the gradient washes, the
+96–208px editorial section spacing. Light by default; a single achromatic accent (charcoal
+`primary`) does the emphasis work.
+
+## 1 Visual Theme
+
+Warm, flat, parchment operator console. The canvas is a deliberate cream (`background` `#f7f4ed`), never
+pure white — the brand's signature warmth carried onto the tool. Ink is a near-black charcoal
+(`foreground` `#1c1c1c`), organic rather than clinical. Hierarchy comes from warm hairline `border`, type
+weight, and charcoal-on-cream contrast — never heavy shadow. The one accent is achromatic: `primary` is
+charcoal itself, reserved for the single most important action. Every neutral is one hue — charcoal at
+varying opacity over cream — so the surface reads tonally unified. The anchor surface is a cream canvas
+beside a faintly deeper cream `sidebar`. Density is `standard`.
+
+## 2 Color Roles
+
+Light values first. One accent — `primary` is charcoal, the only role that carries emphasis; status hues
+speak only status. Neutrals derive from `#1c1c1c` at low opacity over cream, which is why they read warm.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` | cream `#f7f4ed` | page and cards — the dominant surface; cards seat on hairlines, not a fill shift |
+| `foreground` | charcoal `#1c1c1c` | all primary ink and headings |
+| `muted` | warm tint `#eeebe5` (charcoal ~4% over cream) | hover rows, subtle fills, secondary surfaces |
+| `muted-foreground` | muted gray `#5f5f5d` | labels, captions, secondary text |
+| `border` / `input` | light cream `#eceae4` | every separator, grid line, card edge, and field edge |
+| `primary` | charcoal `#1c1c1c` | the one primary action; active nav; key interactive detail |
+| `primary-foreground` | off-white `#fcfbf8` | text/icon on charcoal fills |
+| `accent` | warm tint `#eeebe5` | selected/hovered rows and nav |
+| `ring` | ring blue `#3b82f6` | the keyboard focus outline — the one cool element, an accessibility affordance, not a brand accent |
+| `destructive` | warm red `#c0392b` | destructive actions and error state only |
+| `success` / `warning` | sage `#4f7a3f` / ochre `#c08a2d` | status signalling only, never chrome |
+
+Interactive borders may step to a stronger charcoal-40% edge (`rgba(28,28,28,0.4)`); passive containment stays `#eceae4`.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Camera Plain Variable — a humanist face with rounded terminals that
+gives the tool its warmth; the UI, body, and headings all ride it (`ui-sans-serif, system-ui` fallbacks).
+Weight range is narrow: 400 for body/UI, 600 for headings (600 is the ceiling — never 700). `font-mono`
+is derived (no brand mono documented) for IDs, codes, timestamps, and log lines. Numeric columns render
+`tabular-nums` so figures align down a column (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| caption | eyebrow, metadata | 12px / 1.3 | `font-weight-normal` |
+
+The marketing hero ramp (36–60px, weight 480/600, tracking −0.9px to −1.5px) stays behind; the operator
+ramp tops out at 24px. Bump weight for emphasis; never change size to emphasize.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled charcoal `primary` on `primary-foreground`, `radius`, no pill. The
+  signature inset shadow (a white highlight line above, a dark hairline and soft drop below) rides
+  `shadow-intensity` for a pressed-into-surface feel. Secondary: `secondary` fill, `border`, `foreground`.
+  Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` outline.
+- **Card** — `card` surface, 1px `border`, `radius` at the card step; no shadow by default — the warm
+  hairline is the containment mechanism; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
+  beside the work, not over it (floor P3).
+- **Badge** — hairline `border`, `muted`/status fill; status badges take `success` / `warning` /
+  `destructive`, never `primary`. The full-pill `9999px` radius is reserved for icon toggles only.
+
+## 5 Layout
+
+Base spacing unit 8px; the operator ramp is `4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80` (the editorial
+96–208px expanses stay behind). Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
+`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables
+full-width. Density is governed globally by `density-tier` (rewriting the scale through `density-gap`)
+and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat and shallow. Hierarchy comes from the warm hairline against the cream surface, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `#eceae4` border; no shadow — warm borders do the containment.
+- **2 — overlay** `popover` / side panel / modal lifts a half-step to off-white and earns a single soft,
+  diffused shadow (`shadow-intensity` → `md`) — the brand's warm glow, never a sharp drop.
+
+Focus is the `ring` outline on every interactive element (floor P6); the soft warm focus shadow
+(`rgba(0,0,0,0.1) 0px 4px 12px`) is the active-state treatment. Three z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the cream `background` (`#f7f4ed`) as the foundation — never pure white; the warmth is the brand.
+- **Do** derive every neutral from charcoal at low opacity for tonal unity, not arbitrary grays.
+- **Do** reserve charcoal `primary` for the single most important action; everything else is neutral or status.
+- **Do** carry containment with the `#eceae4` hairline, not a shadow.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** introduce a saturated chromatic accent — the palette is warm-neutral; the blue `ring` is an
+  accessibility affordance, not license for a second accent.
+- **Don't** use weight 700 (600 is the ceiling), pill a rectangular button, signal elevation with heavy
+  drop shadows, or open detail/edit in a modal when the side panel fits.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane list+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+What carries from Lovable onto an operator tool, and what stays behind:
+
+- **Reach for first**: the cream `background` and charcoal `foreground`, plus the humanist Camera Plain voice — this brand is defined by warmth.
+- **One accent, achromatic**: charcoal `primary` is the emphasis (if two things want it, one is not
+  primary); derive every muted fill and border from charcoal-over-cream, never a cold gray.
+- **Flat before lifted**: warm `#eceae4` hairline before any shadow; reach past it only for a real overlay, and then only the soft diffused glow.
+- **Numbers**: every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
+- **Keyboard-first**: every workflow completes from the keyboard; the `ring` focus outline is always visible (P6).
+- **Left behind** (marketing only): hero type at 36–60px, display-scale negative tracking, the gradient washes, the 96–208px editorial spacing. Warmth comes from palette and type, not lavish gaps.

package/data/harnesses/code/skills/design/data/design-md/library/meta.md

@@ -0,0 +1,139 @@
+---
+schema: design-md/v1
+product: Meta
+provenance: library
+sourced: 2026-07-04
+---
+
+# Meta — the stark-white, cobalt-accent operator reading
+
+An operator translation of Meta's hardware-commerce design language (Quest, Ray-Ban Meta glasses).
+The merchandising theatre stays behind: the 64px Optimistic hero display, full-bleed photography,
+the dual-CTA hero, the black-pill marketing CTA, the 80/120px rhythm. What carries is the chassis
+underneath — a stark white canvas (`#ffffff`), a single saturated cobalt accent (`#0064e0`, Meta's
+own buy-now color promoted to the operator primary), a cool blue-gray neutral temperature,
+Optimistic VF's snug geometric-humanist voice, moderate rounding, and Facebook-Blue focus.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in (Meta ships no dark tokens — light is the whole thesis). Stark white
+`background` (`#ffffff`) is the identity — the brand's photography-carrying ground, kept pure-white here.
+Flat: hierarchy comes from a cool hairline `border`, type weight, and the two-layer elevation Meta
+actually uses — never a decorative shadow. A single accent, cobalt `primary` (`#0064e0`) — Meta's scarce
+commerce buy-now color — is the only chromatic hue that carries meaning. Ink is a deep cool near-black
+`foreground` (`#0a1317`) leaning faintly blue, so the neutrals read cool, not warm-gray. The anchor
+surface is a white content canvas beside a faintly cool-tinted `sidebar`. Density is `standard` — Meta's
+marketing breathes, but its commerce configurator runs dense, and the operator reading takes its pace.
+
+## 2 Color Roles
+
+Light values first (hex, the corpus's native format). One accent — `primary` is the only chromatic hue that carries meaning; the status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | stark white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by border not brightness |
+| `foreground` | deep cool ink `#0a1317` | all primary ink and headlines |
+| `muted` / `secondary` | soft cool cloud `#f1f4f7` / `#e9edf2` | hover rows, subtle fills, secondary button fill |
+| `muted-foreground` | steel blue-gray `#5d6c7b` | labels, captions, secondary text |
+| `border` | soft hairline `#dee3e9` | every separator, grid line, and card edge |
+| `input` | firmer control gray `#ced0d4` | field edges — one notch firmer than the divider hairline |
+| `primary` | cobalt `#0064e0` | the one primary action; active nav; the key interactive detail |
+| `accent` | cobalt tint `#e6f0fc` | selected / hovered rows and nav — selection tints cobalt, never fills it |
+| `ring` | Facebook Blue `#1876f2` | the 2px focus outline — Meta's exact input-focus hue, one notch brighter than cobalt |
+| `destructive` | critical red `#e41e3f` | destructive actions and error state only |
+| `success` / `warning` | green `#31a24c` / amber `#f2a918` | status signalling only, never chrome |
+
+The black marketing pill (`#000000`), Oculus purple (`#a121ce`), and promo yellow (`#f7b928`) are brand graces off the operator palette: the black CTA and dual-CTA grammar stay behind (§7), purple lives only in charts, and promo yellow fails as status on white (status takes the amber `warning`).
+
+## 3 Typography
+
+One display sans, one derived mono. `font-sans` is Optimistic VF — Meta's variable face — with the
+corpus's Montserrat fallback and Inter added for dense-body legibility; UI, body, and headings all ride
+it, weight and Optimistic's `ss01`/`ss02` sets carrying the humanist voice, not a second family. The
+64/48px hero and display sizes stay behind; the operator ramp keeps the face at working sizes. Optimistic
+is drawn snug — body carries a `-0.14` to `-0.16px` negative tracking, reflected in the ramp as a light
+`-0.01em`. `font-mono` is a derived Roboto Mono for IDs, codes, timestamps; numeric columns render `tabular-nums`.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 28px / 1.21 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 18px / 1.44 | `font-weight-strong` · 0 |
+| body | UI + prose | 16px / 1.5 | `font-weight-normal` · `-0.01em` |
+| small | labels, meta, dense table | 14px / 1.43 | `font-weight-normal` · `-0.01em` |
+| caption | uppercase eyebrow | 12px / 1.33 | `font-weight-strong`, `+0.02em`, uppercase |
+| code | IDs, codes, timestamps | 13px / 1.5 | `font-weight-normal` |
+
+Body runs at 16px, not 14 — Meta's `body-md` reading pace; emphasise by weight, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled cobalt on `primary-foreground`, `radius` (8px rect), no pill; press
+  deepens the cobalt. Secondary: `secondary` fill, 1px `border`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (the firmer `input` gray), `radius`; focus draws the `ring`
+  in Facebook Blue at 2px, no glow.
+- **Card** — white `card` on a 1px `border`; panels read by hairline, not brightness (nothing sits
+  lighter than the canvas); shadow only when lifted; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it.
+- **Badge** — pill radius (`9999`, the one place Meta's signature pill survives), `muted`/status fill,
+  uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px with 8px as the dominant step (Meta's grid); the on-scale ramp is `4 · 8 · 12 · 16
+· 24 · 32 · 48 · 64` — the 80/120px marketing rhythm stays behind. Shell dimensions map one-to-one to the
+layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`,
+side panel `side-panel-width` / `side-panel-width-rich` (the corpus PDP purchase rail informs the width),
+modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Density is governed globally by
+`density-tier`, stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat, with Meta's exact two-layer elevation:
+
+- **0 — canvas** `background` (`#ffffff`), no border.
+- **1 — panel / card** white `card` on a 1px `border`; the hairline is the divider, not a shadow. A faint
+  `sm` lift only when a control must read as raised (Meta's pill-tab-active indicator).
+- **2 — overlay** `popover` / side panel / modal / sticky rail — the one place `shadow-intensity` earns a
+  soft `md` shadow (Meta's `rgba(20,22,26,0.3) 0 1px 4px`). Rank is border and position, never a heavier shadow.
+
+Focus is a 2px Facebook-Blue `ring` outline (never a glow), on every interactive element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the stark white canvas — Meta's whole thesis; cards differentiate by hairline, not tint.
+- **Do** reserve cobalt `primary` for the single most important action; its weight is meaningful because scarce.
+- **Do** keep the neutrals cool — ink and grays lean faintly blue (`#0a1317`, `#5d6c7b`), never warm-gray.
+- **Do** apply `tabular-nums` to numeric columns, `font-mono` to IDs/codes/timestamps, and set the type snug.
+- **Don't** promote the black marketing pill or dual-CTA hero grammar — one cobalt accent, not a two-CTA pair.
+- **Don't** pill every control — the 100px pill is a marketing signal; controls take the 8px `radius` rect, pill (`9999`) for badges.
+- **Don't** promote a second chromatic accent — Oculus purple stays in charts, promo yellow stays behind.
+- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the side panel fits.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+- **Carries:** the stark white `#ffffff` canvas; the single cobalt `#0064e0` accent; the cool blue-gray
+  neutral temperature; Optimistic VF's geometric-humanist voice (Montserrat / Inter fallback, `ss01`+`ss02`
+  on headings) with snug tracking; the 8px control radius; the Facebook-Blue focus ring; the 16px pace.
+- **Stays behind:** the 64/48px hero and display type; full-bleed product photography; the black-pill and
+  dual-CTA hero grammar; pill-everything (100px) controls; the promo banner; the 80/120px section rhythm.
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action in cobalt. If two things want the accent, one of them is not primary.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`; keep the type snug.
+- Every workflow completes from the keyboard; the Facebook-Blue `ring` focus outline is always visible.