@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: ClickHouse
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# ClickHouse — an operator reading of the black-canvas, electric-yellow system
|
|
9
|
+
|
|
10
|
+
ClickHouse's web system is the highest-contrast brand in the data-platform category: near-black canvas,
|
|
11
|
+
one electric-yellow voltage, white confident-bold sans, real SQL in dark cards. This entry is the
|
|
12
|
+
*operator* reading — an internal tool (query console, cluster dashboard, job queue, log stream) in
|
|
13
|
+
ClickHouse's language. What carries: the near-black canvas, the one yellow accent held scarce, white
|
|
14
|
+
ink on dark surfaces, flat shadowless depth from surface contrast and hairlines, the 8px-not-pill
|
|
15
|
+
radius, and Inter's tight bold-700 voice. What stays behind: the 72/56/40px hero display, full-bleed
|
|
16
|
+
yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm.
|
|
17
|
+
|
|
18
|
+
**This brand is categorically dark.** ClickHouse ships no light-mode surface — the black canvas *is*
|
|
19
|
+
the identity. The light-default floor yields here (the categorically-dark exception): the default-worn
|
|
20
|
+
theme is dark and fills the required default (`light`) slot in the manifest. White-canvas is off-brand.
|
|
21
|
+
|
|
22
|
+
## 1 Visual Theme
|
|
23
|
+
|
|
24
|
+
Dark by default — the near-black `background` (`#0a0a0a`) is the floor of every surface, with no light
|
|
25
|
+
counterpart. Emphatically flat: hierarchy comes from the surface ladder (canvas → card → elevated),
|
|
26
|
+
hairline `border`, type weight, and white-on-black contrast — never shadow. A single accent,
|
|
27
|
+
electric-yellow `primary` (`#faff69`), is held scarce: it wears the one primary action, the focus
|
|
28
|
+
`ring`, and the active-nav indicator, nothing else. The neutral ramp is pure achromatic grey (white
|
|
29
|
+
ink down through `#cccccc` to `#888888`), so the UI reads engineered and monochrome, yellow its only
|
|
30
|
+
voltage. Density is `dense` — the brand's engineering-grade rhythm.
|
|
31
|
+
|
|
32
|
+
## 2 Color Roles
|
|
33
|
+
|
|
34
|
+
Dark values (the manifest carries the exact hex in the required default slot). One accent — yellow
|
|
35
|
+
`primary` is the only chromatic hue that carries meaning; status hues speak only status.
|
|
36
|
+
|
|
37
|
+
| Role | Value | Allowed where |
|
|
38
|
+
| --- | --- | --- |
|
|
39
|
+
| `background` | near-black canvas `#0a0a0a` | page floor and content area — the dominant surface |
|
|
40
|
+
| `foreground` | white ink `#ffffff` | headlines and primary text |
|
|
41
|
+
| `card` / `popover` / `secondary` | dim panel `#1a1a1a` | cards, overlays, secondary-button fills — lifted off the canvas |
|
|
42
|
+
| `muted` | recessive fill `#121212` | inset wells, disabled tracks, faint band tints |
|
|
43
|
+
| `muted-foreground` | mid grey `#888888` | labels, captions, secondary text |
|
|
44
|
+
| `accent` | elevated grey `#242424` | hover and selected rows and nav — a neutral lift |
|
|
45
|
+
| `border` / `input` | hairline `#2a2a2a` | every separator, grid line, and field edge |
|
|
46
|
+
| `primary` | electric yellow `#faff69` | the one primary action; active-nav indicator; key interactive detail |
|
|
47
|
+
| `primary-foreground` | black `#0a0a0a` | text on the yellow action — the high-contrast brand signal |
|
|
48
|
+
| `ring` | yellow `#faff69` | the focus outline — unmistakable, because keyboard-first |
|
|
49
|
+
| `destructive` | red `#ef4444` | destructive actions and error state only |
|
|
50
|
+
| `success` / `warning` | emerald `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
|
|
51
|
+
|
|
52
|
+
The yellow's power is its scarcity at element level; full-bleed yellow bands and stat numbers are
|
|
53
|
+
marketing voltage and carry no operator role (see §7).
|
|
54
|
+
|
|
55
|
+
## 3 Typography
|
|
56
|
+
|
|
57
|
+
One sans, one mono. `font-sans` is Inter — body, UI, and headings all ride it; weight and tight
|
|
58
|
+
tracking, not a second family, carry the display voice. `font-mono` is JetBrains Mono for IDs, codes,
|
|
59
|
+
timestamps, log lines, and SQL; numeric columns render `tabular-nums`. The marketing display scale
|
|
60
|
+
(72/56/40px) stays behind — an operator surface tops out at a 24px page title.
|
|
61
|
+
|
|
62
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
63
|
+
| --- | --- | --- | --- |
|
|
64
|
+
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
+
| h2 | section head | 18px / 1.35 | `font-weight-strong` · `heading-tracking` |
|
|
66
|
+
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` |
|
|
67
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
68
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
69
|
+
| caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.1em`, uppercase |
|
|
70
|
+
|
|
71
|
+
Headings run Inter at the strong weight (700) with tight negative tracking — the brand's defining
|
|
72
|
+
trait, preserved at operator sizes even as the display *scale* stays behind. Build hierarchy on size
|
|
73
|
+
and weight, never a second family; bump weight for emphasis, never size.
|
|
74
|
+
|
|
75
|
+
## 4 Component Stylings
|
|
76
|
+
|
|
77
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
78
|
+
|
|
79
|
+
- **Button** — primary: filled yellow `primary` on black `primary-foreground`, `radius`, never a pill. Secondary: `secondary` dim-panel fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
80
|
+
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the yellow `ring` at full 2px, no glow.
|
|
81
|
+
- **Card** — `card` dim-panel surface, 1px `border`, `radius`; depth is the surface lift off the canvas, not shadow; inset by `density-inset`.
|
|
82
|
+
- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `accent` on hover; `tabular-nums` on numeric columns; selection tints `accent` with a yellow `primary` left-indicator.
|
|
83
|
+
- **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.
|
|
84
|
+
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`. Pill radius is badges-only.
|
|
85
|
+
|
|
86
|
+
## 5 Layout
|
|
87
|
+
|
|
88
|
+
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
|
|
89
|
+
96px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
90
|
+
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px, the brand's nav
|
|
91
|
+
height), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
92
|
+
`form-max-width`, tables full-width. Density is governed globally by `density-tier` (dense, rewriting
|
|
93
|
+
the spacing scale through `density-gap`) and stepped per archetype by the surface catalog.
|
|
94
|
+
|
|
95
|
+
## 6 Depth
|
|
96
|
+
|
|
97
|
+
Flat and shadowless. Depth comes from the surface ladder and hairlines, not drop shadows:
|
|
98
|
+
|
|
99
|
+
- **0 — canvas** `background` (`#0a0a0a`), no border.
|
|
100
|
+
- **1 — panel / card** `card` (`#1a1a1a`) on a 1px `border`; the dim-panel lift off the near-black canvas carries rank. Hover/selected lift one step to `accent` (`#242424`).
|
|
101
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest lift, enough to separate an overlay from the black canvas above a scrim. Rank is surface, border, and position — never a heavier shadow.
|
|
102
|
+
|
|
103
|
+
Focus is a 2px yellow `ring` outline (never a glow), visible on every interactive element. Three
|
|
104
|
+
z-levels: content, sticky chrome, overlay.
|
|
105
|
+
|
|
106
|
+
## 7 Do's & Don'ts
|
|
107
|
+
|
|
108
|
+
- **Do** anchor every surface on the near-black canvas; the yellow-on-black pairing is the brand.
|
|
109
|
+
- **Do** reserve yellow `primary` for the primary action, the focus `ring`, and the active-nav indicator — nothing else. Its scarcity at element scale is what reads as voltage.
|
|
110
|
+
- **Do** carry hierarchy with the surface ladder, hairlines, weight, and size — the brand is flat.
|
|
111
|
+
- **Do** run headings Inter 700 with tight negative tracking; build hierarchy on size and weight.
|
|
112
|
+
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps, and SQL.
|
|
113
|
+
- **Don't** introduce a second brand color — ClickHouse is monochrome plus one yellow.
|
|
114
|
+
- **Don't** fill large surfaces with yellow or set body text in yellow; the full-bleed yellow band is marketing-only.
|
|
115
|
+
- **Don't** pill controls or reach for a radius outside `radius-scale` — the button/input radius is 8px.
|
|
116
|
+
- **Don't** signal elevation with drop shadows, or adapt the shell to a light canvas — this brand has no light surface.
|
|
117
|
+
|
|
118
|
+
## 8 Responsive
|
|
119
|
+
|
|
120
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
121
|
+
|
|
122
|
+
| Breakpoint | What changes |
|
|
123
|
+
| --- | --- |
|
|
124
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
125
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
126
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
127
|
+
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
128
|
+
|
|
129
|
+
## 9 Agent Prompt Guide
|
|
130
|
+
|
|
131
|
+
Directives the emitting agent follows verbatim:
|
|
132
|
+
|
|
133
|
+
- Wear the near-black canvas by default; this brand is categorically dark — no light surface to fall back to. Cards and panels are the dim-panel lift off it, not white.
|
|
134
|
+
- Spend yellow once per surface: the primary action, the focus ring, the active-nav indicator. If two things want the yellow, one is not primary. Color otherwise belongs to data and status.
|
|
135
|
+
- Depth is surface contrast and hairlines, never shadow; reach for the faint overlay lift only for a true modal or popover over the canvas.
|
|
136
|
+
- Headings ride Inter 700 with tight tracking; the display scale (72/56/40px) stays behind — operator headings top out at 24px, hierarchy is size and weight.
|
|
137
|
+
- Every numeric column is `tabular-nums`; every ID / code / timestamp / log line and SQL block is `font-mono` (JetBrains Mono). Show the real query, not an illustration of one.
|
|
138
|
+
- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
|
|
139
|
+
- Keyboard-first: the yellow `ring` focus outline is always visible.
|
|
140
|
+
- Leave behind: full-bleed yellow CTA bands, 56px yellow stat numbers, hero 7/5 splits, and the 96px section rhythm — marketing voltage, not operator chrome.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 8px # derived: brand button/input radius (md); cards step to 12px via the scale; pill is badges-only
|
|
144
|
+
shadow-intensity: 0.2 # derived: brand is shadowless — depth is surface contrast; only true overlays get the faintest lift on the black canvas
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 0.9 # derived: dense tier — the brand's engineering-grade, slightly-compressed rhythm compresses spacing one step
|
|
147
|
+
density-inset: 0.9 # derived: matches the dense density-gap for coherent component insets
|
|
148
|
+
font-sans: Inter, system-ui, sans-serif
|
|
149
|
+
font-mono: JetBrains Mono, ui-monospace, monospace
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 700 # derived: ClickHouse's defining typographic trait is confident bold-700 headings; the display scale stays behind, the weight carries
|
|
152
|
+
heading-tracking: -0.02em # derived: brand's signature tight negative display tracking (-1 to -2.5px), scaled to operator heading sizes
|
|
153
|
+
duration-unit: 50ms # derived: corpus documents no motion (known gap); functional operator base
|
|
154
|
+
duration-fast: 100ms # derived: corpus silent; functional tempo
|
|
155
|
+
duration-normal: 150ms # derived: corpus silent; standard functional tempo
|
|
156
|
+
duration-slow: 250ms # derived: corpus silent; overlay/panel transition
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
158
|
+
contrast-boost: 1 # derived: brand's dim-panel contrast is deliberately subtle; hairline borders carry the grid, no boost
|
|
159
|
+
icon-stroke: 1.75 # derived: corpus silent on icons; refined operator stroke one step under lucide's 2, matching the precise/engineered voice
|
|
160
|
+
icon-size-base: 16px # derived: corpus silent on icon size; operator default
|
|
161
|
+
sidebar-width-expanded: 248px # derived: brand has no app sidebar (marketing top nav); standard operator rail
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: standard operator icon rail
|
|
163
|
+
topbar-height: 64px # corpus top-nav height (64px)
|
|
164
|
+
side-panel-width: 420px # derived: corpus silent; standard operator detail panel
|
|
165
|
+
side-panel-width-rich: 640px # derived: content-heavy detail panel
|
|
166
|
+
modal-width-max: 560px # derived: corpus's yellow CTA bands are full-bleed marketing; operator confirmation cap
|
|
167
|
+
form-max-width: 640px # derived: brand max content ~1280px is marketing; operator form cap
|
|
168
|
+
table-row-height: 40px # derived: matches the brand's 40px control height; dense archetypes step down via the surface catalog
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: subtle # derived: brand is quiet in motion ("don't add hover beyond what the system encodes"); functional feedback only
|
|
171
|
+
density-tier: dense # derived: brand's engineering-grade, slightly-compressed whitespace reads dense
|
|
172
|
+
product-traits: [dev-tools, database, dashboard, analytics]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light: # categorically-dark brand: the default-worn theme is dark and fills this required default slot; there is no light surface
|
|
180
|
+
background: "#0a0a0a"
|
|
181
|
+
foreground: "#ffffff"
|
|
182
|
+
card: "#1a1a1a"
|
|
183
|
+
card-foreground: "#ffffff"
|
|
184
|
+
muted: "#121212"
|
|
185
|
+
muted-foreground: "#888888"
|
|
186
|
+
border: "#2a2a2a"
|
|
187
|
+
input: "#2a2a2a"
|
|
188
|
+
ring: "#faff69"
|
|
189
|
+
primary: "#faff69"
|
|
190
|
+
primary-foreground: "#0a0a0a"
|
|
191
|
+
accent: "#242424"
|
|
192
|
+
accent-foreground: "#ffffff"
|
|
193
|
+
destructive: "#ef4444"
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#22c55e"
|
|
196
|
+
warning: "#f59e0b"
|
|
197
|
+
popover: "#1a1a1a"
|
|
198
|
+
popover-foreground: "#ffffff"
|
|
199
|
+
secondary: "#1a1a1a"
|
|
200
|
+
secondary-foreground: "#ffffff"
|
|
201
|
+
chart-1: "#faff69" # derived: electric yellow — primary data series
|
|
202
|
+
chart-2: "#3b82f6" # derived: accent blue
|
|
203
|
+
chart-3: "#22c55e" # derived: emerald
|
|
204
|
+
chart-4: "#f59e0b" # derived: amber
|
|
205
|
+
chart-5: "#ef4444" # derived: rose
|
|
206
|
+
sidebar: "#0a0a0a" # derived: brand nav rides the canvas; the hairline sidebar-border carries the seam
|
|
207
|
+
sidebar-foreground: "#cccccc" # derived: resting nav labels dim to brand body grey, brightening on active
|
|
208
|
+
sidebar-primary: "#faff69" # derived: yellow active-nav indicator
|
|
209
|
+
sidebar-primary-foreground: "#0a0a0a"
|
|
210
|
+
sidebar-accent: "#242424" # derived: hover/selected nav lift
|
|
211
|
+
sidebar-accent-foreground: "#ffffff"
|
|
212
|
+
sidebar-border: "#2a2a2a"
|
|
213
|
+
sidebar-ring: "#faff69"
|
|
214
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
|
|
215
|
+
radius-scale: [0, 4, 6, 8, 12, 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,227 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Cohere
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Cohere — an operator reading of the enterprise-AI editorial system
|
|
9
|
+
|
|
10
|
+
Cohere's web system is a controlled enterprise-AI interface: stark white editorial canvas, a
|
|
11
|
+
monochrome near-black UI shell, warm mineral surfaces, and a type split between carved display
|
|
12
|
+
headlines and precise Unica77 UI text. This entry is the *operator* reading of that brand — an
|
|
13
|
+
internal tool (agent console, review queue, research dashboard) in Cohere's language. What carries:
|
|
14
|
+
the white canvas, near-black actions, one cool blue for interactive detail, hairline-led flatness, the
|
|
15
|
+
rounded-but-not-pill radii, and the light-weight, tightly-tracked type voice. What stays behind: the
|
|
16
|
+
hero-scale display type (96/72/60px), pill CTAs, coral editorial taxonomy, and the deep-green/navy
|
|
17
|
+
media bands where color arrives through photography, not chrome.
|
|
18
|
+
|
|
19
|
+
## 1 Visual Theme
|
|
20
|
+
|
|
21
|
+
Light by default; dark is opt-in. Emphatically flat — hierarchy is carried by hairline `border`,
|
|
22
|
+
surface alternation, and tight type, never by shadow. The shell is austere black-and-white: a white
|
|
23
|
+
canvas, near-black ink, and a single chromatic accent, `accent-foreground` action-blue, reserved for
|
|
24
|
+
links, selection, and the one detail that must read as clickable. The primary action wears near-black
|
|
25
|
+
`primary`, not a color — a monochrome UI where color arrives through data, not chrome. Warm soft-stone
|
|
26
|
+
tints `secondary` so the system reads editorial. Density is `spacious`: whitespace is a trust signal
|
|
27
|
+
here, so rows run tall and sections breathe.
|
|
28
|
+
|
|
29
|
+
## 2 Color Roles
|
|
30
|
+
|
|
31
|
+
Light values first; the manifest carries the exact hex. One chromatic accent — action-blue is the only
|
|
32
|
+
hue that carries interactive meaning; status hues speak only status.
|
|
33
|
+
|
|
34
|
+
| Role | Value | Allowed where |
|
|
35
|
+
| --- | --- | --- |
|
|
36
|
+
| `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
37
|
+
| `foreground` | ink `#212121` | all primary text |
|
|
38
|
+
| `muted` | soft neutral `#f2f2f2` | hover rows, subtle fills, containment |
|
|
39
|
+
| `muted-foreground` | body-muted `#616161` | labels, captions, secondary text |
|
|
40
|
+
| `secondary` | soft-stone `#eeece7` | warm neutral blocks, secondary buttons — the mineral surface |
|
|
41
|
+
| `border` / `input` | hairline `#d9d9dd` | every list rule, grid line, and field edge |
|
|
42
|
+
| `primary` | near-black `#17171c` | the one primary action; active nav — a neutral, not a color |
|
|
43
|
+
| `accent` | pale-blue wash `#f1f5ff` | selected/hovered rows and nav |
|
|
44
|
+
| `accent-foreground` | action-blue `#1863dc` | links, the single interactive-detail hue |
|
|
45
|
+
| `ring` | focus-blue `#4c6ee6` | the keyboard focus outline — the brand's own focus color |
|
|
46
|
+
| `destructive` | error red `#b30000` | destructive actions and error state only |
|
|
47
|
+
| `success` / `warning` | emerald / burnt-coral | status signalling only, never chrome |
|
|
48
|
+
|
|
49
|
+
Coral, deep enterprise green, and dark navy are marketing graces — editorial taxonomy chips and
|
|
50
|
+
media bands with no operator chrome role (see §7); deep-green and navy survive only as chart hues.
|
|
51
|
+
|
|
52
|
+
## 3 Typography
|
|
53
|
+
|
|
54
|
+
Two families for the UI, one for technical labels. `font-sans` is Unica77 Cohere Web (Inter fallback) —
|
|
55
|
+
body, UI, and headings all ride it; size, tracking, and surface contrast carry hierarchy, not heavy
|
|
56
|
+
weight. `font-mono` is CohereMono for IDs, codes, timestamps, and the uppercase labels that mark
|
|
57
|
+
systems and taxonomy. Numeric columns render `tabular-nums`. The display faces (CohereText hero at
|
|
58
|
+
96/72px) stay behind — an operator surface starts at the UI end of the ramp.
|
|
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` · `-0.01em` |
|
|
64
|
+
| h3 | card / group head | 16px / 1.4 | `font-weight-strong` |
|
|
65
|
+
| body | UI + prose | 15px / 1.5 | `font-weight-normal` |
|
|
66
|
+
| small | labels, meta, dense table | 13px / 1.45 | `font-weight-normal` |
|
|
67
|
+
| mono-label | uppercase system / category marker | 13px / 1.4 | `font-mono`, `+0.28px`, uppercase |
|
|
68
|
+
|
|
69
|
+
Keep display type tight and carved; avoid heavy bold — hierarchy is size, tracking, and contrast.
|
|
70
|
+
Bump weight one step for emphasis; never change size to emphasize.
|
|
71
|
+
|
|
72
|
+
## 4 Component Stylings
|
|
73
|
+
|
|
74
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
75
|
+
|
|
76
|
+
- **Button** — primary: filled near-black `primary` on `primary-foreground`, `radius`, never a pill (the
|
|
77
|
+
32px pill is marketing-only). Secondary: `secondary` soft-stone fill, `border`. Ghost: `accent` hover.
|
|
78
|
+
- **Input** — `background` fill, 1px `border`, `radius`; focus draws the `ring` at full 2px, no glow.
|
|
79
|
+
- **Card** — `card` surface, 1px `border`, `radius`; shadow only for a true overlay; inset `density-inset`.
|
|
80
|
+
- **Table row** — height `table-row-height` (tall, editorial); `border` grid lines carry the rows;
|
|
81
|
+
`muted` on hover; `tabular-nums` on numeric columns; selection tints `accent`.
|
|
82
|
+
- **Side panel** — detail and edit open in the panel (`side-panel-width` / `side-panel-width-rich`),
|
|
83
|
+
beside the work, not over it.
|
|
84
|
+
- **Badge** — hairline `border`, `muted`/status fill, uppercase mono label; status badges take
|
|
85
|
+
`success` / `warning` / `destructive`, never `primary` or `accent-foreground`.
|
|
86
|
+
|
|
87
|
+
## 5 Layout
|
|
88
|
+
|
|
89
|
+
Base spacing follows an 8px cadence; the on-scale ramp is `2 · 6 · 8 · 12 · 16 · 24 · 32 · 40 · 56 ·
|
|
90
|
+
80` — the 80 preserves Cohere's dramatic section breathing. Shell dimensions map one-to-one to the
|
|
91
|
+
layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar
|
|
92
|
+
`topbar-height`, side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`,
|
|
93
|
+
forms `form-max-width`, tables full-width. Density is governed globally by `density-tier` (spacious)
|
|
94
|
+
and stepped per archetype by the surface catalog.
|
|
95
|
+
|
|
96
|
+
## 6 Depth
|
|
97
|
+
|
|
98
|
+
Emphatically flat. Depth comes from surface alternation, hairline borders, and rounded corners — never
|
|
99
|
+
drop shadows.
|
|
100
|
+
|
|
101
|
+
- **0 — canvas** `background`, no border.
|
|
102
|
+
- **1 — panel / card** `card` on a 1px `border`; borders and warm `secondary` blocks carry rank.
|
|
103
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
104
|
+
shadow. No level stacks a heavier shadow; rank is border, surface, and position.
|
|
105
|
+
|
|
106
|
+
Focus is a 2px `ring` (focus-blue) outline, never a glow, on every interactive element. Three
|
|
107
|
+
z-levels: content, sticky chrome, overlay.
|
|
108
|
+
|
|
109
|
+
## 7 Do's & Don'ts
|
|
110
|
+
|
|
111
|
+
- **Do** reserve near-black `primary` for the single most important action; keep the shell monochrome.
|
|
112
|
+
- **Do** carry the grid with hairlines and surface alternation — the brand is border-led and flat.
|
|
113
|
+
- **Do** let action-blue `accent-foreground` be the one chromatic hue for links, selection, and focus.
|
|
114
|
+
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and uppercase labels.
|
|
115
|
+
- **Don't** pill the CTA or reach for a radius outside `radius-scale` — the 32px pill stays in
|
|
116
|
+
marketing.
|
|
117
|
+
- **Don't** turn coral, deep-green, or navy into decorative surface fills; they are media-band and
|
|
118
|
+
editorial-taxonomy colors, not operator chrome.
|
|
119
|
+
- **Don't** add heavy drop shadows to cards; reach past a hairline only for a real overlay.
|
|
120
|
+
- **Don't** collapse the display/body type split into one flat sans, or promote a second chromatic
|
|
121
|
+
accent.
|
|
122
|
+
|
|
123
|
+
## 8 Responsive
|
|
124
|
+
|
|
125
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
126
|
+
|
|
127
|
+
| Breakpoint | What changes |
|
|
128
|
+
| --- | --- |
|
|
129
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; rows keep their rule structure, metadata below the title |
|
|
130
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); card grids drop 3→2; tables scroll overflow |
|
|
131
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side; 3-column grids return |
|
|
132
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width with generous section intervals |
|
|
133
|
+
|
|
134
|
+
## 9 Agent Prompt Guide
|
|
135
|
+
|
|
136
|
+
Directives the emitting agent follows verbatim:
|
|
137
|
+
|
|
138
|
+
- Reach first for the monochrome shell: white canvas, near-black `primary` actions, hairline borders.
|
|
139
|
+
- One chromatic accent — action-blue `accent-foreground` for links, selection, focus. A second hue as
|
|
140
|
+
chrome is wrong; color belongs to data and status.
|
|
141
|
+
- Stay flat — hairline and surface alternation before shadow; reach past a hairline only for a real
|
|
142
|
+
overlay. Honor the editorial calm: spacious density, tall rows, generous section gaps.
|
|
143
|
+
- Uppercase mono labels (`font-mono`) mark categories and systems; every numeric column is
|
|
144
|
+
`tabular-nums`; every ID / code / timestamp is `font-mono`. Every workflow completes from the
|
|
145
|
+
keyboard, the focus-blue `ring` always visible.
|
|
146
|
+
- Leave behind: hero/product display type (96/72/60px), pill CTAs, coral taxonomy chips, and the
|
|
147
|
+
deep-green/navy marketing media bands — brand-decorative, not operator chrome.
|
|
148
|
+
|
|
149
|
+
```yaml design-primitives
|
|
150
|
+
radius: 8px # derived: brand card/dialog radius (sm); honors the rounded-but-not-pill character; the 32px pill stays marketing-only
|
|
151
|
+
shadow-intensity: 0.3 # derived: brand is emphatically flat and border-led ("do not add heavy drop shadows"); shadow only lifts true overlays
|
|
152
|
+
border-weight: 1px
|
|
153
|
+
density-gap: 1.1 # derived: spacious tier — whitespace-as-trust editorial character opens the spacing one step
|
|
154
|
+
density-inset: 1.1 # derived: matches the spacious density-gap for coherent component insets
|
|
155
|
+
font-sans: Unica77 Cohere Web, Inter, ui-sans-serif, system-ui, sans-serif
|
|
156
|
+
font-mono: CohereMono, ui-monospace, SFMono-Regular, Menlo, monospace # derived: corpus's Arial fallback for CohereMono is unfit for tabular columns; override to a real monospace stack
|
|
157
|
+
font-weight-normal: 400
|
|
158
|
+
font-weight-strong: 500 # derived: brand "avoids heavy bold weights" — hierarchy is size/tracking/contrast; button weight is 500
|
|
159
|
+
heading-tracking: -0.02em # derived: brand display uses tight negative tracking (-0.32 to -1.2px); preserved as carved character at operator sizes
|
|
160
|
+
duration-unit: 50ms # derived: corpus documents no motion; functional operator base
|
|
161
|
+
duration-fast: 120ms # derived: corpus silent; calm-editorial functional tempo
|
|
162
|
+
duration-normal: 200ms # derived: corpus silent; unhurried but not sluggish
|
|
163
|
+
duration-slow: 300ms # derived: corpus silent; overlay/panel transition
|
|
164
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
165
|
+
contrast-boost: 1 # derived: hairlines and surface alternation already carry the grid
|
|
166
|
+
icon-stroke: 1.5 # derived: brand uses thin-line geometric illustrations — a refined thin operator stroke
|
|
167
|
+
icon-size-base: 16px # derived: corpus silent on icon size; operator default
|
|
168
|
+
sidebar-width-expanded: 260px # derived: no brand sidebar (top nav); slightly wide to honor editorial breathing
|
|
169
|
+
sidebar-width-collapsed: 56px # derived: standard operator icon rail
|
|
170
|
+
topbar-height: 56px # derived: corpus silent; a touch taller for the editorial calm
|
|
171
|
+
side-panel-width: 420px # derived: corpus silent; standard operator detail panel
|
|
172
|
+
side-panel-width-rich: 640px # derived: content-heavy detail panel
|
|
173
|
+
modal-width-max: 560px # derived: corpus silent; operator confirmation cap
|
|
174
|
+
form-max-width: 640px # derived: brand forms are rounded white cards with two-column rows
|
|
175
|
+
table-row-height: 48px # derived: brand research rows are "tall, white, border-driven" — taller than a standard operator row
|
|
176
|
+
verbosity: default
|
|
177
|
+
feedback: subtle # derived: brand is "intentionally quiet" and measured
|
|
178
|
+
density-tier: spacious # derived: whitespace is a trust signal here; dramatic vertical breathing room
|
|
179
|
+
product-traits: [ai-platform, enterprise, agent-console, dashboard, research]
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
```yaml lever-manifest
|
|
183
|
+
version: 1
|
|
184
|
+
fonts: { sans: "Unica77 Cohere Web, Inter, ui-sans-serif, system-ui, sans-serif", mono: "CohereMono, ui-monospace, SFMono-Regular, Menlo, monospace" }
|
|
185
|
+
color-tokens:
|
|
186
|
+
light:
|
|
187
|
+
background: "#ffffff"
|
|
188
|
+
foreground: "#212121"
|
|
189
|
+
card: "#ffffff"
|
|
190
|
+
card-foreground: "#212121"
|
|
191
|
+
muted: "#f2f2f2"
|
|
192
|
+
muted-foreground: "#616161"
|
|
193
|
+
border: "#d9d9dd"
|
|
194
|
+
input: "#d9d9dd"
|
|
195
|
+
ring: "#4c6ee6"
|
|
196
|
+
primary: "#17171c"
|
|
197
|
+
primary-foreground: "#ffffff"
|
|
198
|
+
accent: "#f1f5ff"
|
|
199
|
+
accent-foreground: "#1863dc"
|
|
200
|
+
destructive: "#b30000"
|
|
201
|
+
destructive-foreground: "#ffffff"
|
|
202
|
+
success: "#047857" # derived: deep enterprise green #003c33 lightened to a legible status emerald
|
|
203
|
+
warning: "#c2410c" # derived: brand coral #ff7759 deepened toward a legible warm status, distinct from error red
|
|
204
|
+
popover: "#ffffff"
|
|
205
|
+
popover-foreground: "#212121"
|
|
206
|
+
secondary: "#eeece7"
|
|
207
|
+
secondary-foreground: "#212121"
|
|
208
|
+
chart-1: "#1863dc" # derived: action blue — primary data series
|
|
209
|
+
chart-2: "#003c33" # derived: deep enterprise green
|
|
210
|
+
chart-3: "#ff7759" # derived: coral
|
|
211
|
+
chart-4: "#9b60aa" # derived: form-focus violet
|
|
212
|
+
chart-5: "#75758a" # derived: slate — neutral-cool fifth series
|
|
213
|
+
sidebar: "#f7f6f3" # derived: soft-stone diluted toward white — a faint warm mineral rail
|
|
214
|
+
sidebar-foreground: "#212121"
|
|
215
|
+
sidebar-primary: "#17171c"
|
|
216
|
+
sidebar-primary-foreground: "#ffffff"
|
|
217
|
+
sidebar-accent: "#f1f5ff"
|
|
218
|
+
sidebar-accent-foreground: "#1863dc"
|
|
219
|
+
sidebar-border: "#d9d9dd"
|
|
220
|
+
sidebar-ring: "#4c6ee6"
|
|
221
|
+
spacing-scale: [2, 6, 8, 12, 16, 24, 32, 40, 56, 80]
|
|
222
|
+
radius-scale: [0, 4, 8, 16, 22, 9999]
|
|
223
|
+
shadow-levels: [none, sm, md]
|
|
224
|
+
motion: { durations: [120, 200, 300], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
225
|
+
icons: { family: lucide, stroke: 1.5 }
|
|
226
|
+
accent-count: 1
|
|
227
|
+
```
|