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