@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,156 @@
+---
+schema: design-md/v1
+product: Framer
+provenance: library
+sourced: 2026-07-04
+---
+
+# Framer — operator surfaces on a black artboard
+
+Framer's brand is a near-pure-black marketing artboard: white display type set poster-tight, one
+confident blue used only as a signal, and vibrant gradient atmosphere tiles that show what the tool
+builds. This library entry translates that identity to operator work — a CRM, a queue, a dashboard
+in Framer's language. What carries: the dark charcoal surface ladder, white ink, the single blue
+signal, the tight-tracked Inter voice, the softly-rounded geometry. What stays behind: the
+hero-scale GT Walsheim display, the gradient spotlight cards as chrome, the pill CTA, the 5px/96px
+editorial rhythm.
+
+Framer is categorically dark. Where the operator doctrine defaults light and treats dark as opt-in,
+this brand legitimately inverts it: the base theme *is* dark, and `color-tokens.light` carries the
+dark charcoal palette (the brand ships no light mode — forcing one would discard the palette). This is
+the recorded override, not a mistake.
+
+## 1 Visual Theme
+
+Dark by default and dark only. The anchor surface is a near-black `background` canvas beside charcoal
+`card` panels; hierarchy rises through a three-step surface ladder (canvas → surface-1 → surface-2),
+not through heavy shadow. Flat: separation is carried by hairline `border`, surface lift, and white
+ink against gray. A single chromatic accent — Framer blue — lives in `ring`, links, and selected/active
+indicators, and is never a fill. The one primary action reads as a high-contrast white button on the
+dark shell, not a colored one. Density is `standard`: the brand breathes like a poster, and the
+operator read keeps that composure rather than crowding to terminal density.
+
+## 2 Color Roles
+
+Dark values (the brand's only mode). One accent — Framer blue is the sole chromatic hue that signals;
+status hues speak only status; the gradient family lives in charts, never in chrome.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | near-black `#090909` | the page canvas — the dominant surface, warm-tinted black |
+| `card` / `popover` | charcoal `#141414` (surface-1) | raised panels, cards, overlays, mockup tiles |
+| `muted` / `accent` | `#1c1c1c` (surface-2) | hover rows, subtle fills, selected-row lift (selection is lift, not color) |
+| `foreground` | pure white `#ffffff` (ink) | all primary ink and headlines |
+| `muted-foreground` | gray `#999999` (ink-muted) | labels, meta, captions — the entire secondary tier |
+| `border` / `input` | hairline `#262626` | every separator, grid line, and field edge |
+| `primary` | white `#ffffff` on `#000000` | the one primary action per surface; a light button on dark |
+| `ring` | Framer blue `#0099ff` | focus outlines, links, active/selected indicators — the single signal |
+| `destructive` | red `#ef4444` | destructive actions and error state only |
+| `success` / `warning` | green `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
+
+Hierarchy is binary: ink or ink-muted, no mid-tone grays between. The gradient hues (violet, magenta,
+orange, coral) are brand graces — they carry no chrome role, only chart series (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the operator body, UI, and headings all ride it, with Inter's
+character variants (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) enabled; those variants are the
+brand's body voice and the emitting agent keeps them on. `font-mono` is Geist Mono for IDs, codes,
+timestamps, and log lines. Numeric columns render `tabular-nums` (Inter carries `tnum`) so figures align
+down a column. Framer's hero-scale GT Walsheim display stays behind — operator headings top out where
+Inter already serves.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.2 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 15px / 1.4 | `font-weight-normal` |
+| small | labels, meta, dense table | 14px / 1.4 | `font-weight-normal` |
+| caption | eyebrow / footnote | 13px / 1.2 | `font-weight-normal`, `+0.01em` |
+
+Framer's signature is aggressive negative tracking; at operator sizes it carries as a tighter-than-neutral
+`heading-tracking`, not the hero display's -5% extreme. Bump weight one narrow step for emphasis; never
+change size to emphasize.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled white `primary` on `primary-foreground`, `radius`, no pill. Secondary:
+  `secondary` (surface-1) fill, `border`, `foreground`. Ghost: transparent, `muted` on hover.
+- **Input** — `card` (surface-1) fill, 1px `border` (`border-weight`), `radius`; focus draws the blue
+  `ring` at 2px, no glow — the one chromatic moment in the field.
+- **Card** — `card` surface, 1px `border`, `radius`; a soft light-edge + `shadow-intensity` drop only
+  when it floats off the canvas; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection lifts to `accent` (surface-2), never a colored 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; status badges take `success` / `warning` /
+  `destructive`, never `primary` and never the blue.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 ·
+32 · 48 · 64`. Framer's marketing 5px rhythm (15 / 20 / 30) and 96px section breaks stay behind — the
+operator surface normalizes to the 4px ramp the density remap expects. Shell dimensions map one-to-one
+to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar
+`topbar-height` (56px, the brand's nav 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.
+
+## 6 Depth
+
+Flat. Rank comes from the surface ladder and hairlines, not stacked shadow:
+
+- **0 — canvas** `background`, no border — the black artboard.
+- **1 — panel / card** `card` (surface-1) on a 1px `border`; the working raised surface.
+- **2 — overlay** `popover` / side panel / modal — a `rgba(255,255,255,0.08)` light top-edge plus a
+  soft `shadow-intensity` drop against the near-black. No level stacks a heavier shadow to signal rank;
+  rank is surface lift and position.
+
+Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element — the only
+chromatic depth signal in the system. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep the base dark. Framer ships no light mode; the near-black canvas is the identity.
+- **Do** reserve Framer blue for `ring`, links, and selected/active indicators — a signal color, never a
+  surface or button fill.
+- **Do** make the primary action a high-contrast white button; there is one per surface.
+- **Do** mark selection and "active" by surface lift (surface-1 → surface-2), not by a colored tint.
+- **Do** carry hierarchy as a binary ink / ink-muted split — no mid-tone grays crept in between.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** promote a second chromatic accent. The gradient hues are chart series only, never chrome.
+- **Don't** pill operator buttons or reach for a radius outside `radius-scale` — the marketing pill CTA
+  stays behind; operator buttons take the `radius` default.
+- **Don't** wash a section in a gradient. Gradients were marketing atmosphere; they do not enter the shell.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are for confirmations only.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440; the single dark theme holds at every width.
+
+| 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
+
+Directives the emitting agent follows verbatim:
+
+- Build dark. The base theme is the charcoal ladder — canvas `background`, surface-1 `card`, surface-2
+  `accent`/`muted` — with white ink and gray `muted-foreground`. There is no light interlude.
+- Accent only with the blue, and only as a signal: focus `ring`, links, active nav, selected indicators.
+  If the blue becomes a fill, the brand is drifting.
+- Make the one primary action a white button; everything else is neutral surface or status.
+- Mark selection and active state by lifting a surface step, not by tinting — "selected is lift, not color".
+- Keep hierarchy binary: ink `foreground` or gray `muted-foreground`, nothing between.
+- Set Inter as `font-sans` with its `cv`/`ss` character variants on; `font-mono` Geist Mono for IDs,
+  codes, timestamps; `tabular-nums` on every numeric column.
+- Track headings tight; keep buttons and cards on the `radius` default. Leave behind the GT Walsheim
+  hero display, the gradient spotlight cards, the pill CTA, and the 96px editorial section rhythm.

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

@@ -0,0 +1,140 @@
+---
+schema: design-md/v1
+product: HashiCorp
+provenance: library
+sourced: 2026-07-04
+---
+
+# HashiCorp — an operator reading of the pure-black, multi-product infrastructure system
+
+HashiCorp's web system is a confident, technical enterprise canvas: a pure-black ground, white engineered sans,
+charcoal cards on felt-thin hairlines, and per-product accent colors marking which tool a section is about. This
+entry is the *operator* reading — an internal tool (dashboard, run queue, policy console, log stream) in HashiCorp's
+language. Carried over: the pure-black canvas, charcoal surface ladder, white-on-dark ink, flat shadowless depth, the
+8px-not-pill radius, hashicorpSans's engineered voice (Inter the substitute). Left behind: the 80/56/40px hero
+display, the per-product chromatic identity cards, full-bleed CTA banners, and the 96px section rhythm.
+
+**Categorically dark, literally pure black, one accent not seven.** Two floors yield: the light-default floor (the
+categorically-dark exception — the default theme is dark and fills the required `light` slot) and the doctrine's ban
+on pure `#000000` surfaces (the brand's canvas *is* `#000000`, so the brand token wins); both are recorded plainly.
+The signature per-product palette is a *multi-product* marketing device — an internal tool is one product, so the
+operator reading spends the one product-neutral hue the brand uses on every page: accent-blue `#2b89ff`, repurposed
+as the chart categorical ramp, the one place multiple hues are legitimate (see §2, §7).
+
+## 1 Visual Theme
+
+Dark by default — pure black `background` (`#000000`) is the floor of every surface, no light counterpart.
+Emphatically flat: hierarchy comes from the charcoal surface ladder (canvas → surface-1 → surface-2), 1px hairline
+`border`, type weight, and white-on-black contrast — never shadow. A single accent, blue `primary` (`#2b89ff`), is
+held scarce: the one primary action, the focus `ring`, and the active-nav indicator, nothing else. The neutral ramp
+is a cool near-achromatic charcoal (white ink through `#b2b6bd` to `#656a76`), so the UI reads engineered and
+monochrome. Density is `standard` — the brand breathes more than a terminal, but the operator reading earns density.
+
+## 2 Color Roles
+
+Dark values. One accent — blue `primary` is the only chromatic hue that carries UI meaning; status
+hues speak only status; the product palette lives only in charts.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | pure-black canvas `#000000` | page floor and content area — the dominant surface |
+| `foreground` | white ink `#ffffff` | headlines and primary text |
+| `card` / `popover` | charcoal `#15181e` (surface-1) | cards, tiles, overlays — the first lift off black |
+| `secondary` / `accent` | charcoal-2 `#1f232b` (surface-2) | secondary-button fills; hover and selected rows and nav |
+| `muted` | faint well `#0c0e12` | inset tracks, disabled fills, quiet band tints |
+| `muted-foreground` | cool gray `#b2b6bd` | labels, captions, secondary text |
+| `border` / `input` | hairline `#3b3d45` (surface-3) | every separator, grid line, and field edge |
+| `primary` | accent-blue `#2b89ff` | the one primary action; active-nav indicator; the text-link |
+| `primary-foreground` | white `#ffffff` | text on the blue action |
+| `ring` | blue `#2b89ff` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | Consul red `#e62b1e` | destructive actions and error state only |
+| `success` / `warning` | Nomad green `#00ca8e` / Vault yellow `#ffcf25` | status signalling only, never chrome |
+
+The per-product palette — Terraform `#7b42bc`, Vault `#ffcf25`, Waypoint `#14c6cb`, Nomad `#00ca8e`,
+Boundary `#f24c53` — carries no UI role; it draws the chart categorical ramp (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is hashicorpSans, the brand's geometric-humanist face — body, UI, and headings all
+ride it; weight and tight tracking, not a second family, carry the display voice (Inter is the corpus's own open
+substitute). `font-mono` is the operator's reclaim — the marketing brand reserves mono for in-product, but the
+operator surface needs it for IDs, codes, timestamps, and log lines (JetBrains Mono). Numeric columns render
+`tabular-nums`. The display scale (80/56/40px) stays behind — an operator surface tops out at a 24px page title.
+
+| 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 | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.05em`, uppercase |
+
+The brand's weight hierarchy is deliberately small — 500 body / 600 emphasis / 700 display, no extremes, so the
+system reads engineered. Operator headings run the strong weight (600, the brand's headline weight) with tight
+negative tracking; the 700 display weights stay behind. Build hierarchy on size and weight, never a second family;
+keep the uppercase eyebrow above sections.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled blue `primary` on white `primary-foreground`, `radius` (8px), never a pill. Secondary: `secondary` charcoal-2 fill, `border`, `foreground`. Ghost: transparent, `accent` on hover. The brand's white-on-black CTA is a legitimate monochrome variant for a lone hero action, but the operator default spends the accent-blue so primary, focus, and active-nav read as one system.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the blue `ring` at 2px, no glow (the brand's focus is a 1px accent-blue outline, firmed to 2px for keyboard-first work).
+- **Card** — `card` charcoal surface, 1px `border`, `radius` (cards step to 12px via the scale); depth is the surface lift off black, not shadow; inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `accent` on hover; `tabular-nums` on numeric columns; selection tints `accent` with a blue `primary` left-indicator.
+- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Pill radius is badges-only (the brand's product pills).
+
+## 5 Layout
+
+Base spacing unit 8px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing 96px section
+rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
+`sidebar-width-collapsed`, topbar `topbar-height` (64px, the brand's nav 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` (standard) and stepped denser per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat and shadowless. Depth comes from the charcoal surface ladder and hairlines, not drop shadows:
+
+- **0 — canvas** `background` (`#000000`), no border.
+- **1 — panel / card** `card` (`#15181e`, surface-1) on a 1px `border`; the charcoal lift off pure black carries rank. Hover and selected rows step one further to `accent` (`#1f232b`, surface-2); chips and sub-nav ride the `border` charcoal-3 (`#3b3d45`).
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest lift, enough to separate an overlay from the black canvas above a scrim. Rank is surface, border, and position — never a heavier shadow.
+
+The per-product chromatic card is a marketing *identity* device at a feature card's z-plane, not a depth level — it
+stays behind. Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. Three
+z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the pure-black canvas and carry hierarchy with the black-plus-charcoal ladder, hairlines, weight, and size; the black `#000000` is deliberate — not a near-black to be softened.
+- **Do** reserve blue `primary` for the primary action, the focus `ring`, and the active-nav indicator — nothing else. It is the one product-neutral chromatic hue the brand spends on every page.
+- **Do** run headings the brand sans (hashicorpSans; Inter the substitute) at 600 with tight negative tracking, one family across the whole hierarchy.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and log lines — the operator surface reclaims the mono the marketing brand withholds.
+- **Do** draw chart series from the product palette (Terraform purple, Vault yellow, Nomad green, Boundary coral) — the one place multiple hues are legitimate.
+- **Don't** rebuild the per-product accent system as UI chrome, fill large surfaces with a product hue, or set body text in one — that palette is a multi-product marketing device; an internal tool is one product with one accent.
+- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 8px.
+- **Don't** signal elevation with drop shadows, or adapt the shell to a light canvas — this brand has no light surface.
+- **Don't** pair a display-only sans with a different body family — HashiCorp is one family across the full hierarchy.
+
+## 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 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Wear the pure-black `#000000` canvas by default; this brand is categorically dark — no light surface to fall back to. Cards and panels are the charcoal surface-1 lift, not white; depth is that ladder plus hairlines, never shadow.
+- Spend blue once per surface: the primary action, the focus `ring`, the active-nav indicator. If two things want the blue, one is not primary. The per-product palette (Terraform purple, Vault yellow, Waypoint cyan, …) stays behind as a marketing identity device — reuse it only as the chart categorical ramp, never as UI accents.
+- Headings ride the brand sans (hashicorpSans; Inter the open substitute) at 600 with tight negative tracking; the 80/56/40px display scale stays behind — operator headings top out at 24px. Keep the uppercase eyebrow above meaningful sections.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line is `font-mono` (JetBrains Mono) — the operator surface reclaims the mono the marketing brand reserves for in-product. Detail and edit go in the side panel beside the work; the blue `ring` focus outline is always visible for keyboard work.
+- Leave behind: the 80px hero display, the per-product chromatic identity cards, full-bleed CTA banners, and the 96px section rhythm — marketing scale, not operator chrome.

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

@@ -0,0 +1,153 @@
+---
+schema: design-md/v1
+product: IBM
+provenance: library
+sourced: 2026-07-04
+---
+
+# IBM — Carbon operator design
+
+The operator reading of IBM's Carbon Design System. Carbon was built for enterprise product
+surfaces, so it dresses an internal tool almost natively — but the source corpus is IBM's
+*marketing* canvas, and marketing graces are stripped here. What carries: the flat 0px square
+geometry, IBM Blue as the single accent, IBM Plex Sans, the 4px grid, and depth carried by hairlines
+and surface change. What stays behind: the 76/60/42px weight-300 hero display type, the full-bleed
+blue CTA banner, the dark inverted footer, and the soft-blue hero gradient.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in — in the brand only the footer and global header invert, and that
+inversion is a marketing move that stays behind. Flat and square: every button, card, input, and
+container sits at 0px corners, and hierarchy is carried by a 1px hairline `border` and surface change,
+never by shadow. A single accent — IBM Blue `primary` #0f62fe — is reserved for the one action that
+matters, for links, and for the focus rule. The neutral ramp is a true charcoal-on-white: ink #161616
+on a white canvas, with #f4f4f4 and #e0e0e0 grays doing the structural work. Dense by design — Carbon
+expects a lot on the page, not a lot of air. The anchor surface is a white content canvas beside a
+faint gray side nav.
+
+## 2 Color Roles
+
+Light values first; hex is the brand's native format. One accent — `primary` is the only chromatic hue
+that carries meaning; status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `#ffffff` | page, tiles, and overlays — the dominant surface |
+| `foreground` | charcoal `#161616` | all headings and primary ink |
+| `muted` / `secondary` | light gray `#f4f4f4` (Carbon surface-1) | field fills, alternate-row bands, hovered tiles |
+| `muted-foreground` | mid gray `#525252` | meta, sub-headlines, secondary text |
+| `border` / `input` | hairline `#e0e0e0` (Carbon gray-20) | every card edge, grid line, field rule, divider |
+| `primary` | IBM Blue `#0f62fe` | the one primary action; links; active nav; focus rule |
+| `accent` | blue-10 tint `#edf5ff` | selected/hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` `#0f62fe` | the 2px focus outline — keyboard-first, unmistakable |
+| `destructive` | red-60 `#da1e28` | destructive actions and error state only |
+| `success` / `warning` | green-50 `#24a148` / yellow-30 `#f1c21b` | status signalling only, never chrome |
+
+## 3 Typography
+
+One family carries everything: **IBM Plex Sans** for UI, body, and headings — hierarchy comes from size
+and weight, never a second face. Operator headings run `font-weight-strong` (600); the marketing
+weight-300 hero display treatment stays behind. **IBM Plex Mono** returns for IDs, codes, timestamps,
+and log lines — Carbon keeps mono to product surfaces, and an operator UI is a product surface. Body
+carries Carbon's signature `+0.16px` positive letter-spacing (part of the voice — keep it). Numeric
+columns render `tabular-nums` so figures align down a column.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 32px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 24px / 1.33 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 20px / 1.40 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 16px / 1.50 | `font-weight-normal` · +0.16px |
+| small | labels, meta, dense table | 14px / 1.29 | `font-weight-normal` · +0.16px |
+| caption | eyebrow, utility meta | 12px / 1.33 | `font-weight-normal` · +0.32px, sentence case |
+
+Eyebrows stay sentence case — Carbon resists the all-caps tracked eyebrow. Bump weight for emphasis;
+never change size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (0px, square), 12px·16px
+  padding, never pill. Secondary follows Carbon's charcoal treatment: `foreground` fill,
+  `primary-foreground` text. Tertiary/ghost: transparent with a 1px `primary` border and `primary`
+  text, fill only on hover.
+- **Input** — `muted` fill, a 1px bottom `border`; focus swaps the bottom rule for Carbon's signature
+  2px `ring` underline and draws the full focus outline, square, no radius.
+- **Card** — `card` surface on a 1px `border`, 0px corners, no shadow; a "recommended" tile lifts by
+  moving to the `muted` ground, not by elevation.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; row selection
+  tints `accent`; `tabular-nums` on numeric columns; `font-mono` on IDs and codes.
+- **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** — square (0px) tag, hairline `border`, status fill; status badges take `success` /
+  `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (Carbon's 4-pixel grid); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 ·
+48 · 64 · 96`. Shell dimensions map one-to-one to the layout primitives: side nav
+`sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (48px icon rail), topbar `topbar-height`
+(48px), 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` (`dense`) and
+stepped per archetype by the surface catalog. Sections separate by thin gray rows, not by large
+vertical gaps — Carbon spends alignment, not air.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background` white, no border.
+- **1 — tile / card** `card` on a 1px `border`; no shadow — the default enterprise tile.
+- **2 — surface band** the `muted` ground for alternate rows and hovered tiles; rank is surface
+  change, not elevation.
+- **3 — overlay** `popover` / menu / side panel / modal — the one place `shadow-intensity` earns a
+  soft `sm`/`md` shadow.
+
+Focus is Carbon's 2px `primary` outline (with a hairline-strong underline on fields), visible on every
+interactive element. Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** keep every button, card, input, and container at 0px square — the flat geometry *is* the
+  brand.
+- **Do** reserve `primary` IBM Blue for the single primary action, links, and the focus rule; treat it
+  as scarce.
+- **Do** carry hierarchy with surface change (`background` → `muted`) and 1px hairlines — skip drop
+  shadows.
+- **Do** apply the +0.16px tracking to body sizes and `tabular-nums` / `font-mono` to figures and IDs.
+- **Don't** round corners — even 4px breaks the Carbon look.
+- **Don't** bold operator headings past `font-weight-strong`, or reach for the marketing weight-300
+  hero display.
+- **Don't** promote a second chromatic accent — status uses `success` / `warning` / `destructive`
+  only.
+- **Don't** open detail or edit in a modal when the side panel fits, and don't signal rank with shadow.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | side nav → hamburger overlay; utility meta hides; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | side nav collapses to the 48px icon rail; tables scroll their overflow; card grid → 2-up |
+| 1024 | side nav expands to 256px; two-pane queue+detail holds side by side; grid up to 4-up |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+This entry dresses an internal operator surface — a queue, a data console, an admin panel — in Carbon.
+Carry over: flat 0px square geometry, IBM Blue as the single accent, IBM Plex Sans plus Plex Mono, the
+4px grid, hairline-and-surface-change depth, the 2px blue focus rule, and the +0.16px body tracking.
+Leave behind: the 76/60/42px weight-300 hero display type, the full-bleed blue CTA banner, the dark
+inverted footer, and the soft-blue hero gradient — all marketing.
+
+- Lead every list surface with its data table; keep it square and dense.
+- Accent only the primary action. IBM Blue is scarce — links, primary CTA, focus. Anything more is
+  drift.
+- Keep 0px corners everywhere; a rounded corner reads as a different brand.
+- IDs, codes, and timestamps in Plex Mono; every numeric column `tabular-nums`; body keeps +0.16px
+  tracking and sentence-case eyebrows.
+- Depth is hairline and surface change; reach past a hairline only for a real overlay.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Keep the whole app light; do not invert to charcoal outside a deliberate dark opt-in.

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

@@ -0,0 +1,158 @@
+---
+schema: design-md/v1
+product: Intercom
+provenance: library
+sourced: 2026-07-04
+---
+
+# Intercom — the operator reading
+
+The calm, editorial customer-service brand rendered for internal tools. Intercom's public surfaces
+are publication-quiet and product-screenshot-led; an operator surface wearing this brand keeps the
+warm cream canvas, the white-on-cream lift, the charcoal ink, the single reserved Fin Orange, the
+modest radii, and the geometric-sans voice that never bolds past 500. The 72px hero display, the
+product-mockup rhythm, the pure-black quote strip, the pill tab toggles, and the 96px section
+breathing stay behind. What carries is the feel: a warm cream ground the category never uses, panels
+that lift by turning white rather than by casting shadow, and one orange spark held in reserve.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in (Intercom ships no dark theme on the public web). The anchor surface
+is not white — it is a soft warm cream `background` (`#f5f1ec`), the brand's defining signal. Panels
+and cards lift **onto white** (`card`, `#ffffff`): the depth strategy is a surface change, not a shadow.
+Flat throughout — hierarchy comes from the cream-to-white ladder, warm hairline `border` (`#d3cec6`),
+and type weight, never heavy elevation. A single chromatic voltage, Fin Orange (`primary`, `#ff5600`),
+is held in reserve for the one action that matters; everything neutral is charcoal ink (`foreground`,
+`#111111`) on cream. Corners are modest — `radius` (8px) on buttons and inputs, a larger step on cards
+— never pill, never square. Density is `standard`: calm and editorial, not cramped.
+
+## 2 Color Roles
+
+Light values. One accent: Fin Orange is the only chromatic hue that carries meaning; the report
+palette lives in charts, status speaks only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | cream `#f5f1ec` | the page canvas — warm, never pure white; the brand's defining surface |
+| `card` / `popover` | white `#ffffff` | cards, panels, overlays — they lift off the cream by turning white |
+| `foreground` | charcoal `#111111` | all primary ink, headlines, and neutral/secondary button labels |
+| `muted` | warm cream `#ebe7e1` | hover rows, subtle fills, quiet panel bands (surface-2) |
+| `muted-foreground` | ink-muted `#626260` | labels, captions, secondary text, inactive tabs |
+| `secondary` | warm cream `#ebe7e1` | secondary button fill — ink label on cream, 1px `border` |
+| `border` / `input` | warm hairline `#d3cec6` | every separator, grid line, and field edge — a soft warm gray, not an ink line |
+| `primary` | Fin Orange `#ff5600` | the single primary action per surface; active nav; the one reserved voltage |
+| `accent` | deep cream `#e6e0d6` | selected/hovered rows and nav — Intercom selects by a warm-neutral shift, not by colour |
+| `ring` | Fin Orange `#ff5600` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | error red `#c41c1c` | destructive actions and error state only |
+| `success` / `warning` | green `#0bdf50` / amber `#d97706` | status signalling only, never chrome |
+
+Charcoal is Intercom's marketing primary because a marketing page carries many CTAs; the operator
+reading has one primary action per surface, so it earns the reserved orange, and charcoal stays the
+neutral ink for secondary actions. Brand Blue (`#0007cb`) and the pure-black quote strip are marketing
+graces — they carry no operator role (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Saans — Intercom's proprietary geometric sans (Inter at weight 500
+the closest open substitute); the whole ramp rides it, display voice carried by size and modest weight,
+not a second family. The signature is restraint: `font-weight-strong` stops at **500** — Saans at 500
+reads confident without bold, and the brand never reaches past it. Negative tracking is the other
+signature, scaling with size (the corpus runs -0.5px at 28px). `font-mono` is SaansMono (JetBrains Mono
+the approximation) for IDs, codes, timestamps, and 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 | 20px / 1.3 | `font-weight-strong` · -0.015em |
+| h3 | card / group head | 16px / 1.35 | `font-weight-strong` · -0.01em |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
+| eyebrow | section eyebrow | 13px / 1.3 | `font-weight-strong`, sentence case, no tracking |
+| code | IDs, logs, amounts | 13px / 1.5 | `font-weight-normal` |
+
+Body line-height relaxes to 1.5 — an editorial breath the category tightens away. Eyebrows are
+**sentence case**, never the all-caps tracked label the operator default reaches for. Bump weight to
+`font-weight-strong` (500) for emphasis; never bold. The 72px hero display stays behind.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled Fin Orange on `primary-foreground` (white), `radius` (8px), no pill.
+  Secondary: `secondary` warm-cream fill, 1px `border`, `foreground` ink label. Ghost: transparent,
+  `accent` on hover.
+- **Input** — `card` (white) fill, 1px `border` (`border-weight`), `radius`; focus draws the Fin Orange `ring` at 2px, no glow.
+- **Card** — `card` white surface lifting off the cream canvas, 1px `border`, a larger corner step from
+  the radius scale; shadow only when a true overlay floats (`shadow-intensity`); 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` (warm-neutral, not orange).
+- **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, hairline `border`, `muted`/status fill, sentence-case label; status badges
+  take `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 8px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px
+section step stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (56px, the
+corpus nav height), side panel `side-panel-width` (420px) / `side-panel-width-rich` (640px), modal cap
+`modal-width-max`, forms `form-max-width`, tables full-width; card interior padding a calm 24px. Density
+is governed globally by `density-tier` and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat, surface-change-first. Hierarchy comes from the cream-to-white ladder and warm hairlines, not
+shadow — Intercom resists drop shadows:
+
+- **0 — canvas** `background` cream (`#f5f1ec`), no border.
+- **1 — panel / card** `card` white lifting off the cream on a 1px `border`; the lift is the elevation.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a single
+  faint `sm` shadow, over a scrim for modals. Rank is the white-on-cream shift, the border, and position.
+
+Focus is a 2px Fin Orange `ring` outline (never a glow), visible on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor on the warm cream canvas — pure white reads as ordinary SaaS; the cream is the brand.
+- **Do** lift panels and cards onto white (`card`) off the cream — the surface change is the depth.
+- **Do** reserve Fin Orange (`primary`) for the single most important action; everything else is
+  charcoal ink or status.
+- **Do** keep corners modest (`radius` 8px on buttons/inputs, the larger step on cards), write eyebrows
+  in sentence case, apply `tabular-nums` to numeric columns and `font-mono` to IDs/codes/timestamps.
+- **Don't** use pure white as the canvas, or add drop shadows to floating cards.
+- **Don't** spread Fin Orange — no orange section fills, no orange on secondary actions, no second
+  chromatic accent. The report palette stays in charts; status uses `success` / `warning` / `destructive`.
+- **Don't** bold — Saans stops at weight 500; emphasise by weight, never a heavier cut or a size jump.
+- **Don't** write all-caps tracked eyebrows, pill the primary CTA, or pull the 72px hero, the black
+  quote strip, or the product-mockup rhythm into operator chrome.
+
+## 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; card grids drop to 2-up |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side; card grids 3-up |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; the cream breathing widens |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim. This brand is calm and editorial; keep it restrained
+for operator work.
+
+- Reach for the warm cream canvas first — never pure white; the cream tint is Intercom.
+- Lift panels and cards by turning them white on the cream, not by casting a shadow.
+- Accent only the primary action in Fin Orange (`primary`). If two things want the accent, one is not
+  primary. Neutral and secondary actions are charcoal ink on cream.
+- Type stays Saans (Inter fallback) at weight 500 for emphasis and 400 for body — never bold. Eyebrows
+  are sentence case, never all-caps tracked; page titles carry negative tracking.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`. Every workflow
+  completes from the keyboard; the Fin Orange `ring` focus outline is always visible.
+- Stay flat — the cream-to-white ladder and warm hairlines before shadow; reach for the one faint tier
+  only for a real overlay.
+- One accent. The report palette (`chart-*`) is for charts only; Brand Blue and the black quote strip
+  are not operator colors. Leave the hero, the product-mockup rhythm, and the 96px breathing behind.