@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.
Files changed (100) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/rules/general.md +2 -1
  4. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  5. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  6. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  66. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  67. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  76. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  77. package/data/harnesses/code/skills/design/references/create.md +126 -0
  78. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  79. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  80. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  81. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  82. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  83. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  84. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  85. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  86. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  87. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  88. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  89. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  90. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  91. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  92. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  93. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  94. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  95. package/data/harnesses/etna/CLAUDE.md +1 -1
  96. package/data/harnesses/etna/harness.json +2 -2
  97. package/data/harnesses/etna/rules/general.md +2 -1
  98. package/data/harnesses/mobile/harness.json +2 -2
  99. package/data/harnesses/mobile/rules/general.md +2 -1
  100. package/package.json +1 -1
@@ -0,0 +1,236 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Kraken
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Kraken — the operator reading
9
+
10
+ The operator reading of Kraken's brand — a clean, trustworthy crypto-exchange look built on a
11
+ commanding purple. Kraken's own surfaces are marketing-editorial: a Kraken-Brand display face at hero
12
+ scale (48/36/28px, weight 700, hard negative tracking) over a pure-white canvas. This entry keeps what
13
+ survives at operator scale — the white canvas, the single commanding Kraken Purple accent, the cool
14
+ near-black ink, the cool blue-gray neutral field, the firm 12px rounded-not-pill geometry, the
15
+ whisper-level shadows, the negative-tracking type voice — and leaves the hero-scale display behind.
16
+ Purple reads commanding in marketing; at operator scale it stays the one reserved accent. Both machine
17
+ blocks are fully valued; each judgment away from the corpus is annotated `# derived:` where it is silent.
18
+
19
+ ## 1 Visual Theme
20
+
21
+ Light by default; dark is opt-in. Flat: hierarchy comes from cool hairline `border`, type weight, and
22
+ color contrast — never decorative shadow (the brand's shadows are whisper-level). A single accent —
23
+ Kraken Purple `primary` (`#7132f5`) — commands the one action that matters, active nav, and the inline
24
+ brand link. Ink is a cool near-black `foreground` (`#101114`) on a pure-white `background` (`#ffffff`);
25
+ the neutral field is a cool blue-gray ladder (`#686b82` → `#9497a9` → `#dedee5`) that reads
26
+ engineered, not flatly warm. The geometry is firmly rounded — 12px controls, never a pill. Density is
27
+ `standard`; the anchor surface is a white canvas beside a faintly cool `sidebar`.
28
+
29
+ ## 2 Color Roles
30
+
31
+ Light values (the manifest carries hex — the corpus's native format). One accent: `primary` is the
32
+ only chromatic hue that carries brand meaning; the positive/negative trading hues speak status only.
33
+
34
+ | Role | Value | Allowed where |
35
+ | --- | --- | --- |
36
+ | `background` / `card` / `popover` | pure white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by hairline not brightness |
37
+ | `foreground` | cool near-black `#101114` | all primary ink and headings |
38
+ | `muted` | faint cool gray `#f2f2f5` | hover rows, subtle fills, quiet bands |
39
+ | `secondary` | soft cool gray `#f6f6f8` | secondary button fill, one step off the canvas |
40
+ | `muted-foreground` | cool gray `#686b82` | labels, captions, secondary running text (dims to silver-blue `#9497a9` for the quietest meta) |
41
+ | `border` / `input` | cool hairline `#dedee5` | every separator, grid line, and field edge — the highest-frequency token |
42
+ | `primary` | Kraken Purple `#7132f5` (dark `#5741d8`, deep `#5b1ecf`) | the one primary action; active nav; the inline brand link — reserved |
43
+ | `accent` | purple wash `#ebe5fe` | selected/hovered rows and nav — a light wash of `primary`, on-accent surfaces only |
44
+ | `ring` | `primary` purple | the focus outline — inputs focus to a 2px Kraken Purple edge |
45
+ | `destructive` | sell/down red `#cf2e3f` | destructive actions, error state, and down-moves |
46
+ | `success` | positive green `#149e61` | success status and up-moves (badge text darkens to `#026b3f`) |
47
+ | `warning` | amber `#e08c0a` | caution status only — never a chrome fill |
48
+
49
+ Kraken Purple has documented dark (`#5741d8`) and deep (`#5b1ecf`) variants for outlined edges and
50
+ press states, and a 16%-alpha subtle fill — but it stays the single scarce accent (§7); the trading
51
+ up/down hues live only in figures and status.
52
+
53
+ ## 3 Typography
54
+
55
+ One sans, one mono. `font-sans` is IBM Plex Sans — the corpus's own documented fallback for the
56
+ proprietary Kraken-Brand/Kraken-Product pair; the single sans serves UI, body, headings, and labels,
57
+ with heading weight and the negative tracking carrying the display voice. `font-mono` is IBM Plex Mono
58
+ — the fintech number voice for asset prices, percent changes, IDs, and timestamps. Numeric columns
59
+ render `tabular-nums` so figures align down a column.
60
+
61
+ | Step | Role | Size · line | Weight · tracking |
62
+ | --- | --- | --- | --- |
63
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
64
+ | h2 | section head | 20px / 1.3 | `font-weight-strong` · `heading-tracking` |
65
+ | h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
66
+ | body | UI + prose | 14px / 1.45 | `font-weight-normal` |
67
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
68
+ | caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, uppercase |
69
+ | number | table figures, prices | 14px / 1.4 · 500 | `font-mono`, `tabular-nums` |
70
+
71
+ The corpus's signature — the Kraken-Brand display at 48/36/28px, weight 700, with `-1px` / `-0.5px`
72
+ tracking — is a marketing hero and stays behind; at operator heading scale the weight steps to
73
+ `font-weight-strong` (600) while the negative tracking carries.
74
+
75
+ ## 4 Component Stylings
76
+
77
+ Every recurring operator component composes from the primitives — no literal values.
78
+
79
+ - **Button** — `primary`: filled Kraken Purple on `primary-foreground`, `radius` (12px), no pill.
80
+ Outlined: `background` fill, 1px `primary`-dark `border`, `primary` text. Subtle: the 16% purple
81
+ wash (`accent`) with `primary` text. Secondary: `secondary` gray fill, `foreground`.
82
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at a
83
+ 2px Kraken Purple edge, no glow.
84
+ - **Card** — `card` surface on a 1px `border`, `radius`; shadow only when a card must lift off the
85
+ canvas, and then only the whisper tier.
86
+ - **Table / asset row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection
87
+ tints `accent`; price/amount cells take `font-mono` + `tabular-nums`; direction cells take `success`
88
+ (up) / `destructive` (down) as text color, never a fill.
89
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
90
+ for content-heavy), beside the work, not over it.
91
+ - **Badge** — hairline `border`, `muted` / status fill at low alpha, uppercase caption; status badges
92
+ take `success` / `warning` / `destructive`, never `primary` (corpus badges: success green on a 16%
93
+ wash, neutral gray on a 12% wash).
94
+
95
+ ## 5 Layout
96
+
97
+ Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the corpus's odd
98
+ marketing steps — 3/5/6/13/15/25 — stay behind). Shell dimensions map one-to-one to the layout
99
+ primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
100
+ panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
101
+ tables full-width. Density is governed globally by `density-tier` and stepped per archetype by the
102
+ surface catalog — never by absolute overrides; the layout reads clean and calm, not cramped.
103
+
104
+ ## 6 Depth
105
+
106
+ Flat, hairline-first. Hierarchy comes from the surface ladder and cool hairlines, not shadow:
107
+
108
+ - **0 — canvas** `background` (`#ffffff`), no border.
109
+ - **1 — panel / card** `card` on a 1px `border`; rank reads by hairline and position, not brightness.
110
+ The whisper micro shadow (`rgba(16,24,40,0.04) 0 1px 4px`) lifts a card only when it must.
111
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the soft
112
+ subtle tier (`rgba(0,0,0,0.03) 0 4px 24px`); no level stacks a heavier shadow to signal rank.
113
+
114
+ Focus is a 2px `ring` (Kraken Purple) outline, never a glow, on every interactive element; three
115
+ z-levels: content, sticky chrome, overlay.
116
+
117
+ ## 7 Do's & Don'ts
118
+
119
+ - **Do** reserve `primary` (Kraken Purple) for the single most important action, active nav, and inline
120
+ brand links. Commanding on marketing, scarce on an operator surface.
121
+ - **Do** keep controls at 12px `radius` — firmly rounded, never a pill; badges and chips may step down
122
+ to 6–8px.
123
+ - **Do** carry every figure in `font-mono` with `tabular-nums`; direction rides `success` /
124
+ `destructive` as text color, never a fill.
125
+ - **Don't** introduce a second brand accent, and never reach for a purple outside the defined scale
126
+ (`#7132f5` / `#5741d8` / `#5b1ecf`) — off-scale purples read off-brand.
127
+ - **Don't** pill the primary CTA — 12px is the button ceiling; pill radius is for badges only.
128
+ - **Don't** signal elevation with heavy or stacked drop shadows — the system has two whisper tiers and
129
+ nothing louder.
130
+
131
+ ## 8 Responsive
132
+
133
+ The operator sweep is 375 / 768 / 1024 / 1440.
134
+
135
+ | Breakpoint | What changes |
136
+ | --- | --- |
137
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; asset rows stack ticker over price |
138
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
139
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
140
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
141
+
142
+ ## 9 Agent Prompt Guide
143
+
144
+ Directives the emitting agent follows verbatim:
145
+
146
+ - Anchor on the pure-white canvas; accent only the primary action, active nav, and inline links in
147
+ Kraken Purple. If two things want the purple, one is not primary.
148
+ - Keep controls at 12px `radius` — firmly rounded, never a pill. Badges and chips step down to 6–8px.
149
+ - Every numeric column is `tabular-nums` and every price / ID / timestamp is `font-mono`; direction and
150
+ status ride `success` / `destructive` as text color, never a fill.
151
+ - Stay flat — cool hairline and the surface ladder before any shadow; reach past the two whisper tiers
152
+ only for a true overlay. Emphasise by weight, not size; carry the negative `heading-tracking` on
153
+ headings.
154
+ - Leave the marketing skin behind: the Kraken-Brand hero display at 48/36/28px weight 700 stays behind.
155
+ What carries: the palette, its cool temperature, the single commanding purple, the firm 12px rounded
156
+ geometry, the whisper-shadow depth, and the tabular fintech number voice.
157
+
158
+ ```yaml design-primitives
159
+ radius: 12px # corpus: buttons at 12px, repeated as the brand rule ("12px on all buttons", "12px is the max"); firmly rounded, never a pill
160
+ shadow-intensity: 0.3 # derived: corpus shadows are whisper-level (0.03–0.04 alpha) — near-flat, hairlines carry depth
161
+ border-weight: 1px # corpus: outlined button and divider borders at 1px
162
+ density-gap: 1
163
+ density-inset: 1
164
+ font-sans: IBM Plex Sans, system-ui, sans-serif # corpus: Kraken-Brand/Kraken-Product proprietary → IBM Plex Sans is the corpus's own documented fallback; one sans slot serves both voices
165
+ font-mono: IBM Plex Mono, ui-monospace, monospace # derived: corpus is silent on a mono; IBM Plex Mono pairs with the Plex sans for the fintech number voice
166
+ font-weight-normal: 400 # corpus: body weight 400
167
+ font-weight-strong: 600 # corpus: feature titles 600, buttons 500–600; the display 700 is a marketing hero that stays behind
168
+ heading-tracking: -0.02em # corpus: display hero -1px (-0.02em), sections -0.5px; the negative tracking is the display signature, carried to operator heading scale
169
+ duration-unit: 50ms # derived: corpus silent on motion; functional operator base
170
+ duration-fast: 100ms # derived: corpus silent on motion
171
+ duration-normal: 150ms # derived: corpus silent on motion
172
+ duration-slow: 250ms # derived: corpus silent on motion
173
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
174
+ contrast-boost: 1 # derived: clean marketing-calm brand, not a dense grid; cool hairlines already carry structure
175
+ icon-stroke: 1.75 # derived: corpus silent on iconography; operator-standard stroke
176
+ icon-size-base: 16px # derived: corpus silent; operator standard base control icon
177
+ sidebar-width-expanded: 248px # derived: corpus is marketing-only (no app shell); operator standard
178
+ sidebar-width-collapsed: 56px # derived: corpus has no shell; operator standard icon rail
179
+ topbar-height: 56px # derived: corpus has no shell; operator standard top-nav height
180
+ side-panel-width: 420px # derived: corpus has no shell; operator standard detail width
181
+ side-panel-width-rich: 640px # derived: corpus has no shell; content-heavy detail width
182
+ modal-width-max: 560px # derived: corpus has no shell; confirmations only
183
+ form-max-width: 640px # derived: corpus has no shell; operator forms cap comfortably
184
+ table-row-height: 44px # derived: rounded, clean fintech read — rows breathe a touch over the dense 40px default (corpus button padding runs tall)
185
+ verbosity: default
186
+ feedback: subtle
187
+ density-tier: standard # rationale: corpus is a clean, trustworthy marketing surface, not a terminal — dense-capable but reads calm; honest standard tier
188
+ product-traits: [crypto-exchange, trading-desk, fintech, dashboard]
189
+ ```
190
+
191
+ ```yaml lever-manifest
192
+ version: 1
193
+ fonts: { sans: "IBM Plex Sans, system-ui, sans-serif", mono: "IBM Plex Mono, ui-monospace, monospace" }
194
+ color-tokens:
195
+ light:
196
+ background: "#ffffff"
197
+ foreground: "#101114"
198
+ card: "#ffffff"
199
+ card-foreground: "#101114"
200
+ muted: "#f2f2f5" # derived: light cool-gray fill from the blue-gray neutral scale
201
+ muted-foreground: "#686b82"
202
+ border: "#dedee5"
203
+ input: "#dedee5"
204
+ ring: "#7132f5"
205
+ primary: "#7132f5"
206
+ primary-foreground: "#ffffff"
207
+ accent: "#ebe5fe" # derived: solid equivalent of the corpus's Purple Subtle rgba(133,91,251,0.16) over white
208
+ accent-foreground: "#7132f5"
209
+ destructive: "#cf2e3f" # derived: corpus documents only a success green — a sell/down/destructive red is derived to pair, tuned cool to match the blue-gray field
210
+ destructive-foreground: "#ffffff"
211
+ success: "#149e61"
212
+ warning: "#e08c0a" # derived: corpus documents no caution hue; an amber warning derived to complete the status triad
213
+ popover: "#ffffff"
214
+ popover-foreground: "#101114"
215
+ secondary: "#f6f6f8" # derived: solid equivalent of the corpus's Secondary Gray rgba(148,151,169,0.08) over white
216
+ secondary-foreground: "#101114"
217
+ chart-1: "#7132f5" # Kraken Purple
218
+ chart-2: "#149e61" # positive green
219
+ chart-3: "#cf2e3f" # derived: the down/sell red
220
+ chart-4: "#5741d8" # derived: Purple Dark as a second cool series
221
+ chart-5: "#9497a9" # derived: silver-blue neutral for a fifth series
222
+ sidebar: "#f7f7f9" # derived: operator sidebar tinted from the cool-gray neutral (corpus is marketing-only)
223
+ sidebar-foreground: "#101114"
224
+ sidebar-primary: "#7132f5"
225
+ sidebar-primary-foreground: "#ffffff"
226
+ sidebar-accent: "#ebe5fe" # derived: the purple-wash selection tint
227
+ sidebar-accent-foreground: "#7132f5"
228
+ sidebar-border: "#dedee5"
229
+ sidebar-ring: "#7132f5"
230
+ spacing-scale: [4, 8, 12, 16, 20, 24, 32, 48]
231
+ radius-scale: [3, 6, 8, 10, 12, 16, 9999]
232
+ shadow-levels: [none, sm, md]
233
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
234
+ icons: { family: lucide, stroke: 1.75 }
235
+ accent-count: 1
236
+ ```
@@ -0,0 +1,237 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Linear
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Linear — near-black product-craft operator design
9
+
10
+ ## 1 Visual Theme
11
+
12
+ Linear is engineered, quiet, dense, luxurious-by-restraint, and **categorically dark** — this entry
13
+ inverts the operator light-default: dark is the signature theme a tool wears, and a valued light daytime
14
+ mode ships alongside. Flat: rank is a surface ladder (canvas → card → muted → popover) and hairline
15
+ `border`, never drop shadow — Linear resists shadow almost entirely. The single accent, lavender-blue
16
+ `primary` `#5e6ad2`, appears only on the brand mark, the one primary action, the focus `ring`, and link
17
+ emphasis. The neutral ramp is a cool blue-gray so the UI reads engineered, not flatly gray. Anchor
18
+ surface: the near-black canvas `#010102` (a true black warmed by a faint blue tint) with charcoal panels
19
+ a hairline above it. Density is `dense` — tight rows, minimal chrome, technical.
20
+
21
+ ## 2 Color Roles
22
+
23
+ The signature is dark; both themes are valued (light listed first). One chromatic accent — `primary`
24
+ is the only hue that carries meaning; status hues speak only status.
25
+
26
+ | Role | Light | Dark (signature) | Allowed where |
27
+ | --- | --- | --- | --- |
28
+ | `background` / `card` / `popover` | `#ffffff` | canvas `#010102`, card `#0f1011`, popover `#18191a` | page, panels, overlays |
29
+ | `foreground` | `#0d0e10` | ink `#f7f8f8` | all primary ink |
30
+ | `muted` / `secondary` | `#f4f5f8` | `#141516` / `#0f1011` | hover fills, secondary buttons |
31
+ | `muted-foreground` | `#6b7280` | `#8a8f98` | labels, captions, secondary text |
32
+ | `border` / `input` | `#e6e7eb` / `#d9dbe0` | `#23252a` / `#34343a` | separators, grid lines, field edges |
33
+ | `primary` | `#5e6ad2` | `#5e6ad2` | primary action; brand mark; active nav; link emphasis |
34
+ | `accent` | `#eceefb` | `#1c1d2b` | selected/hovered rows — a faint lavender wash |
35
+ | `ring` | `#5e69d1` | `#5e69d1` | the lavender focus outline, keyboard-first |
36
+ | `destructive` | `#eb5757` | `#eb5757` | destructive actions and error state only |
37
+ | `success` / `warning` | `#27a644` / `#f2994a` | same | status only, never chrome |
38
+
39
+ Lavender hover is `#828fff`, pressed/focus `#5e69d1`; marketing's deeper ladder steps stay behind.
40
+
41
+ ## 3 Typography
42
+
43
+ One sans, one mono, single continuous voice. The free operator substitute for Linear's proprietary cut
44
+ is **Inter** (500/600/700), fallback `SF Pro Display, -apple-system, system-ui`; `font-mono` is Geist
45
+ Mono (JetBrains Mono viable) for IDs, codes, timestamps, log lines. Numeric columns render
46
+ `tabular-nums`.
47
+
48
+ | Step | Role | Size · line | Weight · tracking |
49
+ | --- | --- | --- | --- |
50
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
51
+ | h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
52
+ | h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `-0.01em` |
53
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
54
+ | small | labels, dense table | 13px / 1.4 | `font-weight-normal` |
55
+ | eyebrow | uppercase taxonomy | 12px / 1.3 | `font-weight-strong`, `+0.4px` positive (Linear's signature contrast) |
56
+ | mono | IDs, codes, log lines | 13px / 1.5 | `font-weight-normal` |
57
+
58
+ Pair display 600 with body 400 — Linear resists 700+. Bump weight to emphasize, never size.
59
+
60
+ ## 4 Component Stylings
61
+
62
+ - **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` 8px, no pill, hover lifts
63
+ to `#828fff`. Secondary: `secondary` fill, 1px `border`. Ghost: transparent, `accent` on hover.
64
+ - **Input** — `background` fill, 1px `input` edge, `radius`; focus draws the lavender `ring` at 2px, no
65
+ glow.
66
+ - **Card** — `card` a hairline above canvas, 1px `border`, `radius` steps to 12px for large panels;
67
+ shadow only when it must truly lift.
68
+ - **Table row** — height `table-row-height` (dense); `border` grid; `muted` on hover; selection tints
69
+ `accent`; `tabular-nums` on numerics.
70
+ - **Side panel** — entity detail opens beside the work (`side-panel-width` / `side-panel-width-rich`),
71
+ never over it.
72
+ - **Badge** — hairline `border`, `muted`/status fill, uppercase eyebrow; status badges take
73
+ `success` / `warning` / `destructive`, never `primary`.
74
+
75
+ ## 5 Layout
76
+
77
+ Base unit 4px; on-scale ramp `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (marketing's 96px section gap
78
+ stays behind). Shell maps one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
79
+ `sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
80
+ `side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`, tables full-width. Density is
81
+ `dense` globally (compact ~8px/14px button padding), stepped per archetype by the surface catalog.
82
+
83
+ ## 6 Depth
84
+
85
+ Flat — rank from the surface ladder and hairlines, not shadow. **0 canvas** `background` (`#010102`
86
+ dark / white light), no border. **1 panel** `card` a hairline above canvas on a 1px `border`, with a
87
+ faint top-edge highlight; shadow only when it must lift. **2 overlay** `popover` / side panel / modal —
88
+ the rare soft shadow on light, a deeper surface step on dark. Focus is a 2px lavender `ring` (never a
89
+ glow), always visible. Three z-levels: content, sticky chrome, overlay.
90
+
91
+ ## 7 Do's & Don'ts
92
+
93
+ - **Do** default to dark — it is Linear's identity; ship light as an equal daytime mode, not the primary.
94
+ - **Do** reserve lavender `primary` for the brand mark, the one primary action, focus, and link
95
+ emphasis — nowhere else.
96
+ - **Do** carry hierarchy with the surface ladder, hairlines, and weight; don't skip ladder steps.
97
+ - **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps.
98
+ - **Don't** use lavender as a background or card fill, or add a second chromatic accent.
99
+ - **Don't** use pure `#000000` — the faint blue tint of `#010102` is intentional.
100
+ - **Don't** pill the CTA, reach past `radius-scale`, or signal elevation with heavy shadows.
101
+
102
+ ## 8 Responsive
103
+
104
+ The operator sweep is 375 / 768 / 1024 / 1440.
105
+
106
+ | Breakpoint | What changes |
107
+ | --- | --- |
108
+ | 375 | sidebar → drawer; two-pane stacks; side panel → full sheet; density holds |
109
+ | 768 | sidebar → icon rail (`sidebar-width-collapsed`); tables scroll overflow; nav → hamburger |
110
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
111
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use full width |
112
+
113
+ ## 9 Agent Prompt Guide
114
+
115
+ - Wear the dark theme by default (`data-theme="dark"`); light is the opt-in daytime mode.
116
+ - Lead every list surface with its dense table; lead every entity with its primary read, not chrome.
117
+ - Accent only the primary action, brand mark, focus, and links — if two things want lavender, one is
118
+ not primary. Carry depth with the surface ladder and hairlines; past a hairline only for a true overlay.
119
+ - Detail and edit go in the side panel; a modal is a confirmation, not a workspace. Every numeric column
120
+ is `tabular-nums`; every ID / code / timestamp is `font-mono`; the `ring` is always visible.
121
+ - Leave marketing behind: hero display (40–80px), the -3px display tracking, product screenshots as the
122
+ page protagonist, 96px section rhythm, pill toggles, the inverse-white CTA.
123
+
124
+ ```yaml design-primitives
125
+ radius: 8px # derived: Linear's button/input radius (rounded.md 8px) as the operator base; cards step to 12px
126
+ shadow-intensity: 0.3 # derived: Linear resists shadow; rank is surface ladder + hairline
127
+ border-weight: 1px
128
+ density-gap: 0.85 # derived: dense, technical read — tighter than a standard operator app
129
+ density-inset: 0.85 # derived: matches the dense gap
130
+ font-sans: Inter, SF Pro Display, -apple-system, system-ui, sans-serif # derived: Linear's custom sans is proprietary; corpus names Inter as the closest free substitute
131
+ font-mono: Geist Mono, JetBrains Mono, ui-monospace, monospace # derived: Linear Mono substitute per corpus
132
+ font-weight-normal: 400
133
+ font-weight-strong: 600
134
+ heading-tracking: -0.02em # derived: Linear's negative display tracking scaled to operator heading sizes (hero -3px stays behind)
135
+ duration-unit: 50ms # derived: no corpus motion; snappy operator base
136
+ duration-fast: 100ms # derived: Linear's UI reads notably fast
137
+ duration-normal: 150ms # derived: functional transition default
138
+ duration-slow: 200ms # derived: kept short — Linear favors crisp, not cinematic
139
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: no corpus easing; standard crisp ease
140
+ contrast-boost: 1 # derived: surface-ladder hierarchy needs no border boosting
141
+ icon-stroke: 1.5 # derived: Linear iconography is fine and precise; below lucide's default 2
142
+ icon-size-base: 16px
143
+ sidebar-width-expanded: 240px # derived: Linear product left-nav proportion
144
+ sidebar-width-collapsed: 56px # derived: icon-rail width
145
+ topbar-height: 56px # corpus top-nav height
146
+ side-panel-width: 440px # derived: Linear issue-detail panel proportion
147
+ side-panel-width-rich: 640px # derived: content-heavy detail
148
+ modal-width-max: 560px # derived: confirmation-dialog cap
149
+ form-max-width: 640px # derived: readable form column
150
+ table-row-height: 36px # derived: Linear's dense issue-row height
151
+ verbosity: compact # derived: Linear's chrome is intentionally minimal and terse
152
+ feedback: subtle # derived: understated, functional motion
153
+ density-tier: dense # derived: Linear reads dense like a technical tool, not a spacious consumer app
154
+ product-traits: [dev-tools, issue-tracker, project-management, dashboard]
155
+ ```
156
+
157
+ ```yaml lever-manifest
158
+ version: 1
159
+ fonts: { sans: "Inter, SF Pro Display, -apple-system, system-ui, sans-serif", mono: "Geist Mono, JetBrains Mono, ui-monospace, monospace" }
160
+ color-tokens:
161
+ light:
162
+ background: "#ffffff"
163
+ foreground: "#0d0e10" # derived: near-black ink, softened from corpus inverse-ink #000000 for operator legibility
164
+ card: "#ffffff"
165
+ card-foreground: "#0d0e10"
166
+ muted: "#f4f5f8" # derived: light cool-gray fill, inverse-surface family
167
+ muted-foreground: "#6b7280" # derived: mid cool gray for secondary text
168
+ border: "#e6e7eb" # derived: light hairline, cool gray
169
+ input: "#d9dbe0" # derived: slightly stronger light field edge
170
+ ring: "#5e69d1"
171
+ primary: "#5e6ad2"
172
+ primary-foreground: "#ffffff"
173
+ accent: "#eceefb" # derived: faint lavender selected-row wash (Linear's product behavior)
174
+ accent-foreground: "#5e6ad2"
175
+ destructive: "#eb5757" # derived: Linear product red (marketing avoids red; the product ships it)
176
+ destructive-foreground: "#ffffff"
177
+ success: "#27a644"
178
+ warning: "#f2994a" # derived: operator amber, Linear product palette family (corpus has no warning)
179
+ popover: "#ffffff"
180
+ popover-foreground: "#0d0e10"
181
+ secondary: "#f4f5f8"
182
+ secondary-foreground: "#0d0e10"
183
+ chart-1: "#5e6ad2" # derived: Linear product tag palette (lavender/blue/green/amber/red)
184
+ chart-2: "#4ea7fc"
185
+ chart-3: "#4cb782"
186
+ chart-4: "#f2994a"
187
+ chart-5: "#eb5757"
188
+ sidebar: "#fbfbfc" # derived: faint cool tint, distinct from the white canvas
189
+ sidebar-foreground: "#0d0e10"
190
+ sidebar-primary: "#5e6ad2"
191
+ sidebar-primary-foreground: "#ffffff"
192
+ sidebar-accent: "#eceefb"
193
+ sidebar-accent-foreground: "#5e6ad2"
194
+ sidebar-border: "#e6e7eb"
195
+ sidebar-ring: "#5e69d1"
196
+ dark:
197
+ background: "#010102"
198
+ foreground: "#f7f8f8"
199
+ card: "#0f1011"
200
+ card-foreground: "#f7f8f8"
201
+ muted: "#141516"
202
+ muted-foreground: "#8a8f98"
203
+ border: "#23252a"
204
+ input: "#34343a" # corpus hairline-strong — field edges read on near-black
205
+ ring: "#5e69d1"
206
+ primary: "#5e6ad2"
207
+ primary-foreground: "#ffffff"
208
+ accent: "#1c1d2b" # derived: faint lavender-tinted surface lift for selected rows
209
+ accent-foreground: "#f7f8f8"
210
+ destructive: "#eb5757" # derived: Linear product red
211
+ destructive-foreground: "#ffffff"
212
+ success: "#27a644"
213
+ warning: "#f2994a" # derived: operator amber (corpus has no warning)
214
+ popover: "#18191a" # corpus surface-3 — dropdowns and menus
215
+ popover-foreground: "#f7f8f8"
216
+ secondary: "#0f1011"
217
+ secondary-foreground: "#f7f8f8"
218
+ chart-1: "#5e6ad2" # derived: Linear product tag palette
219
+ chart-2: "#4ea7fc"
220
+ chart-3: "#4cb782"
221
+ chart-4: "#f2994a"
222
+ chart-5: "#eb5757"
223
+ sidebar: "#0f1011"
224
+ sidebar-foreground: "#d0d6e0" # corpus ink-muted for nav labels
225
+ sidebar-primary: "#5e6ad2"
226
+ sidebar-primary-foreground: "#ffffff"
227
+ sidebar-accent: "#1c1d2b"
228
+ sidebar-accent-foreground: "#f7f8f8"
229
+ sidebar-border: "#23252a"
230
+ sidebar-ring: "#5e69d1"
231
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
232
+ radius-scale: [0, 4, 6, 8, 12, 9999]
233
+ shadow-levels: [none, sm, md]
234
+ motion: { durations: [100, 150, 200], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
235
+ icons: { family: lucide, stroke: 1.5 }
236
+ accent-count: 1
237
+ ```