@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.
Files changed (94) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  4. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  5. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  6. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  66. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  67. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  76. package/data/harnesses/code/skills/design/references/create.md +126 -0
  77. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  78. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  79. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  80. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  81. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  82. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  83. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  84. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  85. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  86. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  87. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  88. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  89. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  90. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  91. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  92. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  93. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  94. package/package.json +1 -1
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Wired
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Wired — the print-editorial, black-on-white operator reading
9
+
10
+ An operator translation of Wired's design language — a flagship technology magazine ported to the
11
+ screen. The marketing theatre stays behind: the 64px `WiredDisplay` cover headline, the full-bleed 16:9
12
+ hero photography, the magazine story grid. What carries is the chassis underneath — a strict
13
+ black-on-white duet with no chromatic accent, square geometry on every control, hairline-only elevation,
14
+ and an editorial three-face type voice where a serif carries the page title over the sans that runs the
15
+ chrome. Both machine blocks are fully valued; judgments past the corpus are annotated `# derived:`.
16
+
17
+ ## 1 Visual Theme
18
+
19
+ Light by default; dark is opt-in. Pure and unmistakable: black ink on a white canvas, the way a printed
20
+ page reads. Flat — hierarchy is the `border` hairline, type weight, and stark ink contrast, never
21
+ shadow (the brand uses none). The single "accent" is black itself (`primary`), reserved for the
22
+ wordmark, the one CTA, and active nav; there is no chromatic accent in the chrome. Temperature is
23
+ dead-neutral — every gray a true achromatic gray, colder than any tinted-slate tool. Geometry is
24
+ square: `radius` 0 on every control, the non-negotiable signature. The anchor is a white canvas beside
25
+ a white `sidebar` split by a hairline; density is `standard`, the breathing riding type, not rows.
26
+
27
+ ## 2 Color Roles
28
+
29
+ Light values (the manifest carries hex — the corpus's native format). A deliberate black-and-white
30
+ duet: `primary` is black, the sole chromatic grace (link blue) is text-links only, and status hues are
31
+ derived (the brand ships none), kept deep to sit under the austerity.
32
+
33
+ | Role | Value | Allowed where |
34
+ | --- | --- | --- |
35
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
36
+ | `foreground` | pure black `#000000` | every headline and every line of ink — the brand override (see §7) |
37
+ | `muted` / `secondary` | canvas-soft `#f5f5f5` | hover rows, subtle fills, secondary button — the brand's single soft tint |
38
+ | `muted-foreground` | body gray `#757575` | bylines, timestamps, labels, secondary metadata |
39
+ | `border` | hairline `#e0e0e0` | every divider, story-row rule, table grid line, and card edge — the brand's only "line" |
40
+ | `input` | black `#000000` | the field edge — Wired's square black-bordered input is a signature (dividers stay hairline) |
41
+ | `primary` | black `#000000` | the one CTA fill; the wordmark; active nav; the heavy-border moment |
42
+ | `accent` | canvas-soft `#f5f5f5` | selected / hovered rows and nav — selection tints, never colours |
43
+ | `ring` | black `#000000` | the 2px focus outline — it IS the brand's heavy black border, put to keyboard use |
44
+ | `destructive` | deep red `#c1121f` | destructive actions and error state only |
45
+ | `success` / `warning` | green `#1a7f37` / amber `#b45309` | status signalling only, never chrome |
46
+
47
+ The link blue `#057dbc` is the one chromatic grace — inline text-links only, never a button, nav, or
48
+ focus ring. It survives in the chart ramp (`chart-2`) as the single accent series; every other is gray.
49
+
50
+ ## 3 Typography
51
+
52
+ Three faces, three roles — the editorial ladder. `font-sans` is Apercu (Inter fallback), the humanist
53
+ sans that runs all chrome: nav, labels, buttons, metadata, table cells, dense body. Page titles wear
54
+ the **serif** — `WiredDisplay` shading into `BreveText`; *Playfair Display* / *Lora* the open
55
+ substitutes — applied to h1/h2 by hand at operator scale, never the 64px hero. `font-mono` is derived
56
+ (the corpus ships none) for IDs, codes, timestamps; numeric columns render `tabular-nums`.
57
+
58
+ | Step | Role | Family | Size · line | Weight · tracking |
59
+ | --- | --- | --- | --- | --- |
60
+ | h1 | page title | serif | 32px / 1.1 | 400 · `heading-tracking` |
61
+ | h2 | section head | serif | 26px / 1.08 | 400 · `heading-tracking` |
62
+ | h3 | card / group head | sans | 17px / 1.3 | `font-weight-strong` · 0 |
63
+ | body | UI + prose | sans | 14px / 1.4 | `font-weight-normal` |
64
+ | small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
65
+ | caption | uppercase eyebrow / category | sans | 12px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
66
+ | code | IDs, logs, amounts | mono | 13px / 1.5 | `font-weight-normal` |
67
+
68
+ The machine block carries the sans; the agent applies the serif to h1/h2 by hand. Two weights only:
69
+ sans emphasis 700, serif heading 400 — **never** promote the display past 400, its elegance is the
70
+ typeface, not the weight.
71
+
72
+ ## 4 Component Stylings
73
+
74
+ - **Button** — `primary`: filled black on `primary-foreground`, `radius` 0 (a sharp rectangle), never a
75
+ pill. Secondary is the brand outline: `background` fill, 1px ink `border`. Ghost: `accent` on hover.
76
+ - **Input** — `background` fill, 1px `input` (black) border, `radius` 0; focus draws the black `ring` at
77
+ a full 2px with 1px offset, no glow. Standalone fields wear the black edge; inline table-edit cells
78
+ relax to the `border` hairline.
79
+ - **Card** — `card` surface, no shadow; hierarchy is the 1px `border` hairline alone, `radius` 0.
80
+ - **Table row** — height `table-row-height`; `border` hairline grid lines; `muted` on hover;
81
+ `tabular-nums` on numeric columns; row selection tints `accent`.
82
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
83
+ beside the work, not over it; it lifts by a 2px `border`, never a shadow.
84
+ - **Badge** — square (`radius` 0), hairline `border`, `muted` / status fill, uppercase caption; status
85
+ badges take `success` / `warning` / `destructive`, never `primary`.
86
+
87
+ ## 5 Layout
88
+
89
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48`. Shell dimensions
90
+ map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`,
91
+ topbar `topbar-height` (the thin masthead band), side panel `side-panel-width` / `side-panel-width-rich`,
92
+ modal `modal-width-max`, forms `form-max-width`, tables full-width in a wide ~1400px container. Density
93
+ is governed globally by `density-tier` and stepped per archetype — never by absolute overrides.
94
+
95
+ ## 6 Depth
96
+
97
+ Flat, and emphatically so — the brand uses zero drop-shadows. Hierarchy is the surface duet and
98
+ hairlines, across three z-levels (content, sticky chrome, overlay):
99
+
100
+ - **0 — canvas** `background`, no border. Almost every surface lives here.
101
+ - **1 — hairline** `card` / row / input on a 1px `border` (`#e0e0e0`) — the brand's only elevation cue.
102
+ - **2 — heavy black border** a 2px `border` at ink for the moment that must stand off the page — a
103
+ floated overlay, the side panel, the modal; rank is border weight and position, never a shadow.
104
+
105
+ Focus reuses that heavy black border: a 2px black `ring` outline (never a glow) on every interactive
106
+ element, put to keyboard work.
107
+
108
+ ## 7 Do's & Don'ts
109
+
110
+ - **Do** hold the strict black-on-white duet — pure-black `foreground` on `#ffffff` canvas is a
111
+ deliberate brand override of the usual near-black default; keep it.
112
+ - **Do** keep `radius` at 0 on every button, input, card, and badge; the only round shape is a circular
113
+ icon container. Carry elevation with the `border` hairline (or the 2px black border), never a shadow.
114
+ - **Don't** introduce a chromatic brand accent — link blue is text-links only, never a button, nav, or
115
+ focus ring; the chrome accent is black.
116
+ - **Don't** round a corner, bold the serif past 400, drop a soft shadow, or open detail in a modal when
117
+ the side panel fits.
118
+
119
+ ## 8 Responsive
120
+
121
+ | Breakpoint | What changes |
122
+ | --- | --- |
123
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; h1 32 → 26; density holds |
124
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
125
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
126
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
127
+
128
+ ## 9 Agent Prompt Guide
129
+
130
+ - **Carries:** the strict black-on-white duet; pure-black ink and CTA; the dead-neutral achromatic
131
+ grays; square `radius` 0 geometry; hairline-and-black-border elevation (zero shadow); the Apercu sans
132
+ for all chrome with the editorial serif on page titles; the scarce link blue for text links only.
133
+ - **Stays behind:** the 64px `WiredDisplay` cover hero; the full-bleed 16:9 story photography; the
134
+ magazine cover-grid; the relaxed 2.2 byline line-height; the campaign-only heavy-border theatrics.
135
+ - Lead every list with its table and every entity with its primary read — not chrome. The accent is
136
+ black; if something wants colour it wants weight or a hairline, and link blue stays on text links.
137
+ - Keep every control square; page titles wear the serif (never bolded past 400), everything else Apercu
138
+ sans; `tabular-nums` on numeric columns, `font-mono` on IDs / codes / timestamps.
139
+ - Every workflow completes from the keyboard, the 2px black `ring` always visible; stay flat — hairline
140
+ and the black border before anything, the brand owns no shadow.
141
+
142
+ ```yaml design-primitives
143
+ radius: 0px # corpus: rounded.none 0px on every interactive shape — the brand's square-geometry signature
144
+ shadow-intensity: 0 # corpus: the brand uses no drop-shadows; hairlines and the 2px black border carry all elevation
145
+ border-weight: 1px # corpus: 1px hairline dividers and input borders (the 2px black border is the special standout case)
146
+ density-gap: 1
147
+ density-inset: 1
148
+ font-sans: Apercu, Inter, Helvetica Neue, Helvetica, Arial, sans-serif # corpus: Apercu is the sans for nav/labels/buttons/metadata; Inter the open substitute
149
+ font-mono: IBM Plex Mono, ui-monospace, SFMono-Regular, monospace # derived: corpus ships no mono; IBM Plex Mono's editorial grotesque suits the austere modern voice
150
+ font-weight-normal: 400 # corpus: body/Apercu regular is 400
151
+ font-weight-strong: 700 # corpus: Apercu emphasis is 700 (buttons, nav-strong, body-strong) — a two-weight 400/700 sans; the serif heading holds 400
152
+ heading-tracking: -0.01em # corpus: WiredDisplay tracks negative (-0.5px@64 down to -0.3px@32); at operator heading sizes that lands near -0.01em
153
+ duration-unit: 50ms # derived: corpus silent on motion; 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; a print-restrained brand keeps motion minimal
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard operator ease
158
+ contrast-boost: 1 # derived: stark black-on-white is already maximal text contrast; the faint hairline is intentional, no boost
159
+ icon-stroke: 1.75 # derived: refined operator stroke, one step under lucide's 2, to sit with the high-contrast type
160
+ icon-size-base: 16px # derived: corpus silent; operator standard against 14-17px body
161
+ sidebar-width-expanded: 248px # derived: corpus has no shell; operator-standard editorial rail
162
+ sidebar-width-collapsed: 56px # derived: corpus has no shell; standard icon rail
163
+ topbar-height: 52px # derived: corpus masthead is a thin band; the operator topbar stays lean
164
+ side-panel-width: 420px # derived: corpus has no shell; operator standard
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: Wired's narrow single-column forms cap comfortably here
168
+ table-row-height: 40px # derived: corpus data-table cell has 12px vertical padding at standard density → 40px rows
169
+ verbosity: default # derived: the brand's minimalism is typographic, not label-hiding; keep operator labels present
170
+ feedback: subtle # rationale: subtle keeps the 2px ring — which here IS the brand's heavy black border — the keyboard-first austerity still wants unmistakable
171
+ density-tier: standard # rationale: an editorial magazine read down to an honest operator tier; breathing carried by type, not widened rows
172
+ product-traits: [cms, editorial, content-ops, dashboard, admin]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Apercu, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif", mono: "IBM Plex Mono, ui-monospace, SFMono-Regular, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#ffffff"
181
+ foreground: "#000000" # brand override: pure black ink is intentional (the printed-page duet), not the usual near-black
182
+ card: "#ffffff"
183
+ card-foreground: "#000000"
184
+ muted: "#f5f5f5"
185
+ muted-foreground: "#757575"
186
+ border: "#e0e0e0"
187
+ input: "#000000" # corpus: text-input border is ink black — the square black-bordered field
188
+ ring: "#000000" # corpus: black is the heavy-border / standout treatment; the focus ring reuses it
189
+ primary: "#000000"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#f5f5f5"
192
+ accent-foreground: "#000000"
193
+ destructive: "#c1121f" # derived: brand ships no status palette; a deep red kept under the monochrome austerity
194
+ destructive-foreground: "#ffffff"
195
+ success: "#1a7f37" # derived: brand ships no status palette; a deep green for status only
196
+ warning: "#b45309" # derived: brand ships no status palette; a deep amber for status only
197
+ popover: "#ffffff"
198
+ popover-foreground: "#000000"
199
+ secondary: "#f5f5f5"
200
+ secondary-foreground: "#000000"
201
+ chart-1: "#000000" # black anchor
202
+ chart-2: "#057dbc" # the one chromatic grace: link blue as the single accent series
203
+ chart-3: "#757575" # body gray
204
+ chart-4: "#b0b0b0" # derived: light gray step for a monochrome spread
205
+ chart-5: "#404040" # derived: dark gray step; the brand is monochrome, so the chart ramp is grayscale + one blue
206
+ sidebar: "#ffffff" # corpus: the nav-bar / masthead is white (the black footer band stays footer-only)
207
+ sidebar-foreground: "#000000"
208
+ sidebar-primary: "#000000" # corpus: app-shell active indicator is {colors.primary} = black
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#f5f5f5"
211
+ sidebar-accent-foreground: "#000000"
212
+ sidebar-border: "#e0e0e0"
213
+ sidebar-ring: "#000000"
214
+ spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 48]
215
+ radius-scale: [0, 9999] # corpus: only 0 (everything) and 9999 (circular icon container) — the strict square scale enforces the no-round-corners rule
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Wise
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Wise — the operator reading
9
+
10
+ A global money-transfer brand distilled to one idea for internal tools: a single lime-green action color
11
+ against a warm sage surface ladder, near-black olive ink, and generously rounded cards. This is a
12
+ deliberate operator reading of Wise — the friendly-fintech temperature carried onto a payments console,
13
+ a transfers queue, a settlement dashboard — with the marketing skin left behind. The manifest ships the
14
+ light theme (fully valued, no `hint:`); Wise's hero moment (Wise Sans weight 900 at 64–126px, the 24px
15
+ pill CTA, the currency-converter widget, the polarity-flipped dark bands) does not translate at operator
16
+ scale and stays behind. Judgments away from the marketing surfaces are annotated `# derived:`.
17
+
18
+ ## 1 Visual Theme
19
+
20
+ Light by default; dark is opt-in. The defining move is the **surface ladder**: a warm sage `background`
21
+ (`#e8ebe6`) with white `card` surfaces lifting off it — surface contrast, not shadow, carries elevation
22
+ (the brand's own stated depth model). Flat throughout: hierarchy is sage/white contrast, warm hairlines,
23
+ and type weight. A single accent — Wise lime `primary` (`#9fe870`) on black `primary-foreground` — is
24
+ reserved for the one action that matters; ink is near-black olive `foreground` (`#0e0f0c`). The chrome
25
+ is white (top nav, sidebar) beside the sage content canvas, echoing Wise's white nav over sage bands.
26
+ Density is `standard` — the brand breathes, so the operator read holds an honest tier.
27
+
28
+ ## 2 Color Roles
29
+
30
+ Light values (the manifest carries hex). One accent: `primary` lime carries brand meaning; the two
31
+ greens are disciplined apart (lime is the action, positive green is status), and the tertiary orange
32
+ `#ffc091` / cyan `#38c8ff` are illustration graces that survive only as chart hues, never UI accents.
33
+
34
+ | Role | Value | Allowed where |
35
+ | --- | --- | --- |
36
+ | `background` | sage `#e8ebe6` | the content canvas — the brand's defining surface; cards lift off it |
37
+ | `card` / `popover` | white `#ffffff` | panels, cards, overlays — the bright surface that lifts off the sage |
38
+ | `foreground` | near-black olive `#0e0f0c` | all primary ink and headings |
39
+ | `muted` | faint sage `#eef1ea` | table-row hover, quiet fills — one step between white card and sage canvas |
40
+ | `muted-foreground` | warm gray `#454745` | labels, captions, secondary text (lowest-priority meta drops to `#868685`) |
41
+ | `border` | sage hairline `#d4d8d2` | every separator and grid line — a soft sage line, not an ink rule |
42
+ | `input` | ink `#0e0f0c` | the field edge — Wise's signature 1px ink-outlined input, kept as a brand override |
43
+ | `primary` | Wise lime `#9fe870` | the one primary action, active nav indicator, the brand mark — nowhere else |
44
+ | `primary-foreground` | black `#0e0f0c` | text/icon on the lime fill — never white on lime |
45
+ | `accent` | pale green `#e2f6d5` | selected/hovered rows and nav — a soft brand tint, never a lime wash |
46
+ | `ring` | forest `#163300` | the focus outline — the deep brand green, because lime is too light to read as a ring |
47
+ | `destructive` | red `#d03238` | destructive actions and error state only |
48
+ | `success` / `warning` | green `#2ead4b` / amber `#b86700` | status only — success is a truer green than the lime CTA; warning is the legible warning-deep, not the bright `#ffd11a` |
49
+
50
+ ## 3 Typography
51
+
52
+ One sans carries the operator UI. `font-sans` is **Inter** — the brand's actual second face, workhorse
53
+ for body, sub-display, labels, and UI. Wise Sans (the weight-900 geometric display) reads bombastic at
54
+ operator scale, so it stays behind; headings hold the brand's semibold sub-display weight (600).
55
+ `font-mono` is JetBrains Mono for IDs, codes, timestamps; amount and numeric columns render
56
+ `tabular-nums` (Inter carries `tnum`) — the number legibility a money product depends on.
57
+
58
+ | Step | Role | Size · line | Weight · tracking |
59
+ | --- | --- | --- | --- |
60
+ | h1 | page title | 28px / 1.2 | `font-weight-strong` · `heading-tracking` |
61
+ | h2 | section head | 22px / 1.3 | `font-weight-strong` · -0.01em |
62
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` · 0 |
63
+ | body | UI + prose | 16px / 1.5 | `font-weight-normal` |
64
+ | small | labels, dense table | 14px / 1.4 | `font-weight-normal` |
65
+ | caption | fine print, eyebrow | 12px / 1.35 | `font-weight-normal` |
66
+ | number | amounts, IDs | 16px / 1.4 | `font-mono` · `tabular-nums` |
67
+
68
+ Emphasize by weight (400 → 600) or size, never a third family. Negative heading tracking echoes the
69
+ brand's Inter sub-displays; the 900-weight hero display is not part of the operator voice.
70
+
71
+ ## 4 Component Stylings
72
+
73
+ Every recurring component composes from the primitives — no literal values.
74
+
75
+ - **Button** — `primary`: filled lime on black `primary-foreground`, `radius`, rounded but not the 24px pill. Secondary: sage `secondary` fill, `foreground`. Tertiary: white fill, 1px ink `input` border.
76
+ - **Input** — white `card` fill, 1px ink `input` border (`border-weight`), `radius`; focus draws the forest `ring` at 2px, no glow. The bold ink edge is the Wise form signature.
77
+ - **Card** — white `card` lifting off the sage canvas by contrast, not shadow; `radius` (scale offers
78
+ 16/24px for larger cards); optional sage hairline; inset by `density-inset`.
79
+ - **Table row** — height `table-row-height`; sage `border` grid lines; `muted` on hover; `accent` on
80
+ selection; `tabular-nums` on amount columns; `font-mono` on IDs and reference codes.
81
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`), beside the work, not over it.
82
+ - **Badge** — pill radius, status tint; the brand's positive badge is pale-green `accent` fill with forest text; status badges take `success` / `warning` / `destructive`, never `primary`.
83
+
84
+ ## 5 Layout
85
+
86
+ Base unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px rhythm
87
+ stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded`
88
+ (256px) / `sidebar-width-collapsed` (56px), topbar `topbar-height` (56px), side panel `side-panel-width`
89
+ (440px) / `side-panel-width-rich` (640px), modal cap `modal-width-max`, forms `form-max-width`, tables
90
+ full-width. Density is governed globally by `density-tier` and stepped per archetype, never by overrides.
91
+
92
+ ## 6 Depth
93
+
94
+ Flat, surface-contrast-first. Hierarchy comes from the sage/white ladder and warm hairlines, not shadow:
95
+
96
+ - **0 — canvas** `background` (sage `#e8ebe6`), no border.
97
+ - **1 — panel / card** white `card` lifting off the sage by contrast — the brand's primary elevation
98
+ cue; a soft `border` hairline where a card sits on white.
99
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
100
+ shadow. Rank is contrast and position, never a heavier shadow.
101
+
102
+ Focus is a 2px forest `ring` (`#163300`) outline, never a glow, on every interactive element; three z-levels (content, sticky chrome, overlay).
103
+
104
+ ## 7 Do's & Don'ts
105
+
106
+ - **Do** reserve lime `primary` for the single most important action, the active-nav indicator, and the
107
+ brand mark — nowhere else; keep black `primary-foreground` on the fill.
108
+ - **Do** anchor on the sage/white surface ladder — white cards lifting off the sage canvas IS the
109
+ brand's elevation; carry rank with contrast and hairline before any shadow.
110
+ - **Do** keep the two greens apart — lime is the action, positive `#2ead4b` is success status. Carry amounts in `tabular-nums`, IDs/codes in `font-mono`.
111
+ - **Don't** promote a second brand accent (orange/cyan are chart graces), wash a selected row in lime
112
+ (use the pale-green `accent`), or pair the lime CTA with a green surface — lime sits on neutral only.
113
+ - **Don't** render controls with sharp corners, signal elevation with heavy shadow, or reach for the
114
+ 900-weight hero stencil in operator chrome (headings hold semibold 600).
115
+
116
+ ## 8 Responsive
117
+
118
+ The operator sweep is 375 / 768 / 1024 / 1440:
119
+
120
+ | Breakpoint | What changes |
121
+ | --- | --- |
122
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; amount tables scroll horizontally; density holds |
123
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
124
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
125
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width; the sage canvas widens |
126
+
127
+ ## 9 Agent Prompt Guide
128
+
129
+ - Anchor on the sage/white surface ladder — sage `background`, white `card` lifting off it by contrast;
130
+ reach for shadow only on a true overlay.
131
+ - Accent only the primary action in lime; black on lime, never white. Hold the two-green discipline —
132
+ lime `primary` is the action, positive `#2ead4b` is success status, never interchanged.
133
+ - Every amount/numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`. Every
134
+ workflow completes from the keyboard; the forest `ring` outline is always visible.
135
+ - Keep the rounded friendliness (12px `radius`, never sharp corners) and the bold ink input edge, but
136
+ not the 24px marketing pill.
137
+ - Leave the marketing skin behind: Wise Sans 900 hero display, the 64–126px scale, the 24px pill CTA,
138
+ the currency-converter widget, the polarity-flipped dark bands, and illustrative SVGs. What carries:
139
+ the sage/white temperature, the lime accent, the olive ink, the moderate radius, the Inter voice, and
140
+ the tabular number discipline.
141
+
142
+ ```yaml design-primitives
143
+ radius: 12px # derived: brand's canonical 24px is marketing-soft; operator tightens to the brand's own form radius (rounded.md 12px), scale still offers 16/24px for cards
144
+ shadow-intensity: 0.35 # derived: flat brand; elevation is surface contrast, shadow only faint on true overlays
145
+ border-weight: 1px
146
+ density-gap: 1 # derived: the brand breathes; an honest standard tier over packing tight
147
+ density-inset: 1 # derived: matches the standard tier's component insets
148
+ font-sans: Inter, system-ui, -apple-system, sans-serif # the brand's actual second face and full body/UI workhorse; Wise Sans 900 is a hero-only stencil, left behind
149
+ font-mono: JetBrains Mono, ui-monospace, monospace # derived: corpus documents no mono; operator IDs/codes/amounts need one
150
+ font-weight-normal: 400
151
+ font-weight-strong: 600 # corpus: Inter semibold 600 carries buttons/labels/sub-display; the 900 hero weight stays behind
152
+ heading-tracking: -0.02em # corpus: derived from the brand's Inter display-xs (-0.48px / 24px ≈ -0.02em)
153
+ duration-unit: 50ms # derived: motion out of scope in corpus; functional operator base
154
+ duration-fast: 100ms # derived
155
+ duration-normal: 150ms # derived
156
+ duration-slow: 250ms # derived
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard functional ease; timings undocumented
158
+ contrast-boost: 1 # derived: the sage/white ladder plus hairlines already carry the grid
159
+ icon-stroke: 1.75 # derived: operator line-icon stroke one step under lucide's 2; the friendly brand still reads clean
160
+ icon-size-base: 16px # derived: base control icon size
161
+ sidebar-width-expanded: 256px # derived: no app shell in corpus; the brand's generous spacing → a touch wider than a dense rail
162
+ sidebar-width-collapsed: 56px # derived
163
+ topbar-height: 56px # derived: corpus nav-bar padding (12/24) implies a comfortable ~56px bar
164
+ side-panel-width: 440px # derived: no shell in corpus; standard nudged up for the brand's breathing
165
+ side-panel-width-rich: 640px # derived: content-heavy detail width
166
+ modal-width-max: 560px # derived: confirmations only
167
+ form-max-width: 640px # derived: the brand's single-column reading caps forms comfortably
168
+ table-row-height: 44px # derived: the brand breathes → rows a touch over the dense 40px default; dense archetypes step down via the surface catalog
169
+ verbosity: default
170
+ feedback: subtle # rationale: the friendly brand voice wants gentle present feedback, not austere silence
171
+ density-tier: standard # rationale: a spacious marketing brand read down to an honest operator tier; warmth carried by palette/radius, not whitespace
172
+ product-traits: [fintech, payments, money-transfer, dashboard, admin]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Inter, system-ui, -apple-system, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#e8ebe6"
181
+ foreground: "#0e0f0c"
182
+ card: "#ffffff"
183
+ card-foreground: "#0e0f0c"
184
+ muted: "#eef1ea"
185
+ muted-foreground: "#454745"
186
+ border: "#d4d8d2"
187
+ input: "#0e0f0c" # the Wise signature 1px ink input border — a legitimate brand override of the hairline default
188
+ ring: "#163300" # derived: the lime primary is too light for a legible focus outline; the brand's forest ink-deep reads unmistakably
189
+ primary: "#9fe870"
190
+ primary-foreground: "#0e0f0c"
191
+ accent: "#e2f6d5"
192
+ accent-foreground: "#0e0f0c"
193
+ destructive: "#d03238"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#2ead4b"
196
+ warning: "#b86700" # derived: the brand's bright warning #ffd11a fails as status text on white; its own warning-deep carries caution legibly
197
+ popover: "#ffffff"
198
+ popover-foreground: "#0e0f0c"
199
+ secondary: "#e8ebe6" # corpus: button-secondary fill is canvas-soft (sage)
200
+ secondary-foreground: "#0e0f0c"
201
+ chart-1: "#2ead4b" # derived: the pale lime primary is too light for a chart mark; the brand's positive green leads the series
202
+ chart-2: "#38c8ff" # brand accent cyan, parked as a chart hue
203
+ chart-3: "#ffc091" # brand accent orange, parked as a chart hue
204
+ chart-4: "#163300" # brand forest ink-deep
205
+ chart-5: "#ffd11a" # brand warning yellow, distinct enough for a fifth series
206
+ sidebar: "#ffffff" # corpus: nav-bar surface is white canvas — the chrome sits bright beside the sage content
207
+ sidebar-foreground: "#0e0f0c"
208
+ sidebar-primary: "#9fe870"
209
+ sidebar-primary-foreground: "#0e0f0c"
210
+ sidebar-accent: "#e2f6d5"
211
+ sidebar-accent-foreground: "#0e0f0c"
212
+ sidebar-border: "#d4d8d2"
213
+ sidebar-ring: "#163300"
214
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
215
+ radius-scale: [0, 8, 12, 16, 24, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```