@nurix/etna 0.18.18 → 0.18.20

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