@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,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
|
+
```
|