@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,219 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Runway
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Runway — cinematic monochrome, read for the operator
|
|
9
|
+
|
|
10
|
+
Runway's brand is a dark, editorial, film-grade surface where full-bleed photography IS the UI and
|
|
11
|
+
the interface retreats to near-invisibility. This entry is the operator reading of that identity: the
|
|
12
|
+
photography, the 48px hero display, and the asymmetric image grids stay behind; the **dark-native
|
|
13
|
+
canvas, the cool-slate monochrome temperature, the zero-shadow flatness, the single geometric type
|
|
14
|
+
voice, and the never-pill radius character** carry into a CRM, queue, or dashboard. This brand is
|
|
15
|
+
**categorically dark** — the operator default is `data-theme="dark"`, an override the doctrine's
|
|
16
|
+
light-default floor concedes to brand truth (§7). A light reading is shipped for surfaces that need it.
|
|
17
|
+
|
|
18
|
+
## 1 Visual Theme
|
|
19
|
+
|
|
20
|
+
Dark by default; light is the alternate. Flat to the point of austerity: hierarchy is carried by
|
|
21
|
+
dark/light section polarity, hairline `border`, and type weight — never by shadow (the brand uses
|
|
22
|
+
zero). The neutral ramp is a distinctly cool blue-gray slate (`#767d88`, `#7d848e`), so the whole UI
|
|
23
|
+
reads engineered and photographic-adjacent rather than warm. There is **no chromatic accent** — Runway
|
|
24
|
+
colors nothing but its photography; emphasis is pure contrast, so the operator `primary` is monochrome
|
|
25
|
+
(white on dark, near-black on light). The anchor surface is a `#000000` canvas carrying `#1a1a1a`
|
|
26
|
+
cards. Density is `spacious` — the brand breathes at cinema scale, and the operator reading keeps air.
|
|
27
|
+
|
|
28
|
+
## 2 Color Roles
|
|
29
|
+
|
|
30
|
+
Dark values are native (listed first); light is the alternate reading. One accent — and it is a
|
|
31
|
+
monochrome contrast, not a hue. Status hues are derived for the operator floor (the brand ships none).
|
|
32
|
+
|
|
33
|
+
| Role | Dark (native) | Light | Allowed where |
|
|
34
|
+
| --- | --- | --- | --- |
|
|
35
|
+
| `background` | `#000000` Runway Black | `#ffffff` | page canvas — the dominant surface |
|
|
36
|
+
| `foreground` | `#ffffff` | `#0c0c0c` | primary ink |
|
|
37
|
+
| `card` / `popover` | `#1a1a1a` Dark Surface | `#ffffff` | cards, panels, overlays |
|
|
38
|
+
| `muted` / `secondary` | `#27272a` | `#e9ecf2` Cool Cloud | hover rows, subtle fills, secondary buttons |
|
|
39
|
+
| `muted-foreground` | `#767d88` Cool Slate | `#767d88` | labels, captions, metadata |
|
|
40
|
+
| `border` / `input` | `#27272a` Border Dark | `#c9ccd1` Cool Silver | every separator, grid line, field edge (kept whisper-faint) |
|
|
41
|
+
| `primary` | `#ffffff` | `#0c0c0c` | the one primary action — monochrome contrast, no hue |
|
|
42
|
+
| `primary-foreground` | `#000000` | `#ffffff` | text on the primary fill |
|
|
43
|
+
| `accent` | `#27272a` | `#e9ecf2` | selected / hovered rows and nav only |
|
|
44
|
+
| `ring` | `#ffffff` | `#0c0c0c` | focus outline — high-contrast monochrome, keyboard-first |
|
|
45
|
+
| `destructive` | `#e5484d` | `#c53030` | destructive actions and error only (derived) |
|
|
46
|
+
| `success` / `warning` | `#46a758` / `#d5a13a` | `#2f855a` / `#b7791f` | status signalling only (derived) |
|
|
47
|
+
|
|
48
|
+
## 3 Typography
|
|
49
|
+
|
|
50
|
+
One family carries everything — abcNormal in the brand; the operator substitute is DM Sans (its
|
|
51
|
+
geometric sibling), with Inter as the robust fallback. Variety comes from size, weight, case, and
|
|
52
|
+
tracking, never a second family. Heading tracking runs tight and negative (film-title density); the
|
|
53
|
+
weight range is 400–600 and **never reaches 700+**. Uppercase micro-labels take *positive* tracking
|
|
54
|
+
(`+0.02em`) as navigational signposts. `font-mono` (Geist Mono, derived — the brand is single-family)
|
|
55
|
+
serves IDs, codes, timestamps, and log lines; numeric columns render `tabular-nums` (floor P4).
|
|
56
|
+
|
|
57
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
58
|
+
| --- | --- | --- | --- |
|
|
59
|
+
| h1 | page title | 40px / 1.0 | `font-weight-normal` · `heading-tracking` |
|
|
60
|
+
| h2 | section head | 24px / 1.1 | `font-weight-normal` · `heading-tracking` |
|
|
61
|
+
| h3 | card / group head | 20px / 1.1 | `font-weight-normal` · `heading-tracking` |
|
|
62
|
+
| body | UI + prose | 16px / 1.4 | `font-weight-normal`, `-0.16px` |
|
|
63
|
+
| small | labels, meta, dense table | 13px / 1.3 | `font-weight-normal`, `-0.2px` |
|
|
64
|
+
| caption | uppercase eyebrow | 14px / 1.3 | `font-weight-strong`, `+0.02em`, uppercase |
|
|
65
|
+
|
|
66
|
+
Bump weight toward `font-weight-strong` for emphasis; never change size, never exceed 600.
|
|
67
|
+
|
|
68
|
+
## 4 Component Stylings
|
|
69
|
+
|
|
70
|
+
Every recurring component composes from the primitives — no literal values.
|
|
71
|
+
|
|
72
|
+
- **Button** — `primary`: filled `primary` (white on dark / near-black on light), `radius`, no pill, label `font-weight-strong`. Secondary: `secondary` fill, 1px `border`. Ghost: transparent, `accent` on hover.
|
|
73
|
+
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at 2px, no glow.
|
|
74
|
+
- **Card** — `card` surface, 1px `border`, `radius`; shadow only on true overlays (`shadow-intensity` near zero); inset by `density-inset`.
|
|
75
|
+
- **Table row** — `table-row-height`; faint `border` grid lines; `muted` on hover; `tabular-nums` on numeric columns; selection tints `accent`.
|
|
76
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width` / `side-panel-width-rich`), beside the work, not over it (floor P3).
|
|
77
|
+
- **Badge** — hairline `border`, `muted` / status fill, uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
78
|
+
|
|
79
|
+
## 5 Layout
|
|
80
|
+
|
|
81
|
+
Base spacing unit 8px; the on-scale ramp is `4 · 6 · 8 · 12 · 16 · 20 · 24 · 28 · 32 · 48 · 64 · 78`
|
|
82
|
+
(the brand's own scale — section spacing runs generous). Shell dimensions map one-to-one to the layout
|
|
83
|
+
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
|
|
84
|
+
panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
|
|
85
|
+
tables full-width. Density is `spacious` globally (via `density-gap`), stepped per archetype by the
|
|
86
|
+
surface catalog — never by absolute overrides. Content caps generous; the 1600px cinema container stays
|
|
87
|
+
behind.
|
|
88
|
+
|
|
89
|
+
## 6 Depth
|
|
90
|
+
|
|
91
|
+
Flat, emphatically. The brand uses **zero shadows** — depth comes from dark/light section polarity and
|
|
92
|
+
hairlines, not `box-shadow`:
|
|
93
|
+
|
|
94
|
+
- **0 — canvas** `background`, no border.
|
|
95
|
+
- **1 — panel / card** `card` on a 1px `border`; no shadow.
|
|
96
|
+
- **2 — overlay** `popover` / side panel / modal — the only place `shadow-intensity` earns a whisper of
|
|
97
|
+
lift, and even then a `border` does most of the separating.
|
|
98
|
+
|
|
99
|
+
Focus is a monochrome `ring` outline (white on dark, near-black on light), never a glow, visible on
|
|
100
|
+
every interactive element (floor P6). Three z-levels: content, sticky chrome, overlay.
|
|
101
|
+
|
|
102
|
+
## 7 Do's & Don'ts
|
|
103
|
+
|
|
104
|
+
- **Do** default to dark — this brand is categorically dark; light is the alternate, not the base.
|
|
105
|
+
- **Do** reserve `primary` (the monochrome contrast) for the single most important action; everything else is neutral or status.
|
|
106
|
+
- **Do** keep borders whisper-faint (`#27272a` / `#c9ccd1`) and carry hierarchy with polarity and weight.
|
|
107
|
+
- **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, and timestamps; give uppercase labels positive tracking, never tight uppercase.
|
|
108
|
+
- **Don't** introduce a chromatic accent — the interface is colorless by doctrine; color belongs to content, and status hues speak status only.
|
|
109
|
+
- **Don't** pill anything or reach past `radius-scale` — geometry is subtly rounded (4–16px), never round.
|
|
110
|
+
- **Don't** use a weight of 700 or above, or a second typeface; don't signal elevation with shadow (reach for the whisper only on a real overlay).
|
|
111
|
+
|
|
112
|
+
## 8 Responsive
|
|
113
|
+
|
|
114
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
115
|
+
|
|
116
|
+
| Breakpoint | What changes |
|
|
117
|
+
| --- | --- |
|
|
118
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
119
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
120
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
121
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
122
|
+
|
|
123
|
+
## 9 Agent Prompt Guide
|
|
124
|
+
|
|
125
|
+
Directives the emitting agent follows verbatim:
|
|
126
|
+
|
|
127
|
+
- Default the shell to dark (`data-theme="dark"`); the near-black canvas with `#1a1a1a` cards is the
|
|
128
|
+
brand. Offer light only where a surface demands it.
|
|
129
|
+
- Carry hierarchy with dark/light polarity, hairline borders, and type weight — reach for shadow only
|
|
130
|
+
on a genuine overlay, and even then let the border lead.
|
|
131
|
+
- Accent is monochrome contrast, not a hue. If two things want the primary, one of them is not primary.
|
|
132
|
+
- Use one geometric sans (DM Sans / Inter) for everything; keep heading tracking tight-negative, weight
|
|
133
|
+
≤ 600. `font-mono` for IDs and timestamps; `tabular-nums` on every numeric column (P4).
|
|
134
|
+
- Uppercase micro-labels take positive tracking; small radius (4–16px), never pill.
|
|
135
|
+
- **Stays behind:** full-bleed cinematic photography, the 48px hero display type, asymmetric editorial
|
|
136
|
+
image grids, the 1600px cinema container, and photography-as-color. An operator surface earns its
|
|
137
|
+
clarity from structure, not spectacle.
|
|
138
|
+
|
|
139
|
+
```yaml design-primitives
|
|
140
|
+
radius: 6px # derived: corpus gives 4/6/8; 6px "subtle" is the operator default (scale keeps 4/8/16)
|
|
141
|
+
shadow-intensity: 0.15 # derived: brand is zero-shadow; a whisper only for true overlays
|
|
142
|
+
border-weight: 1px
|
|
143
|
+
density-gap: 1.1 # derived: cinema-grade breathing reads spacious, not dense
|
|
144
|
+
density-inset: 1.1
|
|
145
|
+
font-sans: DM Sans, Inter, system-ui, sans-serif # derived: DM Sans substitutes abcNormal's geometry (corpus-named), Inter fallback
|
|
146
|
+
font-mono: Geist Mono, ui-monospace, SFMono-Regular, monospace # derived: brand is single-typeface; operator floor P4 needs a mono
|
|
147
|
+
font-weight-normal: 400
|
|
148
|
+
font-weight-strong: 600 # brand range is 400-600, never 700+
|
|
149
|
+
heading-tracking: -0.02em # derived: corpus display/section tracking (-1.2px/-1px) ≈ -0.02em at heading sizes
|
|
150
|
+
duration-unit: 50ms # derived: corpus silent on motion; functional operator defaults
|
|
151
|
+
duration-fast: 100ms
|
|
152
|
+
duration-normal: 150ms
|
|
153
|
+
duration-slow: 250ms
|
|
154
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
155
|
+
contrast-boost: 1 # derived: brand keeps borders intentionally faint; hold neutral
|
|
156
|
+
icon-stroke: 1.5 # derived: minimal editorial brand → refined thin stroke
|
|
157
|
+
icon-size-base: 16px
|
|
158
|
+
sidebar-width-expanded: 256px # derived: corpus has no shell; spacious posture opens it a step
|
|
159
|
+
sidebar-width-collapsed: 56px
|
|
160
|
+
topbar-height: 56px # derived: spacious posture
|
|
161
|
+
side-panel-width: 440px # derived: spacious posture
|
|
162
|
+
side-panel-width-rich: 640px
|
|
163
|
+
modal-width-max: 560px
|
|
164
|
+
form-max-width: 640px
|
|
165
|
+
table-row-height: 44px # derived: spacious rows carry the editorial breathing
|
|
166
|
+
verbosity: compact # derived: brand keeps text minimal, the interface near-invisible
|
|
167
|
+
feedback: minimal # derived: quiet, restrained, invisible-interface ethos
|
|
168
|
+
density-tier: spacious # derived: cinema-grade breathing, generous section spacing
|
|
169
|
+
product-traits: [creative-tools, media-asset, dashboard, review-queue]
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
```yaml lever-manifest
|
|
173
|
+
version: 1
|
|
174
|
+
fonts: { sans: "DM Sans, Inter, system-ui, sans-serif", mono: "Geist Mono, ui-monospace, SFMono-Regular, monospace" }
|
|
175
|
+
color-tokens:
|
|
176
|
+
light:
|
|
177
|
+
background: "#ffffff"
|
|
178
|
+
foreground: "#0c0c0c"
|
|
179
|
+
card: "#ffffff"
|
|
180
|
+
card-foreground: "#0c0c0c"
|
|
181
|
+
muted: "#e9ecf2"
|
|
182
|
+
muted-foreground: "#767d88"
|
|
183
|
+
border: "#c9ccd1"
|
|
184
|
+
input: "#c9ccd1"
|
|
185
|
+
ring: "#0c0c0c"
|
|
186
|
+
primary: "#0c0c0c"
|
|
187
|
+
primary-foreground: "#ffffff"
|
|
188
|
+
accent: "#e9ecf2"
|
|
189
|
+
accent-foreground: "#0c0c0c"
|
|
190
|
+
destructive: "#c53030"
|
|
191
|
+
destructive-foreground: "#ffffff"
|
|
192
|
+
success: "#2f855a"
|
|
193
|
+
warning: "#b7791f"
|
|
194
|
+
popover: "#ffffff"
|
|
195
|
+
popover-foreground: "#0c0c0c"
|
|
196
|
+
secondary: "#e9ecf2"
|
|
197
|
+
secondary-foreground: "#0c0c0c"
|
|
198
|
+
chart-1: "#0c0c0c"
|
|
199
|
+
chart-2: "#3f3f3f"
|
|
200
|
+
chart-3: "#767d88"
|
|
201
|
+
chart-4: "#a7a7a7"
|
|
202
|
+
chart-5: "#c9ccd1"
|
|
203
|
+
sidebar: "#f2f4f8"
|
|
204
|
+
sidebar-foreground: "#0c0c0c"
|
|
205
|
+
sidebar-primary: "#0c0c0c"
|
|
206
|
+
sidebar-primary-foreground: "#ffffff"
|
|
207
|
+
sidebar-accent: "#e9ecf2"
|
|
208
|
+
sidebar-accent-foreground: "#0c0c0c"
|
|
209
|
+
sidebar-border: "#c9ccd1"
|
|
210
|
+
sidebar-ring: "#0c0c0c"
|
|
211
|
+
# dark is the brand-native default (data-theme="dark"); every dark value is documented in §2 Color Roles.
|
|
212
|
+
# A project confirming this library ships the dark map alongside; the coverage gate requires light, so light is machine-carried here.
|
|
213
|
+
spacing-scale: [4, 6, 8, 12, 16, 20, 24, 28, 32, 48, 64, 78]
|
|
214
|
+
radius-scale: [4, 6, 8, 16]
|
|
215
|
+
shadow-levels: [none, sm]
|
|
216
|
+
motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
217
|
+
icons: { family: lucide, stroke: 1.5 }
|
|
218
|
+
accent-count: 1
|
|
219
|
+
```
|
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Sanity
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Sanity — an operator reading of the near-black command-center system
|
|
9
|
+
|
|
10
|
+
Sanity's web system is a developer-content platform rendered as a nocturnal control room: a near-black
|
|
11
|
+
achromatic canvas, a geometric-condensed sans with aggressively tight tracking, real code in dark
|
|
12
|
+
cards, and two vivid signal-hues punctuating the gray. This is the *operator* reading — an internal
|
|
13
|
+
tool (content queue, structured-content dashboard, publishing console, log stream) in Sanity's
|
|
14
|
+
language. What carries: the near-black `#0b0b0b` canvas, the pure achromatic gray ramp, the two-signal
|
|
15
|
+
accent system (coral rests, electric-blue activates), IBM Plex Mono, the geometric sans with tight
|
|
16
|
+
tracking, and flat colorimetric depth. What stays behind (§7, §9): the hero display, full-pill CTAs,
|
|
17
|
+
the full-bleed marketing rhythm, and the neon-green/magenta highlights.
|
|
18
|
+
|
|
19
|
+
**This brand is categorically dark** — the near-black canvas is "not a dark mode but the primary
|
|
20
|
+
identity," and Sanity's light/inverted sections are marketing inversions, never an operator light
|
|
21
|
+
theme. The light-default floor yields here (the categorically-dark exception): the default-worn theme
|
|
22
|
+
is dark and fills the required default (`light`) slot in the manifest. A white operator canvas is
|
|
23
|
+
off-brand.
|
|
24
|
+
|
|
25
|
+
## 1 Visual Theme
|
|
26
|
+
|
|
27
|
+
Dark by default — the near-black `background` (`#0b0b0b`, never pure black) is the floor of every
|
|
28
|
+
surface, with no light counterpart. Emphatically flat: hierarchy comes from a colorimetric surface
|
|
29
|
+
ladder (canvas → elevated `#212121` → prominent `#353535`), hairline `border`, and white-on-black
|
|
30
|
+
contrast, never a drop shadow. The neutral ramp is pure achromatic gray — no warm or cool undertone —
|
|
31
|
+
so the UI reads engineered and monochrome, its accents landing like signal lights in a dark room. Two
|
|
32
|
+
accents, held to strict roles: coral `primary` (`#f36458`) is the one resting call-to-action, and
|
|
33
|
+
electric blue (`#0052ef`) is the system-wide activation signal — hover, active-nav, links, and the
|
|
34
|
+
focus `ring`. Density is `dense` — this reads like a tool for people who live in terminals.
|
|
35
|
+
|
|
36
|
+
## 2 Color Roles
|
|
37
|
+
|
|
38
|
+
Dark values (the manifest carries the exact hex in the required default slot). Two accents by strict
|
|
39
|
+
role — coral rests, blue activates; the vivid greens and magenta are chart/status graces, and status
|
|
40
|
+
hues speak only status.
|
|
41
|
+
|
|
42
|
+
| Role | Value | Allowed where |
|
|
43
|
+
| --- | --- | --- |
|
|
44
|
+
| `background` | near-black canvas `#0b0b0b` | page floor and content area — the dominant surface |
|
|
45
|
+
| `foreground` | white ink `#ffffff` | headlines and primary text on dark |
|
|
46
|
+
| `card` / `popover` / `secondary` | elevated `#212121` | cards, overlays, inputs, secondary-button fills — lifted off the canvas |
|
|
47
|
+
| `muted` | subtle fill `#212121` | quiet band tints, disabled tracks, canvas-level hover fills |
|
|
48
|
+
| `muted-foreground` | silver `#b9b9b9` | labels, captions, secondary/body text, placeholders |
|
|
49
|
+
| `accent` | prominent lift `#353535` | in-card hover and selected rows/nav — a neutral colorimetric step, never a hue wash |
|
|
50
|
+
| `border` / `input` | visible hairline `#353535` | every separator, grid line, and field edge — calibrated visible but not dominant |
|
|
51
|
+
| `primary` | coral `#f36458` | the one resting primary action per surface — the brand's warm signal, nowhere else |
|
|
52
|
+
| `primary-foreground` | white `#ffffff` | text on the coral fill |
|
|
53
|
+
| `ring` | electric blue `#0052ef` | the focus outline — the activation signal, unmistakable because keyboard-first |
|
|
54
|
+
| `destructive` | pure red `#dd0000` | destructive actions and error state only — kept distinct from coral |
|
|
55
|
+
| `success` / `warning` | green `#37cd84` / amber `#f59e0b` | status signalling only, never chrome |
|
|
56
|
+
|
|
57
|
+
The neon green (`#19d600`) and magenta (`#f500ff`) are marketing punctuation, surviving here only as
|
|
58
|
+
chart hues (§7). Blue never becomes a surface wash — it is line, text, ring, and indicator, so its
|
|
59
|
+
signal stays sharp.
|
|
60
|
+
|
|
61
|
+
## 3 Typography
|
|
62
|
+
|
|
63
|
+
One sans, one mono. `font-sans` is waldenburgNormal (the custom face; Space Grotesk or Inter is the
|
|
64
|
+
geometric-condensed substitute) — body, UI, tables, and headings all ride it. `font-mono` is IBM Plex
|
|
65
|
+
Mono for IDs, codes, timestamps, and log lines; numeric columns render `tabular-nums`, and mono
|
|
66
|
+
uppercase carries the "system readout" voice for tags. The display *scale* (112/72/48px) stays behind
|
|
67
|
+
— an operator surface tops out at a 24px page title.
|
|
68
|
+
|
|
69
|
+
| Step | Role | Family | Size · line | Weight · tracking |
|
|
70
|
+
| --- | --- | --- | --- | --- |
|
|
71
|
+
| h1 | page title | sans | 24px / 1.24 | `font-weight-strong` · `heading-tracking` |
|
|
72
|
+
| h2 | section head | sans | 20px / 1.24 | `font-weight-strong` · `heading-tracking` |
|
|
73
|
+
| h3 | card / group head | sans | 16px / 1.3 | `font-weight-strong` · 0 |
|
|
74
|
+
| body | UI + prose | sans | 15px / 1.5 | `font-weight-normal` |
|
|
75
|
+
| small | labels, meta, dense table | sans | 13px / 1.4 | `font-weight-normal` |
|
|
76
|
+
| caption | uppercase eyebrow / tag | mono | 12px / 1.3 | `font-weight-strong`, uppercase |
|
|
77
|
+
| code | IDs, logs, technical | mono | 13px / 1.5 | `font-weight-normal` |
|
|
78
|
+
|
|
79
|
+
The brand never reaches for heavy weight — emphasis tops at 500 (600 only on 11px uppercase
|
|
80
|
+
micro-labels). Headings build hierarchy on size and the signature tight negative tracking, never
|
|
81
|
+
bolding; bump weight one restrained step for emphasis, never size.
|
|
82
|
+
|
|
83
|
+
## 4 Component Stylings
|
|
84
|
+
|
|
85
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
86
|
+
|
|
87
|
+
- **Button** — primary: filled coral `primary` on white `primary-foreground`, `radius`, never a pill
|
|
88
|
+
(the marketing pill CTA stays behind). Secondary: `secondary` fill, 1px `border`, `muted-foreground`
|
|
89
|
+
text. Ghost: transparent, `accent` on hover.
|
|
90
|
+
- **Input / Card** — `card` fill on a 1px `border` (`border-weight`), `radius`; input focus draws the
|
|
91
|
+
blue `ring` at full 2px, no glow; card depth is the surface lift off the canvas, inset by
|
|
92
|
+
`density-inset`.
|
|
93
|
+
- **Table row** — height `table-row-height`; `border` grid lines carry the grid; `accent` on hover;
|
|
94
|
+
`tabular-nums` and `font-mono` on numeric columns; selection tints `accent` with a coral `primary`
|
|
95
|
+
left-indicator.
|
|
96
|
+
- **Side panel** — detail and edit open in the panel (`side-panel-width`, `side-panel-width-rich` for
|
|
97
|
+
content-heavy), beside the work, not over it.
|
|
98
|
+
- **Badge** — hairline `border`, `muted`/status fill, uppercase mono caption; pill `radius` is
|
|
99
|
+
badges-only; status badges take `success` / `warning` / `destructive`, never `primary`.
|
|
100
|
+
|
|
101
|
+
## 5 Layout
|
|
102
|
+
|
|
103
|
+
Base spacing unit 8px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` — the marketing
|
|
104
|
+
64-120px section rhythm stays behind. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
105
|
+
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (compact, matching the
|
|
106
|
+
brand's tight nav), side panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`,
|
|
107
|
+
forms `form-max-width`, tables full-width. Density is governed globally by `density-tier` (dense,
|
|
108
|
+
rewriting the scale through `density-gap`) and stepped per archetype by the surface catalog.
|
|
109
|
+
|
|
110
|
+
## 6 Depth
|
|
111
|
+
|
|
112
|
+
Flat and colorimetric. Elevation is a surface-color shift, not a shadow:
|
|
113
|
+
|
|
114
|
+
- **0 — canvas** `background` (`#0b0b0b`), no border.
|
|
115
|
+
- **1 — panel / card** `card` (`#212121`) on a 1px `border`; the elevated-surface lift off the
|
|
116
|
+
near-black canvas carries rank. Hover/selected lift one step to `accent` (`#353535`).
|
|
117
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest
|
|
118
|
+
ring-based lift or a backdrop blur, enough to separate an overlay from the canvas above a scrim.
|
|
119
|
+
|
|
120
|
+
Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. The shadow
|
|
121
|
+
vocabulary is ring-based (`0 0 0 Npx`) and backdrop-blur only — no offset drop shadows. Three z-levels:
|
|
122
|
+
content, sticky chrome, overlay.
|
|
123
|
+
|
|
124
|
+
## 7 Do's & Don'ts
|
|
125
|
+
|
|
126
|
+
- **Do** anchor every surface on the near-black canvas and keep the gray ramp purely achromatic — no
|
|
127
|
+
warm or cool tint; the vivid-signal-on-dark pairing is the brand.
|
|
128
|
+
- **Do** reserve coral `primary` for the one resting call-to-action per surface, and spend electric
|
|
129
|
+
blue on the activation states (hover, active-nav, links, focus `ring`). Coral rests, blue activates;
|
|
130
|
+
never mix the two in one element.
|
|
131
|
+
- **Do** carry hierarchy with the surface ladder, hairlines, weight, and size — the brand is flat — and
|
|
132
|
+
run headings on the geometric sans with tight negative tracking, never past weight 500.
|
|
133
|
+
- **Do** apply `tabular-nums` to numeric columns and `font-mono` (IBM Plex Mono) to IDs, codes,
|
|
134
|
+
timestamps, and log lines; mono uppercase for technical tags.
|
|
135
|
+
- **Don't** promote the neon green or magenta to a UI accent — they are chart/status graces; success
|
|
136
|
+
status uses the calmer `success` green.
|
|
137
|
+
- **Don't** pill controls or reach for a radius between 13px and the badge pill — the marketing pill CTA
|
|
138
|
+
stays behind.
|
|
139
|
+
- **Don't** signal elevation with offset drop shadows, or adapt the shell to a light canvas — this brand
|
|
140
|
+
has no light surface.
|
|
141
|
+
|
|
142
|
+
## 8 Responsive
|
|
143
|
+
|
|
144
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
145
|
+
|
|
146
|
+
| Breakpoint | What changes |
|
|
147
|
+
| --- | --- |
|
|
148
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
149
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
150
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
151
|
+
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
152
|
+
|
|
153
|
+
## 9 Agent Prompt Guide
|
|
154
|
+
|
|
155
|
+
Directives the emitting agent follows verbatim:
|
|
156
|
+
|
|
157
|
+
- Wear the near-black canvas by default; this brand is categorically dark, with no light surface to fall
|
|
158
|
+
back to. Cards and panels are the elevated `#212121` lift off the canvas, not white.
|
|
159
|
+
- Two accents, strict roles: coral `primary` marks the one resting call-to-action; electric blue is the
|
|
160
|
+
activation signal on hover, active-nav, links, and the focus ring. If they meet in one element, one is
|
|
161
|
+
wrong. All other color belongs to data and status; keep the neutral ramp purely achromatic.
|
|
162
|
+
- Depth is surface contrast and hairlines, never a drop shadow; reach for the faint overlay lift or a
|
|
163
|
+
backdrop blur only for a true modal or popover.
|
|
164
|
+
- Headings ride the geometric sans with tight negative tracking; build hierarchy on size, never bold
|
|
165
|
+
past weight 500. Every numeric column is `tabular-nums`; every ID / code / timestamp / log line is
|
|
166
|
+
`font-mono` (IBM Plex Mono); technical tags are mono uppercase. Show real content, not an illustration.
|
|
167
|
+
- Detail and edit go in the side panel beside the work; a modal is a confirmation, not a workspace.
|
|
168
|
+
Keyboard-first: the blue `ring` focus outline is always visible.
|
|
169
|
+
- Leave behind: the hero display at -4.48px tracking, full-pill CTA buttons, full-bleed marketing
|
|
170
|
+
sections and the 64-120px rhythm, and the neon-green/magenta highlights — marketing voltage, not
|
|
171
|
+
operator chrome.
|
|
172
|
+
|
|
173
|
+
```yaml design-primitives
|
|
174
|
+
radius: 6px # corpus: standard card/container radius (md 6px); inputs 3px, cards 12px via the scale; the pill CTA stays behind
|
|
175
|
+
shadow-intensity: 0.2 # derived: brand is colorimetric — depth is the surface ladder; only overlays get the faintest ring/blur lift
|
|
176
|
+
border-weight: 1px # corpus: 1px borders throughout
|
|
177
|
+
density-gap: 0.9 # derived: dense tier — terminal-native precision compresses spacing one step
|
|
178
|
+
density-inset: 0.9 # derived: matches the dense density-gap for coherent component insets
|
|
179
|
+
font-sans: waldenburgNormal, Space Grotesk, Inter, system-ui, sans-serif # corpus: waldenburgNormal custom face; Space Grotesk / Inter the geometric-condensed substitutes
|
|
180
|
+
font-mono: IBM Plex Mono, ui-monospace, monospace # corpus: IBM Plex Mono for code and technical labels
|
|
181
|
+
font-weight-normal: 400 # corpus: body 400
|
|
182
|
+
font-weight-strong: 500 # corpus: the brand never bolds — emphasis tops at 500 (600 only on 11px uppercase micro-labels); hierarchy is size + tracking
|
|
183
|
+
heading-tracking: -0.015em # derived: corpus documents -0.24px (~-0.01em) at the 24px title; nudged one notch tighter to carry the signature compressed tracking (hero -4.48px stays behind)
|
|
184
|
+
duration-unit: 50ms # derived: corpus documents no motion; functional operator base
|
|
185
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
186
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
187
|
+
duration-slow: 250ms # derived: corpus silent on motion
|
|
188
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard functional ease
|
|
189
|
+
contrast-boost: 1 # derived: the visible `#353535` hairline plus the surface ladder already carry the grid; no boost
|
|
190
|
+
icon-stroke: 1.75 # derived: corpus silent on icons; refined operator stroke one step under lucide's 2, matching the precise/engineered voice
|
|
191
|
+
icon-size-base: 16px # derived: corpus silent on icon size; operator standard
|
|
192
|
+
sidebar-width-expanded: 248px # derived: corpus is a marketing site with no app sidebar; standard operator rail
|
|
193
|
+
sidebar-width-collapsed: 56px # derived: standard operator icon rail
|
|
194
|
+
topbar-height: 52px # derived: corpus nav is "compact padding" with no explicit height; tight operator bar
|
|
195
|
+
side-panel-width: 420px # derived: corpus has no shell; standard operator detail panel
|
|
196
|
+
side-panel-width-rich: 640px # derived: content-heavy detail panel
|
|
197
|
+
modal-width-max: 560px # derived: corpus's full-bleed sections are marketing; operator confirmation cap
|
|
198
|
+
form-max-width: 640px # derived: corpus max content ~1440px is marketing; operator form cap
|
|
199
|
+
table-row-height: 40px # derived: dense-tier row height; dense archetypes step down via the surface catalog
|
|
200
|
+
verbosity: compact # derived: terminal-native "system readout" precision trusts dense readouts over explanatory chrome
|
|
201
|
+
feedback: subtle # derived: the consistent hover-to-blue activation is a present but restrained signal
|
|
202
|
+
density-tier: dense # derived: a tool "for people who live in terminals" reads dense
|
|
203
|
+
product-traits: [dev-tools, cms, content-platform, dashboard]
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
```yaml lever-manifest
|
|
207
|
+
version: 1
|
|
208
|
+
fonts: { sans: "waldenburgNormal, Space Grotesk, Inter, system-ui, sans-serif", mono: "IBM Plex Mono, ui-monospace, monospace" }
|
|
209
|
+
color-tokens:
|
|
210
|
+
light: # categorically-dark brand: the default-worn theme is dark and fills this required default slot; there is no light surface
|
|
211
|
+
background: "#0b0b0b"
|
|
212
|
+
foreground: "#ffffff"
|
|
213
|
+
card: "#212121"
|
|
214
|
+
card-foreground: "#ffffff"
|
|
215
|
+
muted: "#212121"
|
|
216
|
+
muted-foreground: "#b9b9b9"
|
|
217
|
+
border: "#353535"
|
|
218
|
+
input: "#353535"
|
|
219
|
+
ring: "#0052ef"
|
|
220
|
+
primary: "#f36458"
|
|
221
|
+
primary-foreground: "#ffffff"
|
|
222
|
+
accent: "#353535"
|
|
223
|
+
accent-foreground: "#ffffff"
|
|
224
|
+
destructive: "#dd0000"
|
|
225
|
+
destructive-foreground: "#ffffff"
|
|
226
|
+
success: "#37cd84" # derived: the calmer compliance green reads as UI status; the neon `#19d600` premium-highlight green stays behind (kept as a chart hue)
|
|
227
|
+
warning: "#f59e0b" # derived: corpus ships no warning hue and its orange border would collide with coral; a distinct amber carries caution
|
|
228
|
+
popover: "#212121"
|
|
229
|
+
popover-foreground: "#ffffff"
|
|
230
|
+
secondary: "#212121"
|
|
231
|
+
secondary-foreground: "#b9b9b9"
|
|
232
|
+
chart-1: "#0052ef" # electric blue — primary data series
|
|
233
|
+
chart-2: "#19d600" # neon green (sRGB fallback), repurposed as a chart hue
|
|
234
|
+
chart-3: "#f36458" # coral
|
|
235
|
+
chart-4: "#55beff" # light blue (documented secondary blue)
|
|
236
|
+
chart-5: "#f500ff" # magenta (display-p3 accent, sRGB approx), repurposed as a chart hue
|
|
237
|
+
sidebar: "#0b0b0b" # derived: nav rides the canvas; the hairline sidebar-border carries the seam
|
|
238
|
+
sidebar-foreground: "#b9b9b9" # derived: resting nav labels are silver, brightening on active
|
|
239
|
+
sidebar-primary: "#0052ef" # derived: blue active-nav indicator — the activation signal
|
|
240
|
+
sidebar-primary-foreground: "#ffffff"
|
|
241
|
+
sidebar-accent: "#212121" # derived: hover/selected nav lift off the canvas
|
|
242
|
+
sidebar-accent-foreground: "#ffffff"
|
|
243
|
+
sidebar-border: "#353535"
|
|
244
|
+
sidebar-ring: "#0052ef"
|
|
245
|
+
spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64]
|
|
246
|
+
radius-scale: [3, 4, 6, 12, 9999]
|
|
247
|
+
shadow-levels: [none, sm]
|
|
248
|
+
motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
249
|
+
icons: { family: lucide, stroke: 1.75 }
|
|
250
|
+
accent-count: 2 # brand demands it: coral `primary` (the resting CTA) + electric blue (the system-wide activation signal on ring/nav/links); the doctrine one-accent floor yields to the documented two-signal system
|
|
251
|
+
```
|