@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,240 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Slack
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Slack — operator reading
|
|
9
|
+
|
|
10
|
+
An operator translation of Slack's design language: the signature deep-aubergine
|
|
11
|
+
`sidebar`, a white content canvas, one aubergine accent, and blue reserved strictly for
|
|
12
|
+
links. The marketing surface — cream-lavender pastel-mesh gradients, 64px hero display,
|
|
13
|
+
floating product mockups — stays behind. What carries is the palette temperature (warm
|
|
14
|
+
aubergine, cool lavender tints), the humanist type voice, Slack's rounded character, and
|
|
15
|
+
the one thing every stranger recognizes as Slack: the dark aubergine workspace rail. Both
|
|
16
|
+
machine blocks are fully valued; every judgment away from the marketing brand is
|
|
17
|
+
annotated `# derived:`.
|
|
18
|
+
|
|
19
|
+
## 1 Visual Theme
|
|
20
|
+
|
|
21
|
+
Light by default; dark is opt-in. The content canvas is white with hairline `border`
|
|
22
|
+
hierarchy — flat, with a friendlier radius than a terminal. The one exception to the light
|
|
23
|
+
polarity is the brand's most enduring asset: the **aubergine `sidebar`**, a categorically
|
|
24
|
+
dark plane carrying light text (a legitimate brand override of the light-default floor —
|
|
25
|
+
recorded plainly in §6). A single accent, aubergine `primary` (`#4a154b`), is reserved for
|
|
26
|
+
the one action that matters; blue `#1264a3` is a functional link color, not a chrome
|
|
27
|
+
accent. Density is `standard`, nudged a hair toward comfort for Slack's relaxed rhythm.
|
|
28
|
+
|
|
29
|
+
## 2 Color Roles
|
|
30
|
+
|
|
31
|
+
Light values first. One accent — aubergine `primary` is the only chromatic hue that
|
|
32
|
+
carries interactive meaning; link blue is scoped to inline links; status hues speak only
|
|
33
|
+
status.
|
|
34
|
+
|
|
35
|
+
| Role | Value | Allowed where |
|
|
36
|
+
| --- | --- | --- |
|
|
37
|
+
| `background` / `card` / `popover` | white `#ffffff` | page, cards, overlays — the dominant light surface |
|
|
38
|
+
| `foreground` | near-black ink `#1d1d1d` | all primary text on light |
|
|
39
|
+
| `muted` / `secondary` | faint lavender-gray `#f5f3f7` / lavender `#f9f0ff` | hover rows, subtle fills, secondary buttons |
|
|
40
|
+
| `muted-foreground` | mid gray `#696969` | labels, captions, secondary text |
|
|
41
|
+
| `border` / `input` | hairline `#e6e6e6` | every separator, grid line, and field edge |
|
|
42
|
+
| `primary` | deep aubergine `#4a154b` | the one primary action; the sidebar surface; brand-mark moments |
|
|
43
|
+
| `accent` | lavender tint `#f9f0ff` | selected / hovered rows and nav on light |
|
|
44
|
+
| `ring` | aubergine `#611f69` | the focus outline on light surfaces — unmistakable, keyboard-first |
|
|
45
|
+
| `sidebar` | aubergine `#4a154b` | the workspace rail — the one categorically dark surface |
|
|
46
|
+
| link (functional) | blue `#1264a3` | inline links only — never a chrome or CTA color |
|
|
47
|
+
| `destructive` | rust `#cc4117` | destructive actions and error state only |
|
|
48
|
+
| `success` / `warning` | green `#007a5a` / amber `#d97706` | status signalling only, never chrome |
|
|
49
|
+
|
|
50
|
+
Cream `#f4ede4` and the pastel-mesh hero gradients are marketing graces: they carry no
|
|
51
|
+
operator role (see §7).
|
|
52
|
+
|
|
53
|
+
## 3 Typography
|
|
54
|
+
|
|
55
|
+
One sans, one mono. `font-sans` is Lato — the humanist face that carries Slack's warmth
|
|
56
|
+
at UI sizes (the brand's own display and UI faces are proprietary; a neutral grotesque
|
|
57
|
+
flattens the voice). UI, body, and headings all ride it; heading weight and tracking, not
|
|
58
|
+
a second family, carry emphasis. `font-mono` is JetBrains Mono for IDs, codes,
|
|
59
|
+
timestamps, and log lines. Numeric columns render `tabular-nums` so figures align down a
|
|
60
|
+
column (floor P4).
|
|
61
|
+
|
|
62
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
63
|
+
| --- | --- | --- | --- |
|
|
64
|
+
| h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
+
| h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
66
|
+
| h3 | card / group head | 15px / 1.45 | `font-weight-strong` · `heading-tracking` |
|
|
67
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
68
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
69
|
+
| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.08em`, uppercase |
|
|
70
|
+
|
|
71
|
+
Body leans on a relaxed 1.5 line-height (a restrained echo of the brand's 1.55) — legible
|
|
72
|
+
without going airy. Bump weight one step for emphasis; never change size to emphasize.
|
|
73
|
+
Hero-scale display (32–64px, tight negative tracking) stays on the marketing surface.
|
|
74
|
+
|
|
75
|
+
## 4 Component Stylings
|
|
76
|
+
|
|
77
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
78
|
+
|
|
79
|
+
- **Button** — `primary`: filled aubergine `primary` on `primary-foreground`, pill radius
|
|
80
|
+
(`9999`, the one brand flourish), bold label. Secondary: lavender `secondary` fill,
|
|
81
|
+
`foreground`, workhorse `radius`. Ghost: transparent, `accent` on hover.
|
|
82
|
+
- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the
|
|
83
|
+
`ring` at full 2px, no glow.
|
|
84
|
+
- **Card** — `card` surface, 1px `border`, `radius`; a soft `md` shadow only when it must
|
|
85
|
+
lift (`shadow-intensity`); inset by `density-inset`.
|
|
86
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover;
|
|
87
|
+
selection tints `accent` (lavender); `tabular-nums` on numeric columns.
|
|
88
|
+
- **Sidebar** — aubergine `sidebar` surface, `sidebar-foreground` light text; active item
|
|
89
|
+
a `sidebar-primary` band, hover a subtler `sidebar-accent` — the signature dark rail (§6).
|
|
90
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width`,
|
|
91
|
+
`side-panel-width-rich` for content-heavy), beside the work, not over it (floor P3).
|
|
92
|
+
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
|
|
93
|
+
`success` / `warning` / `destructive`, never aubergine `primary`.
|
|
94
|
+
|
|
95
|
+
## 5 Layout
|
|
96
|
+
|
|
97
|
+
Base spacing unit 4px (Tailwind `--spacing` 0.25rem), with 8px as the dominant step
|
|
98
|
+
honoring Slack's rhythm; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`.
|
|
99
|
+
Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
100
|
+
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
|
|
101
|
+
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
|
|
102
|
+
`form-max-width`, tables full-width. Density is governed globally by `density-tier`
|
|
103
|
+
(rewriting the spacing scale through `density-gap`) and stepped per archetype by the
|
|
104
|
+
surface catalog — never by absolute overrides.
|
|
105
|
+
|
|
106
|
+
## 6 Depth
|
|
107
|
+
|
|
108
|
+
Flat on the light canvas; the aubergine rail is the one deliberate exception. Hierarchy
|
|
109
|
+
comes from the surface split and hairlines, not stacked shadow:
|
|
110
|
+
|
|
111
|
+
- **0 — canvas** `background`, no border.
|
|
112
|
+
- **1 — panel / card** `card` on a 1px `border`; a soft `md` shadow only when it must lift.
|
|
113
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md` shadow.
|
|
114
|
+
|
|
115
|
+
The aubergine `sidebar` is a **fixed dark plane, not an elevation** — its prominence comes
|
|
116
|
+
from the surface-polarity split, never a heavier shadow. Focus is a 2px aubergine `ring` on
|
|
117
|
+
light and a light mauve `sidebar-ring` on the rail, visible on every interactive element
|
|
118
|
+
(floor P6). Three z-levels: content, sticky chrome, overlay.
|
|
119
|
+
|
|
120
|
+
## 7 Do's & Don'ts
|
|
121
|
+
|
|
122
|
+
- **Do** reserve aubergine `primary` for the single most important action; everything else
|
|
123
|
+
is neutral, status, or a link.
|
|
124
|
+
- **Do** keep the aubergine `sidebar` — the dark rail is the brand's most recognizable
|
|
125
|
+
signal; light-on-aubergine is by design.
|
|
126
|
+
- **Do** give the primary CTA the pill radius as the one brand flourish; keep every other
|
|
127
|
+
control on the `radius` workhorse.
|
|
128
|
+
- **Do** use blue for inline links only; apply `tabular-nums` to numeric columns and
|
|
129
|
+
`font-mono` to IDs, codes, and timestamps.
|
|
130
|
+
- **Don't** promote a third accent — aubergine + link-blue is exhaustive; status uses
|
|
131
|
+
`success` / `warning` / `destructive`.
|
|
132
|
+
- **Don't** use aubergine for body text — it is a surface and CTA color, not a type color.
|
|
133
|
+
- **Don't** bring the pastel-mesh gradients, floating mockups, or 64px hero display onto an
|
|
134
|
+
operator surface, and don't pill anything but the primary CTA.
|
|
135
|
+
|
|
136
|
+
## 8 Responsive
|
|
137
|
+
|
|
138
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
139
|
+
|
|
140
|
+
| Breakpoint | What changes |
|
|
141
|
+
| --- | --- |
|
|
142
|
+
| 375 | aubergine sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
143
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
144
|
+
| 1024 | sidebar expands to the aubergine rail; two-pane queue+detail holds side by side |
|
|
145
|
+
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
146
|
+
|
|
147
|
+
## 9 Agent Prompt Guide
|
|
148
|
+
|
|
149
|
+
Directives the emitting agent follows verbatim:
|
|
150
|
+
|
|
151
|
+
- Carry the palette: aubergine `primary`, the dark aubergine `sidebar`, lavender `accent`
|
|
152
|
+
tints, blue links, near-black ink on white. The `sidebar` is the one categorically dark
|
|
153
|
+
plane; keep the rest of the app light.
|
|
154
|
+
- Leave behind the marketing surface — pastel-mesh gradients, floating UI mockups,
|
|
155
|
+
hero-scale display, the full-bleed aubergine footer band do not exist here.
|
|
156
|
+
- Accent only the primary action; if two things want the aubergine, one is not primary.
|
|
157
|
+
Blue is for links, not buttons. Give the primary CTA the pill; everything else on `radius`.
|
|
158
|
+
- Detail and edit go in the side panel; a modal is a confirmation, not a workspace (P3).
|
|
159
|
+
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
|
|
160
|
+
- Every workflow completes from the keyboard; the `ring` focus outline is always visible (P6).
|
|
161
|
+
|
|
162
|
+
```yaml design-primitives
|
|
163
|
+
radius: 8px # derived: brand's rounded character (12-16px cards, 90px pills) settles at a friendly 8px operator workhorse; the pill (9999) is reserved for the signature primary CTA
|
|
164
|
+
shadow-intensity: 0.5 # derived: brand leans on soft atmospheric shadow for depth; operator keeps a moderate lift on overlays only
|
|
165
|
+
border-weight: 1px
|
|
166
|
+
density-gap: 1.05 # derived: Slack's comfortable padding (over-padded pills, 1.55 body leading) nudges spacing a hair above the neutral operator default
|
|
167
|
+
density-inset: 1.05 # derived: same comfortable-padding read carried onto component insets
|
|
168
|
+
font-sans: Lato, system-ui, sans-serif # derived: corpus names Lato as the humanist face that carries the brand's warmth at UI sizes (the display/UI faces are proprietary); a neutral grotesque flattens the voice
|
|
169
|
+
font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace # derived: corpus is silent on mono; a neutral operator monospace for IDs, codes, log lines
|
|
170
|
+
font-weight-normal: 400
|
|
171
|
+
font-weight-strong: 600 # derived: brand runs 700 on buttons/display; operator emphasis relaxes to 600, reserving the bolder weight for the pill CTA label
|
|
172
|
+
heading-tracking: -0.01em # derived: brand tracks display tight-negative (-0.768px at 64px); at operator heading sizes it settles near -0.01em
|
|
173
|
+
duration-unit: 50ms # derived: corpus silent on motion; functional operator ramp (50/100/150/250) on the standard easing
|
|
174
|
+
duration-fast: 100ms
|
|
175
|
+
duration-normal: 150ms
|
|
176
|
+
duration-slow: 250ms
|
|
177
|
+
ease-default: cubic-bezier(0.4,0,0.2,1)
|
|
178
|
+
contrast-boost: 1
|
|
179
|
+
icon-stroke: 1.75 # derived: corpus silent on icons; a refined operator stroke one step under lucide's 2
|
|
180
|
+
icon-size-base: 16px # derived: standard operator icon size
|
|
181
|
+
sidebar-width-expanded: 260px # derived: nods to Slack's real workspace-rail width
|
|
182
|
+
sidebar-width-collapsed: 56px # derived: standard icon-rail width
|
|
183
|
+
topbar-height: 48px # derived: Slack's compact workspace header character
|
|
184
|
+
side-panel-width: 420px # derived: Slack's thread / details panel character
|
|
185
|
+
side-panel-width-rich: 640px # derived: content-heavy detail width
|
|
186
|
+
modal-width-max: 560px # derived: standard confirmation-modal cap
|
|
187
|
+
form-max-width: 640px # derived: standard single-column form width
|
|
188
|
+
table-row-height: 40px # derived: comfortable operator row honoring the brand's relaxed rhythm
|
|
189
|
+
verbosity: default
|
|
190
|
+
feedback: subtle
|
|
191
|
+
density-tier: standard # derived: a spacious consumer brand pulled to standard for operator work
|
|
192
|
+
product-traits: [collaboration, messaging, inbox, dashboard]
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
```yaml lever-manifest
|
|
196
|
+
version: 1
|
|
197
|
+
fonts: { sans: "Lato, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, SFMono-Regular, monospace" }
|
|
198
|
+
color-tokens:
|
|
199
|
+
light:
|
|
200
|
+
background: "#ffffff"
|
|
201
|
+
foreground: "#1d1d1d"
|
|
202
|
+
card: "#ffffff"
|
|
203
|
+
card-foreground: "#1d1d1d"
|
|
204
|
+
muted: "#f5f3f7" # derived: faint lavender-gray, a whisper of the aubergine family
|
|
205
|
+
muted-foreground: "#696969"
|
|
206
|
+
border: "#e6e6e6"
|
|
207
|
+
input: "#e6e6e6"
|
|
208
|
+
ring: "#611f69" # derived: aubergine-press, visible focus outline on light
|
|
209
|
+
primary: "#4a154b"
|
|
210
|
+
primary-foreground: "#ffffff"
|
|
211
|
+
accent: "#f9f0ff"
|
|
212
|
+
accent-foreground: "#4a154b"
|
|
213
|
+
destructive: "#cc4117"
|
|
214
|
+
destructive-foreground: "#ffffff"
|
|
215
|
+
success: "#007a5a"
|
|
216
|
+
warning: "#d97706" # derived: corpus has no warning hue; a contrast-safe amber for status
|
|
217
|
+
popover: "#ffffff"
|
|
218
|
+
popover-foreground: "#1d1d1d"
|
|
219
|
+
secondary: "#f9f0ff"
|
|
220
|
+
secondary-foreground: "#1d1d1d"
|
|
221
|
+
chart-1: "#4a154b"
|
|
222
|
+
chart-2: "#1264a3"
|
|
223
|
+
chart-3: "#007a5a"
|
|
224
|
+
chart-4: "#d97706" # derived: amber, extends the palette for chart distinction
|
|
225
|
+
chart-5: "#cc4117"
|
|
226
|
+
sidebar: "#4a154b"
|
|
227
|
+
sidebar-foreground: "#f9f0ff" # derived: warm light lavender text on the aubergine rail
|
|
228
|
+
sidebar-primary: "#611f69" # derived: aubergine-press band for the active nav item
|
|
229
|
+
sidebar-primary-foreground: "#ffffff"
|
|
230
|
+
sidebar-accent: "#592466" # derived: aubergine-tint hover band on the rail
|
|
231
|
+
sidebar-accent-foreground: "#ffffff"
|
|
232
|
+
sidebar-border: "#3d1140" # derived: a shade below aubergine for a subtle divider on the rail
|
|
233
|
+
sidebar-ring: "#d9bdde" # derived: light mauve focus ring, visible on the aubergine rail
|
|
234
|
+
spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
|
|
235
|
+
radius-scale: [0, 4, 8, 12, 9999]
|
|
236
|
+
shadow-levels: [none, sm, md]
|
|
237
|
+
motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
238
|
+
icons: { family: lucide, stroke: 1.75 }
|
|
239
|
+
accent-count: 1
|
|
240
|
+
```
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: SpaceX
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# SpaceX — the mission-console operator reading
|
|
9
|
+
|
|
10
|
+
An operator translation of SpaceX's design language into a mission console. The marketing theatre stays
|
|
11
|
+
behind: full-bleed rocket and Mars photography, autoplaying launch video, hero-scale display type, the
|
|
12
|
+
museum negative space. What carries is the austere chassis underneath — a pure-black canvas, an
|
|
13
|
+
achromatic white accent doing every "click me" job, the condensed industrial D-DIN voice set UPPERCASE
|
|
14
|
+
with the brand's signature *positive* tracking, tight 4px chrome, and a zero-shadow flat depth. This is
|
|
15
|
+
the one library entry where the light-default floor legitimately yields: SpaceX is **categorically dark**
|
|
16
|
+
— pure `#000000` is the load-bearing brand fact — so the default theme wears near-black, and the brief
|
|
17
|
+
blesses the override plainly (brand tokens win; a pure `#000000` surface is exactly the case the catalog
|
|
18
|
+
lets a design.md demand). Both machine blocks are fully valued; every judgment past what the corpus
|
|
19
|
+
states is annotated `# derived:` where it lands.
|
|
20
|
+
|
|
21
|
+
## 1 Visual Theme
|
|
22
|
+
|
|
23
|
+
Dark by default, and pure black on purpose. The canvas is `background` `#000000` (canvas-night) — the
|
|
24
|
+
brand's single most recognizable fact — with cards lifting to `#0a0a0a` (canvas-night-soft), a
|
|
25
|
+
barely-lifted near-black that reads as elevation with no shadow at all. Flat throughout: hierarchy comes
|
|
26
|
+
from the near-black surface ladder, `#3a3a3f` hairlines, and type weight — never a drop shadow (the
|
|
27
|
+
corpus uses none). There is **no chromatic brand accent**; the one accent is achromatic **white**
|
|
28
|
+
(`#ffffff`), reserved for the single primary action, which inverts to white-on-black. The type voice is
|
|
29
|
+
condensed and engineered — D-DIN, set UPPERCASE on titles and eyebrows with a distinctly *positive*
|
|
30
|
+
letter-spacing, the one operator brand that tracks out rather than in. Density is `dense`: the operator
|
|
31
|
+
reading is a mission console — telemetry-dense — not the spacious full-bleed of the marketing site.
|
|
32
|
+
|
|
33
|
+
## 2 Color Roles
|
|
34
|
+
|
|
35
|
+
Dark values are the default (the manifest's `light` map carries them — the categorically-dark override).
|
|
36
|
+
The brand has no accent colors; black, white, and a derived telemetry set of status hues do all the
|
|
37
|
+
chromatic work. The corpus's light shop surface (white `#ffffff`, ink `#000000`, hairline `#e0e0e8`) is
|
|
38
|
+
the inverse a light form context can opt into, but the console wears black.
|
|
39
|
+
|
|
40
|
+
| Role | Value | Allowed where |
|
|
41
|
+
| --- | --- | --- |
|
|
42
|
+
| `background` | canvas-night `#000000` | the page canvas — pure black, the signature; no tint |
|
|
43
|
+
| `card` / `popover` | canvas-night-soft `#0a0a0a` | cards and overlays lift off pure black by the surface step alone |
|
|
44
|
+
| `foreground` | on-primary `#ffffff` | all primary ink — the dominant text color |
|
|
45
|
+
| `muted` | near-black `#141417` | hover rows, subtle fills (a hair above card) |
|
|
46
|
+
| `muted-foreground` | cool gray `#8a8a92` | labels, captions, secondary text — corpus ink-mute `#5a5a5f` is a light-surface tone; on black it lightens to read |
|
|
47
|
+
| `border` / `input` | hairline-on-dark `#3a3a3f` | every separator, grid line, and field edge — the highest-frequency token |
|
|
48
|
+
| `primary` | white `#ffffff` | the one primary action; active nav; the wordmark — the accent is achromatic, not a hue |
|
|
49
|
+
| `primary-foreground` | ink `#000000` | text/icon on the white fill — black on white, never gray |
|
|
50
|
+
| `accent` | cool near-black `#1e1e26` | selected / hovered rows and nav — selection lifts the near-black, it does not colour it |
|
|
51
|
+
| `ring` | white `#ffffff` | the focus outline — maximally visible on black, because keyboard-first (corpus link-on-dark is white) |
|
|
52
|
+
| `destructive` | telemetry-red `#ff453a` | destructive / abort actions and error state only |
|
|
53
|
+
| `success` / `warning` | nominal-green `#32d74b` / caution-amber `#ff9f0a` | status signalling only, never chrome |
|
|
54
|
+
|
|
55
|
+
On-primary-mute `#f0f0fa` (a cooled-white barely distinct from white) is the corpus's subtle-hierarchy
|
|
56
|
+
secondary text on dark; reach for it only where a whisper of text hierarchy is wanted without a gray.
|
|
57
|
+
|
|
58
|
+
## 3 Typography
|
|
59
|
+
|
|
60
|
+
One condensed sans, plus a mono the operator console adds. `font-sans` is **D-DIN** — the condensed
|
|
61
|
+
industrial cut inspired by the DIN 1451 engineering standard; Inter at 700+ with positive tracking is the
|
|
62
|
+
corpus-named substitute, and Arial Narrow the corpus fallback that keeps the width compression. The
|
|
63
|
+
display face is D-DIN-Bold (700); the body is D-DIN (400) — there is **no mid weight**, the brand jumps
|
|
64
|
+
400 → 700. `font-mono` is a **derived** addition (`Space Mono`, JetBrains Mono fallback): the corpus omits
|
|
65
|
+
mono outright, but a mission console needs a telemetry / ID / timestamp voice, and Space Mono's engineered
|
|
66
|
+
character suits the DIN aesthetic. Numeric and telemetry columns render `tabular-nums`.
|
|
67
|
+
|
|
68
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
69
|
+
| --- | --- | --- | --- |
|
|
70
|
+
| h1 | page title (UPPERCASE) | 24px / 1.1 | `font-weight-strong` · `heading-tracking` |
|
|
71
|
+
| h2 | section head (UPPERCASE) | 18px / 1.2 | `font-weight-strong` · `heading-tracking` |
|
|
72
|
+
| h3 | card / group head (UPPERCASE) | 15px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
73
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` · `+0.01em` |
|
|
74
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
75
|
+
| caption | uppercase eyebrow / nav | 12px / 1.4 | `font-weight-normal`, `+0.08em`, uppercase |
|
|
76
|
+
| number | table figures, telemetry | 13px / 1.4 | `font-mono` · `tabular-nums` |
|
|
77
|
+
|
|
78
|
+
The positive tracking and the UPPERCASE display are the brand's irreducible signature; body carries a
|
|
79
|
+
faint `+0.01em` — the whole system reads engineered rather than designed. Emphasise by weight, never size.
|
|
80
|
+
|
|
81
|
+
## 4 Component Stylings
|
|
82
|
+
|
|
83
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
84
|
+
|
|
85
|
+
- **Button** — `primary`: filled white (`primary`) on black (`primary-foreground`), tight `radius`, no
|
|
86
|
+
pill, UPPERCASE label positively tracked. The **ghost pill** is the brand's signature CTA — transparent,
|
|
87
|
+
1px `border`, white text, `pill` radius (32px), UPPERCASE — reserved for a lone hero action (a launch /
|
|
88
|
+
commit / deploy confirm), never two side by side. Secondary: `secondary` fill, 1px `border`.
|
|
89
|
+
- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; focus draws the white `ring` at full
|
|
90
|
+
2px, no glow.
|
|
91
|
+
- **Card** — `card` (`#0a0a0a`) on a 1px `border`, `radius`; elevation is the surface step + hairline off
|
|
92
|
+
pure black, never a shadow; inset by `density-inset`.
|
|
93
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `accent` on selection;
|
|
94
|
+
`tabular-nums` + `font-mono` on numeric / telemetry columns.
|
|
95
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich` for
|
|
96
|
+
content-heavy), beside the work, not over it.
|
|
97
|
+
- **Badge** — hairline `border`, `muted` / status fill, UPPERCASE caption; status badges take `success` /
|
|
98
|
+
`warning` / `destructive`, never `primary`.
|
|
99
|
+
|
|
100
|
+
## 5 Layout
|
|
101
|
+
|
|
102
|
+
Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 18 · 24 · 32 · 48` — note the corpus's
|
|
103
|
+
signature 18px step (its button vertical padding). Shell dimensions map one-to-one to the layout
|
|
104
|
+
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
|
|
105
|
+
panel `side-panel-width` / `side-panel-width-rich`, modal `modal-width-max`, forms `form-max-width`,
|
|
106
|
+
tables full-width. Density is `dense`, governed globally by `density-tier` (rewriting the spacing scale
|
|
107
|
+
through `density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides. The
|
|
108
|
+
marketing full-bleed bands and their edge-to-edge photography stay behind.
|
|
109
|
+
|
|
110
|
+
## 6 Depth
|
|
111
|
+
|
|
112
|
+
Flat, and darker-flat. The corpus's depth is *photographic* — full-bleed imagery does all the lifting —
|
|
113
|
+
and it uses zero drop shadows, blurs, glows, or gradients. The operator reading has no photography, so
|
|
114
|
+
depth becomes the near-black surface ladder plus hairlines:
|
|
115
|
+
|
|
116
|
+
- **0 — canvas** `background` (`#000000`), no border.
|
|
117
|
+
- **1 — panel / card** `card` (`#0a0a0a`) on a 1px `border`; elevation is the surface step + hairline, no
|
|
118
|
+
shadow.
|
|
119
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns the faintest `sm`
|
|
120
|
+
lift to separate a floating overlay from the console; even then, prefer the hairline.
|
|
121
|
+
|
|
122
|
+
Focus is a 2px white `ring` outline (never a glow), visible on every interactive element. Three z-levels:
|
|
123
|
+
content, sticky chrome, overlay.
|
|
124
|
+
|
|
125
|
+
## 7 Do's & Don'ts
|
|
126
|
+
|
|
127
|
+
- **Do** keep the canvas pure black (`#000000`) — it is the load-bearing brand fact; cards lift by the
|
|
128
|
+
`#0a0a0a` step + hairline, never a shadow.
|
|
129
|
+
- **Do** render titles and eyebrows UPPERCASE in the condensed D-DIN with *positive* tracking — the brand
|
|
130
|
+
tracks out, not in.
|
|
131
|
+
- **Do** reserve the one achromatic accent (white) for the single primary action; everything else is
|
|
132
|
+
neutral or status.
|
|
133
|
+
- **Do** carry telemetry, IDs, codes, and timestamps in `font-mono` with `tabular-nums`.
|
|
134
|
+
- **Don't** introduce a chromatic brand accent — black, white, and the derived telemetry status hues are
|
|
135
|
+
the entire palette; a colored "brand" accent breaks the system.
|
|
136
|
+
- **Don't** render titles in sentence-case or title-case — UPPERCASE is the brand.
|
|
137
|
+
- **Don't** signal rank with a drop shadow — the near-black surface step + hairline carries elevation.
|
|
138
|
+
- **Don't** pill every control — the 32px pill is a lone hero-CTA signal; operator controls take the tight
|
|
139
|
+
4px rect.
|
|
140
|
+
- **Don't** reach for a serif or humanist-sans heading — the condensed industrial DIN cut is non-negotiable.
|
|
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; h1 steps 24 → 20; density holds |
|
|
149
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
150
|
+
| 1024 | sidebar expands; two-pane console + detail holds side by side |
|
|
151
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
152
|
+
|
|
153
|
+
The corpus's display tier stair-steps 80 → 60 → 48 → 40px; at operator scale the h1 steps down more
|
|
154
|
+
modestly, but the principle holds — the display shrinks first.
|
|
155
|
+
|
|
156
|
+
## 9 Agent Prompt Guide
|
|
157
|
+
|
|
158
|
+
- **Carries:** the pure-black `background` + `#0a0a0a` surface ladder; the achromatic white accent; the
|
|
159
|
+
condensed D-DIN voice set UPPERCASE with positive tracking on titles and eyebrows; the tight 4px chrome
|
|
160
|
+
radius; zero-shadow flat depth; the telemetry-dense layout.
|
|
161
|
+
- **Stays behind:** full-bleed rocket / Mars photography and autoplaying launch video; hero-scale display
|
|
162
|
+
(80 / 60 / 48px); the museum negative space; the marketing full-bleed bands; the ghost-pill-everywhere
|
|
163
|
+
marketing CTA grammar.
|
|
164
|
+
- Keep the canvas pure black; cards lift by the `#0a0a0a` step + hairline, never a shadow.
|
|
165
|
+
- One accent, and it is white — the primary action inverts to white-on-black; if two things want it, one
|
|
166
|
+
of them is not primary.
|
|
167
|
+
- Titles and eyebrows are UPPERCASE, condensed, positively tracked — the irreducible signature; body and
|
|
168
|
+
tables stay sentence-case D-DIN.
|
|
169
|
+
- Every numeric / telemetry column is `tabular-nums`; every ID / code / timestamp is `font-mono` (the brand
|
|
170
|
+
omits mono — the console adds it for telemetry).
|
|
171
|
+
- Every workflow completes from the keyboard; the white 2px `ring` focus outline is always visible.
|
|
172
|
+
- The 32px ghost pill is a lone hero CTA (a launch / commit confirm), never two side by side.
|
|
173
|
+
|
|
174
|
+
```yaml design-primitives
|
|
175
|
+
radius: 4px # corpus: sharpest chrome radius (rounded.xs, form inputs); the engineered DIN read wants tight corners — the 32px signature pill stays in-scale for a lone ghost hero CTA
|
|
176
|
+
shadow-intensity: 0.2 # derived: corpus uses zero shadow (depth is photographic); operator carries elevation by the near-black surface ladder + hairline, a faint shadow only floats a true overlay
|
|
177
|
+
border-weight: 1px
|
|
178
|
+
density-gap: 0.9 # derived: the operator reading is a mission console — telemetry-dense; marketing's full-bleed spaciousness stays behind
|
|
179
|
+
density-inset: 0.9 # derived: matches the dense tier's tighter component insets
|
|
180
|
+
font-sans: D-DIN, Inter, Arial Narrow, system-ui, sans-serif # corpus display+body face; Inter (700+, tracked) is the corpus-named substitute, Arial Narrow the corpus fallback that keeps the width compression
|
|
181
|
+
font-mono: Space Mono, JetBrains Mono, ui-monospace, monospace # derived: corpus omits mono; a mission console needs a telemetry/ID voice — Space Mono's engineered character suits the DIN aesthetic, JetBrains Mono the reliable fallback
|
|
182
|
+
font-weight-normal: 400 # corpus: D-DIN body weight
|
|
183
|
+
font-weight-strong: 700 # corpus: D-DIN-Bold display is 700; the brand jumps 400 → 700 with no mid weight
|
|
184
|
+
heading-tracking: 0.04em # corpus: the signature is POSITIVE display tracking (uppercase, ~0.02em at 80px, ~0.08em on caps eyebrows); operator headings keep a distinctly positive 0.04em — the one operator brand that tracks OUT, not in
|
|
185
|
+
duration-unit: 50ms # derived: corpus documents no motion; austere functional base
|
|
186
|
+
duration-fast: 100ms # derived: corpus silent on motion
|
|
187
|
+
duration-normal: 150ms # derived: corpus silent on motion
|
|
188
|
+
duration-slow: 250ms # derived: corpus silent on motion
|
|
189
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; mechanical, restrained functional ease
|
|
190
|
+
contrast-boost: 1 # derived: the near-black surface ladder + #3a3a3f hairlines already read as a grid on black
|
|
191
|
+
icon-stroke: 1.5 # derived: corpus uses minimal SVG arrow chevrons; a thin 1.5 stroke keeps them minimal and refined
|
|
192
|
+
icon-size-base: 16px # derived: corpus silent on UI icon sizing; operator standard
|
|
193
|
+
sidebar-width-expanded: 240px # derived: no app shell in corpus (marketing full-bleed); austere/dense read tightens the rail
|
|
194
|
+
sidebar-width-collapsed: 56px # derived: standard icon-rail width
|
|
195
|
+
topbar-height: 52px # derived: corpus nav is marketing-generous (24px vertical padding); operator tightens to a thin overlay bar
|
|
196
|
+
side-panel-width: 420px # derived: no app shell in corpus; operator standard
|
|
197
|
+
side-panel-width-rich: 640px # derived: content-heavy detail width
|
|
198
|
+
modal-width-max: 560px # derived: confirmations only
|
|
199
|
+
form-max-width: 640px # derived: single-column reading cap
|
|
200
|
+
table-row-height: 36px # derived: dense mission-console rows pack tight; the surface catalog can step further per archetype
|
|
201
|
+
verbosity: compact # derived: austere, minimal-chrome brand trusts the reader over explanatory copy
|
|
202
|
+
feedback: minimal # derived: the brand's austere silence → the most restrained feedback dial
|
|
203
|
+
density-tier: dense # derived: the operator reading is a mission console — telemetry-dense; marketing spaciousness stays behind
|
|
204
|
+
product-traits: [mission-control, telemetry, monitoring, dashboard, command-center]
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
```yaml lever-manifest
|
|
208
|
+
version: 1
|
|
209
|
+
fonts: { sans: "D-DIN, Inter, Arial Narrow, system-ui, sans-serif", mono: "Space Mono, JetBrains Mono, ui-monospace, monospace" }
|
|
210
|
+
color-tokens:
|
|
211
|
+
light:
|
|
212
|
+
background: "#000000"
|
|
213
|
+
foreground: "#ffffff"
|
|
214
|
+
card: "#0a0a0a"
|
|
215
|
+
card-foreground: "#ffffff"
|
|
216
|
+
muted: "#141417" # derived: a step above card for hover rows and subtle fills on the near-black ladder
|
|
217
|
+
muted-foreground: "#8a8a92" # derived: cool mid-gray for secondary text on black; corpus ink-mute #5a5a5f is a light-surface tone
|
|
218
|
+
border: "#3a3a3f"
|
|
219
|
+
input: "#3a3a3f"
|
|
220
|
+
ring: "#ffffff" # derived: achromatic brand → the focus ring is white, maximally visible on black (corpus link-on-dark is white)
|
|
221
|
+
primary: "#ffffff" # derived: the brand has no chromatic accent; white is the one voltage — the primary action inverts to white-on-black
|
|
222
|
+
primary-foreground: "#000000"
|
|
223
|
+
accent: "#1e1e26" # derived: cool near-black selection/hover tint; SpaceX's cool canvas-cool #f0f0fa inverted onto black
|
|
224
|
+
accent-foreground: "#ffffff"
|
|
225
|
+
destructive: "#ff453a" # derived: corpus is achromatic; a telemetry-alert red for error/abort on black
|
|
226
|
+
destructive-foreground: "#ffffff"
|
|
227
|
+
success: "#32d74b" # derived: mission nominal/go green on black
|
|
228
|
+
warning: "#ff9f0a" # derived: telemetry caution amber on black
|
|
229
|
+
popover: "#0a0a0a"
|
|
230
|
+
popover-foreground: "#ffffff"
|
|
231
|
+
secondary: "#1a1a1e" # derived: secondary button fill — a lift above card
|
|
232
|
+
secondary-foreground: "#ffffff"
|
|
233
|
+
chart-1: "#ffffff" # derived: the primary telemetry trace is achromatic white
|
|
234
|
+
chart-2: "#64d2ff" # derived: telemetry cyan
|
|
235
|
+
chart-3: "#32d74b" # derived: nominal green
|
|
236
|
+
chart-4: "#ff9f0a" # derived: caution amber
|
|
237
|
+
chart-5: "#ff453a" # derived: alert red
|
|
238
|
+
sidebar: "#000000" # derived: the nav overlays on pure black (corpus nav-bar-overlay canvas-night), separated by a hairline
|
|
239
|
+
sidebar-foreground: "#ffffff"
|
|
240
|
+
sidebar-primary: "#ffffff" # derived: active nav is white
|
|
241
|
+
sidebar-primary-foreground: "#000000"
|
|
242
|
+
sidebar-accent: "#1e1e26" # derived: selected-nav tint, matches accent
|
|
243
|
+
sidebar-accent-foreground: "#ffffff"
|
|
244
|
+
sidebar-border: "#3a3a3f"
|
|
245
|
+
sidebar-ring: "#ffffff"
|
|
246
|
+
spacing-scale: [4, 8, 12, 16, 18, 24, 32, 48]
|
|
247
|
+
radius-scale: [4, 8, 16, 32, 9999]
|
|
248
|
+
shadow-levels: [none, sm]
|
|
249
|
+
motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
250
|
+
icons: { family: lucide, stroke: 1.5 }
|
|
251
|
+
accent-count: 1
|
|
252
|
+
```
|