@nurix/etna 0.18.19 → 0.18.21

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

@@ -0,0 +1,139 @@
+---
+schema: design-md/v1
+product: ClickHouse
+provenance: library
+sourced: 2026-07-04
+---
+
+# ClickHouse — an operator reading of the black-canvas, electric-yellow system
+
+ClickHouse's web system is the highest-contrast brand in the data-platform category: near-black canvas,
+one electric-yellow voltage, white confident-bold sans, real SQL in dark cards. This entry is the
+*operator* reading — an internal tool (query console, cluster dashboard, job queue, log stream) in
+ClickHouse's language. What carries: the near-black canvas, the one yellow accent held scarce, white
+ink on dark surfaces, flat shadowless depth from surface contrast and hairlines, the 8px-not-pill
+radius, and Inter's tight bold-700 voice. What stays behind: the 72/56/40px hero display, full-bleed
+yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm.
+
+**This brand is categorically dark.** ClickHouse ships no light-mode surface — the black canvas *is*
+the identity. White-canvas is off-brand.
+
+## 1 Visual Theme
+
+Dark by default — the near-black `background` (`#0a0a0a`) is the floor of every surface, with no light
+counterpart. Emphatically flat: hierarchy comes from the surface ladder (canvas → card → elevated),
+hairline `border`, type weight, and white-on-black contrast — never shadow. A single accent,
+electric-yellow `primary` (`#faff69`), is held scarce: it wears the one primary action, the focus
+`ring`, and the active-nav indicator, nothing else. The neutral ramp is pure achromatic grey (white
+ink down through `#cccccc` to `#888888`), so the UI reads engineered and monochrome, yellow its only
+voltage. Density is `dense` — the brand's engineering-grade rhythm.
+
+## 2 Color Roles
+
+Dark values. One accent — yellow `primary` is the only chromatic hue that carries meaning; status
+hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | near-black canvas `#0a0a0a` | page floor and content area — the dominant surface |
+| `foreground` | white ink `#ffffff` | headlines and primary text |
+| `card` / `popover` / `secondary` | dim panel `#1a1a1a` | cards, overlays, secondary-button fills — lifted off the canvas |
+| `muted` | recessive fill `#121212` | inset wells, disabled tracks, faint band tints |
+| `muted-foreground` | mid grey `#888888` | labels, captions, secondary text |
+| `accent` | elevated grey `#242424` | hover and selected rows and nav — a neutral lift |
+| `border` / `input` | hairline `#2a2a2a` | every separator, grid line, and field edge |
+| `primary` | electric yellow `#faff69` | the one primary action; active-nav indicator; key interactive detail |
+| `primary-foreground` | black `#0a0a0a` | text on the yellow action — the high-contrast brand signal |
+| `ring` | yellow `#faff69` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | red `#ef4444` | destructive actions and error state only |
+| `success` / `warning` | emerald `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
+
+The yellow's power is its scarcity at element level; full-bleed yellow bands and stat numbers are
+marketing voltage and carry no operator role (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — body, UI, and headings all ride it; weight and tight
+tracking, not a second family, carry the display voice. `font-mono` is JetBrains Mono for IDs, codes,
+timestamps, log lines, and SQL; numeric columns render `tabular-nums`. The marketing display scale
+(72/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.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.4 | `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.1em`, uppercase |
+
+Headings run Inter at the strong weight (700) with tight negative tracking — the brand's defining
+trait, preserved at operator sizes even as the display *scale* stays behind. Build hierarchy on size
+and weight, never a second family; bump weight for emphasis, never size.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — primary: filled yellow `primary` on black `primary-foreground`, `radius`, never a pill. Secondary: `secondary` dim-panel fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the yellow `ring` at full 2px, no glow.
+- **Card** — `card` dim-panel surface, 1px `border`, `radius`; depth is the surface lift off the canvas, 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 yellow `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.
+
+## 5 Layout
+
+Base spacing unit 4px; 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` (dense, rewriting
+the spacing scale through `density-gap`) and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Flat and shadowless. Depth comes from the surface ladder and hairlines, not drop shadows:
+
+- **0 — canvas** `background` (`#0a0a0a`), no border.
+- **1 — panel / card** `card` (`#1a1a1a`) on a 1px `border`; the dim-panel lift off the near-black canvas carries rank. Hover/selected lift one step to `accent` (`#242424`).
+- **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.
+
+Focus is a 2px yellow `ring` outline (never a glow), visible on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** anchor every surface on the near-black canvas; the yellow-on-black pairing is the brand.
+- **Do** reserve yellow `primary` for the primary action, the focus `ring`, and the active-nav indicator — nothing else. Its scarcity at element scale is what reads as voltage.
+- **Do** carry hierarchy with the surface ladder, hairlines, weight, and size — the brand is flat.
+- **Do** run headings Inter 700 with tight negative tracking; build hierarchy on size and weight.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
+- **Don't** introduce a second brand color — ClickHouse is monochrome plus one yellow.
+- **Don't** fill large surfaces with yellow or set body text in yellow; the full-bleed yellow band is marketing-only.
+- **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.
+
+## 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 near-black canvas by default; this brand is categorically dark — no light surface to fall back to. Cards and panels are the dim-panel lift off it, not white.
+- Spend yellow once per surface: the primary action, the focus ring, the active-nav indicator. If two things want the yellow, one is not primary. Color otherwise belongs to data and status.
+- Depth is surface contrast and hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover over the canvas.
+- Headings ride Inter 700 with tight tracking; the display scale (72/56/40px) stays behind — operator headings top out at 24px, hierarchy is size and weight.
+- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is `font-mono` (JetBrains Mono). Show the real query, not an illustration of one.
+- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
+- Keyboard-first: the yellow `ring` focus outline is always visible.
+- Leave behind: full-bleed yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm — marketing voltage, not operator chrome.

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

