@nurix/etna 0.18.19 → 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/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/package.json +1 -1
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Together AI
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Together AI — the white-band operator reading
|
|
9
|
+
|
|
10
|
+
Together AI's surface alternates two registers: near-black hero bands carrying a single piece of brand
|
|
11
|
+
chrome — a three-color orange-magenta-periwinkle gradient ribbon — and bright white technical bands where
|
|
12
|
+
the real content lives (pricing tables, docs, model rows). This entry is the *operator* reading: it lives
|
|
13
|
+
in the **white technical band**, carried onto a CRM, a queue, or a dashboard. What carries: the white
|
|
14
|
+
canvas, stark black ink and black CTA, the uppercase mono-caps eyebrow/label voice, hairline-led flatness,
|
|
15
|
+
the tight 4px radius, and a near-black nav rail — the brand's dark nav made permanent. What stays behind:
|
|
16
|
+
near-black content bands, the gradient ribbon, hero-scale display (64px), the giant `together.ai` wordmark
|
|
17
|
+
banner, the mint/white hero pills, and the dual-surface alternation. The gradient's colors survive only in
|
|
18
|
+
data viz. Both machine blocks are fully valued; judgments where the corpus is silent are annotated `# derived:`.
|
|
19
|
+
|
|
20
|
+
## 1 Visual Theme
|
|
21
|
+
|
|
22
|
+
Light by default; dark is opt-in. Flat — hierarchy is carried by hairline `border`, type weight, uppercase
|
|
23
|
+
mono labels, and surface contrast, never by shadow. The register is stark: ink is pure black `foreground`
|
|
24
|
+
(`#000000`) on a pure white canvas — recorded plainly, because the brand's own ink is `#000000` and that
|
|
25
|
+
starkness *is* the voice. The primary action wears black `primary` (`#000000`) — a monochrome CTA, not a
|
|
26
|
+
color; the brand's black pill carried intact. One chromatic accent — a periwinkle-indigo pulled from the
|
|
27
|
+
cool leg of the brand gradient — is reserved for links, selection, and focus; the full three-stop gradient
|
|
28
|
+
stays marketing-only. The persistent nav rail wears the brand's near-black nav color (`sidebar` `#010120`) —
|
|
29
|
+
the dark-nav-over-light-content signature made permanent. Density is `standard`, stepping denser per
|
|
30
|
+
archetype; the brand's pricing tables read like a sheet.
|
|
31
|
+
|
|
32
|
+
## 2 Color Roles
|
|
33
|
+
|
|
34
|
+
Light values first; the manifest carries the exact hex (the corpus's native format). One chromatic accent —
|
|
35
|
+
periwinkle-indigo carries interactive meaning; status hues (all derived — the brand documents none) speak only status.
|
|
36
|
+
|
|
37
|
+
| Role | Value | Allowed where |
|
|
38
|
+
| --- | --- | --- |
|
|
39
|
+
| `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, and overlays — the dominant surface, differentiated by border not brightness |
|
|
40
|
+
| `foreground` | ink black `#000000` | all primary text — stark, per the brand |
|
|
41
|
+
| `muted` | faint neutral `#f5f5f5` | hover rows, subtle fills |
|
|
42
|
+
| `muted-foreground` | body gray `#666666` | labels, captions, mono eyebrows, secondary text |
|
|
43
|
+
| `secondary` | canvas-soft `#ebebeb` | secondary buttons, table-header rails, toggle rails |
|
|
44
|
+
| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, field edge, and card chrome |
|
|
45
|
+
| `primary` | black `#000000` | the one primary action; active nav — a neutral, not a color |
|
|
46
|
+
| `accent` | pale periwinkle `#eeedfd` | selected/hovered rows and nav, on-accent surfaces only |
|
|
47
|
+
| `accent-foreground` | periwinkle-indigo `#4b44dd` | links, selection detail — the single interactive hue |
|
|
48
|
+
| `ring` | periwinkle-indigo `#4b44dd` | the keyboard focus outline — the one accent, so focus never reads as the black CTA |
|
|
49
|
+
| `destructive` | red `#dc2626` | destructive actions and error state only |
|
|
50
|
+
| `success` / `warning` | green `#16a34a` / amber `#d97706` | status signalling only, never chrome |
|
|
51
|
+
|
|
52
|
+
The three-stop gradient (orange → magenta → periwinkle) and the mint pill are marketing graces — no chrome role here; they survive only as chart hues (see §6, §7).
|
|
53
|
+
|
|
54
|
+
## 3 Typography
|
|
55
|
+
|
|
56
|
+
Two faces carry the whole system, and their contrast *is* the brand. `font-sans` is Together's geometric
|
|
57
|
+
display sans (`The Future`, Inter substitute) — headings and body both ride it; tight negative tracking,
|
|
58
|
+
not weight, is the voice, and it never bolds past 500. `font-mono` is the uppercase mono-caps face
|
|
59
|
+
(`PP Neue Montreal Mono`, JetBrains Mono substitute) — the brand's irreducible signature: every eyebrow,
|
|
60
|
+
button label, table-header cell, and system tag is set in it, uppercase, at positive tracking. Headlines
|
|
61
|
+
stay sentence-case; every uppercase moment is the mono. Numeric columns render `tabular-nums`; the 64px
|
|
62
|
+
hero display stays behind.
|
|
63
|
+
|
|
64
|
+
| Step | Role | Family | Size · line | Weight · tracking |
|
|
65
|
+
| --- | --- | --- | --- | --- |
|
|
66
|
+
| h1 | page title | sans | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
67
|
+
| h2 | section head | sans | 20px / 1.3 | `font-weight-strong` · -0.015em |
|
|
68
|
+
| h3 | card / group head | sans | 16px / 1.35 | `font-weight-strong` · -0.01em |
|
|
69
|
+
| body | UI + prose | sans | 14px / 1.45 | `font-weight-normal` |
|
|
70
|
+
| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
|
|
71
|
+
| mono-label | uppercase eyebrow / header cell | mono | 11px / 1.4 | `font-weight-strong`, +0.05em, uppercase |
|
|
72
|
+
| mono-button | uppercase button label | mono | 13px / 1 | `font-weight-strong`, +0.02em, uppercase |
|
|
73
|
+
| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
|
|
74
|
+
|
|
75
|
+
Never let the mono carry a paragraph; emphasis is weight-to-strong or a switch to the mono face.
|
|
76
|
+
|
|
77
|
+
## 4 Component Stylings
|
|
78
|
+
|
|
79
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
80
|
+
|
|
81
|
+
- **Button** — `primary`: filled black `primary` on `primary-foreground`, `radius` (4px), never a full pill, label in uppercase mono. Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: `accent` on hover.
|
|
82
|
+
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the periwinkle `ring` at 2px, no glow.
|
|
83
|
+
- **Card** — `card` on a 1px `border`; white-on-white, read by its hairline, never brightness; shadow only when a true overlay lifts (`shadow-intensity`); inset by `density-inset`.
|
|
84
|
+
- **Table row** — height `table-row-height`; `secondary` header fill with uppercase mono header cells; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; selection tints `accent`.
|
|
85
|
+
- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for content-heavy), beside the work, not over it.
|
|
86
|
+
- **Badge** — pill `radius` (9999) allowed here as a brand grace; hairline `border` or status fill, uppercase mono caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
87
|
+
|
|
88
|
+
## 5 Layout
|
|
89
|
+
|
|
90
|
+
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 80` (the 80 preserves the
|
|
91
|
+
brand's dramatic section rhythm). Shell dimensions map one-to-one to the layout primitives: the near-black
|
|
92
|
+
sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (the brand's nav
|
|
93
|
+
rhythm), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
94
|
+
`form-max-width`, tables full-width. Rows ride `table-row-height` (40px — the brand's sheet-tight pricing
|
|
95
|
+
row). Density is governed globally by `density-tier` and stepped per archetype by the surface catalog —
|
|
96
|
+
never by absolute overrides.
|
|
97
|
+
|
|
98
|
+
## 6 Depth
|
|
99
|
+
|
|
100
|
+
Flat. Hierarchy comes from hairlines, surface polarity, and the dark rail — not shadow:
|
|
101
|
+
|
|
102
|
+
- **0 — canvas** `background` white, no border.
|
|
103
|
+
- **1 — panel / card** `card` white on a 1px `border`; white-on-white read entirely by the hairline.
|
|
104
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow, navy-tinted (the brand's `rgba(1,1,32,0.1)` drop); modals lean on a tinted scrim, not a heavy shadow.
|
|
105
|
+
- **rail — nav** the persistent sidebar wears near-black `sidebar` (`#010120`) with white text — the brand's dark nav carried, the one dark surface in a light UI.
|
|
106
|
+
|
|
107
|
+
The gradient is not chrome here — it lives in charts (`chart-1..5` carry the accent indigo, brand magenta, brand orange, deepened mint). Focus is a 2px periwinkle `ring` outline, never a glow, on every interactive element. Three z-levels: content, sticky chrome, overlay.
|
|
108
|
+
|
|
109
|
+
## 7 Do's & Don'ts
|
|
110
|
+
|
|
111
|
+
- **Do** keep the canvas pure white and the ink pure black — the stark black-on-white is the brand's technical register.
|
|
112
|
+
- **Do** set every eyebrow, button label, and table-header cell in uppercase mono (`font-mono`) with positive tracking — the two-face contrast is the voice.
|
|
113
|
+
- **Do** reserve black `primary` for the single most important action and the periwinkle `accent-foreground` for links, selection, and focus — one accent, treated as scarce.
|
|
114
|
+
- **Do** dress the persistent nav rail in the near-black `sidebar` (`#010120`) — the brand's dark nav made permanent.
|
|
115
|
+
- **Don't** set headlines in the all-caps mono or let the mono carry a paragraph — every uppercase moment is the mono, every headline is the sans in sentence case.
|
|
116
|
+
- **Don't** promote a second chromatic accent, or reduce the three-stop gradient into UI chrome — it survives only at chart scale.
|
|
117
|
+
- **Don't** full-pill the primary CTA (buttons keep the 4px `radius`; pills stay on badges), or signal elevation with heavy drop shadows — hairlines and surface polarity carry rank.
|
|
118
|
+
|
|
119
|
+
## 8 Responsive
|
|
120
|
+
|
|
121
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
+
|
|
123
|
+
| Breakpoint | What changes |
|
|
124
|
+
| --- | --- |
|
|
125
|
+
| 375 | dark sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; table rows stack model above values; density holds |
|
|
126
|
+
| 768 | sidebar collapses to the near-black icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
128
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; section rhythm widens |
|
|
129
|
+
|
|
130
|
+
## 9 Agent Prompt Guide
|
|
131
|
+
|
|
132
|
+
Directives the emitting agent follows verbatim:
|
|
133
|
+
|
|
134
|
+
- Reach for the white canvas and pure-black ink first; float hairline-bordered white `card` surfaces on it, read by border, never by brightness.
|
|
135
|
+
- Set every eyebrow, button label, and table-header cell in uppercase mono (`font-mono`); keep headlines in the sentence-case sans with tight negative tracking. Never bold the sans past 500.
|
|
136
|
+
- Accent only the primary action in black `primary`; let the periwinkle `accent-foreground` be the one chromatic hue, for links, selection, and focus. If two things want the accent, one is not primary.
|
|
137
|
+
- Dress the persistent nav rail in the near-black `sidebar` (`#010120`) — the one dark surface in a light UI.
|
|
138
|
+
- Every numeric column is `tabular-nums`; every ID, code, model slug, and timestamp is `font-mono`. Every workflow completes from the keyboard; the periwinkle `ring` focus outline is always visible.
|
|
139
|
+
- Stay flat — hairline and surface polarity before shadow; reach past a hairline only for a real overlay.
|
|
140
|
+
- Leave the marketing furniture behind: near-black content bands, the gradient ribbon, the 64px hero display, the wordmark banner, the mint/white hero pills. The gradient's colors return only in charts.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 4px # corpus: the brand's canonical card/button/table radius (rounded.sm 4px); the 9999 pill stays on badges/the chat orb
|
|
144
|
+
shadow-intensity: 0.3 # derived: elevation is hairline + surface polarity + the dark rail; the one soft drop is navy-tinted (brand rgba(1,1,32,0.1))
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1
|
|
147
|
+
density-inset: 1
|
|
148
|
+
font-sans: The Future, Inter, "Helvetica Neue", Arial, sans-serif # corpus: custom geometric display sans (The Future) for headings and body; Inter is the corpus-named substitute
|
|
149
|
+
font-mono: PP Neue Montreal Mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace # corpus: uppercase mono-caps face for every eyebrow/label/button/header — the brand signature; JetBrains Mono is the corpus-named substitute
|
|
150
|
+
font-weight-normal: 400 # corpus: body weight 400
|
|
151
|
+
font-weight-strong: 500 # corpus: the face never appears above weight 500 (never bold 700)
|
|
152
|
+
heading-tracking: -0.02em # corpus: tight negative display tracking (-1.92px@64px, -0.16px@16px) preserved at operator heading scale
|
|
153
|
+
duration-unit: 50ms # derived: corpus documents no motion; functional operator base
|
|
154
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
155
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
156
|
+
duration-slow: 250ms # derived: corpus silent on motion
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
158
|
+
contrast-boost: 1 # derived: stark #000 ink is already maximal; the hairline is intentionally faint per brand
|
|
159
|
+
icon-stroke: 1.75 # derived: corpus uses SVG logos/illustration, no icon set; 1.75 suits the tight geometric character
|
|
160
|
+
icon-size-base: 16px # derived: corpus silent on icon size; operator standard
|
|
161
|
+
sidebar-width-expanded: 248px # derived: corpus has no sidebar (marketing top-nav); operator shell default
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: operator icon-rail standard
|
|
163
|
+
topbar-height: 56px # derived: from the brand nav-bar rhythm (16px vertical padding on body-md)
|
|
164
|
+
side-panel-width: 420px # derived: corpus has no shell; standard operator detail panel
|
|
165
|
+
side-panel-width-rich: 640px # derived: content-heavy detail panel
|
|
166
|
+
modal-width-max: 560px # derived: corpus modals lean on a tinted scrim, not shadow; operator confirmation cap
|
|
167
|
+
form-max-width: 640px # derived: corpus silent on shell; operator form column
|
|
168
|
+
table-row-height: 40px # corpus: pricing tables "read more like a sheet" — tight 12px-vertical rows carried
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: minimal # derived: the stark black/white, mono-caps, flat register wants terse, engineered feedback, not soft ambient motion
|
|
171
|
+
density-tier: standard # derived: white technical bands run sheet-dense; a general operator default holds standard and steps denser per archetype
|
|
172
|
+
product-traits: [ai-platform, dev-tools, dashboard, api-console]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "The Future, Inter, \"Helvetica Neue\", Arial, sans-serif", mono: "PP Neue Montreal Mono, \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#ffffff"
|
|
181
|
+
foreground: "#000000"
|
|
182
|
+
card: "#ffffff"
|
|
183
|
+
card-foreground: "#000000"
|
|
184
|
+
muted: "#f5f5f5" # derived: a faint neutral for hover rows, lighter than the grid hairline
|
|
185
|
+
muted-foreground: "#666666" # derived: brand secondary-text gray #999999 darkened for legible operator metadata (AA)
|
|
186
|
+
border: "#e6e6e6" # derived: brand card/input hairline rgba(0,0,0,0.08) over white, firmed a step for grid legibility
|
|
187
|
+
input: "#e6e6e6"
|
|
188
|
+
ring: "#4b44dd" # derived: brand periwinkle gradient-leg #bdbbff darkened to a legible interactive indigo — the single accent
|
|
189
|
+
primary: "#000000" # corpus: the black pill CTA carried intact
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#eeedfd" # derived: pale wash of the periwinkle accent for selected/hover rows and nav
|
|
192
|
+
accent-foreground: "#4b44dd" # derived: darkened brand periwinkle — links and selection detail
|
|
193
|
+
destructive: "#dc2626" # derived: corpus documents no error palette; framework red
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#16a34a" # derived: corpus documents no success palette; framework green
|
|
196
|
+
warning: "#d97706" # derived: corpus documents no warning palette; framework amber
|
|
197
|
+
popover: "#ffffff"
|
|
198
|
+
popover-foreground: "#000000"
|
|
199
|
+
secondary: "#ebebeb" # corpus: the brand's single soft surface (canvas-soft #ebebeb) — table-header rails, toggle rails, secondary buttons
|
|
200
|
+
secondary-foreground: "#000000"
|
|
201
|
+
chart-1: "#4b44dd" # accent periwinkle-indigo — primary data series
|
|
202
|
+
chart-2: "#ef2cc1" # corpus: brand gradient magenta leg
|
|
203
|
+
chart-3: "#fc4c02" # corpus: brand gradient orange leg
|
|
204
|
+
chart-4: "#12a3ad" # derived: brand mint #c8f6f9 deepened to a legible cyan data series
|
|
205
|
+
chart-5: "#666666" # derived: neutral gray series
|
|
206
|
+
sidebar: "#010120" # corpus: the brand's near-black nav color (canvas-dark) carried onto the persistent rail
|
|
207
|
+
sidebar-foreground: "#ffffff" # corpus: on-dark text is white
|
|
208
|
+
sidebar-primary: "#4b44dd" # derived: the accent marks the active nav item on the dark rail (brand's black indicator is invisible on dark)
|
|
209
|
+
sidebar-primary-foreground: "#ffffff"
|
|
210
|
+
sidebar-accent: "#26263a" # corpus: the brand's on-dark hairline tone (surface-dark-soft family) — hover fill on the dark rail
|
|
211
|
+
sidebar-accent-foreground: "#ffffff"
|
|
212
|
+
sidebar-border: "#26263a" # corpus: on-dark hairline divider within the rail
|
|
213
|
+
sidebar-ring: "#4b44dd" # derived: the accent as focus outline on the dark rail
|
|
214
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 80]
|
|
215
|
+
radius-scale: [0, 4, 8, 9999]
|
|
216
|
+
shadow-levels: [none, sm, md]
|
|
217
|
+
motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
218
|
+
icons: { family: lucide, stroke: 1.75 }
|
|
219
|
+
accent-count: 1
|
|
220
|
+
```
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Uber
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Uber — the black-and-white super-app operator design
|
|
9
|
+
|
|
10
|
+
The operator reading of Uber's monochrome web brand. The marketing theatre stays behind: hero display
|
|
11
|
+
type (52 / 36px), the editorial 4:3 illustrations, the ride-request hero card, and the alternating
|
|
12
|
+
white-then-black band rhythm. What carries is the chassis underneath — a black-and-white duet where pure
|
|
13
|
+
black `primary` (`#000000`) does every conversion job, the pill on every interactive control, a flat
|
|
14
|
+
no-shadow-by-default discipline, the neutral-tracked geometric sans voice, and the polarity-flip as the
|
|
15
|
+
depth cue. Both machine blocks are fully valued; judgment past the corpus is annotated `# derived:`.
|
|
16
|
+
|
|
17
|
+
## 1 Visual Theme
|
|
18
|
+
|
|
19
|
+
Light by default; dark is opt-in. The system is a black-and-white duet: a pure white `background`
|
|
20
|
+
canvas, pure black `foreground` ink, and a single accent that is not a colour at all — black `primary`
|
|
21
|
+
(`#000000`) carries the one primary action, the active state, and the polarity-flipped bands. No second
|
|
22
|
+
chromatic accent exists; the identity is the monochrome contrast plus one signature shape — the pill.
|
|
23
|
+
Every interactive control rounds to the pill (`9999`), Uber's irreducible geometry, while cards take a
|
|
24
|
+
soft 16px. Pure black is intentional (the brand ink is true `#000000`, recorded plainly over the generic
|
|
25
|
+
no-pure-black bias). Flat: hierarchy is hairline `border`, type weight, and the polarity-flip, never
|
|
26
|
+
shadow. The anchor surface is a white canvas beside a black `sidebar` — the shell is the duet, at `standard` density.
|
|
27
|
+
|
|
28
|
+
## 2 Color Roles
|
|
29
|
+
|
|
30
|
+
Light values (the manifest carries hex — the corpus's native format). One accent: black `primary` is
|
|
31
|
+
the only value that carries meaning; the status hues are derived and speak only status.
|
|
32
|
+
|
|
33
|
+
| Role | Value | Allowed where |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
36
|
+
| `foreground` | pure black `#000000` | all primary ink and headlines — the brand's true-black ink |
|
|
37
|
+
| `muted` / `secondary` | canvas-soft `#efefef` | hover rows, subtle fills, chip grounds, the gray subtle-pill button |
|
|
38
|
+
| `muted-foreground` | body gray `#5e5e5e` | labels, captions, secondary text |
|
|
39
|
+
| `border` / `input` | pressed gray `#e2e2e2` | every separator, grid line, and field edge |
|
|
40
|
+
| `primary` | black `#000000` | the one primary action; active nav mark; the polarity-flip bands |
|
|
41
|
+
| `accent` | pressed gray `#e2e2e2` | selected / hovered rows — a gray wash, never a hue |
|
|
42
|
+
| `ring` | black `#000000` | the focus outline — maximally visible, keyboard-first |
|
|
43
|
+
| `destructive` | derived red `#d93025` | destructive actions and error state only |
|
|
44
|
+
| `success` / `warning` | derived `#157347` / `#b25000` | status signalling only, never chrome |
|
|
45
|
+
|
|
46
|
+
Links are ink and underlined, never blue — the `#0000ee` browser-blue in Uber's fine print stays behind.
|
|
47
|
+
The black `sidebar` wears Uber's dark-band tones (`#000000` fill, `#282828` hover); `#afafaf` is placeholder only.
|
|
48
|
+
|
|
49
|
+
## 3 Typography
|
|
50
|
+
|
|
51
|
+
One sans, one mono. `font-sans` is Inter — the corpus's substitute for the proprietary UberMove /
|
|
52
|
+
UberMoveText, with `font-feature-settings: "ss01"` approximating UberMove's geometric alternates. One
|
|
53
|
+
family carries body, UI, and headings; weight, not a second face, carries the display voice (the
|
|
54
|
+
two-face split and the hero 52 / 36px sizes stay behind). Tracking is neutral (`0`) — Uber never
|
|
55
|
+
letter-spaces, a stated brand invariant. `font-mono` is Geist Mono for IDs, codes, and timestamps;
|
|
56
|
+
numeric columns render `tabular-nums`.
|
|
57
|
+
|
|
58
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
59
|
+
| --- | --- | --- | --- |
|
|
60
|
+
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` (0) |
|
|
61
|
+
| h2 | section head | 20px / 1.3 | `font-weight-strong` · 0 |
|
|
62
|
+
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
|
|
63
|
+
| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
|
|
64
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
65
|
+
| caption | uppercase eyebrow (rare) | 12px / 1.4 | `font-weight-strong`, `+0.04em`, uppercase |
|
|
66
|
+
| mono | IDs, codes, timestamps | 13px / 1.5 | `font-weight-normal` |
|
|
67
|
+
|
|
68
|
+
Headlines are sentence-case (the uppercase eyebrow is the rare exception); emphasise by weight, never size or tracking.
|
|
69
|
+
|
|
70
|
+
## 4 Component Stylings
|
|
71
|
+
|
|
72
|
+
- **Button** — `primary`: filled black `primary` on `primary-foreground`, pill (`9999`) — the pill IS
|
|
73
|
+
the signature, kept where other readings would rect. Secondary: white `card` fill, 1px `border`, pill.
|
|
74
|
+
Subtle: `secondary` gray fill, pill. Ghost: transparent, `muted` hover.
|
|
75
|
+
- **Input** — `background` fill, 1px `border`, the soft `radius` rect (~8px) — inputs are the one
|
|
76
|
+
control that does **not** pill; focus draws the black `ring` at 2px, no glow.
|
|
77
|
+
- **Card** — `card` surface, 1px `border`, `radius` steps to 16px (Uber's canonical card); shadow only when lifted.
|
|
78
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; selection tints
|
|
79
|
+
`accent`; `tabular-nums` on numerics; the active-row indicator is a black `primary` left edge.
|
|
80
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width` / `-rich`), beside the work, never over it.
|
|
81
|
+
- **Badge** — pill radius, `muted` / status fill, uppercase caption; status badges take
|
|
82
|
+
`success` / `warning` / `destructive`, never `primary`.
|
|
83
|
+
|
|
84
|
+
## 5 Layout
|
|
85
|
+
|
|
86
|
+
Base spacing unit 4px; the on-scale ramp is `4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 48` (the brand's own
|
|
87
|
+
tokens, including the 6px sub-step). Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
88
|
+
`sidebar-width-expanded` (248px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (56px), side
|
|
89
|
+
panel `side-panel-width` (440px) / `side-panel-width-rich` (640px), modal `modal-width-max`, forms
|
|
90
|
+
`form-max-width`, tables full-width. Density is `standard`, governed by `density-tier`, stepped per archetype.
|
|
91
|
+
|
|
92
|
+
## 6 Depth
|
|
93
|
+
|
|
94
|
+
Flat, polarity-first. Hierarchy comes from the black/white contrast and hairlines, not shadow:
|
|
95
|
+
|
|
96
|
+
- **0 — canvas** white `background`, no border.
|
|
97
|
+
- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
|
|
98
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
99
|
+
drop (matching Uber's ~0.16-alpha card drop).
|
|
100
|
+
- **band — polarity-flip** inverting to the black `primary` / `sidebar` surface with white text is
|
|
101
|
+
Uber's signature depth cue: rank by flipping to black, never by stacking a heavier shadow.
|
|
102
|
+
|
|
103
|
+
Focus is a 2px black `ring` outline (never a glow). Three z-levels: content, sticky chrome, overlay.
|
|
104
|
+
|
|
105
|
+
## 7 Do's & Don'ts
|
|
106
|
+
|
|
107
|
+
- **Do** keep the system black-and-white — one black `primary` doing every conversion job; the
|
|
108
|
+
monochrome contrast is the brand.
|
|
109
|
+
- **Do** pill every interactive control (buttons, chips, badges) — Uber's irreducible geometric
|
|
110
|
+
signature; inputs are the one exception (the soft `radius` rect).
|
|
111
|
+
- **Do** keep headlines sentence-case with neutral (`0`) tracking — Uber never letter-spaces; apply
|
|
112
|
+
`tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps.
|
|
113
|
+
- **Don't** introduce a second chromatic accent — orange, blue, or green flattens the monochrome
|
|
114
|
+
system; the status hues are derived and reserved for status only.
|
|
115
|
+
- **Don't** render links in browser-blue (the `#0000ee` fine-print artifact stays behind), or put a
|
|
116
|
+
shadow on chrome — flat is the default; shadow lifts only true overlays.
|
|
117
|
+
- **Don't** reach past `radius-scale`, or open detail in a modal when the side panel fits.
|
|
118
|
+
|
|
119
|
+
## 8 Responsive
|
|
120
|
+
|
|
121
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
+
|
|
123
|
+
| Breakpoint | What changes |
|
|
124
|
+
| --- | --- |
|
|
125
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
126
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
128
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
129
|
+
|
|
130
|
+
## 9 Agent Prompt Guide
|
|
131
|
+
|
|
132
|
+
- **Carries:** the black-and-white duet; pure black `primary` as the single accent; the pill on every
|
|
133
|
+
interactive control; the black `sidebar` / band polarity-flip; Inter (`ss01`) at neutral tracking; flat hairline depth.
|
|
134
|
+
- **Stays behind:** the hero display (52 / 36px); the editorial 4:3 illustrations; the ride-request hero
|
|
135
|
+
card; the alternating-band rhythm at hero scale; the browser-blue link.
|
|
136
|
+
- Lead every list with its table, every entity with its primary read. Accent only the primary action in
|
|
137
|
+
black — if two things want black, one is not primary.
|
|
138
|
+
- Pill the interactive controls; inputs take the soft rect; keep the `sidebar` black with white actives.
|
|
139
|
+
Every numeric column is `tabular-nums`, every ID / code / timestamp `font-mono`, the black `ring` always visible.
|
|
140
|
+
- Stay flat — hairline and polarity-flip before shadow; past a hairline only for a real overlay.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 12px # derived: corpus card is 16px (rounded.xl); base 12px yields the 16px card at xl and the ~8px input at sm — the pill 9999 (the signature interactive shape) stays in-scale, applied per-control
|
|
144
|
+
shadow-intensity: 0.5 # derived: corpus default is Level 0 flat; overlays carry a ~0.12–0.16 alpha drop — 0.5 lifts only true overlays, chrome stays flat
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1
|
|
147
|
+
density-inset: 1
|
|
148
|
+
font-sans: Inter, system-ui, "Helvetica Neue", Arial, sans-serif # derived: UberMove/UberMoveText are proprietary; corpus names Inter as the closest substitute (font-feature-settings "ss01" approximates UberMove's geometric alternates)
|
|
149
|
+
font-mono: Geist Mono, ui-monospace, SFMono-Regular, monospace # derived: corpus carries no mono; Geist Mono chosen as the sibling of the corpus-named Geist substitute
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 600 # derived: corpus display is weight 700 across the ramp; the operator reading pulls headings to 600 (the hero 700 stays behind with the display sizes)
|
|
152
|
+
heading-tracking: 0em # corpus: Uber never letter-spaces the display face — neutral tracking is a stated brand invariant
|
|
153
|
+
duration-unit: 50ms # derived: corpus is silent on motion; operator-standard functional base
|
|
154
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
155
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
156
|
+
duration-slow: 200ms # derived: corpus silent; kept crisp, not cinematic
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
158
|
+
contrast-boost: 1 # derived: the pressed-gray hairlines read as a grid without boosting
|
|
159
|
+
icon-stroke: 1.75 # derived: corpus specifies no stroke; a refined 1.75 suits the clean geometric system
|
|
160
|
+
icon-size-base: 16px # derived: corpus silent; sits with the 15px body
|
|
161
|
+
sidebar-width-expanded: 248px # derived: corpus has no operator shell; standard nav rail
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: standard icon rail
|
|
163
|
+
topbar-height: 56px # derived: corpus nav padding (16/32); operator topbar at 56px
|
|
164
|
+
side-panel-width: 440px # derived: corpus has no shell; standard detail panel
|
|
165
|
+
side-panel-width-rich: 640px # derived: content-heavy detail
|
|
166
|
+
modal-width-max: 560px # derived: confirmation-dialog cap
|
|
167
|
+
form-max-width: 640px # derived: readable form column (corpus's 490px ride-request hero card stays behind)
|
|
168
|
+
table-row-height: 44px # derived: corpus data-cell padding (12/16) → a ~44px row at standard density
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: subtle
|
|
171
|
+
density-tier: standard # derived: Uber's marketing is generous but not airy; an honest operator standard, stepped per archetype
|
|
172
|
+
product-traits: [dispatch, logistics, operations, marketplace, dashboard]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "Inter, system-ui, 'Helvetica Neue', Arial, sans-serif", mono: "Geist Mono, ui-monospace, SFMono-Regular, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#ffffff"
|
|
181
|
+
foreground: "#000000"
|
|
182
|
+
card: "#ffffff"
|
|
183
|
+
card-foreground: "#000000"
|
|
184
|
+
muted: "#efefef"
|
|
185
|
+
muted-foreground: "#5e5e5e"
|
|
186
|
+
border: "#e2e2e2"
|
|
187
|
+
input: "#e2e2e2"
|
|
188
|
+
ring: "#000000"
|
|
189
|
+
primary: "#000000"
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#e2e2e2"
|
|
192
|
+
accent-foreground: "#000000"
|
|
193
|
+
destructive: "#d93025" # derived: corpus documents no error hue (marketing is monochrome); a restrained red for the status triad, chosen not to read as a second brand accent
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#157347" # derived: corpus has no status palette; restrained green for status only
|
|
196
|
+
warning: "#b25000" # derived: corpus has no status palette; restrained amber for status only
|
|
197
|
+
popover: "#ffffff"
|
|
198
|
+
popover-foreground: "#000000"
|
|
199
|
+
secondary: "#efefef"
|
|
200
|
+
secondary-foreground: "#000000"
|
|
201
|
+
chart-1: "#000000" # derived: monochrome brand → grayscale-forward chart ramp; categorical differentiation carried by pattern/label, not a second hue
|
|
202
|
+
chart-2: "#4b4b4b" # corpus: hairline-mid
|
|
203
|
+
chart-3: "#8a8a8a" # derived: mid-gray fill between hairline-mid and mute for series spread
|
|
204
|
+
chart-4: "#afafaf" # corpus: mute
|
|
205
|
+
chart-5: "#d4d4d4" # derived: light-gray ramp tail
|
|
206
|
+
sidebar: "#000000" # derived: the shell wears Uber's polarity-flip — the sidebar is the black band (corpus footer/band fill #000000)
|
|
207
|
+
sidebar-foreground: "#ffffff"
|
|
208
|
+
sidebar-primary: "#ffffff" # derived: the active nav mark on the black band is white (black would vanish)
|
|
209
|
+
sidebar-primary-foreground: "#000000"
|
|
210
|
+
sidebar-accent: "#282828" # corpus: black-elevated — Uber's documented dark-band hover
|
|
211
|
+
sidebar-accent-foreground: "#ffffff"
|
|
212
|
+
sidebar-border: "#282828" # derived: the hairline on the black band (black-elevated tone)
|
|
213
|
+
sidebar-ring: "#ffffff"
|
|
214
|
+
spacing-scale: [4, 6, 8, 12, 16, 20, 24, 32, 48]
|
|
215
|
+
radius-scale: [0, 8, 12, 16, 9999]
|
|
216
|
+
shadow-levels: [none, sm, md]
|
|
217
|
+
motion: { durations: [100, 150, 200], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
218
|
+
icons: { family: lucide, stroke: 1.75 }
|
|
219
|
+
accent-count: 1
|
|
220
|
+
```
|