@nurix/etna 0.18.19 → 0.18.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  4. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  5. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  6. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  66. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  67. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  76. package/data/harnesses/code/skills/design/references/create.md +126 -0
  77. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  78. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  79. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  80. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  81. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  82. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  83. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  84. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  85. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  86. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  87. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  88. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  89. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  90. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  91. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  92. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  93. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  94. package/package.json +1 -1
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Cursor
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Cursor — the warm-cream editorial dev-tool operator design
9
+
10
+ Cursor's marketing site is a quietly-confident developer brand that chose editorial calm over
11
+ IDE-darkness: a warm cream canvas, warm near-black ink carrying body and display alike, a single orange
12
+ voltage, and JetBrains Mono across the roughly-half of the page that is code. This entry is the
13
+ *operator* reading of that brand — an internal tool (agent-ops console, run queue, cluster dashboard,
14
+ log stream) in Cursor's language. What carries: the warm cream canvas (never pure white), warm ink, the
15
+ single Cursor Orange accent held scarce, the editorial magazine voice (display at 400 with negative
16
+ tracking, never bold), JetBrains Mono on every code surface, hairline-only flat depth, and the 8px
17
+ developer-dialect button radius. What stays behind: the 72px hero display, the full-width IDE mockup,
18
+ the 80px section rhythm, the ink-inverted featured card, and the marketing CTA bands.
19
+
20
+ **Warm, but light.** The cream canvas (`#f7f7f4`) is deliberate warmth, not the cool gray-white the
21
+ category defaults to — but it reads *light*, so the light-default floor holds cleanly (no
22
+ categorically-dark exception); warmth is temperature, not polarity. Both machine blocks are fully
23
+ valued; judgments away from the marketing brand are annotated `# derived:` where the corpus is silent.
24
+
25
+ ## 1 Visual Theme
26
+
27
+ Light by default; dark is opt-in. The whole UI floats on Cursor's warm cream `background` (`#f7f7f4`);
28
+ cards step up to pure white `card` (`#ffffff`), so a panel reads by a hair of brightness plus its
29
+ hairline, not by shadow. Emphatically flat: hierarchy is carried by warm hairline `border`, type
30
+ weight, and the cream-to-white surface step — never a drop shadow. A single accent, Cursor Orange
31
+ `primary` (`#f54e00`), is held scarce — the one primary action, the active-nav indicator, the focus
32
+ `ring`. Ink is a warm near-black `foreground` (`#26251e`) — warm where every other tool is cool.
33
+ Density is `standard`; editorial pacing survives as slightly generous shell dimensions, not loose grids.
34
+
35
+ ## 2 Color Roles
36
+
37
+ Light values (the manifest carries hex — the corpus's native format). One accent — `primary` is the
38
+ only chromatic hue that carries UI meaning; the timeline pastels live only in charts and agent-stage
39
+ chips (see §7), status hues speak only status.
40
+
41
+ | Role | Value | Allowed where |
42
+ | --- | --- | --- |
43
+ | `background` | warm cream `#f7f7f4` | the page floor and content canvas — the dominant surface |
44
+ | `card` / `popover` | pure white `#ffffff` | cards and overlays — a slight bright lift off the cream, differentiated by hairline |
45
+ | `foreground` | warm near-black `#26251e` | display and all primary ink |
46
+ | `muted` / `secondary` | soft warm fill `#efeee8` | hover rows, quiet band tints, secondary-button fill |
47
+ | `muted-foreground` | warm gray `#807d72` | labels, captions, secondary text |
48
+ | `border` / `input` | warm hairline `#e6e5e0` | every separator, grid line, and field edge — one warm step, not an ink line |
49
+ | `primary` | Cursor Orange `#f54e00` | the one primary action; the focus `ring`; the active-nav indicator |
50
+ | `primary-foreground` | white `#ffffff` | text on the orange action |
51
+ | `accent` | warm selection lift `#eae8e0` | selected / hovered rows and nav — a neutral warm step, never orange |
52
+ | `ring` | `primary` orange | the focus outline — unmistakable, because keyboard-first |
53
+ | `destructive` | warm rose-red `#cf2d56` | destructive actions and error state only |
54
+ | `success` / `warning` | green `#1f8a65` / warm gold `#c08532` | status signalling only, never chrome |
55
+
56
+ ## 3 Typography
57
+
58
+ `font-sans` is CursorGothic (the licensed brand face), with Inter the corpus's documented open-source
59
+ substitute — one sans carries body, UI, labels, and headings. `font-mono` is JetBrains Mono for IDs,
60
+ codes, timestamps, log lines, and every code surface (roughly half of Cursor's own chrome); numeric
61
+ columns render `tabular-nums`. The defining typographic trait is the **editorial voice**: page titles
62
+ wear weight 400 with negative tracking — a magazine feel, never bold — while smaller component heads
63
+ step up to the strong 600. The hero-scale 72px display stays behind; an operator surface tops out at a
64
+ 24px page title.
65
+
66
+ | Step | Role | Size · line | Weight · tracking |
67
+ | --- | --- | --- | --- |
68
+ | h1 | page title | 24px / 1.2 | `font-weight-normal` (400) · `heading-tracking` |
69
+ | h2 | section head | 20px / 1.3 | `font-weight-normal` (400) · `heading-tracking` |
70
+ | h3 | card / group head | 15px / 1.4 | `font-weight-strong` (600) · 0 |
71
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
72
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
73
+ | caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.08em`, uppercase |
74
+ | code | IDs, logs, amounts | mono 13px / 1.5 | `font-weight-normal` |
75
+
76
+ Keep page titles at 400 with negative tracking — the magazine voice depends on it; emphasise by size, never by bolding the display.
77
+
78
+ ## 4 Component Stylings
79
+
80
+ Every recurring operator component composes from the primitives — no literal values.
81
+
82
+ - **Button** — primary: filled orange `primary` on white `primary-foreground`, `radius` (8px), never a pill. Secondary: white `card` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
83
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the orange `ring` at full 2px, no glow.
84
+ - **Card** — white `card` surface on a 1px `border` — the bright step off the cream carries the lift; shadow only when a true overlay must separate; inset by `density-inset`.
85
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection warms to `accent`.
86
+ - **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.
87
+ - **Badge** — pill radius (badges only), `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
88
+
89
+ ## 5 Layout
90
+
91
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
92
+ 80px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
93
+ `sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (64px, the
94
+ brand's nav height), side panel `side-panel-width` (440px) / `side-panel-width-rich` (640px), modal cap
95
+ `modal-width-max`, forms `form-max-width`, tables full-width. The dimensions run a hair generous —
96
+ editorial breathing carried through the shell, not loose grids. Density is governed globally by
97
+ `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
98
+
99
+ ## 6 Depth
100
+
101
+ Flat and hairline-only. Depth comes from the cream-to-white surface step and warm hairlines, not shadow:
102
+
103
+ - **0 — canvas** `background` (`#f7f7f4`), no border.
104
+ - **1 — panel / card** white `card` (`#ffffff`) on a 1px `border`; the bright step off the cream plus the hairline carries the lift. Selected / hover rows warm to `accent` (`#eae8e0`).
105
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest soft lift, enough to float an overlay above the cream. Rank is surface, border, and position — never a heavier shadow.
106
+
107
+ Focus is a 2px orange `ring` outline (never a glow), visible on every interactive element; three z-levels: content, sticky chrome, overlay.
108
+
109
+ ## 7 Do's & Don'ts
110
+
111
+ - **Do** anchor every surface on the warm cream canvas — pure white as the page floor reads as any-other-tool; the tint is Cursor.
112
+ - **Do** reserve orange `primary` for the single primary action, the focus `ring`, and the active-nav indicator — its scarcity at element scale is what makes it read as voltage.
113
+ - **Do** keep page titles at weight 400 with negative tracking, and render every code, log, and terminal surface in `font-mono` (JetBrains Mono) with `tabular-nums` on numeric columns.
114
+ - **Don't** introduce a second brand action color — Cursor Orange is the only one.
115
+ - **Don't** drop the timeline pastels onto semantic status or general chrome — they are scoped to charts and agent-stage chips, and status stays `success` / `warning` / `destructive`.
116
+ - **Don't** pill the primary CTA or reach for a radius outside `radius-scale` — the button/input radius is 8px; pill is badges only.
117
+ - **Don't** signal elevation with drop shadows — warm hairlines and the cream-to-white step carry depth.
118
+
119
+ ## 8 Responsive
120
+
121
+ The operator sweep is 375 / 768 / 1024 / 1440.
122
+
123
+ | Breakpoint | What changes |
124
+ | --- | --- |
125
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
126
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
127
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
128
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; breathing widens |
129
+
130
+ ## 9 Agent Prompt Guide
131
+
132
+ Directives the emitting agent follows verbatim:
133
+
134
+ - Reach for the warm cream canvas first — never pure white for the page floor; the tint is Cursor. Cards are the white bright step above it.
135
+ - Spend orange once per surface: the primary action, the focus `ring`, the active-nav indicator. If two things want the orange, one of them is not primary. Color otherwise belongs to data and status.
136
+ - Page titles wear weight 400 with negative tracking — the editorial voice; component heads and labels earn the strong 600. Never bold the display.
137
+ - Render code, log, and terminal panels in `font-mono` (JetBrains Mono) — show real chrome, not a light mockup of it. Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
138
+ - The timeline pastel palette (peach / mint / blue / lavender / gold) is the brand's one sanctioned multi-hue set — use it for chart series and agent-stage chips (Thinking / Reading / Editing / Done), never for semantic status or general chrome.
139
+ - Depth is the cream-to-white step and warm hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover. Detail and edit go in the side panel beside the work, never a modal.
140
+ - Keyboard-first: the orange `ring` focus outline is always visible. Leave behind the 72px hero display, the full-width IDE mockup, the 80px section rhythm, and the marketing CTA bands.
141
+
142
+ ```yaml design-primitives
143
+ radius: 8px # corpus: buttons/inputs at rounded.md (8px); cards step to 12px (lg), 16px large; pill is badges-only
144
+ shadow-intensity: 0.15 # derived: brand is emphatically hairline-only ("no drop shadows"); only true overlays earn the faintest lift
145
+ border-weight: 1px # corpus: 1px warm hairlines carry all depth
146
+ density-gap: 1 # derived: editorial-spacious brand read to an honest standard operator tier; breathing carried by shell dims, not the data grid
147
+ density-inset: 1 # derived: matches density-gap for coherent component insets
148
+ font-sans: CursorGothic, Inter, system-ui, sans-serif # corpus: CursorGothic is the licensed brand face; Inter is the corpus's documented open-source substitute
149
+ font-mono: JetBrains Mono, Fira Code, ui-monospace, monospace # corpus: JetBrains Mono on every code surface
150
+ font-weight-normal: 400 # corpus: body and — defining trait — the editorial display both sit at 400
151
+ font-weight-strong: 600 # corpus: component titles (title-md/title-sm) and captions at 600; the display stays 400, the brand never bolds it
152
+ heading-tracking: -0.015em # corpus: the documented Inter-substitute tracking (-1.5%); negative display tracking is the editorial signature
153
+ duration-unit: 50ms # derived: corpus declares motion out of scope (known gap); operator-standard functional base
154
+ duration-fast: 100ms # derived: corpus silent on motion; functional tempo
155
+ duration-normal: 150ms # derived: corpus silent on motion; standard functional tempo
156
+ duration-slow: 250ms # derived: corpus silent on motion; overlay/panel transition
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
158
+ contrast-boost: 1 # derived: the soft warm hairlines are intentional editorial calm; no boost
159
+ icon-stroke: 1.5 # derived: corpus silent on icons; a light refined stroke suits the minimal editorial feel
160
+ icon-size-base: 16px # derived: corpus silent on icon size; operator standard
161
+ sidebar-width-expanded: 256px # derived: corpus has no app shell (marketing top-nav only); editorial breathing → a touch wider than a dense rail
162
+ sidebar-width-collapsed: 56px # derived: standard operator icon rail
163
+ topbar-height: 64px # corpus: top-nav height 64px (the brand's nav height)
164
+ side-panel-width: 440px # derived: corpus has no shell; standard nudged up for editorial breathing
165
+ side-panel-width-rich: 640px # derived: content-heavy detail panel
166
+ modal-width-max: 560px # derived: corpus's CTA bands are full-bleed marketing; operator confirmation cap
167
+ form-max-width: 640px # derived: corpus max content ~1200px is marketing; editorial single-column reading caps forms at 640
168
+ table-row-height: 44px # derived: editorial warmth → rows breathe a touch over the dense 40px default
169
+ verbosity: default
170
+ feedback: subtle # derived: corpus is quiet ("hover state never documented"); warm editorial voice wants gentle present feedback, not austere silence
171
+ density-tier: standard # derived: an editorial-spacious brand read down to an honest operator tier; warmth carried by palette/radius, not whitespace
172
+ product-traits: [dev-tools, code-editor, ai-console, dashboard]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "CursorGothic, Inter, system-ui, sans-serif", mono: "JetBrains Mono, Fira Code, ui-monospace, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#f7f7f4"
181
+ foreground: "#26251e"
182
+ card: "#ffffff"
183
+ card-foreground: "#26251e"
184
+ muted: "#efeee8" # derived: corpus hairline-soft repurposed as the soft warm fill for hover rows and quiet bands
185
+ muted-foreground: "#807d72"
186
+ border: "#e6e5e0"
187
+ input: "#e6e5e0"
188
+ ring: "#f54e00"
189
+ primary: "#f54e00"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#eae8e0" # derived: warm selection lift one step past muted, so selection reads over hover; never orange
192
+ accent-foreground: "#26251e"
193
+ destructive: "#cf2d56"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#1f8a65"
196
+ warning: "#c08532" # derived: corpus has no warning hue; warm gold matching the palette temperature reads as amber
197
+ popover: "#ffffff"
198
+ popover-foreground: "#26251e"
199
+ secondary: "#efeee8"
200
+ secondary-foreground: "#26251e"
201
+ chart-1: "#dfa88f" # corpus timeline peach — the brand's own categorical palette carries the chart series
202
+ chart-2: "#9fc9a2" # corpus timeline mint
203
+ chart-3: "#9fbbe0" # corpus timeline blue
204
+ chart-4: "#c0a8dd" # corpus timeline lavender
205
+ chart-5: "#c08532" # corpus timeline gold
206
+ sidebar: "#f2f1ec" # derived: a faint warm step below the cream canvas so the nav rail reads as chrome
207
+ sidebar-foreground: "#26251e"
208
+ sidebar-primary: "#f54e00"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#eae8e0" # derived: hover/selected nav lift, matches accent
211
+ sidebar-accent-foreground: "#26251e"
212
+ sidebar-border: "#e6e5e0"
213
+ sidebar-ring: "#f54e00"
214
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
215
+ radius-scale: [0, 4, 6, 8, 12, 16, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.5 }
219
+ accent-count: 1
220
+ ```
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: ElevenLabs
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # ElevenLabs — editorial voice-AI, warmed to an operator console
9
+
10
+ The operator reading of the ElevenLabs brand. Its own surfaces read like a quietly editorial print
11
+ magazine — off-white canvas, Waldenburg Light display at weight 300, pastel gradient orbs as the only
12
+ "color". This entry keeps what survives at operator scale: the warm canvas, the achromatic ink accent,
13
+ the warm-stone temperature, modest type weight, soft radius, and the pill on the one action. The 64px
14
+ hero display, the orbs, and the 96px rhythm stay behind; the five pastels return only as charts.
15
+ Judgments away from the brand are annotated `# derived:` where the corpus is silent.
16
+
17
+ ## 1 Visual Theme
18
+
19
+ Light by default; dark is opt-in. Flat and editorial: hierarchy comes from warm hairline `border`, type
20
+ weight, and the stone surface ladder, never heavy shadow. The single accent is **achromatic** — a warm
21
+ near-black ink `primary` (`#292524`) worn as a pill on the one action that matters; there is no chromatic
22
+ accent at all, and that discipline carries. Ink is `foreground` (`#0c0a09`); the neutral ramp is a warm
23
+ stone, never the cool slate the category defaults to. The type voice is editorial (a light serif over
24
+ Inter — see §3). Density is `spacious` — the print-magazine calm honored, not crammed. The anchor surface
25
+ is an off-white `background` (`#f5f5f5`) holding white cards, beside a warm `sidebar` (`#f0efed`).
26
+
27
+ ## 2 Color Roles
28
+
29
+ Light values (the manifest carries hex — the corpus's native format). One accent, and it is not a hue:
30
+ `primary` is warm near-black ink; the pastel orbs are demoted to chart series and status speaks status.
31
+
32
+ | Role | Value | Allowed where |
33
+ | --- | --- | --- |
34
+ | `background` | off-white `#f5f5f5` | the page floor — warm, never a cool gray-white |
35
+ | `card` / `popover` | white `#ffffff` | cards and overlays float bright on the off-white canvas |
36
+ | `foreground` | warm near-black `#0c0a09` | all primary ink |
37
+ | `muted` / `secondary` | warm stone `#f0efed` | hover rows, subtle fills, secondary button fill |
38
+ | `muted-foreground` | warm gray `#777169` | labels, captions, secondary text |
39
+ | `border` / `input` | hairline `#e7e5e4` / stronger `#d6d3d1` | separators and grid lines / field edges |
40
+ | `primary` | ink `#292524` | the one primary action (a pill); active nav; press deepens to `#0c0a09` |
41
+ | `accent` | deep stone `#eae7e3` | selected/hovered rows — selection warms the stone, it does not colour it |
42
+ | `ring` | ink `#0c0a09` | the focus outline — unmistakable, because keyboard-first |
43
+ | `destructive` | red `#dc2626` | destructive actions and error state only |
44
+ | `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
45
+
46
+ The five pastels (mint, sky, lavender, peach, rose) live only in `chart-*` — never a button fill, text
47
+ color, or surface; on operator surfaces they are data, not atmosphere.
48
+
49
+ ## 3 Typography
50
+
51
+ Two families. `font-sans` is **Inter** — body, UI, table, label, and button. Page titles wear the editorial
52
+ **serif** — Waldenburg Light at weight 300, EB Garamond the open substitute; the 64px hero display stays
53
+ behind, but the light-serif voice is the brand's irreducible signature. `font-mono` is JetBrains Mono for
54
+ IDs, codes, timestamps, log lines; numeric columns render `tabular-nums`. The brand **never bolds** — the
55
+ serif holds 300; sans emphasis caps at `font-weight-strong` (500), 600 only on the uppercase eyebrow.
56
+
57
+ | Step | Role | Family | Size · line | Weight · tracking |
58
+ | --- | --- | --- | --- | --- |
59
+ | h1 | page title | serif | 28px / 1.15 | 300 · `heading-tracking` |
60
+ | h2 | section head | serif | 22px / 1.2 | 300 · -0.01em |
61
+ | h3 | card / group head | sans | 16px / 1.35 | `font-weight-strong` · 0 |
62
+ | body | UI + prose | sans | 15px / 1.5 | `font-weight-normal` · +0.01em |
63
+ | small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
64
+ | caption | uppercase eyebrow | sans | 12px / 1.4 | 600, +0.08em, uppercase |
65
+ | code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
66
+
67
+ The machine block carries one sans; the agent applies the light serif to h1/h2 by hand (body's +0.01em
68
+ tracking is the editorial dialect).
69
+
70
+ ## 4 Component Stylings
71
+
72
+ Every recurring operator component composes from the primitives — no literal values.
73
+
74
+ - **Button** — `primary`: filled ink, a **pill** (`radius-scale` 9999) — the brand's signature, for the
75
+ one primary action. Secondary: `secondary` fill, 1px `border`, base `radius`. Ghost: `accent` on hover.
76
+ - **Input** — `card` fill, 1px `input` border (`border-weight`), base `radius` (8px); focus thickens the
77
+ border to a 2px ink `ring`, no glow.
78
+ - **Card** — `card` surface on a 1px `border`, base `radius` (12px for feature cards); shadow only when
79
+ lifted (`shadow-intensity`); inset by `density-inset`.
80
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
81
+ numeric columns; row selection warms to `accent`.
82
+ - **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for
83
+ content-heavy), beside the work, not over it.
84
+ - **Badge** — pill radius, `muted`/status fill, uppercase caption; status badges take `success` /
85
+ `warning` / `destructive`, never `primary`.
86
+
87
+ ## 5 Layout
88
+
89
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64` (the marketing
90
+ 96px rhythm stays behind). Shell dimensions map one-to-one to the layout primitives (sidebar 256/56px,
91
+ topbar 64px — the brand's nav height, side panel 440/640px, modal 560px, forms 640px, tables full-width)
92
+ — airier than a dense console, because the tier is `spacious`. Density is stepped per archetype by the
93
+ surface catalog, never by absolute overrides.
94
+
95
+ ## 6 Depth
96
+
97
+ Flat, hairline-first. Hierarchy comes from the stone ladder and warm hairlines, not shadow:
98
+
99
+ - **0 — canvas** `background` (`#f5f5f5`), no border.
100
+ - **1 — panel / card** `card` (white) on a 1px `border` — lifts off the canvas by brightness and hairline; shadow only when it must lift.
101
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
102
+ drop (the brand's single `0 4px 16px rgba(0,0,0,0.04)` tier). Rank is border and position.
103
+
104
+ Focus is a 2px ink `ring` (never a glow) on every element; z-levels: content, chrome, overlay.
105
+
106
+ ## 7 Do's & Don'ts
107
+
108
+ - **Do** anchor on the off-white `#f5f5f5` canvas with white cards — the warm floor is the brand.
109
+ - **Do** keep the accent achromatic — the ink pill is the only action color, reserved for one action per surface.
110
+ - **Do** wear the light serif (weight 300) on page titles, Inter body at +0.01em — the editorial dialect.
111
+ - **Do** pill the primary CTA and badges (`radius-scale` 9999) — the brand's button geometry, kept
112
+ deliberately even though the operator floor would otherwise square it.
113
+ - **Don't** introduce a saturated action color or a second accent; the pastels are chart data only
114
+ (`chart-*`), never fills, text, or surfaces.
115
+ - **Don't** drop the body Inter to weight 300 to match the display — body stays 400/500 for legibility.
116
+ - **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the panel fits.
117
+
118
+ ## 8 Responsive
119
+
120
+ The operator sweep is 375 / 768 / 1024 / 1440.
121
+
122
+ | Breakpoint | What changes |
123
+ | --- | --- |
124
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
125
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
126
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
127
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; breathing widens |
128
+
129
+ ## 9 Agent Prompt Guide
130
+
131
+ Directives the emitting agent follows verbatim:
132
+
133
+ - Reach for the off-white `#f5f5f5` canvas with white cards; keep the accent achromatic — the ink pill is
134
+ the only action color, on the one primary action per surface. If two want it, one is not primary.
135
+ - Page titles wear the light serif (Waldenburg Light / EB Garamond, weight 300) at reduced scale;
136
+ everything else is Inter, body at +0.01em. Never bold — the light display weight is the signature.
137
+ - Pill the primary CTA and badges; keep every other component at the base 8px `radius`.
138
+ - The five pastels are the chart palette only — leave the orbs and the 64px hero display behind.
139
+ - Numeric columns `tabular-nums`; IDs / codes / timestamps `font-mono`; workflows keyboard-complete.
140
+ - Stay flat and spacious — hairline and the stone ladder before shadow.
141
+
142
+ ```yaml design-primitives
143
+ radius: 8px # corpus: inputs at rounded.md (8px); scale offers 12px cards, 16px feature cards, pill for the CTA
144
+ shadow-intensity: 0.25 # corpus: a single soft-drop tier at 0.04 alpha — barely there; operator lifts only true overlays
145
+ border-weight: 1px
146
+ density-gap: 1.1 # rationale: brand is spacious editorial (96px section rhythm, generous pacing); the operator holds an airier gap
147
+ density-inset: 1.1 # rationale: matches the spacious tier — component insets breathe
148
+ font-sans: Inter, system-ui, sans-serif # corpus: Inter carries all body, nav, captions, buttons
149
+ font-mono: JetBrains Mono, ui-monospace, monospace # derived: corpus has no mono; a clean neutral mono for IDs, codes, timestamps
150
+ font-weight-normal: 400 # corpus: Inter body at 400
151
+ font-weight-strong: 500 # corpus: titles/body-strong/buttons at 500; the brand caps emphasis at 500 (600 only on the uppercase eyebrow)
152
+ heading-tracking: -0.01em # corpus: Waldenburg display tracks ~-0.01em at 28-36px
153
+ duration-unit: 50ms # derived: corpus declares motion out of scope; operator-standard base
154
+ duration-fast: 120ms # derived: corpus silent on motion; a calm editorial fast step
155
+ duration-normal: 200ms # derived: corpus silent on motion; an unhurried editorial transition
156
+ duration-slow: 300ms # derived: corpus silent on motion; the slow step for overlays
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard operator ease
158
+ contrast-boost: 1 # derived: warm hairlines are intentional and the surfaces spacious; no dense-grid boost
159
+ icon-stroke: 1.5 # derived: the brand's light editorial weight (display 300) calls for a thin stroke under lucide's default 2
160
+ icon-size-base: 16px # derived: corpus silent; operator standard
161
+ sidebar-width-expanded: 256px # derived: corpus is top-nav only; the spacious posture takes a roomy rail
162
+ sidebar-width-collapsed: 56px # derived: corpus has no shell; operator standard icon rail
163
+ topbar-height: 64px # corpus: top-nav height 64px — kept; the spacious posture honors it
164
+ side-panel-width: 440px # derived: corpus has no shell; spacious nudge over the dense default
165
+ side-panel-width-rich: 640px # derived: corpus has no shell; content-heavy detail width
166
+ modal-width-max: 560px # derived: corpus has no shell; confirmations only
167
+ form-max-width: 640px # derived: the editorial single-column reading caps forms comfortably
168
+ table-row-height: 48px # rationale: spacious tier; the brand's 44px inputs and airy rows breathe over the dense 40px default
169
+ verbosity: default
170
+ feedback: subtle # rationale: the calm editorial voice wants gentle, present feedback — not austere silence
171
+ density-tier: spacious # rationale: the brand reads unmistakably spacious (print-magazine pacing); the operator honors it rather than cramming
172
+ product-traits: [saas, content-studio, dashboard, media-library]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#f5f5f5"
181
+ foreground: "#0c0a09"
182
+ card: "#ffffff"
183
+ card-foreground: "#0c0a09"
184
+ muted: "#f0efed"
185
+ muted-foreground: "#777169"
186
+ border: "#e7e5e4"
187
+ input: "#d6d3d1"
188
+ ring: "#0c0a09"
189
+ primary: "#292524"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#eae7e3" # derived: warm selection tint, one step deeper than muted so selection reads distinct from hover
192
+ accent-foreground: "#292524"
193
+ destructive: "#dc2626"
194
+ destructive-foreground: "#ffffff" # derived: white on the red
195
+ success: "#16a34a"
196
+ warning: "#d97706" # derived: corpus has no warning; a warm amber that sits in the stone family
197
+ popover: "#ffffff"
198
+ popover-foreground: "#0c0a09"
199
+ secondary: "#f0efed"
200
+ secondary-foreground: "#292524"
201
+ chart-1: "#a7e5d3" # corpus: gradient-mint — the atmospheric orbs become the data-viz series
202
+ chart-2: "#a8c8e8" # corpus: gradient-sky
203
+ chart-3: "#c8b8e0" # corpus: gradient-lavender
204
+ chart-4: "#f4c5a8" # corpus: gradient-peach
205
+ chart-5: "#e8b8c4" # corpus: gradient-rose
206
+ sidebar: "#f0efed" # derived: warm rail one step deeper than the canvas
207
+ sidebar-foreground: "#292524" # derived: body-strong ink on the warm rail
208
+ sidebar-primary: "#292524"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#e7e5e4" # derived: hover/selected nav tint = the hairline stone
211
+ sidebar-accent-foreground: "#0c0a09"
212
+ sidebar-border: "#e7e5e4"
213
+ sidebar-ring: "#0c0a09"
214
+ spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 48, 64]
215
+ radius-scale: [0, 4, 8, 12, 16, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [120, 200, 300], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.5 }
219
+ accent-count: 1
220
+ ```