@nurix/etna 0.18.19 → 0.18.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/skills/design/SKILL.md +65 -0
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
- package/data/harnesses/code/skills/design/references/create.md +126 -0
- package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
- package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
- package/data/harnesses/code/skills/design/references/improve.md +85 -0
- package/data/harnesses/code/skills/design/references/interaction.md +77 -0
- package/data/harnesses/code/skills/design/references/introspect.md +100 -0
- package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
- package/data/harnesses/code/skills/design/references/personality.md +504 -0
- package/data/harnesses/code/skills/design/references/structure.md +138 -0
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
- package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
- package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
- package/package.json +1 -1
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Claude
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Claude — the warm editorial operator design
|
|
9
|
+
|
|
10
|
+
The operator reading of Anthropic's Claude brand. Claude's own surfaces are marketing-editorial —
|
|
11
|
+
hero-scale slab-serif display, full-bleed coral callout bands, a cream-to-dark pacing rhythm. This
|
|
12
|
+
entry keeps what survives at operator scale: the warm cream canvas, the single coral accent, the
|
|
13
|
+
warm-neutral temperature, the moderate radius, the editorial type voice. The 64px display, the coral
|
|
14
|
+
bands, and the 96px rhythm stay behind. The result is unmistakably Claude — warm where every other
|
|
15
|
+
tool is cool — but it earns its density and reserves its one accent; judgments away from the brand are
|
|
16
|
+
annotated `# derived:` where the corpus is silent.
|
|
17
|
+
|
|
18
|
+
## 1 Visual Theme
|
|
19
|
+
|
|
20
|
+
Warm by default; dark is opt-in. The canvas is Claude's tinted cream `background` (`#faf9f5`) — a
|
|
21
|
+
deliberate warm off-white, never the cool gray-white the category defaults to (it reads light, so the
|
|
22
|
+
light-default floor holds — it is simply warm). Flat: hierarchy comes from warm hairline `border`,
|
|
23
|
+
type weight, and the cream surface ladder, never heavy shadow. A single accent — Claude coral
|
|
24
|
+
`primary` (`#cc785c`) — is reserved for the one action that matters; ink is warm near-black
|
|
25
|
+
`foreground` (`#141413`). The type voice is editorial — a serif carries the page-title voice over a
|
|
26
|
+
humanist sans body. Density is `standard`; the anchor surface is a cream canvas beside a softer cream `sidebar`.
|
|
27
|
+
|
|
28
|
+
## 2 Color Roles
|
|
29
|
+
|
|
30
|
+
Light values (the manifest carries hex — the corpus's native format). One accent: `primary` is the
|
|
31
|
+
only chromatic hue that carries meaning; teal and amber are chart/status graces, status speaks status.
|
|
32
|
+
|
|
33
|
+
| Role | Value | Allowed where |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| `background` / `card` / `popover` | warm cream `#faf9f5` | page, cards, and overlays — the dominant surface, differentiated by border not brightness |
|
|
36
|
+
| `foreground` | warm near-black `#141413` | all primary ink and headlines |
|
|
37
|
+
| `muted` | soft cream `#f5f0e8` | hover rows, subtle fills, quiet panel bands |
|
|
38
|
+
| `secondary` | cream card `#efe9de` | secondary button fill, one step darker than canvas |
|
|
39
|
+
| `muted-foreground` | warm gray `#6c6a64` | labels, captions, secondary text |
|
|
40
|
+
| `border` / `input` | warm hairline `#e6dfd8` | every separator, grid line, and field edge — one elevation step, not an ink line |
|
|
41
|
+
| `primary` | Claude coral `#cc785c` | the one primary action; active nav; the coral text-link |
|
|
42
|
+
| `accent` | strong cream `#e8e0d2` | selected/hovered rows and nav — selection warms the cream, it does not colour it |
|
|
43
|
+
| `ring` | `primary` coral | the focus outline — unmistakable, because keyboard-first |
|
|
44
|
+
| `destructive` | warm red `#c64545` | destructive actions and error state only |
|
|
45
|
+
| `success` / `warning` | green `#5db872` / gold `#d4a017` | status signalling only, never chrome |
|
|
46
|
+
|
|
47
|
+
The dark navy `#181715` is not a page surface here — it is the inlay for code, log, and terminal
|
|
48
|
+
panels (see §6). Coral stays scarce; teal and amber live only in charts and status.
|
|
49
|
+
|
|
50
|
+
## 3 Typography
|
|
51
|
+
|
|
52
|
+
Two families carry Claude's voice. `font-sans` is the humanist sans (Styrene B, Inter fallback) — the
|
|
53
|
+
body, UI, table, and label workhorse. Page titles wear the editorial **serif** (Copernicus / Tiempos
|
|
54
|
+
Headline; Cormorant Garamond at `-0.02em` the open substitute) at operator heading scale — the 64px
|
|
55
|
+
display stays behind, but the serif voice is the brand's irreducible signature and carries. `font-mono`
|
|
56
|
+
is JetBrains Mono for IDs, codes, timestamps, log lines; numeric columns render `tabular-nums`.
|
|
57
|
+
Emphasis is weight 500 or a larger serif — the brand **never bolds** (serif at 400; sans to 500).
|
|
58
|
+
|
|
59
|
+
| Step | Role | Family | Size · line | Weight · tracking |
|
|
60
|
+
| --- | --- | --- | --- | --- |
|
|
61
|
+
| h1 | page title | serif | 28px / 1.2 | 400 · `heading-tracking` |
|
|
62
|
+
| h2 | section head | serif | 22px / 1.3 | 400 · -0.01em |
|
|
63
|
+
| h3 | card / group head | sans | 16px / 1.4 | `font-weight-strong` · 0 |
|
|
64
|
+
| body | UI + prose | sans | 14px / 1.55 | `font-weight-normal` |
|
|
65
|
+
| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
|
|
66
|
+
| caption | uppercase eyebrow | sans | 12px / 1.4 | `font-weight-strong`, +0.12em, uppercase |
|
|
67
|
+
| code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
|
|
68
|
+
|
|
69
|
+
The machine block carries one sans, not a display face — the agent applies the serif to h1/h2 by hand. Negative tracking on the serif is non-negotiable; it is what reads as Claude.
|
|
70
|
+
|
|
71
|
+
## 4 Component Stylings
|
|
72
|
+
|
|
73
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
74
|
+
- **Button** — `primary`: filled coral on `primary-foreground`, `radius` (8px), no pill. Secondary:
|
|
75
|
+
`secondary` cream fill, 1px `border`, `foreground`. Ghost: transparent, `accent` on hover.
|
|
76
|
+
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the coral `ring` at 2px, no glow.
|
|
77
|
+
- **Card** — `card` surface on a 1px `border`; panels read by their hairline, not brightness (nothing sits lighter than cream but off-brand white); shadow only when lifted.
|
|
78
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; row selection warms to `accent`.
|
|
79
|
+
- **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.
|
|
80
|
+
- **Badge** — pill radius, `muted`/status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
81
|
+
|
|
82
|
+
## 5 Layout
|
|
83
|
+
|
|
84
|
+
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing
|
|
85
|
+
96px rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
86
|
+
`sidebar-width-expanded` (256px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (56px),
|
|
87
|
+
side panel `side-panel-width` (440px) / `side-panel-width-rich` (640px), modal `modal-width-max`, forms
|
|
88
|
+
`form-max-width`, tables full-width — a hair more generous than a dense console. Density is governed
|
|
89
|
+
globally by `density-tier` and stepped per archetype by the surface catalog.
|
|
90
|
+
|
|
91
|
+
## 6 Depth
|
|
92
|
+
|
|
93
|
+
Flat, color-block-first. Hierarchy comes from the cream ladder and warm hairlines, not shadow:
|
|
94
|
+
|
|
95
|
+
- **0 — canvas** `background` (`#faf9f5`), no border.
|
|
96
|
+
- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
|
|
97
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow. Rank is border and position, never a heavier shadow.
|
|
98
|
+
- **inlay — code / log / terminal** dark navy `#181715` with cream `on-dark` text and `font-mono` — Claude's product-chrome carried in even a light UI (echoes Claude Code's editor chrome).
|
|
99
|
+
|
|
100
|
+
Focus is a coral `ring` outline (never a glow), visible on every interactive element. Three z-levels:
|
|
101
|
+
content, sticky chrome, overlay.
|
|
102
|
+
|
|
103
|
+
## 7 Do's & Don'ts
|
|
104
|
+
|
|
105
|
+
- **Do** anchor on the warm cream canvas — pure white reads as any-other-AI-tool; the tint is the brand.
|
|
106
|
+
- **Do** reserve coral `primary` for the single most important action; everything else is neutral or status.
|
|
107
|
+
- **Do** wear the editorial serif with negative tracking on page titles; keep body, tables, and labels on the humanist sans.
|
|
108
|
+
- **Do** dress code, log, and terminal panels in the dark navy inlay (`#181715`, `font-mono`).
|
|
109
|
+
- **Don't** bold the serif — Copernicus at 700 reads bombastic; emphasise by weight 500 or a larger size.
|
|
110
|
+
- **Don't** promote a second chromatic accent — teal and amber are chart/status graces, not UI accents.
|
|
111
|
+
- **Don't** pill the primary CTA (buttons are 8px `radius`); pill radius is for badges only.
|
|
112
|
+
- **Don't** signal elevation with heavy drop shadows, or open detail in a modal when the panel fits.
|
|
113
|
+
|
|
114
|
+
## 8 Responsive
|
|
115
|
+
|
|
116
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
117
|
+
|
|
118
|
+
| Breakpoint | What changes |
|
|
119
|
+
| --- | --- |
|
|
120
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
121
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
122
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
123
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; breathing widens |
|
|
124
|
+
|
|
125
|
+
Code and log inlays keep mono legibility at every breakpoint by scrolling horizontally, not wrapping.
|
|
126
|
+
|
|
127
|
+
## 9 Agent Prompt Guide
|
|
128
|
+
|
|
129
|
+
Directives the emitting agent follows verbatim:
|
|
130
|
+
|
|
131
|
+
- Reach for the warm cream canvas first — never pure white; the warm tint is Claude.
|
|
132
|
+
- Accent only the primary action in coral. If two things want the accent, one of them is not primary.
|
|
133
|
+
- Page titles wear the editorial serif at reduced scale with negative tracking; everything else is the
|
|
134
|
+
humanist sans. Never bold — emphasise by weight 500 or a larger serif.
|
|
135
|
+
- Dress code, log, and terminal panels in the dark navy inlay (`#181715`) — show real product chrome,
|
|
136
|
+
never a light mockup of it.
|
|
137
|
+
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
|
|
138
|
+
- Every workflow completes from the keyboard; the coral `ring` focus outline is always visible.
|
|
139
|
+
- Stay flat — warm hairline and the cream ladder before shadow; reach past a hairline only for a real
|
|
140
|
+
overlay. Leave behind the hero display, the coral callout bands, and the 96px rhythm.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 8px # corpus: buttons/inputs at rounded.md (8px); scale offers 12px cards, 16px large
|
|
144
|
+
shadow-intensity: 0.35 # derived: color-block-first; shadow rare and faint (corpus ~0.08 alpha)
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1
|
|
147
|
+
density-inset: 1
|
|
148
|
+
font-sans: Styrene B, Inter, system-ui, sans-serif
|
|
149
|
+
font-mono: JetBrains Mono, ui-monospace, monospace
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 500 # corpus: labels/titles/buttons weight 500; the brand never bolds (serif holds 400)
|
|
152
|
+
heading-tracking: -0.02em # corpus: negative tracking on the serif display is non-negotiable; -0.02em at operator heading scale
|
|
153
|
+
duration-unit: 50ms # derived: corpus declares motion out of scope; operator-standard functional base
|
|
154
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
155
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
156
|
+
duration-slow: 250ms # derived: corpus silent on motion
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard operator ease
|
|
158
|
+
contrast-boost: 1 # derived: brand's soft warm hairlines are intentional (one elevation step); no boost
|
|
159
|
+
icon-stroke: 1.5 # derived: corpus uses minimal hand-drawn line-art; a light 1.5 stroke suits the refined editorial feel
|
|
160
|
+
icon-size-base: 16px # derived: corpus silent; operator standard
|
|
161
|
+
sidebar-width-expanded: 256px # derived: corpus has no shell; editorial breathing → a touch wider than a dense rail
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: corpus has no shell; operator standard icon rail
|
|
163
|
+
topbar-height: 56px # derived: corpus top-nav 64px is marketing-generous; operator tightens to 56px
|
|
164
|
+
side-panel-width: 440px # derived: corpus has no shell; standard nudged up for editorial breathing
|
|
165
|
+
side-panel-width-rich: 640px # derived: corpus has no shell; content-heavy detail width
|
|
166
|
+
modal-width-max: 560px # derived: corpus has no shell; confirmations only
|
|
167
|
+
form-max-width: 640px # derived: Claude's single-column editorial reading caps forms comfortably
|
|
168
|
+
table-row-height: 44px # derived: editorial warmth → rows breathe a touch over the dense 40px default
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: subtle # rationale: Claude's warm humanist voice wants gentle present feedback, not austere silence
|
|
171
|
+
density-tier: standard # rationale: an editorial-spacious brand read down to an honest operator tier; warmth carried by palette/radius, not whitespace
|
|
172
|
+
product-traits: [dev-tools, ai-console, dashboard, admin]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "Styrene B, Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#faf9f5"
|
|
181
|
+
foreground: "#141413"
|
|
182
|
+
card: "#faf9f5"
|
|
183
|
+
card-foreground: "#141413"
|
|
184
|
+
muted: "#f5f0e8"
|
|
185
|
+
muted-foreground: "#6c6a64"
|
|
186
|
+
border: "#e6dfd8"
|
|
187
|
+
input: "#e6dfd8"
|
|
188
|
+
ring: "#cc785c"
|
|
189
|
+
primary: "#cc785c"
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#e8e0d2"
|
|
192
|
+
accent-foreground: "#141413"
|
|
193
|
+
destructive: "#c64545"
|
|
194
|
+
destructive-foreground: "#ffffff" # derived: white on the warm red
|
|
195
|
+
success: "#5db872"
|
|
196
|
+
warning: "#d4a017"
|
|
197
|
+
popover: "#faf9f5"
|
|
198
|
+
popover-foreground: "#141413"
|
|
199
|
+
secondary: "#efe9de"
|
|
200
|
+
secondary-foreground: "#141413"
|
|
201
|
+
chart-1: "#cc785c" # coral
|
|
202
|
+
chart-2: "#5db8a6" # teal
|
|
203
|
+
chart-3: "#e8a55a" # amber
|
|
204
|
+
chart-4: "#6c6a64" # derived: warm taupe neutral for spread
|
|
205
|
+
chart-5: "#252320" # derived: dark navy anchor; all series warm to hold temperature
|
|
206
|
+
sidebar: "#f5f0e8"
|
|
207
|
+
sidebar-foreground: "#141413"
|
|
208
|
+
sidebar-primary: "#cc785c"
|
|
209
|
+
sidebar-primary-foreground: "#ffffff"
|
|
210
|
+
sidebar-accent: "#e8e0d2"
|
|
211
|
+
sidebar-accent-foreground: "#141413"
|
|
212
|
+
sidebar-border: "#e6dfd8"
|
|
213
|
+
sidebar-ring: "#cc785c"
|
|
214
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
|
|
215
|
+
radius-scale: [0, 4, 6, 8, 12, 16, 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.5 }
|
|
219
|
+
accent-count: 1
|
|
220
|
+
```
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Apple
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Apple — the reverent, photography-first operator reading
|
|
9
|
+
|
|
10
|
+
An operator translation of Apple's web design language. The marketing theatre stays behind: full-bleed
|
|
11
|
+
product tiles, hero display type, and photography carrying the one drop-shadow in the system. What
|
|
12
|
+
carries is the quiet chassis underneath — a parchment canvas with white cards that lift by surface
|
|
13
|
+
change rather than shadow, near-black ink that reads photographic, a single Action Blue accent doing
|
|
14
|
+
every "click me" job, SF Pro's tight-tracked voice, and the 17px reading pace. Both machine blocks are
|
|
15
|
+
fully valued; every judgment past what the corpus states is annotated `# derived:` where it lands.
|
|
16
|
+
|
|
17
|
+
## 1 Visual Theme
|
|
18
|
+
|
|
19
|
+
Light by default; dark is opt-in. Flat, but not gray-flat — elevation comes from a surface ladder
|
|
20
|
+
(parchment `background` → white `card` → near-black chrome), never from a shadow on chrome. A single
|
|
21
|
+
accent, Action Blue `primary` (#0066cc), is the only chromatic hue that carries meaning; status hues
|
|
22
|
+
speak only status. Ink is near-black `foreground` (#1d1d1f), chosen over pure black so the page reads
|
|
23
|
+
photographic rather than printed. The anchor surface is a white content canvas resting on the signature
|
|
24
|
+
Apple parchment. Density is `spacious` on purpose: Apple runs airier than contemporary SaaS, and the
|
|
25
|
+
operator reading keeps that pace.
|
|
26
|
+
|
|
27
|
+
## 2 Color Roles
|
|
28
|
+
|
|
29
|
+
Light values first. One accent — Action Blue is reserved for interactive; a second chromatic accent never appears.
|
|
30
|
+
|
|
31
|
+
| Role | Value | Allowed where |
|
|
32
|
+
| --- | --- | --- |
|
|
33
|
+
| `background` | parchment `#f5f5f7` | the page canvas — the signature Apple off-white |
|
|
34
|
+
| `card` / `popover` | white `#ffffff` | cards and overlays lift off parchment by surface change alone |
|
|
35
|
+
| `foreground` | near-black ink `#1d1d1f` | all primary ink — photographic, never pure black |
|
|
36
|
+
| `muted` | `#f0f0f0` (Apple divider-soft) | hover rows, subtle fills |
|
|
37
|
+
| `muted-foreground` | mid gray `#6e6e73` | labels, captions, secondary text |
|
|
38
|
+
| `border` / `input` | hairline `#e0e0e0` / control gray `#d2d2d7` | separators and card edges; fields take the firmer `input` tone |
|
|
39
|
+
| `primary` | Action Blue `#0066cc` | the one primary action; links; active interactive detail |
|
|
40
|
+
| `ring` | Focus Blue `#0071e3` | the 2px solid focus outline — Apple's exact ring hue |
|
|
41
|
+
| `accent` | Action-Blue tint `#e8f1fb` | selected / hovered rows and nav on light surfaces |
|
|
42
|
+
| `destructive` | `#d70015` | destructive actions and error state only |
|
|
43
|
+
| `success` / `warning` | `#248a3d` / `#b25000` | status signalling only, never chrome |
|
|
44
|
+
|
|
45
|
+
Sky Link Blue `#2997ff` is the dark-surface-only sibling of Action Blue: it carries links and actives on
|
|
46
|
+
the near-black sidebar, where Action Blue would disappear. It never appears on light.
|
|
47
|
+
|
|
48
|
+
## 3 Typography
|
|
49
|
+
|
|
50
|
+
One sans, one mono. `font-sans` leads with `-apple-system` / `system-ui` so it resolves to real SF Pro on
|
|
51
|
+
Apple platforms and falls back to Inter elsewhere (the corpus's own substitution). Hero display sizes
|
|
52
|
+
(56 / 40px) stay behind; the operator ramp keeps SF Pro's voice — negative tracking, the 17px body — at
|
|
53
|
+
working sizes. `font-mono` is SF Mono for IDs, codes, and timestamps; numeric columns render `tabular-nums`.
|
|
54
|
+
|
|
55
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
56
|
+
| --- | --- | --- | --- |
|
|
57
|
+
| h1 | page title | 28px / 1.14 | `font-weight-strong` · `heading-tracking` |
|
|
58
|
+
| h2 | section head | 21px / 1.2 | `font-weight-strong` · `heading-tracking` |
|
|
59
|
+
| h3 | card / group head | 17px / 1.24 | `font-weight-strong` · `heading-tracking` |
|
|
60
|
+
| body | UI + prose | 17px / 1.47 | `font-weight-normal` |
|
|
61
|
+
| small | labels, meta, dense table | 14px / 1.43 | `font-weight-normal` |
|
|
62
|
+
| caption | eyebrow / nav | 12px / 1.3 | `font-weight-normal` · `-0.01em` |
|
|
63
|
+
|
|
64
|
+
The weight ladder is 300 / 400 / 600 / 700 — **500 is deliberately absent**; headings sit at 600, not
|
|
65
|
+
700. Body runs at 17px, not 16px: the extra pixel is the brand's reading pace. Emphasise by weight, never size.
|
|
66
|
+
|
|
67
|
+
## 4 Component Stylings
|
|
68
|
+
|
|
69
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
70
|
+
|
|
71
|
+
- **Button** — `primary`: filled Action Blue on `primary-foreground`, `radius` (soft rect), no pill by
|
|
72
|
+
default; press is `transform: scale(0.95)`. Secondary: `secondary` fill, `border`. Ghost: `muted` on hover.
|
|
73
|
+
- **Input** — `background` fill, 1px `border` (`input` tone), `radius`; focus draws the `ring` as a full
|
|
74
|
+
2px solid outline, no glow.
|
|
75
|
+
- **Card** — white `card` on the parchment `background`, 1px `border` hairline, `radius`; elevation is the
|
|
76
|
+
surface change, not a shadow. Inset by `density-inset`.
|
|
77
|
+
- **Table row** — `table-row-height`; hairline `border` grid lines; `muted` on hover; selection tints
|
|
78
|
+
`accent`; `tabular-nums` on numeric columns.
|
|
79
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
|
|
80
|
+
beside the work, never over it.
|
|
81
|
+
- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take
|
|
82
|
+
`success` / `warning` / `destructive`, never `primary`.
|
|
83
|
+
|
|
84
|
+
## 5 Layout
|
|
85
|
+
|
|
86
|
+
Base spacing unit 8px (Apple's grid); the on-scale ramp is `4 · 8 · 12 · 17 · 24 · 32 · 48 · 80` — note
|
|
87
|
+
the signature 17px step and the generous 80px section rhythm. Shell dimensions map one-to-one to the
|
|
88
|
+
layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`,
|
|
89
|
+
side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`,
|
|
90
|
+
tables full-width. Density is `spacious`, governed globally by `density-tier` and stepped per archetype.
|
|
91
|
+
|
|
92
|
+
## 6 Depth
|
|
93
|
+
|
|
94
|
+
Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
|
|
95
|
+
|
|
96
|
+
- **0 — canvas** parchment `background`, no border.
|
|
97
|
+
- **1 — panel / card** white `card` lifting off parchment by surface change alone; 1px `border` hairline.
|
|
98
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest `md` lift, or a backdrop-blur floats sticky chrome.
|
|
99
|
+
|
|
100
|
+
Apple puts **exactly one** shadow in its whole system, and it belongs to product photography — never a
|
|
101
|
+
card, button, or text. Operator chrome has no imagery, so it carries zero shadow; only true overlays lift.
|
|
102
|
+
Focus is a 2px solid `ring` outline (Focus Blue), never a glow. Three z-levels: content, chrome, overlay.
|
|
103
|
+
|
|
104
|
+
## 7 Do's & Don'ts
|
|
105
|
+
|
|
106
|
+
- **Do** reserve Action Blue (`primary`) for the single most important action and every link; the one
|
|
107
|
+
accent is non-negotiable.
|
|
108
|
+
- **Do** elevate by surface change — parchment ↔ white ↔ near-black — before a shadow; the color change is the divider.
|
|
109
|
+
- **Do** keep ink near-black (`foreground` #1d1d1f), never pure black text.
|
|
110
|
+
- **Do** run body at 17px, `tabular-nums` on numeric columns, `font-mono` on IDs / codes / timestamps.
|
|
111
|
+
- **Do** use `transform: scale(0.95)` as the press state, system-wide.
|
|
112
|
+
- **Don't** introduce a second chromatic accent; every "click me" signal is Action Blue.
|
|
113
|
+
- **Don't** put a shadow on a card, button, or text — shadow is reserved for imagery this UI does not have.
|
|
114
|
+
- **Don't** use weight 500; the ladder is 300 / 400 / 600 / 700, and headings are 600, not 700.
|
|
115
|
+
- **Don't** pill every control — the full pill is a marketing-hero signal; operator controls take the soft
|
|
116
|
+
`radius` rect, the pill (`9999`) reserved for at most one hero action.
|
|
117
|
+
- **Don't** use Sky Link Blue (#2997ff) on a light surface — it is the dark-surface-only variant.
|
|
118
|
+
|
|
119
|
+
## 8 Responsive
|
|
120
|
+
|
|
121
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
+
|
|
123
|
+
| Breakpoint | What changes |
|
|
124
|
+
| --- | --- |
|
|
125
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; h1 steps 28 → 24 |
|
|
126
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
128
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
129
|
+
|
|
130
|
+
## 9 Agent Prompt Guide
|
|
131
|
+
|
|
132
|
+
- **Carries:** the parchment `background` + white `card` surface ladder; near-black ink; the single
|
|
133
|
+
Action Blue accent; SF Pro's voice (via `-apple-system` → Inter fallback) with tight tracking; the 17px
|
|
134
|
+
reading pace; soft radii; surface-change elevation; the `scale(0.95)` press.
|
|
135
|
+
- **Stays behind:** hero display type (56 / 40px); full-bleed marketing tiles; product photography and
|
|
136
|
+
its lone drop-shadow; the pill-everything CTA grammar; the museum-gallery whitespace.
|
|
137
|
+
- Lead every surface with its content — the table on a list, the primary read on an entity — not chrome.
|
|
138
|
+
- Accent only the primary action; if two things want Action Blue, one of them is not primary.
|
|
139
|
+
- Keep the sidebar recessive and near-black, with Sky Link Blue actives; the light canvas does the talking.
|
|
140
|
+
- Every workflow completes from the keyboard; the 2px Focus Blue `ring` is always visible.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 11px # derived: Apple's Pearl-capsule md (11px) as the base control radius; the pill 9999 stays in-scale for a lone hero CTA
|
|
144
|
+
shadow-intensity: 0.3 # derived: Apple puts zero shadow on chrome (its one shadow is product imagery); overlays earn only the faintest lift
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1.15 # derived: Apple's density is categorically low; the spacious tier widens the spacing base
|
|
147
|
+
density-inset: 1.15 # derived: matches the spacious tier — every control gets generous internal air
|
|
148
|
+
font-sans: -apple-system, system-ui, SF Pro Text, Inter, sans-serif
|
|
149
|
+
font-mono: ui-monospace, SF Mono, SFMono-Regular, Menlo, monospace # derived: Apple's system mono is SF Mono; ui-monospace resolves to it on Apple platforms
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 600 # Apple headlines are weight 600, not 700
|
|
152
|
+
heading-tracking: -0.02em # derived: Apple's negative display tracking (-0.28 to -0.374px) plus the Inter substitution nudge, scaled to operator heading sizes
|
|
153
|
+
duration-unit: 50ms # derived: corpus documents no durations; standard operator base
|
|
154
|
+
duration-fast: 100ms # derived: the scale(0.95) press reads snappy
|
|
155
|
+
duration-normal: 200ms # derived: Apple transitions read smooth, a touch more languid than a dense tool
|
|
156
|
+
duration-slow: 300ms # derived: editorial ease-out for larger surface changes
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus documents only the scale(0.95) press, no easing curves; functional smooth ease
|
|
158
|
+
contrast-boost: 1 # derived: Apple's spacious surfaces read as a grid without boosted hairlines
|
|
159
|
+
icon-stroke: 1.5 # derived: Apple's SF Symbols read thin and refined; one step under lucide's 2
|
|
160
|
+
icon-size-base: 18px # derived: Apple's airy scale nudges glyphs up to sit with 17px body
|
|
161
|
+
sidebar-width-expanded: 264px # derived: Apple's airy posture widens the nav rail
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: standard icon-rail width
|
|
163
|
+
topbar-height: 52px # derived: Apple's sub-nav height — a thin, recessive operator topbar
|
|
164
|
+
side-panel-width: 440px # derived: a step wider than the operator standard for Apple's airier detail read
|
|
165
|
+
side-panel-width-rich: 680px # derived: content-heavy detail, kept airy
|
|
166
|
+
modal-width-max: 580px # derived: Apple prefers panels to modals; the cap stays generous for the rare confirmation
|
|
167
|
+
form-max-width: 640px # derived: Apple's generous 17px reading pace caps forms comfortably
|
|
168
|
+
table-row-height: 48px # derived: the spacious tier; also clears Apple's 44px minimum touch target
|
|
169
|
+
verbosity: compact # derived: Apple's copy is terse and its chrome recedes
|
|
170
|
+
feedback: subtle
|
|
171
|
+
density-tier: spacious
|
|
172
|
+
product-traits: [catalog, dashboard, admin]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "-apple-system, system-ui, 'SF Pro Text', Inter, sans-serif", mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#f5f5f7"
|
|
181
|
+
foreground: "#1d1d1f"
|
|
182
|
+
card: "#ffffff"
|
|
183
|
+
card-foreground: "#1d1d1f"
|
|
184
|
+
muted: "#f0f0f0"
|
|
185
|
+
muted-foreground: "#6e6e73"
|
|
186
|
+
border: "#e0e0e0"
|
|
187
|
+
input: "#d2d2d7"
|
|
188
|
+
ring: "#0071e3"
|
|
189
|
+
primary: "#0066cc"
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#e8f1fb"
|
|
192
|
+
accent-foreground: "#0066cc"
|
|
193
|
+
destructive: "#d70015"
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#248a3d"
|
|
196
|
+
warning: "#b25000"
|
|
197
|
+
popover: "#ffffff"
|
|
198
|
+
popover-foreground: "#1d1d1f"
|
|
199
|
+
secondary: "#e8e8ea"
|
|
200
|
+
secondary-foreground: "#1d1d1f"
|
|
201
|
+
chart-1: "#0066cc"
|
|
202
|
+
chart-2: "#2997ff"
|
|
203
|
+
chart-3: "#5856d6"
|
|
204
|
+
chart-4: "#248a3d"
|
|
205
|
+
chart-5: "#b25000"
|
|
206
|
+
sidebar: "#1d1d1f"
|
|
207
|
+
sidebar-foreground: "#ffffff"
|
|
208
|
+
sidebar-primary: "#2997ff"
|
|
209
|
+
sidebar-primary-foreground: "#ffffff"
|
|
210
|
+
sidebar-accent: "#2a2a2c"
|
|
211
|
+
sidebar-accent-foreground: "#ffffff"
|
|
212
|
+
sidebar-border: "#333333"
|
|
213
|
+
sidebar-ring: "#2997ff"
|
|
214
|
+
spacing-scale: [4, 8, 12, 17, 24, 32, 48, 80]
|
|
215
|
+
radius-scale: [0, 5, 8, 11, 18, 9999]
|
|
216
|
+
shadow-levels: [none, sm, md]
|
|
217
|
+
motion: { durations: [100, 200, 300], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
218
|
+
icons: { family: lucide, stroke: 1.5 }
|
|
219
|
+
accent-count: 1
|
|
220
|
+
```
|