@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,222 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: NVIDIA
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # NVIDIA — the operator reading
9
+
10
+ The operator reading of NVIDIA's marketing system: an engineering-grade look reduced to four colors —
11
+ black, white, gray, and one violently saturated green — on an aggressively angular 2px grid. NVIDIA's
12
+ own surfaces alternate deep-black hero/footer chapters with paper-white body content under hero-scale
13
+ display type. This entry keeps what survives at operator scale: the strict single-green accent, the
14
+ pure black/white/gray palette, the 2px radius, the weight-not-size type hierarchy, and flat hairline
15
+ depth. The 48px display, dark hero chapters, corner squares, and editorial purple/blue washes stay
16
+ behind. Unmistakably NVIDIA — stark, technical, one-color; judgments away from the corpus are annotated
17
+ `# derived:` where it is silent.
18
+
19
+ ## 1 Visual Theme
20
+
21
+ Light by default: a paper-white content canvas, ink-black type, a hairline gray grid. The black brand
22
+ frame is opt-in *structure*, not a dark theme — NVIDIA's chrome is pure black, so an operator shell
23
+ wears a black `sidebar` around the white canvas. Flat by conviction: hierarchy comes from hairline
24
+ `border`, pure-black ink, and 700-weight type — never shadow. A single accent, NVIDIA Green `primary`
25
+ (`#76b900`), carries the one action and the active state; black text sits on the green fill, never
26
+ white. The neutral ramp is true grayscale — no temperature tilt. Aggressively angular (`radius` 2px
27
+ everywhere); density is `dense` — this reads like engineering documentation, not consumer software.
28
+
29
+ ## 2 Color Roles
30
+
31
+ Light values (hex — the corpus's native format). One accent: `primary` green is the only chromatic hue
32
+ that carries brand meaning; status hues speak only status, and the editorial purples and pales are
33
+ marketing graces with no role here (see §7).
34
+
35
+ | Role | Value | Allowed where |
36
+ | --- | --- | --- |
37
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant body surface |
38
+ | `foreground` | pure black `#000000` | all primary ink and headlines — NVIDIA's stark ink is the identity |
39
+ | `muted` / `secondary` | soft surface `#f7f7f7` | hover rows, subtle fills, secondary buttons |
40
+ | `muted-foreground` | gray `#757575` | labels, captions, metadata, breadcrumbs |
41
+ | `border` / `input` | hairline `#cccccc` | every separator, grid line, and field edge — the highest-frequency token |
42
+ | `primary` / `primary-foreground` | NVIDIA Green `#76b900` / black `#000000` | the one primary action, active nav, focus ring — black on green, never white |
43
+ | `accent` / `accent-foreground` | pale green wash `#eef7d6` / black `#000000` | selected/hovered rows and nav — the operator translation of the green accent |
44
+ | `ring` | `primary` green | the focus outline — the brand's only focus signal, unmistakable |
45
+ | `destructive` | red `#e52020` | destructive actions and error state only |
46
+ | `success` / `warning` | deep green `#3f8500` / orange `#df6500` | status only — `success` kept off the saturated brand green so status ≠ accent |
47
+
48
+ Link-blue `#0046a4` is inline-prose links only (see §7); the editorial purple survives only as a chart hue.
49
+
50
+ ## 3 Typography
51
+
52
+ One sans, no second display family — NVIDIA builds its entire hierarchy from two weights (400 and 700)
53
+ and size, never a second face and never color. `font-sans` is Inter (the corpus-named substitute for
54
+ the proprietary NVIDIA-EMEA cut; Arial the documented fallback) — UI, body, and headings all ride it.
55
+ `font-mono` is derived: the corpus ships no monospace, but operator IDs, codes, and log lines need one.
56
+ Numeric columns render `tabular-nums`; tracking is 0 across every step — NVIDIA does not tighten headings.
57
+
58
+ | Step | Role | Size · line | Weight · tracking |
59
+ | --- | --- | --- | --- |
60
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` (700) · `heading-tracking` (0) |
61
+ | h2 | section head | 20px / 1.25 | `font-weight-strong` · 0 |
62
+ | h3 | card / group head | 17px / 1.47 | `font-weight-strong` · 0 |
63
+ | body | UI + prose | 16px / 1.5 | `font-weight-normal` (400) |
64
+ | small | labels, meta, dense table | 15px / 1.4 | `font-weight-normal` |
65
+ | caption | uppercase eyebrow | 14px / 1.43 | `font-weight-strong`, uppercase |
66
+ | code | IDs, logs, amounts | 15px / 1.5 | `font-mono`, `font-weight-normal` |
67
+
68
+ Emphasize by jumping straight to 700 — no intermediate weight; the 48px/36px hero display stays behind.
69
+
70
+ ## 4 Component Stylings
71
+
72
+ - **Button** — `primary`: filled green on black `primary-foreground`, `radius` (2px), no pill. Secondary
73
+ (the NVIDIA outline): transparent with a 2px `primary` (green) border, `foreground` text. Ghost:
74
+ transparent, `accent` on hover.
75
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus swaps the edge to a 2px
76
+ `ring` (green) border — the only focus signal in the system, no glow.
77
+ - **Card** — `card` surface on a 1px `border`, `radius`, no shadow; separation is the hairline, not elevation.
78
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
79
+ numeric columns; row selection tints `accent`.
80
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
81
+ for content-heavy), beside the work, not over it.
82
+ - **Badge** — `secondary` fill, hairline `border`, uppercase caption; status badges take `success` /
83
+ `warning` / `destructive`, never `primary`.
84
+
85
+ ## 5 Layout
86
+
87
+ Base spacing unit 4px (Tailwind `--spacing`); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 ·
88
+ 64`, and NVIDIA's native 8px rhythm governs section gaps (64px between major blocks). Shell dimensions
89
+ map one-to-one to the layout primitives: black sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`,
90
+ topbar `topbar-height` (56px, the brand's sub-nav strip height), side panel `side-panel-width` /
91
+ `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Density
92
+ is governed globally by `density-tier` (`dense`) and stepped per archetype — never by absolute overrides.
93
+
94
+ ## 6 Depth
95
+
96
+ Flat — NVIDIA's cards do not lift; they are rectangles with hairline borders. Hierarchy is the surface
97
+ ladder and hairlines, not shadow:
98
+
99
+ - **0 — canvas** `background`, no border.
100
+ - **1 — panel / card** `card` on a 1px `border` (`#cccccc`); no shadow.
101
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a single soft
102
+ `sm` shadow (the brand's lone 5px ambient). Rank is border and position, never a heavier shadow.
103
+
104
+ On the black `sidebar`, dividers use the stronger hairline `#5e5e5e`. Focus is a 2px green `ring` outline
105
+ (never a glow) on every interactive element; three z-levels (content, sticky chrome, overlay).
106
+
107
+ ## 7 Do's & Don'ts
108
+
109
+ - **Do** reserve `primary` green for the single most important action and the active state — treat it as
110
+ a precious resource; keep black `primary-foreground` on the fill (black-on-green is the signature).
111
+ - **Do** carry hierarchy with weight (jump to 700) and hairlines, hold `radius` at 2px on every
112
+ interactive element, and frame the white canvas in the black `sidebar` — the black chrome is NVIDIA's identity.
113
+ - **Don't** promote a second chromatic accent — the editorial purple, link-blue, and pale washes are
114
+ marketing graces; status uses `success` / `warning` / `destructive`, and `success` is deep green
115
+ `#3f8500`, not the saturated brand green. Link-blue is inline-prose only, never chrome or a button.
116
+ - **Don't** pill the CTA or reach past 2px radius (avatars excepted); don't tint operator chrome with the
117
+ saturated brand green — selection uses the pale-green `accent`.
118
+ - **Don't** signal elevation with drop shadows, or reach for the marketing corner squares, hero-scale
119
+ display type, or dark hero chapters in an operator surface.
120
+
121
+ ## 8 Responsive
122
+
123
+ The operator sweep is 375 / 768 / 1024 / 1440.
124
+
125
+ | Breakpoint | What changes |
126
+ | --- | --- |
127
+ | 375 | black sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; dense grids scroll horizontally; density holds |
128
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
129
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
130
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
131
+
132
+ ## 9 Agent Prompt Guide
133
+
134
+ - One accent, always green. `primary` marks THE action and the active state — black on green, never
135
+ white. If two things want the green, one of them is not primary.
136
+ - Frame the app in NVIDIA's black chrome: a black `sidebar` around a white content canvas, active nav in green.
137
+ - Build type hierarchy from weight (400 vs 700) and size — never a second family, never color; tracking 0.
138
+ - Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`. Hold `radius` at 2px everywhere; no pills.
139
+ - Success status is deep green `#3f8500`, not the brand green; stay flat — hairline and weight before shadow.
140
+ - Leave behind the marketing skin: 48px display headlines, dark full-bleed hero chapters, decorative
141
+ corner squares, and the editorial purple/blue/pale accents. What carries: the black/white/gray/green
142
+ palette, the neutral temperature, the 2px angular radius, the weight-not-size voice, and flat depth.
143
+
144
+ ```yaml design-primitives
145
+ radius: 2px # corpus: rounded.sm (2px) on every interactive element; the brand's aggressively angular signature
146
+ shadow-intensity: 0.3 # corpus: effectively flat; the lone shadow is a 5px ambient at rgba(0,0,0,0.3) on sticky chrome
147
+ border-weight: 1px # corpus: 1px hairline border is standard (focus edge steps to 2px green)
148
+ density-gap: 0.9 # derived: dense engineering-grid character packs rows tighter than the standard tier
149
+ density-inset: 0.9 # derived: matches the dense tier's tighter component insets
150
+ font-sans: Inter, Arial, Helvetica, sans-serif # corpus: Inter is the named substitute for proprietary NVIDIA-EMEA; Arial the documented fallback
151
+ font-mono: JetBrains Mono, ui-monospace, monospace # derived: the marketing system ships no mono; a neutral engineering mono for operator IDs/logs
152
+ font-weight-normal: 400 # corpus: regular is 400
153
+ font-weight-strong: 700 # corpus: the brand's only bold is 700 — hierarchy is 400-vs-700, no intermediate weight
154
+ heading-tracking: 0 # corpus: letterSpacing is 0 across every display and heading step
155
+ duration-unit: 50ms # derived: motion out of scope in corpus; functional operator default
156
+ duration-fast: 100ms # derived: corpus silent on motion
157
+ duration-normal: 150ms # derived: corpus silent on motion
158
+ duration-slow: 250ms # derived: corpus silent on motion
159
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
160
+ contrast-boost: 1 # derived: pure-black ink already maxes text contrast; borders stay at the brand hairline
161
+ icon-stroke: 2 # derived: brand is bold/700-heavy and angular; full 2px lucide stroke matches, not the refined 1.75
162
+ icon-size-base: 16px # corpus: chrome icons render 14–22px; 16px base control size
163
+ sidebar-width-expanded: 248px # derived: corpus has no app shell (marketing top-nav); operator standard
164
+ sidebar-width-collapsed: 56px # derived: corpus has no app shell; operator standard icon rail
165
+ topbar-height: 56px # corpus: the brand's sub-nav strip is 56px (primary nav 64px); a tight operator bar
166
+ side-panel-width: 420px # derived: corpus has no app shell; operator standard
167
+ side-panel-width-rich: 640px # derived: corpus has no app shell; content-heavy detail width
168
+ modal-width-max: 560px # derived: corpus shows only a locale-selector overlay; confirmations only
169
+ form-max-width: 640px # derived: corpus caps content ~1280px; forms read comfortably at 640px
170
+ table-row-height: 36px # derived: dense technical-grid character → tighter than the 40px standard
171
+ verbosity: compact # derived: dense factual editorial voice trusts terse copy over explanatory chrome
172
+ feedback: minimal # derived: austere single-signal brand — one green focus border, no documented hover
173
+ density-tier: dense # corpus: dense multi-column technical grids are the brand's native mode
174
+ product-traits: [dev-tools, dashboard, infrastructure, admin]
175
+ ```
176
+
177
+ ```yaml lever-manifest
178
+ version: 1
179
+ fonts: { sans: "Inter, Arial, Helvetica, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
180
+ color-tokens:
181
+ light:
182
+ background: "#ffffff"
183
+ foreground: "#000000"
184
+ card: "#ffffff"
185
+ card-foreground: "#000000"
186
+ muted: "#f7f7f7"
187
+ muted-foreground: "#757575"
188
+ border: "#cccccc"
189
+ input: "#cccccc"
190
+ ring: "#76b900"
191
+ primary: "#76b900"
192
+ primary-foreground: "#000000"
193
+ accent: "#eef7d6" # derived: pale NVIDIA-green wash for selection — the operator translation of the green accent
194
+ accent-foreground: "#000000" # derived: black ink on the pale tint, on-brand with the stark-ink discipline
195
+ destructive: "#e52020"
196
+ destructive-foreground: "#ffffff"
197
+ success: "#3f8500" # corpus: success-deep, used where the saturated brand green would clash
198
+ warning: "#df6500"
199
+ popover: "#ffffff"
200
+ popover-foreground: "#000000"
201
+ secondary: "#f7f7f7"
202
+ secondary-foreground: "#000000"
203
+ chart-1: "#76b900" # brand green
204
+ chart-2: "#0046a4" # link-blue
205
+ chart-3: "#952fc6" # editorial purple
206
+ chart-4: "#df6500" # warning orange
207
+ chart-5: "#898989" # derived: mid-gray series — honest to the brand's monochrome-forward palette
208
+ sidebar: "#000000" # derived: NVIDIA's chrome is pure black; the black frame carried to the operator shell
209
+ sidebar-foreground: "#ffffff"
210
+ sidebar-primary: "#76b900"
211
+ sidebar-primary-foreground: "#000000"
212
+ sidebar-accent: "#1a1a1a" # corpus: surface-elevated — hover/active fill on the black frame
213
+ sidebar-accent-foreground: "#ffffff"
214
+ sidebar-border: "#5e5e5e" # corpus: hairline-strong, the divider on dark surfaces
215
+ sidebar-ring: "#76b900"
216
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
217
+ radius-scale: [0, 1, 2, 9999]
218
+ shadow-levels: [none, sm]
219
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
220
+ icons: { family: lucide, stroke: 2 }
221
+ accent-count: 1
222
+ ```
@@ -0,0 +1,226 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Ollama
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Ollama — the monochrome documentation operator
9
+
10
+ An operator reading of Ollama's defiantly minimal brand: paper-white canvas end to end, hairline
11
+ borders instead of shadow, and a single accent that is pure black itself. Ollama's marketing surface
12
+ reads like a Markdown README — one continuous white sheet, a rounded display face, a black pill CTA,
13
+ an inline `curl` snippet as the hero. An operator surface keeps the palette, the flatness, the rounded
14
+ type voice, and the airy rhythm; it leaves behind the hero-scale display type, the full-pill CTA on
15
+ every action, and the marketing whitespace at 88px. Both machine blocks are fully valued; every
16
+ judgment away from the marketing brand is annotated `# derived:` where it lands.
17
+
18
+ ## 1 Visual Theme
19
+
20
+ Light by default; dark is opt-in. Aggressively flat — hierarchy is carried by 1px hairline `border`,
21
+ type weight, and pure-black contrast, never by shadow (the brand has no drop-shadow elevation at all).
22
+ The system is monochrome: `primary` is pure black `#000000`, the only chromatic hue that carries
23
+ meaning. Status hues speak only status. The single non-neutral note is the focus `ring` — a functional
24
+ blue, the brand's one deliberate exception, not a second accent. The type voice is rounded and
25
+ approachable (a Nunito-class geometric sans), the radius character soft. The anchor surface is a
26
+ continuous white canvas beside a faint off-white `sidebar`. Density is `spacious` — whitespace is the
27
+ brand's whole layout — and steps denser per surface archetype.
28
+
29
+ ## 2 Color Roles
30
+
31
+ Values are the brand's own (the manifest carries every hex). One accent — black — carries interaction;
32
+ status hues signal only status.
33
+
34
+ | Role | Value | Allowed where |
35
+ | --- | --- | --- |
36
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — one continuous sheet, no surface alternation |
37
+ | `foreground` | pure black `#000000` | headings, key data, primary ink — the brand commits to true black |
38
+ | `muted` / `secondary` | soft off-white `#fafafa` | hover rows, subtle fills, secondary buttons |
39
+ | `muted-foreground` | neutral gray `#737373` | body prose, labels, captions, secondary text |
40
+ | `border` / `input` | hairline `#e5e5e5` | every separator, grid line, and field edge |
41
+ | `primary` | pure black `#000000` | the one primary action; active nav; solid icons |
42
+ | `accent` | pale gray `#f5f5f5` | selected/hovered rows and nav — a step past `muted` so selection reads distinct |
43
+ | `ring` | focus blue `#3b82f6` | the focus outline only — the brand's single functional non-monochrome element |
44
+ | `destructive` | red `#c92a2a` | destructive actions and error state only |
45
+ | `success` / `warning` | green `#1a7f37` / amber `#b45309` | status signalling only, never chrome |
46
+
47
+ The dark surface `#171717` is the brand's one inverted "look here" device — earn it once per view, never
48
+ twice. Terminal traffic-light hues stay inside mono/terminal ornament; they carry no operator role.
49
+
50
+ ## 3 Typography
51
+
52
+ One sans, one mono. `font-sans` is a Nunito-class rounded geometric sans — the corpus's named substitute
53
+ for the brand's SF Pro Rounded, and the one thing that makes the UI read as Ollama; headings and body
54
+ share it. `font-mono` is JetBrains Mono for IDs, codes, timestamps, log lines, and install snippets.
55
+ Numeric columns render `tabular-nums` so figures align down a column.
56
+
57
+ | Step | Role | Size · line | Weight · tracking |
58
+ | --- | --- | --- | --- |
59
+ | h1 | page title | 30px / 1.2 | `font-weight-strong` · `heading-tracking` |
60
+ | h2 | section head | 24px / 1.33 | `font-weight-strong` · `heading-tracking` |
61
+ | h3 | card / group head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
62
+ | body | UI + prose | 14px / 1.45 | `font-weight-normal` |
63
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
64
+ | caption | eyebrow, footer meta | 12px / 1.33 | `font-weight-normal` |
65
+
66
+ The brand tracks every step at 0 — the rounded face needs no tightening. Bump weight one step for
67
+ emphasis; never change size to emphasize.
68
+
69
+ ## 4 Component Stylings
70
+
71
+ Every recurring operator component composes from the primitives — no literal values.
72
+
73
+ - **Button** — `primary`: filled black `primary` on `primary-foreground`, `radius` (soft, not a pill).
74
+ Secondary: `secondary` fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
75
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the blue `ring`
76
+ at full 2px, no glow.
77
+ - **Card** — `card` surface, 1px `border`, `radius`, no shadow on the canvas (`shadow-intensity` lifts
78
+ only true overlays); inset by `density-inset`.
79
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `accent` on
80
+ selection; `tabular-nums` on numeric columns; `font-mono` on IDs and codes.
81
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
82
+ for content-heavy), beside the work, not over it.
83
+ - **Badge / chip** — hairline `border` with `muted` or status fill, and may keep the brand's full pill
84
+ radius (a monochrome nod); status badges take `success` / `warning` / `destructive`, never `primary`.
85
+
86
+ ## 5 Layout
87
+
88
+ Framework base unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 ·
89
+ 32 · 48 · 64 · 88`, where 88px is the brand's signature section rhythm (used between major blocks, not
90
+ between rows). Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded`
91
+ / `sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
92
+ `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Density
93
+ is `spacious` globally (rewriting the spacing scale through `density-gap`) and stepped per archetype by
94
+ the surface catalog — never by absolute overrides.
95
+
96
+ ## 6 Depth
97
+
98
+ Flat. Hierarchy comes from the surface ladder, hairlines, and the one inverted dark surface — not shadow:
99
+
100
+ - **0 — canvas** `background`, no border.
101
+ - **1 — panel / card** `card` on a 1px `border`; no shadow on the canvas.
102
+ - **2 — overlay** `popover` / side panel / modal — the only place `shadow-intensity` earns a whisper of
103
+ `sm`/`md` shadow to separate the overlay from the sheet beneath.
104
+
105
+ The dark surface `#171717` is the brand's single non-shadow emphasis device — a dark banner or spotlight
106
+ panel, used once per view to draw the eye. Focus is a 2px blue `ring` outline (never a glow), visible on
107
+ every interactive element. Three z-levels: content, sticky chrome, overlay.
108
+
109
+ ## 7 Do's & Don'ts
110
+
111
+ - **Do** stay monochrome: black `primary` on white, gray text, hairline borders. That is the identity.
112
+ - **Do** reserve black for the single most important action on a surface; keep it scarce per view.
113
+ - **Do** carry hierarchy with hairlines, weight, and whitespace — never shadow.
114
+ - **Do** keep the rounded sans voice; it is the brand's only "personality," and it must survive.
115
+ - **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
116
+ - **Don't** introduce a second chromatic accent, a gradient, or an atmospheric background — status hues
117
+ are the only color besides the black accent and the functional blue ring.
118
+ - **Don't** full-pill every button; the marketing pill relaxes to the soft `radius` for dense scanning
119
+ (pills stay available for chips and a singular hero action only).
120
+ - **Don't** lift cards with shadow; use a hairline `border` or the one inverted dark surface.
121
+ - **Don't** swap in a second display font — one rounded sans carries headings and body alike.
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; section air tightens |
130
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
131
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
132
+ | 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
133
+
134
+ ## 9 Agent Prompt Guide
135
+
136
+ Directives the emitting agent follows verbatim:
137
+
138
+ - Lead every list surface with its table; lead every entity with its primary read, not its chrome.
139
+ - Stay monochrome — black is the accent. If something wants color, it is either status or nothing.
140
+ - One black action per surface. If two things want black, one of them is not primary.
141
+ - Flat before shadow: hairline `border` and the surface ladder carry rank; reach for shadow only for a
142
+ real overlay. The one dark surface is the single emphasis device — use it once.
143
+ - Keep the rounded sans voice; it is what makes the UI read as Ollama, not a generic gray admin.
144
+ - Every numeric column is `tabular-nums`; every ID / code / timestamp / log line is `font-mono`.
145
+ - The focus `ring` is the blue — the brand's one functional non-monochrome element; keep it visible.
146
+ - Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
147
+
148
+ ```yaml design-primitives
149
+ radius: 8px # derived: Ollama's soft-rounded character (cards 12px, chips 6px); operator default sits at md 8px — the marketing pill relaxes for dense scanning (9999 stays in the scale for chips/singular actions)
150
+ shadow-intensity: 0.2 # derived: brand has no drop-shadow elevation anywhere; only a true overlay gets a whisper
151
+ border-weight: 1px
152
+ density-gap: 1.1 # derived: whitespace is the brand's entire layout (88px section rhythm) — spacious tier opens the grid; archetypes step denser
153
+ density-inset: 1.1 # derived: coheres with the spacious tier
154
+ font-sans: Nunito, system-ui, sans-serif # rationale: corpus names Nunito as the SF Pro Rounded substitute; the rounded voice is Ollama's whole brand expression and carries into headings and body alike
155
+ font-mono: JetBrains Mono, ui-monospace, monospace # rationale: corpus's named ui-monospace substitute — IDs, codes, log lines, install snippets
156
+ font-weight-normal: 400
157
+ font-weight-strong: 600 # rationale: brand display runs 500–600; operator headings tighten to 600 for hierarchy against 400 body
158
+ heading-tracking: 0 # rationale: brand tracks every type step at 0 — the rounded face needs no tightening
159
+ duration-unit: 50ms # derived: corpus documents no motion; functional operator base
160
+ duration-fast: 100ms # derived: functional operator motion, no marketing flourish
161
+ duration-normal: 150ms # derived: as above
162
+ duration-slow: 250ms # derived: as above
163
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: calm, standard functional ease
164
+ contrast-boost: 1 # derived: pure-black ink on white already maxes contrast; no boost needed
165
+ icon-stroke: 1.5 # derived: Ollama's icons are thin stroke-only line drawings; one step under lucide's 2 for a hairline-consistent stroke
166
+ icon-size-base: 16px
167
+ sidebar-width-expanded: 248px
168
+ sidebar-width-collapsed: 56px
169
+ topbar-height: 56px # rationale: brand primary-nav height is 56px
170
+ side-panel-width: 420px
171
+ side-panel-width-rich: 640px
172
+ modal-width-max: 560px
173
+ form-max-width: 640px
174
+ table-row-height: 48px # derived: spacious tier default; dense archetypes step down via the surface catalog
175
+ verbosity: compact # rationale: the README-terse, "the restraint is the design" ethos → lean copy
176
+ feedback: minimal # rationale: the brand carries no banners or toasts; feedback stays understated
177
+ density-tier: spacious # rationale: whitespace is the brand's entire layout
178
+ product-traits: [dev-tools, dashboard, model-registry]
179
+ ```
180
+
181
+ ```yaml lever-manifest
182
+ version: 1
183
+ fonts: { sans: "Nunito, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
184
+ color-tokens:
185
+ light:
186
+ background: "#ffffff"
187
+ foreground: "#000000"
188
+ card: "#ffffff"
189
+ card-foreground: "#000000"
190
+ muted: "#fafafa"
191
+ muted-foreground: "#737373"
192
+ border: "#e5e5e5"
193
+ input: "#e5e5e5"
194
+ ring: "#3b82f6" # derived: brand's translucent focus-ring blue made solid for a crisp operator outline — the one functional non-monochrome element
195
+ primary: "#000000"
196
+ primary-foreground: "#ffffff"
197
+ accent: "#f5f5f5" # derived: one step past muted so row/nav selection reads distinct from hover
198
+ accent-foreground: "#000000"
199
+ destructive: "#c92a2a" # derived: terminal-red family, darkened to AA text contrast on white
200
+ destructive-foreground: "#ffffff"
201
+ success: "#1a7f37" # derived: terminal-green darkened to AA text contrast on white
202
+ warning: "#b45309" # derived: terminal-yellow → text-safe amber
203
+ popover: "#ffffff"
204
+ popover-foreground: "#000000"
205
+ secondary: "#fafafa"
206
+ secondary-foreground: "#000000"
207
+ chart-1: "#000000" # derived: monochrome chart ramp honors the brand's no-color identity — the neutral ladder ink → charcoal → body → mute → hairline-strong
208
+ chart-2: "#525252"
209
+ chart-3: "#737373"
210
+ chart-4: "#a3a3a3"
211
+ chart-5: "#d4d4d4"
212
+ sidebar: "#fafafa" # derived: faint off-white rail distinct from the white canvas
213
+ sidebar-foreground: "#000000"
214
+ sidebar-primary: "#000000"
215
+ sidebar-primary-foreground: "#ffffff"
216
+ sidebar-accent: "#f5f5f5"
217
+ sidebar-accent-foreground: "#000000"
218
+ sidebar-border: "#e5e5e5"
219
+ sidebar-ring: "#3b82f6"
220
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64, 88]
221
+ radius-scale: [0, 6, 8, 12, 9999]
222
+ shadow-levels: [none, sm, md]
223
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
224
+ icons: { family: lucide, stroke: 1.5 }
225
+ accent-count: 1
226
+ ```