@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.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/rules/general.md +2 -1
- 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/data/harnesses/etna/CLAUDE.md +1 -1
- package/data/harnesses/etna/harness.json +2 -2
- package/data/harnesses/etna/rules/general.md +2 -1
- package/data/harnesses/mobile/harness.json +2 -2
- package/data/harnesses/mobile/rules/general.md +2 -1
- 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
|
+
```
|