@nurix/etna 0.18.18 → 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.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/rules/general.md +2 -1
- package/data/harnesses/code/skills/design/SKILL.md +65 -0
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
- package/data/harnesses/code/skills/design/references/create.md +126 -0
- package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
- package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
- package/data/harnesses/code/skills/design/references/improve.md +85 -0
- package/data/harnesses/code/skills/design/references/interaction.md +77 -0
- package/data/harnesses/code/skills/design/references/introspect.md +100 -0
- package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
- package/data/harnesses/code/skills/design/references/personality.md +504 -0
- package/data/harnesses/code/skills/design/references/structure.md +138 -0
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
- package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
- package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
- package/data/harnesses/etna/CLAUDE.md +1 -1
- package/data/harnesses/etna/harness.json +2 -2
- package/data/harnesses/etna/rules/general.md +2 -1
- package/data/harnesses/mobile/harness.json +2 -2
- package/data/harnesses/mobile/rules/general.md +2 -1
- 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
|
+
```
|