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