@nurix/etna 0.18.18 → 0.18.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/rules/general.md +2 -1
  4. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  5. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  6. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  66. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  67. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  76. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  77. package/data/harnesses/code/skills/design/references/create.md +126 -0
  78. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  79. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  80. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  81. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  82. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  83. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  84. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  85. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  86. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  87. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  88. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  89. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  90. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  91. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  92. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  93. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  94. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  95. package/data/harnesses/etna/CLAUDE.md +1 -1
  96. package/data/harnesses/etna/harness.json +2 -2
  97. package/data/harnesses/etna/rules/general.md +2 -1
  98. package/data/harnesses/mobile/harness.json +2 -2
  99. package/data/harnesses/mobile/rules/general.md +2 -1
  100. package/package.json +1 -1
@@ -0,0 +1,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
+ ```