@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,223 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Binance
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Binance — the operator reading
9
+
10
+ A confident financial-platform look reduced to one idea: a single electric accent doing all the brand
11
+ voltage against a calm neutral field. This entry is a deliberate operator reading of Binance — the
12
+ trading-terminal density and the black-on-yellow signature carried onto internal tools (a markets
13
+ console, a queue, a settlement dashboard), with the marketing skin left behind. The manifest ships the
14
+ light theme (fully valued, no `hint:`); the dark console — Binance's more iconic, categorically dark
15
+ read — is recorded in Color Roles for the surface that opts into it. Judgments away from the marketing
16
+ surfaces are annotated `# derived:`.
17
+
18
+ ## 1 Visual Theme
19
+
20
+ One accent. Yellow `primary` (#FCD535) carries every primary action and nothing else — its scarcity
21
+ is the brand. Binance ships two native themes and picks by surface intent. **Light is the default
22
+ here** — the transactional surface Binance wears on forms, buy/deposit dialogs, and conversion tables:
23
+ white `background`, ink type, gray-blue hairlines. **Dark is the more iconic read** — a near-black
24
+ trading console (`canvas-dark` #0B0E11, never pure black) where `card` steps carry elevation. Depth is
25
+ flat throughout: color-block contrast and 1px hairlines, never heavy shadow. Density is `dense` — this
26
+ reads like a markets terminal, not a consumer app. Reach for dark on a markets/dashboard/trading
27
+ surface, light for forms and CRM; the black-on-yellow button is identical in both.
28
+
29
+ ## 2 Color Roles
30
+
31
+ One accent — `primary` is the only chromatic hue that carries brand meaning; trading green/red and
32
+ info-blue speak status and direction only. Turquoise #2DBDB6 was a single-product experiment, not a
33
+ system color, and survives here only as a chart hue. Light values first; the dark-console value is
34
+ noted where it defines the identity.
35
+
36
+ | Role | Value | Allowed where |
37
+ | --- | --- | --- |
38
+ | `primary` | yellow #FCD535 (press #F0B90B, disabled #3A3A1F) | the one primary action, active nav, the wordmark — nowhere else |
39
+ | `primary-foreground` | black #181A20 | text/icon on the yellow fill — never white on yellow |
40
+ | `background` / `card` / `popover` | white #FFFFFF (dark: #0B0E11 canvas, #1E2329 card) | page, cards, overlays |
41
+ | `foreground` | ink #181A20 (dark: #EAECEF) | primary text — the dark body is a deliberate cool gray, not pure white |
42
+ | `muted` | #FAFAFA (dark: #1E2329) | subtle fills, hover rows |
43
+ | `muted-foreground` | slate #707A8A (#929AA5 emphasized) | captions, column headers, breadcrumbs — reads on both themes |
44
+ | `border` / `input` | gray-blue #EAECEF (dark: #2B3139) | every hairline, grid line, field edge — the highest-frequency token |
45
+ | `accent` | #F5F5F5 (dark: #2B3139) | selected/hovered rows and nav — a neutral tint, never a yellow wash |
46
+ | `ring` | info blue #3B82F6 | the focus outline |
47
+ | `success` | trading green #0ECB81 | up-moves and success status |
48
+ | `destructive` | trading red #F6465D on white text | down-moves, destructive actions, error state |
49
+ | `warning` | amber #D97706 | caution — deliberately not brand-yellow |
50
+
51
+ ## 3 Typography
52
+
53
+ Two families, split by function. `font-sans` is BinanceNova (Inter is the corpus-named substitute) —
54
+ UI, body, headings. `font-mono` is BinancePlex (JetBrains Mono substitute) — the "trustworthy number"
55
+ voice for prices, volumes, IDs, timestamps, and every numeric column; a sans price ticker loses the
56
+ trading-platform character. Numeric columns render `tabular-nums`. Strong weight runs 600 (a step
57
+ heavier than typical marketing, so figures read at a glance); the 64/48px hero display and its 700
58
+ weight stay behind.
59
+
60
+ | Step | Role | Size · line | Weight · tracking |
61
+ | --- | --- | --- | --- |
62
+ | h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
63
+ | h2 | section head | 20px / 1.35 | `font-weight-strong` |
64
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` |
65
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
66
+ | small | labels, dense table | 13px / 1.5 | `font-weight-normal` |
67
+ | caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong` |
68
+ | number | table figures | 16px / 1.4 · 500 | `font-mono` (13-14px in dense rows) |
69
+
70
+ ## 4 Component Stylings
71
+
72
+ - **Button** — `primary`: filled `primary` on `primary-foreground` (black on yellow), `radius`, no
73
+ pill; press darkens to the active yellow. Secondary: `secondary` fill, 1px `border`, `foreground`.
74
+ - **Input / Card** — `background` / `card` fill, 1px `border` (`border-weight`), `radius` (cards one
75
+ step up from control radius); input focus draws the `ring` at 2px, no glow; cards shadow only when
76
+ lifted off imagery.
77
+ - **Table row** — `table-row-height`; `border` grid lines; `muted` on hover; `accent` on selection;
78
+ `tabular-nums` + `font-mono` on price/amount cells; direction cells take `success` / `destructive`
79
+ as text color, never a fill.
80
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`,
81
+ `side-panel-width-rich`), beside the work, not over it.
82
+ - **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
83
+ `success` / `warning` / `destructive`, never `primary`.
84
+
85
+ ## 5 Layout
86
+
87
+ Base unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80` (80px is a marketing
88
+ band — operator surfaces pack tighter). Shell dimensions map one-to-one to the layout primitives: top
89
+ bar `topbar-height` (64px, Binance's native nav height), sidebar `sidebar-width-expanded` /
90
+ `sidebar-width-collapsed`, side panel `side-panel-width` / `side-panel-width-rich`, modal cap
91
+ `modal-width-max`, forms `form-max-width`, tables full-width. Density is governed globally by
92
+ `density-tier` and stepped per archetype — never by absolute overrides.
93
+
94
+ ## 6 Depth
95
+
96
+ Flat, by conviction. Hierarchy comes from the surface ladder and hairlines, not shadow:
97
+
98
+ - **0 — canvas** `background`, no border.
99
+ - **1 — panel / card** `card` on a 1px `border`; on dark, the `card` step off `canvas-dark` is a clear
100
+ ~12-step lightness jump that reads as elevation with no shadow at all.
101
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a single
102
+ soft `sm` shadow.
103
+
104
+ Focus is a 2px `ring` outline at 50% alpha, never a glow; three z-levels (content, sticky chrome,
105
+ overlay); no atmospheric gradients, no glassmorphism.
106
+
107
+ ## 7 Do's & Don'ts
108
+
109
+ - **Do** reserve `primary` (yellow) for the single most important action, active nav, and the
110
+ wordmark — nowhere else; its scarcity is what makes it powerful. Keep black `primary-foreground` on
111
+ the fill; the black-on-yellow is the signature.
112
+ - **Do** carry every figure in `font-mono` with `tabular-nums`, and pick the theme by surface intent:
113
+ dark for markets/dashboards/trading, light for forms and transactional work.
114
+ - **Don't** introduce a second brand accent — turquoise, info-blue, and the trading hues are
115
+ status / chart roles, not brand colors; and don't use yellow for body text, large fills, or a
116
+ selected-row wash (accent selection with the neutral `accent` tint).
117
+ - **Don't** fill a card with `success` / `destructive` — direction is text color, not a surface (on a
118
+ surface showing live price direction, keep red for down-moves and treat generic errors distinctly);
119
+ don't pill the CTA outside a hero moment; don't signal rank with heavy shadow — stay flat.
120
+
121
+ ## 8 Responsive
122
+
123
+ The operator sweep is 375 / 768 / 1024 / 1440:
124
+
125
+ | Breakpoint | What changes |
126
+ | --- | --- |
127
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; markets table → horizontally-scrollable rows; density holds |
128
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
129
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
130
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
131
+
132
+ ## 9 Agent Prompt Guide
133
+
134
+ - One accent, always. Yellow `primary` marks THE action and active nav; black on yellow, never white.
135
+ Choose the theme by surface: dark console for markets / dashboards / trading, light for forms and
136
+ CRM — both native, the primary button identical in both.
137
+ - Numbers are `font-mono` + `tabular-nums`; direction and status ride `success` / `destructive` as
138
+ text color, never a card fill.
139
+ - Stay flat — surface ladder and 1px hairlines before any shadow; radii tight (control radius for
140
+ buttons, one step up for cards); no pill outside a hero.
141
+ - Leave the marketing skin behind: 64/48px hero display, yellow→dark gradients, pill hero CTAs,
142
+ coin-stack illustrations, the light-footer inversion, 80px editorial bands. What carries: the
143
+ palette, its cool temperature, the tight radius character, the tabular number voice, and flat depth.
144
+
145
+ ```yaml design-primitives
146
+ radius: 6px
147
+ shadow-intensity: 0.3 # derived: flat color-block brand; one soft shadow only on true overlays
148
+ border-weight: 1px
149
+ density-gap: 0.9 # derived: markets-terminal density — rows pack but stay legible
150
+ density-inset: 0.9 # derived: matches the dense tier's tighter component insets
151
+ font-sans: BinanceNova, Inter, system-ui, sans-serif # BinanceNova display/body; Inter is the corpus-named substitute
152
+ font-mono: BinancePlex, JetBrains Mono, ui-monospace, monospace # BinancePlex number voice; JetBrains Mono substitute
153
+ font-weight-normal: 400
154
+ font-weight-strong: 600 # derived: operator strong weight; the 700 hero display stays behind
155
+ heading-tracking: 0 # derived: Binance's title tier (24/20/16px) tracks 0; the negative tracking lives on hero display, left behind
156
+ duration-unit: 50ms # derived: motion out of scope in corpus; functional operator default
157
+ duration-fast: 100ms # derived
158
+ duration-normal: 150ms # derived
159
+ duration-slow: 250ms # derived
160
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard functional ease; timings undocumented
161
+ contrast-boost: 1 # derived: liberal hairlines + the surface ladder already carry the grid
162
+ icon-stroke: 1.75 # derived: corpus icons are coin glyphs; operator line-icon stroke one step under lucide's 2
163
+ icon-size-base: 16px # derived: base control icon (corpus coin icons are 24/32)
164
+ sidebar-width-expanded: 248px # derived: no app sidebar in corpus (marketing top-nav); operator standard
165
+ sidebar-width-collapsed: 56px # derived
166
+ topbar-height: 64px # Binance's native top-nav height
167
+ side-panel-width: 420px # derived
168
+ side-panel-width-rich: 640px # derived
169
+ modal-width-max: 560px # derived
170
+ form-max-width: 640px # derived
171
+ table-row-height: 40px # markets-row 12px vertical padding + number line ≈ 40px; dense archetypes step down via the surface catalog
172
+ verbosity: compact # derived: trading platform trusts dense numbers over explanatory chrome
173
+ feedback: subtle
174
+ density-tier: dense
175
+ product-traits: [trading-desk, dashboard, fintech, payments, crypto-exchange]
176
+ ```
177
+
178
+ ```yaml lever-manifest
179
+ version: 1
180
+ fonts: { sans: "BinanceNova, Inter, system-ui, sans-serif", mono: "BinancePlex, JetBrains Mono, ui-monospace, monospace" }
181
+ color-tokens:
182
+ light:
183
+ background: "#ffffff"
184
+ foreground: "#181a20"
185
+ card: "#ffffff"
186
+ card-foreground: "#181a20"
187
+ muted: "#fafafa"
188
+ muted-foreground: "#707a8a"
189
+ border: "#eaecef"
190
+ input: "#eaecef"
191
+ ring: "#3b82f6"
192
+ primary: "#fcd535"
193
+ primary-foreground: "#181a20"
194
+ accent: "#f5f5f5"
195
+ accent-foreground: "#181a20"
196
+ destructive: "#f6465d"
197
+ destructive-foreground: "#ffffff"
198
+ success: "#0ecb81"
199
+ warning: "#d97706" # derived: Binance ships no warning hue and its yellow is the reserved accent; a distinct amber carries caution without colliding
200
+ popover: "#ffffff"
201
+ popover-foreground: "#181a20"
202
+ secondary: "#f5f5f5"
203
+ secondary-foreground: "#181a20"
204
+ chart-1: "#fcd535"
205
+ chart-2: "#0ecb81"
206
+ chart-3: "#f6465d"
207
+ chart-4: "#3b82f6"
208
+ chart-5: "#2dbdb6" # the single-product turquoise, repurposed as a chart hue
209
+ sidebar: "#fafafa"
210
+ sidebar-foreground: "#181a20"
211
+ sidebar-primary: "#fcd535"
212
+ sidebar-primary-foreground: "#181a20"
213
+ sidebar-accent: "#f5f5f5"
214
+ sidebar-accent-foreground: "#181a20"
215
+ sidebar-border: "#eaecef"
216
+ sidebar-ring: "#3b82f6"
217
+ spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64, 80]
218
+ radius-scale: [2, 4, 6, 8, 12, 9999]
219
+ shadow-levels: [none, sm]
220
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
221
+ icons: { family: lucide, stroke: 1.75 }
222
+ accent-count: 1
223
+ ```
@@ -0,0 +1,219 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: BMW
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # BMW — measured corporate-automotive, translated for operators
9
+
10
+ The BMW corporate design (distinct from BMW M's motorsport-bombastic variant): measured, settled, engineered. A light
11
+ near-white canvas, a single corporate blue for every primary action, and one categorical signature — **everything is
12
+ rectangular, 0px corners** — with depth from a greyscale surface ladder and hairlines, never shadow. This operator reading
13
+ keeps the palette, the blue accent, the 0px geometry, the flatness, and the heavy-display type voice; the marketing graces
14
+ (dark-navy hero bands, 64px display type, full-bleed photography, the M tricolor stripe, 80px section rhythm) stay behind.
15
+ Both machine blocks are fully valued; each judgment away from the marketing brand is annotated `# derived:` where silent.
16
+
17
+ ## 1 Visual Theme
18
+
19
+ Light by default; dark is opt-in. Flat and categorically shadowless: hierarchy rides a greyscale surface ladder
20
+ (`background` white → `card` soft-grey plate → hairline `border`) and type weight, never drop shadow. A single accent, BMW
21
+ corporate blue (`primary`, brand `#1c69d4`), is reserved for the one action that matters. The geometry is the identity:
22
+ `radius` 0 — buttons, inputs, cards, and chips all rectangular. The anchor surface is a white canvas beside a soft-grey
23
+ `sidebar`; density is `standard`, stepping denser per archetype — dealership-functional, not cramped.
24
+
25
+ ## 2 Color Roles
26
+
27
+ Light values first. One accent — `primary` blue is the only chromatic hue that carries meaning; status
28
+ hues speak only status. BMW reserves blue for action, so selection and hover use a faint blue wash.
29
+
30
+ | Role | Value | Allowed where |
31
+ | --- | --- | --- |
32
+ | `background` / `popover` | white `#ffffff` (canvas) | the dominant page and overlay surface |
33
+ | `card` | soft grey `#fafafa` (surface-card) | card and panel plates — lift by color-block contrast, no shadow |
34
+ | `foreground` / `card-foreground` | ink `#262626` (not pure black) | all primary text |
35
+ | `muted` / `secondary` | `#f7f7f7` (surface-soft) | hover rows, subtle fills, secondary buttons, footer bands |
36
+ | `muted-foreground` | `#6b6b6b` | labels, captions, breadcrumbs, secondary text |
37
+ | `border` / `input` | hairline `#e6e6e6` | every separator, grid line, and field edge |
38
+ | `primary` | BMW blue `#1c69d4` | the one primary action; active nav; selected-tile border |
39
+ | `accent` | faint blue wash `#e9f1fc` | selected / hovered rows and nav, on-accent surfaces only |
40
+ | `ring` | `primary` | the focus outline — unmistakable, because keyboard-first |
41
+ | `destructive` | red `#dc2626` | destructive actions and validation errors only |
42
+ | `success` / `warning` | green `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
43
+
44
+ The dark navy hero (`#1a2129`) and the M tricolor (`#0066b1` / `#1c69d4` / `#e22718`) are brand graces, not operator
45
+ tokens — no chrome role here (see §7); the M hues resurface only as chart categoricals, the brand's only spare palette.
46
+
47
+ ## 3 Typography
48
+
49
+ One sans, one mono. `font-sans` is Inter — the documented open-source stand-in for the licensed BMW Type
50
+ Next Latin, which runs a wide body and takes no negative tracking. `font-mono` is Roboto Mono (Roboto
51
+ sits in BMW's fallback stack) for IDs, codes, timestamps, and logs. The editorial signature is a
52
+ heavy/normal contrast: `font-weight-strong` 700 heads against `font-weight-normal` 400 body; numeric
53
+ columns render `tabular-nums`.
54
+
55
+ | Step | Role | Size · line | Weight · tracking |
56
+ | --- | --- | --- | --- |
57
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` (0) |
58
+ | h2 | section head | 20px / 1.3 | `font-weight-strong` · 0 |
59
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
60
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
61
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
62
+ | caption | uppercase eyebrow / inline link | 13px / 1.3 | `font-weight-strong`, `+1.5px`, uppercase |
63
+
64
+ The uppercase letter-spaced label (`+1.5px`, the "LEARN MORE" machined-precision voice) is BMW's distinctive small-type
65
+ carry-over. The system uses 700 / 400 only — never 500; emphasize by weight, not size.
66
+
67
+ ## 4 Component Stylings
68
+
69
+ Every recurring operator component composes from the primitives — no literal values, `radius` 0 everywhere.
70
+
71
+ - **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (rectangular), no pill.
72
+ Secondary: `background` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
73
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
74
+ full 2px, no glow (BMW thickens the field edge to ink — the `ring` carries that emphasis).
75
+ - **Card** — `card` soft-grey plate distinguished by color-block contrast, optional 1px `border`,
76
+ `radius`; no shadow at rest, inset by `density-inset`.
77
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
78
+ numeric columns; row selection tints `accent`.
79
+ - **Side panel** — detail and edit open beside the work in the side panel (`side-panel-width` / `side-panel-width-rich`), never over it.
80
+ - **Badge / filter chip** — rectangular, hairline `border`, `muted`/status fill, uppercase caption; an
81
+ active chip fills `foreground` ink with `primary-foreground` text (BMW's chip idiom); status badges
82
+ take `success` / `warning` / `destructive`, never `primary`.
83
+
84
+ ## 5 Layout
85
+
86
+ Base spacing unit 4px through Tailwind, but BMW's native 8px rhythm shows in the on-scale ramp `4 · 8 · 12 · 16 · 24 · 32 ·
87
+ 48 · 64` (the marketing 80px section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives:
88
+ sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (BMW's 64px nav), side panel
89
+ `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width capped
90
+ at ~1440px. Density is governed globally by `density-tier` and stepped per archetype by the surface catalog.
91
+
92
+ ## 6 Depth
93
+
94
+ Flat, and more so than most — BMW never draws a drop shadow. Hierarchy comes from the surface ladder and hairlines:
95
+
96
+ - **0 — canvas** `background` white, no border.
97
+ - **1 — panel / card** `card` soft-grey plate on an optional 1px `border`; separation is color-block
98
+ contrast, not shadow.
99
+ - **2 — overlay** `popover` / side panel / modal — the only place `shadow-intensity` earns a whisper
100
+ `sm` shadow, kept minimal because the brand is shadowless; a hairline still carries the edge.
101
+
102
+ Focus is a 2px `ring` outline (never a glow), visible everywhere. Three z-levels: content, chrome, overlay.
103
+
104
+ ## 7 Do's & Don'ts
105
+
106
+ - **Do** reserve `primary` blue for the single most important action on a surface; everything else is
107
+ neutral or status.
108
+ - **Do** keep every corner rectangular — `radius` 0 on buttons, inputs, cards, and chips is the BMW
109
+ signature; carry hierarchy with the greyscale surface ladder, hairlines, and weight.
110
+ - **Do** set heads in `font-weight-strong` (700) against `font-weight-normal` (400) body; apply
111
+ `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps.
112
+ - **Don't** promote a second chromatic accent — the M tricolor and dark-navy hero stay marketing-only;
113
+ status uses `success` / `warning` / `destructive`.
114
+ - **Don't** pill or round a control (radius stays inside `radius-scale`), signal elevation with a drop
115
+ shadow, or thin dense body to the marketing Light 300 weight.
116
+
117
+ ## 8 Responsive
118
+
119
+ The operator sweep is 375 / 768 / 1024 / 1440.
120
+
121
+ | Breakpoint | What changes |
122
+ | --- | --- |
123
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
124
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
125
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
126
+ | 1440 | content caps at ~1440px; forms hold `form-max-width`; tables and dashboards use the full width |
127
+
128
+ ## 9 Agent Prompt Guide
129
+
130
+ Directives the emitting agent follows verbatim:
131
+
132
+ - Carries over: the palette (white canvas, ink text, `#1c69d4` blue), the single-accent discipline, the
133
+ 0px rectangular geometry, the greyscale-ladder flatness, the heavy 700 / normal 400 type voice.
134
+ - Stays behind: dark-navy hero bands, 64px display type, full-bleed photography, the M tricolor stripe,
135
+ the 80px section rhythm — none belong in operator chrome.
136
+ - Everything is rectangular (round only a circular icon button); accent only the primary action with
137
+ blue — if two things want the accent, one is not primary; stay shadowless, reaching for the `card`
138
+ grey plate and hairlines before any elevation, a whisper `sm` shadow only for a true overlay.
139
+ - Numeric columns are `tabular-nums`, IDs / codes / timestamps `font-mono`, every workflow keyboard-complete with the `ring` focus outline always visible.
140
+
141
+ ```yaml design-primitives
142
+ radius: 0px # BMW signature: rectangular everything; scale still offers 12px for the rare large surface
143
+ shadow-intensity: 0.1 # derived: brand never draws shadow; a whisper only lifts a true overlay
144
+ border-weight: 1px
145
+ density-gap: 1 # derived: BMW's native 8px rhythm rides the spacing-scale steps; base multiplier held at 1
146
+ density-inset: 1 # derived: standard operator inset; marketing's generous 24px card padding stays behind
147
+ font-sans: Inter, system-ui, -apple-system, sans-serif # Inter is the corpus-documented open-source stand-in for BMW Type Next Latin
148
+ font-mono: Roboto Mono, ui-monospace, SFMono-Regular, monospace # derived: brand ships no mono; Roboto (BMW's own fallback) mono sibling for IDs/codes/logs
149
+ font-weight-normal: 400 # derived: marketing body is Light 300; dense operator body bumps to BMW's utility weight 400 for legibility
150
+ font-weight-strong: 700 # the BMW heavy-display weight — the 700/normal contrast is the editorial signature
151
+ heading-tracking: 0 # BMW runs a wide body and takes no negative tracking; tightening reads off-brand
152
+ duration-unit: 50ms # derived: corpus marks motion out of scope; functional operator base
153
+ duration-fast: 100ms # derived: corpus silent on motion
154
+ duration-normal: 150ms # derived: corpus silent on motion
155
+ duration-slow: 250ms # derived: corpus silent on motion
156
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard measured easing
157
+ contrast-boost: 1
158
+ icon-stroke: 2 # derived: BMW's bold engineered voice (700 display, wide tracking) wants the full lucide stroke, not a hairline
159
+ icon-size-base: 16px # derived: corpus silent; operator standard
160
+ sidebar-width-expanded: 256px # derived: BMW is a top-nav marketing site with no sidebar; 8px-rhythm operator shell
161
+ sidebar-width-collapsed: 64px # derived: matches BMW's 64px nav height and 8px rhythm
162
+ topbar-height: 64px # BMW top-nav height (a real corpus value)
163
+ side-panel-width: 440px # derived: no operator shell in corpus; 8px-rhythm detail panel
164
+ side-panel-width-rich: 640px # derived: content-heavy panel on the 8px rhythm
165
+ modal-width-max: 560px # derived: corpus silent; confirmation-scale cap
166
+ form-max-width: 640px # derived: corpus silent; single-column form measure
167
+ table-row-height: 44px # derived: BMW runs tall 48px controls; operator tables tighten one notch but stay above the generic 40px
168
+ verbosity: default
169
+ feedback: subtle # derived: BMW reads measured and settled; restrained feedback
170
+ density-tier: standard # derived: consumer-marketing spaciousness stays behind; the dealership-functional density carries as standard
171
+ product-traits: [inventory, crm, configurator, dashboard, automotive]
172
+ ```
173
+
174
+ ```yaml lever-manifest
175
+ version: 1
176
+ fonts: { sans: "Inter, system-ui, -apple-system, sans-serif", mono: "Roboto Mono, ui-monospace, SFMono-Regular, monospace" }
177
+ color-tokens:
178
+ light:
179
+ background: "#ffffff"
180
+ foreground: "#262626"
181
+ card: "#fafafa"
182
+ card-foreground: "#262626"
183
+ muted: "#f7f7f7"
184
+ muted-foreground: "#6b6b6b"
185
+ border: "#e6e6e6"
186
+ input: "#e6e6e6"
187
+ ring: "#1c69d4"
188
+ primary: "#1c69d4"
189
+ primary-foreground: "#ffffff"
190
+ accent: "#e9f1fc" # derived: faint wash of BMW blue for selection/hover; brand has no blue-tint surface token
191
+ accent-foreground: "#1c69d4"
192
+ destructive: "#dc2626"
193
+ destructive-foreground: "#ffffff"
194
+ success: "#22c55e"
195
+ warning: "#f59e0b"
196
+ popover: "#ffffff"
197
+ popover-foreground: "#262626"
198
+ secondary: "#f7f7f7"
199
+ secondary-foreground: "#262626"
200
+ chart-1: "#1c69d4" # BMW blue
201
+ chart-2: "#0066b1" # derived: M-blue-light recruited as a data-viz categorical only (not chrome)
202
+ chart-3: "#22c55e" # success green
203
+ chart-4: "#f59e0b" # warning amber
204
+ chart-5: "#e22718" # derived: M-red recruited as a data-viz categorical only (not chrome)
205
+ sidebar: "#f7f7f7" # derived: BMW's soft-grey sub-nav band as the chrome surface
206
+ sidebar-foreground: "#262626"
207
+ sidebar-primary: "#1c69d4"
208
+ sidebar-primary-foreground: "#ffffff"
209
+ sidebar-accent: "#e9f1fc" # derived: faint BMW-blue wash for the active/hovered nav item
210
+ sidebar-accent-foreground: "#1c69d4"
211
+ sidebar-border: "#e6e6e6"
212
+ sidebar-ring: "#1c69d4"
213
+ spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64]
214
+ radius-scale: [0, 2, 4, 8, 12, 9999]
215
+ shadow-levels: [none, sm]
216
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
217
+ icons: { family: lucide, stroke: 2 }
218
+ accent-count: 1
219
+ ```