@@ -0,0 +1,147 @@
+---
+schema: design-md/v1
+product: Cohere
+provenance: library
+sourced: 2026-07-04
+---
+
+# Cohere — an operator reading of the enterprise-AI editorial system
+
+Cohere's web system is a controlled enterprise-AI interface: stark white editorial canvas, a
+monochrome near-black UI shell, warm mineral surfaces, and a type split between carved display
+headlines and precise Unica77 UI text. This entry is the *operator* reading of that brand — an
+internal tool (agent console, review queue, research dashboard) in Cohere's language. What carries:
+the white canvas, near-black actions, one cool blue for interactive detail, hairline-led flatness, the
+rounded-but-not-pill radii, and the light-weight, tightly-tracked type voice. What stays behind: the
+hero-scale display type (96/72/60px), pill CTAs, coral editorial taxonomy, and the deep-green/navy
+media bands where color arrives through photography, not chrome.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Emphatically flat — hierarchy is carried by hairline `border`,
+surface alternation, and tight type, never by shadow. The shell is austere black-and-white: a white
+canvas, near-black ink, and a single chromatic accent, `accent-foreground` action-blue, reserved for
+links, selection, and the one detail that must read as clickable. The primary action wears near-black
+`primary`, not a color — a monochrome UI where color arrives through data, not chrome. Warm soft-stone
+tints `secondary` so the system reads editorial. Density is `spacious`: whitespace is a trust signal
+here, so rows run tall and sections breathe.
+
+## 2 Color Roles
+
+One chromatic accent — action-blue is the only hue that carries interactive meaning; status hues
+speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, and overlays — the dominant surface |
+| `foreground` | ink `#212121` | all primary text |
+| `muted` | soft neutral `#f2f2f2` | hover rows, subtle fills, containment |
+| `muted-foreground` | body-muted `#616161` | labels, captions, secondary text |
+| `secondary` | soft-stone `#eeece7` | warm neutral blocks, secondary buttons — the mineral surface |
+| `border` / `input` | hairline `#d9d9dd` | every list rule, grid line, and field edge |
+| `primary` | near-black `#17171c` | the one primary action; active nav — a neutral, not a color |
+| `accent` | pale-blue wash `#f1f5ff` | selected/hovered rows and nav |
+| `accent-foreground` | action-blue `#1863dc` | links, the single interactive-detail hue |
+| `ring` | focus-blue `#4c6ee6` | the keyboard focus outline — the brand's own focus color |
+| `destructive` | error red `#b30000` | destructive actions and error state only |
+| `success` / `warning` | emerald / burnt-coral | status signalling only, never chrome |
+
+Coral, deep enterprise green, and dark navy are marketing graces — editorial taxonomy chips and
+media bands with no operator chrome role (see §7); deep-green and navy survive only as chart hues.
+
+## 3 Typography
+
+Two families for the UI, one for technical labels. `font-sans` is Unica77 Cohere Web (Inter fallback) —
+body, UI, and headings all ride it; size, tracking, and surface contrast carry hierarchy, not heavy
+weight. `font-mono` is CohereMono for IDs, codes, timestamps, and the uppercase labels that mark
+systems and taxonomy. Numeric columns render `tabular-nums`. The display faces (CohereText hero at
+96/72px) stay behind — an operator surface starts at the UI end of the ramp.
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 20px / 1.35 | `font-weight-strong` · `-0.01em` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` |
+| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
+| mono-label | uppercase system / category marker | 13px / 1.4 | `font-mono`, `+0.28px`, uppercase |
+
+Keep display type tight and carved; avoid heavy bold — hierarchy is size, tracking, and contrast.
+Bump weight one 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 near-black `primary` on `primary-foreground`, `radius`, never a pill (the
+  32px pill is marketing-only). Secondary: `secondary` soft-stone fill, `border`. Ghost: `accent` hover.
+- **Input** — `background` fill, 1px `border`, `radius`; focus draws the `ring` at full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`; shadow only for a true overlay; inset `density-inset`.
+- **Table row** — height `table-row-height` (tall, editorial); `border` grid lines carry the rows;
+  `muted` on hover; `tabular-nums` on numeric columns; selection tints `accent`.
+- **Side panel** — detail and edit open in the panel (`side-panel-width` / `side-panel-width-rich`),
+  beside the work, not over it.
+- **Badge** — hairline `border`, `muted`/status fill, uppercase mono label; status badges take
+  `success` / `warning` / `destructive`, never `primary` or `accent-foreground`.
+
+## 5 Layout
+
+Base spacing follows an 8px cadence; the on-scale ramp is `2 · 6 · 8 · 12 · 16 · 24 · 32 · 40 · 56 ·
+80` — the 80 preserves Cohere's dramatic section breathing. 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` (spacious)
+and stepped per archetype by the surface catalog.
+
+## 6 Depth
+
+Emphatically flat. Depth comes from surface alternation, hairline borders, and rounded corners — never
+drop shadows.
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; borders and warm `secondary` blocks carry rank.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. No level stacks a heavier shadow; rank is border, surface, and position.
+
+Focus is a 2px `ring` (focus-blue) outline, never a glow, on every interactive element. Three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve near-black `primary` for the single most important action; keep the shell monochrome.
+- **Do** carry the grid with hairlines and surface alternation — the brand is border-led and flat.
+- **Do** let action-blue `accent-foreground` be the one chromatic hue for links, selection, and focus.
+- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and uppercase labels.
+- **Don't** pill the CTA or reach for a radius outside `radius-scale` — the 32px pill stays in
+  marketing.
+- **Don't** turn coral, deep-green, or navy into decorative surface fills; they are media-band and
+  editorial-taxonomy colors, not operator chrome.
+- **Don't** add heavy drop shadows to cards; reach past a hairline only for a real overlay.
+- **Don't** collapse the display/body type split into one flat sans, or promote a second chromatic
+  accent.
+
+## 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; rows keep their rule structure, metadata below the title |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); card grids drop 3→2; tables scroll overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side; 3-column grids return |
+| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width with generous section intervals |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Reach first for the monochrome shell: white canvas, near-black `primary` actions, hairline borders.
+- One chromatic accent — action-blue `accent-foreground` for links, selection, focus. A second hue as
+  chrome is wrong; color belongs to data and status.
+- Stay flat — hairline and surface alternation before shadow; reach past a hairline only for a real
+  overlay. Honor the editorial calm: spacious density, tall rows, generous section gaps.
+- Uppercase mono labels (`font-mono`) mark categories and systems; every numeric column is
+  `tabular-nums`; every ID / code / timestamp is `font-mono`. Every workflow completes from the
+  keyboard, the focus-blue `ring` always visible.
+- Leave behind: hero/product display type (96/72/60px), pill CTAs, coral taxonomy chips, and the
+  deep-green/navy marketing media bands — brand-decorative, not operator chrome.

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

@@ -0,0 +1,156 @@
+---
+schema: design-md/v1
+product: Coinbase
+provenance: library
+sourced: 2026-07-04
+---
+
+# Coinbase — the operator reading
+
+The institutional-calm reading of Coinbase's brand — a quietly-confident financial-services look
+that happens to trade crypto. Coinbase's own surfaces are marketing-editorial: an 80px hero display,
+full-bleed near-black heroes carrying floating product-UI mockup cards, a white/gray/dark band
+rotation at a 96px rhythm. This entry keeps what survives at operator scale — the pure-white canvas,
+the single scarce Coinbase Blue accent, the cool near-black ink, the rounded geometry, the
+editorial-calm type voice — and leaves the heroes, hero display, mockup stacks, and 96px rhythm
+behind. Where a fellow exchange (Binance) runs a dense trading terminal, Coinbase reads calmer — its
+density lives behind login walls, so the operator tier stays an honest `standard`.
+
+## 1 Visual Theme
+
+Light by default; the near-black editorial heroes are marketing and stay behind. Flat: depth comes from
+card-on-card layering and 1px hairlines, never decorative shadow. A single accent — Coinbase Blue
+`primary` (`#0052ff`) — is used scarcely, one or two blue moments per surface, on the one action that
+matters. Ink is a cool near-black `foreground` (`#0a0b0d`) on a pure-white `background` (`#ffffff`); the
+neutral field is a cool gray ladder (`#f7f7f7` → `#eef0f3`) that reads institutional, not flatly warm.
+The geometry is rounded — soft corners throughout, sharp corners essentially absent. Density is
+`standard` and editorially calm; 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
+trading up/down hues and sub-brand gold 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 `#0a0b0d` | all primary ink and headings |
+| `muted` | soft gray `#f7f7f7` | hover rows, subtle fills, quiet alternating bands |
+| `secondary` | strong gray `#eef0f3` | secondary button fill, one step darker than canvas |
+| `muted-foreground` | cool gray `#5b616e` | labels, captions, secondary running text |
+| `border` / `input` | hairline `#dee1e6` | every separator, grid line, and field edge — the highest-frequency token |
+| `primary` | Coinbase Blue `#0052ff` (press `#003ecc`, disabled `#a8b8cc`) | the one primary action; active nav; the inline brand link — used scarcely |
+| `accent` | blue wash `#e6eeff` | selected/hovered rows and nav — a light wash of `primary`, on-accent surfaces only |
+| `ring` | `primary` blue | the focus outline — inputs focus to a 2px Coinbase Blue edge |
+| `destructive` | trading-down red `#cf202f` | destructive actions, error state, and down-moves |
+| `success` | trading-up green `#05b169` | success status and up-moves |
+| `warning` | gold `#f4b000` | caution status only — never a chrome fill |
+
+The `#0a0b0d` near-black is ink here, not a page surface — the full-bleed dark heroes it powers stay
+behind (§9). Blue stays scarce; the up/down hues live only in figures and status.
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the corpus-named substitute for both CoinbaseDisplay and
+CoinbaseSans; the single sans serves UI, body, headings, and labels, with heading weight and the
+editorial negative tracking carrying the display voice. `font-mono` is JetBrains Mono (substitute for
+CoinbaseMono) — the "trustworthy 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 | 18px / 1.33 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.25 | `font-weight-strong` |
+| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 13px / 1.5 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.5 | `font-weight-strong`, uppercase |
+| number | table figures, prices | 14px / 1.4 · 500 | `font-mono`, `tabular-nums` |
+
+The corpus's editorial signature — a modest display weight (400) with strong negative tracking — lives
+on the 80/64/52px hero display, which stays behind. At operator heading scale, 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 Coinbase Blue on `primary-foreground`, `radius` (8px), no hero pill;
+  press darkens to the active blue, disabled fades. Secondary: `secondary` gray fill, `foreground`.
+  Tertiary: transparent text in `primary`.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
+  2px Coinbase Blue edge, no glow.
+- **Card** — `card` surface on a 1px `border`; card radius steps one or two up from control radius (the
+  corpus's containers are notably round); shadow only when a card must lift off the canvas.
+- **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`),
+  beside the work, not over it.
+- **Badge / avatar** — pill/full radius (the round brand nod): badges take hairline `border`, `muted` /
+  status fill, uppercase caption (`success` / `warning` / `destructive`, never `primary`); asset glyphs
+  sit on a full-circle `muted` plate — the one place full-round geometry carries.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the marketing 96px
+section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: topbar
+`topbar-height` (64px, Coinbase's native top-nav height), sidebar `sidebar-width-expanded` /
+`sidebar-width-collapsed`, 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 breathes a hair more than a dense console, editorial calm carried through spacing.
+
+## 6 Depth
+
+Flat, layering-first. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background` (`#ffffff`), no border.
+- **1 — panel / card** `card` on a 1px `border`; the corpus builds depth by floating one card over
+  another, so rank reads by hairline and position, not brightness. Shadow only when a card must lift.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the single
+  soft shadow tier (`sm`); no level stacks a heavier shadow to signal rank.
+
+Focus is a 2px `ring` (Coinbase Blue) outline, never a glow, on every interactive element; three
+z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` (Coinbase Blue) for the single most important action, active nav, and inline
+  brand links — one or two blue moments per surface. Its scarcity is the brand.
+- **Do** keep the geometry rounded — 8px controls, rounder cards, pill badges, full-circle glyphs — and
+  build depth by layering cards over hairlines, the way the marketing surfaces float mockups.
+- **Do** carry every figure in `font-mono` with `tabular-nums`; direction rides `success` /
+  `destructive` as text color.
+- **Don't** introduce a second brand accent — the trading up/down hues and the sub-brand gold are
+  status/chart roles; and never use green or red as a button or surface fill (direction is text only).
+- **Don't** pill dense operator buttons — the hero pill CTA stays behind; buttons take 8px `radius`,
+  pill radius is for badges and chips.
+- **Don't** signal elevation with heavy or stacked drop shadows — the system has one soft tier.
+
+## 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 in Coinbase Blue. If two things want
+  the blue, one is not primary — keep it to one or two moments per surface.
+- Keep the geometry rounded and calm: 8px controls, 16–24px cards, pill badges, full-circle glyphs.
+  Never sharp-corner a control.
+- 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 — layer cards over hairlines before any shadow; reach past the single soft tier only for a
+  true overlay. Emphasise by weight, not size; carry the negative `heading-tracking` on headings.
+- Leave the marketing skin behind (heroes, 80px display, mockup stacks, band rotation, 96px rhythm,
+  hero pill CTA). What carries: the palette, its cool temperature, the single scarce blue, the rounded
+  geometry, the tabular number voice, and card-on-card flat depth.

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

@@ -0,0 +1,138 @@
+---
+schema: design-md/v1
+product: Composio
+provenance: library
+sourced: 2026-07-04
+---
+
+# Composio — dark developer-infrastructure operator design
+
+An operator reading of Composio, a developer-tools brand for AI-agent tool integration. Composio is
+**categorically dark** — a near-black canvas holding white type and a single electric-blue voltage —
+so this entry keeps dark as the default theme (the categorically-dark override of the general
+light-default). Carrying in: the palette, the cool near-black temperature, the compact
+developer-ergonomic radii, the single sans voice. Staying behind: the marketing signature — the 2×2
+terminal-mockup hero, the spotlight glows, the 72px display, the 96px section rhythm.
+
+## 1 Visual Theme
+
+Dark by default — a light inversion is the opt-in, not the base. Flat: hierarchy comes from a
+brightness-step surface ladder (`background` → `card` → `secondary`/`accent`), hairline `border`, and
+type weight, never from drop shadow. A single accent, Composio Blue `primary` (`#0007cd`), reserved
+for the one action that matters — primary CTA, active nav, key interactive detail. The neutral ramp is
+a true cool near-black: canvas `#0f0f0f`, cards `#181818`, elevated fills `#222222`. The anchor surface
+is a near-black content canvas beside a same-tone `sidebar` that the hairline `border` delineates.
+Density is `standard` — technical but not cramped, inheriting the marketing's composure over terminal-cramming.
+
+## 2 Color Roles
+
+Dark values are the default theme. `primary` is the only chromatic hue that carries meaning; cyan
+and violet are illustration-only and take no operator role; status hues speak only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` | `#0f0f0f` | the page floor — near-black canvas, the dominant surface |
+| `card` / `popover` | `#181818` / `#2a2a2a` | content cards; overlays and dropdowns lift to the top surface |
+| `foreground` | `#ffffff` | primary ink — table values, headings, high-emphasis text |
+| `muted` / `secondary` | `#222222` | subtle fills, secondary buttons, disabled surfaces |
+| `muted-foreground` | `#a8a8a8` | labels, captions, running secondary text |
+| `border` / `input` | `#222222` / `#333333` | every separator and grid line; fields take the stronger hairline edge |
+| `primary` | `#0007cd` | the one primary action; active nav; brand detail |
+| `accent` | `#2a2a2a` | hover and selected rows — a neutral lift, never a second hue |
+| `ring` | `#1a26ff` | the focus outline — the brighter blue glow tone, legible on near-black |
+| `destructive` | `#ff4d4d` | destructive actions and error state only |
+| `success` / `warning` | `#33d17a` / `#f5a524` | status signalling only, never chrome |
+
+Pure black `#000000` is reserved for code, terminal, and log surfaces — never as general chrome (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is abcDiatype (the licensed brand face) with Inter as the open
+substitute at weight 500 / -1.5% tracking — UI, body, and headings all ride it; weight and tight
+tracking, not a second family, carry the display voice. `font-mono` is JetBrains Mono for code, CLI,
+IDs, and log lines. 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 | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 16px / 1.5 | `font-weight-normal` |
+| small | labels, meta, dense table | 14px / 1.5 | `font-weight-normal` |
+| caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+0.08em`, uppercase |
+| code | IDs, CLI, log lines | 13px / 1.5 | `font-mono` · 400 |
+
+Bump weight for emphasis, never size; display weight never drops below 500.
+
+## 4 Component Stylings
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (8px), no pill. Secondary:
+  `secondary` fill, `foreground`, `radius`. Ghost: transparent, `accent` on hover.
+- **Input** — `card` fill, 1px `input` border (`border-weight`), `radius`; focus draws the `ring` at
+  full 2px, no glow.
+- **Card** — `card` surface stepped one brightness rung above `background`, 1px `border`, `radius`;
+  depth from the surface step, not shadow.
+- **Table row** — height `table-row-height`; `border` grid lines; `accent` on hover and selection;
+  `tabular-nums` on numeric columns; IDs in `font-mono`.
+- **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, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`. Pill radius is legal for small label badges only.
+
+## 5 Layout
+
+Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 96`. 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` through `density-gap` and stepped per archetype by the
+surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat, brightness-step depth — the brand's signature. Rank rises by surface brightness, not shadow:
+
+- **0 — canvas** `background` (`#0f0f0f`), no border.
+- **1 — panel / card** `card` (`#181818`) one rung up, on a 1px `border`.
+- **2 — overlay** `popover` / side panel / modal (`#2a2a2a`), the top rung; `shadow-intensity` stays
+  near-absent even here — the brightness step carries the lift.
+
+Code, terminal, and log surfaces recess to pure `#000000`. Focus is a 2px `ring` outline in the
+`primary-glow` blue (never a glow), on every interactive element. Three z-levels: content, chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` (Composio Blue) for the single most important action on a surface;
+  everything else is neutral or status.
+- **Do** carry depth with the brightness-step ladder and hairlines — the brand adds no drop-shadow tiers.
+- **Do** render code, CLI, IDs, and timestamps in `font-mono`; apply `tabular-nums` to numeric columns.
+- **Do** keep CTAs at `radius` (8px) — compact developer-ergonomic geometry, not full pills.
+- **Don't** promote a second chromatic accent — cyan (`#00d4ff`) and violet (`#7b3aed`) are
+  illustration-only; pill the primary CTA; or reach for a radius outside `radius-scale`.
+- **Don't** use pure `#000000` outside code/terminal/log surfaces, signal elevation with heavy drop
+  shadows, or drop display weight below 500.
+
+## 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`); top nav → hamburger; tables scroll 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:
+
+- Run dark by default — this brand is categorically dark; the light map is the opt-in, not the base.
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action with Composio Blue. If two things want the accent, one is not primary.
+- Depth is a brightness step, never a shadow — step surfaces up from `background` to `card` to overlay.
+- Code, CLI, IDs, and log lines are `font-mono`; numeric columns are `tabular-nums`; code surfaces
+  recess to `#000000`.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
+- Leave the marketing behind — no terminal-mockup hero, no spotlight glows, no 72px display, no 96px
+  band rhythm. The palette, near-black temperature, 8px radii, and single sans voice carry; the show does not.