@nurix/etna 0.18.19 → 0.18.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- 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/package.json +1 -1
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: MongoDB
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# MongoDB — the operator reading
|
|
9
|
+
|
|
10
|
+
MongoDB ships a dual-mode marketing identity — deep navy-teal hero bands carrying the bright MongoDB
|
|
11
|
+
green (`#00ed64`) pill CTA over stark white documentation. This is the *operator* reading: the palette
|
|
12
|
+
temperature, type voice, and rounder radius carry; the dark hero bands, 72px display type, and
|
|
13
|
+
pill-on-everything stay behind. An internal tool wearing MongoDB reads as a light, comfortable,
|
|
14
|
+
engineered console — white canvas, deep navy-teal ink, one bright green accent, the category palette
|
|
15
|
+
pressed into chart duty. Both machine blocks are fully valued; judgments away from the brand are
|
|
16
|
+
annotated `# derived:`.
|
|
17
|
+
|
|
18
|
+
## 1 Visual Theme
|
|
19
|
+
|
|
20
|
+
Light by default; dark is opt-in. Nearly flat: hierarchy is carried by hairline `border`, type weight,
|
|
21
|
+
and the cool surface ladder — soft, navy-tinted shadow lifts only true overlays. A single accent,
|
|
22
|
+
MongoDB green (`primary`), reserved for the one action that matters; its ink is deep navy
|
|
23
|
+
(`primary-foreground`), never white — the green is bright enough to demand a dark label. The neutral
|
|
24
|
+
ramp is a cool navy-teal slate (ink `#001e2b`) over faintly cool-green surfaces, so the UI reads
|
|
25
|
+
engineered and database-native. The anchor surface is a white canvas beside a faintly cool `sidebar`
|
|
26
|
+
(`#f9fbfa`); corners are rounder than a terminal — 8px default, 12px cards — and the single primary
|
|
27
|
+
action keeps MongoDB's signature pill. Density is `standard` and comfortable (44px controls).
|
|
28
|
+
|
|
29
|
+
## 2 Color Roles
|
|
30
|
+
|
|
31
|
+
Light values first. One accent — `primary` is the only chromatic hue that carries meaning; the
|
|
32
|
+
category palette (purple, orange, pink, blue) survives only as chart encoding, never as chrome.
|
|
33
|
+
|
|
34
|
+
| Role | Value | Allowed where |
|
|
35
|
+
| --- | --- | --- |
|
|
36
|
+
| `background` / `card` / `popover` | white `#ffffff` (canvas) | page, cards, and overlays — the dominant surface |
|
|
37
|
+
| `foreground` | deep navy-teal `#001e2b` (ink) | all primary ink |
|
|
38
|
+
| `muted` / `secondary` | cool-green tint `#f4f7f6` (surface-soft) | hover rows, subtle fills, secondary buttons |
|
|
39
|
+
| `muted-foreground` | steel `#5c6c7a` | labels, captions, secondary text |
|
|
40
|
+
| `border` | hairline `#e1e5e8` | every separator, grid line, and card edge |
|
|
41
|
+
| `input` | stronger hairline `#c1ccd6` | field edges — MongoDB draws inputs on the firmer hairline |
|
|
42
|
+
| `primary` | bright MongoDB green `#00ed64` | the one primary action; active nav; key interactive detail |
|
|
43
|
+
| `primary-foreground` | deep navy `#001e2b` (on-primary) | label on green — dark, never white |
|
|
44
|
+
| `accent` | pale mint `#e3fcef` (surface-feature) | selected/hovered rows and nav, on-accent surfaces only |
|
|
45
|
+
| `accent-foreground` | deep green `#00684a` (brand-green-dark) | text and icon on the mint tint |
|
|
46
|
+
| `ring` | deep green `#00684a` | the focus outline — MongoDB draws focus in brand-green-dark, 2px |
|
|
47
|
+
| `destructive` | red `#d92d20` | destructive actions and error state only |
|
|
48
|
+
| `success` / `warning` | mid green `#00a35c` / amber `#946f3f` | status signalling only, never chrome |
|
|
49
|
+
|
|
50
|
+
The category accents — purple `#7b3ff2`, orange `#fa6e39`, pink `#f06bb8`, blue `#3d4f9f` — are brand
|
|
51
|
+
graces for data encoding: they carry no chrome role here (see §7), only `chart-*`.
|
|
52
|
+
|
|
53
|
+
## 3 Typography
|
|
54
|
+
|
|
55
|
+
One sans, one mono. `font-sans` is Euclid Circular A — MongoDB's geometric display face; UI, body, and
|
|
56
|
+
headings all ride it, and heading weight, not a second family, carries the voice. `font-mono` is Source
|
|
57
|
+
Code Pro for IDs, codes, timestamps, log lines; numeric columns render `tabular-nums`. MongoDB's
|
|
58
|
+
display ramp (72–36px, weight 500, negative tracking) is marketing-scale and stays behind; the operator
|
|
59
|
+
ramp keeps the tightened, geometric character at console sizes.
|
|
60
|
+
|
|
61
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
62
|
+
| --- | --- | --- | --- |
|
|
63
|
+
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
64
|
+
| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
65
|
+
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
66
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
67
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
68
|
+
| caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+1px`, uppercase |
|
|
69
|
+
|
|
70
|
+
MongoDB reserves weight 600 for buttons and emphasis; that becomes the operator strong weight. Bump
|
|
71
|
+
weight one step for emphasis; never change size to emphasize.
|
|
72
|
+
|
|
73
|
+
## 4 Component Stylings
|
|
74
|
+
|
|
75
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
76
|
+
|
|
77
|
+
- **Button** — `primary`: filled `primary` on `primary-foreground` (dark label on bright green), pilled
|
|
78
|
+
(`9999` — the one brand carry, §7). Secondary: transparent, `input` border, `foreground`, standard
|
|
79
|
+
`radius`. Ghost: transparent, `accent` on hover.
|
|
80
|
+
- **Input** — `background` fill, 1px `input` border (`border-weight`), standard `radius`; focus draws
|
|
81
|
+
the `ring` at 2px (brand-green-dark), no glow.
|
|
82
|
+
- **Card** — `card` surface, 1px `border`, 12px corner (the `lg` step); shadow only when lifted
|
|
83
|
+
(`shadow-intensity`); inset by `density-inset`.
|
|
84
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
85
|
+
numeric columns; selection tints `accent` (pale mint).
|
|
86
|
+
- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`),
|
|
87
|
+
beside the work, not over it.
|
|
88
|
+
- **Badge** — hairline `border`, `muted`/status fill, uppercase caption, 6px corner; status badges take
|
|
89
|
+
`success` / `warning` / `destructive`, never `primary`.
|
|
90
|
+
|
|
91
|
+
## 5 Layout
|
|
92
|
+
|
|
93
|
+
Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64`
|
|
94
|
+
(MongoDB's 20 and 40 steps survive the marketing trim). Shell dimensions map one-to-one to the layout
|
|
95
|
+
primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (56px,
|
|
96
|
+
honoring MongoDB's breathier chrome), side panel `side-panel-width` / `side-panel-width-rich`, modal cap
|
|
97
|
+
`modal-width-max`, forms `form-max-width`, tables full-width. Controls sit at MongoDB's comfortable 44px
|
|
98
|
+
(`table-row-height`). Density is governed globally by `density-tier` and stepped per archetype by the
|
|
99
|
+
surface catalog — never by absolute overrides.
|
|
100
|
+
|
|
101
|
+
## 6 Depth
|
|
102
|
+
|
|
103
|
+
Nearly flat. Hierarchy comes from the surface ladder and hairlines; shadow is soft and navy-tinted
|
|
104
|
+
(`rgba(0,30,43,·)`, MongoDB's own elevation color), reserved for lift:
|
|
105
|
+
|
|
106
|
+
- **0 — canvas** `background`, no border.
|
|
107
|
+
- **1 — panel / card** `card` on a 1px `border`; a whisper of shadow only when it must lift off canvas.
|
|
108
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
109
|
+
shadow. Rank is border and position, never a heavier stack.
|
|
110
|
+
|
|
111
|
+
Focus is a 2px `ring` outline in brand-green-dark (never a glow) on every interactive element. Three
|
|
112
|
+
z-levels: content, sticky chrome, overlay.
|
|
113
|
+
|
|
114
|
+
## 7 Do's & Don'ts
|
|
115
|
+
|
|
116
|
+
- **Do** reserve `primary` (MongoDB green) for the single most important action; keep its dark navy
|
|
117
|
+
label (`primary-foreground`) — bright green never carries white text.
|
|
118
|
+
- **Do** carry hierarchy with hairlines, weight, and the cool surface ladder — the brand is near-flat.
|
|
119
|
+
- **Do** apply `tabular-nums` to every numeric column and Source Code Pro to IDs, codes, and timestamps.
|
|
120
|
+
- **Do** pill the single primary action — MongoDB's signature; the one place `9999` is allowed.
|
|
121
|
+
- **Don't** pill anything else; secondary, ghost, inputs, cards, and badges take the standard scale.
|
|
122
|
+
- **Don't** promote a second chromatic accent. The category colors (purple, orange, pink, blue) are
|
|
123
|
+
chart encoding only — a purple "info" chip or orange "warning" reads as marketing.
|
|
124
|
+
- **Don't** reach for a dark navy-teal hero band or 72px display type — those are marketing surfaces.
|
|
125
|
+
- **Don't** open detail or edit in a modal when the side panel fits, and don't signal elevation with
|
|
126
|
+
heavy drop shadows.
|
|
127
|
+
|
|
128
|
+
## 8 Responsive
|
|
129
|
+
|
|
130
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
131
|
+
|
|
132
|
+
| Breakpoint | What changes |
|
|
133
|
+
| --- | --- |
|
|
134
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
135
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
136
|
+
| 1024 | sidebar expands; two-pane queue+detail holds side by side |
|
|
137
|
+
| 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
|
|
138
|
+
|
|
139
|
+
## 9 Agent Prompt Guide
|
|
140
|
+
|
|
141
|
+
This entry lets an internal tool — a cluster console, a query dashboard, a fleet CRM — be synthesized
|
|
142
|
+
in MongoDB's language. What carries and what stays behind:
|
|
143
|
+
|
|
144
|
+
- **Carries:** the bright green single accent (dark navy label on it); deep navy-teal ink over cool
|
|
145
|
+
green-tinted surfaces; the pale-mint selection tint; Euclid Circular A as the type voice; Source Code
|
|
146
|
+
Pro for IDs and log lines; the rounder 8/12px radius; MongoDB's category palette as the `chart-*` set.
|
|
147
|
+
- **Stays behind:** dark navy-teal hero bands, 72px display type, category colors as chrome, the pill on
|
|
148
|
+
every button.
|
|
149
|
+
- Lead every list with its table; lead every entity with its primary read, not its chrome.
|
|
150
|
+
- Accent only the primary action, and pill only that one action. If two things want the green, one is
|
|
151
|
+
not primary.
|
|
152
|
+
- Every numeric column is `tabular-nums`; every ID / code / timestamp is Source Code Pro.
|
|
153
|
+
- Detail and edit go in the side panel; a modal is a confirmation. Every workflow completes from the
|
|
154
|
+
keyboard; the brand-green-dark `ring` outline is always visible.
|
|
155
|
+
- Stay near-flat — hairline and the cool surface ladder before shadow; reach past a hairline only for a
|
|
156
|
+
real overlay.
|
|
157
|
+
|
|
158
|
+
```yaml design-primitives
|
|
159
|
+
radius: 8px # derived: MongoDB's md/input radius — rounder than a terminal, cards step to 12px, primary action pills
|
|
160
|
+
shadow-intensity: 0.5 # derived: MongoDB uses genuine but soft navy-tinted elevation (alpha 0.04–0.16); one step over a purely flat brand
|
|
161
|
+
border-weight: 1px
|
|
162
|
+
density-gap: 1
|
|
163
|
+
density-inset: 1
|
|
164
|
+
font-sans: Euclid Circular A, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
|
|
165
|
+
font-mono: Source Code Pro, SFMono-Regular, Menlo, Consolas, monospace
|
|
166
|
+
font-weight-normal: 400
|
|
167
|
+
font-weight-strong: 600 # derived: MongoDB reserves 600 for buttons and emphasis; display weight 500 is marketing-scale and stays behind
|
|
168
|
+
heading-tracking: -0.01em # derived: MongoDB tracks display negative (-1.5 to -0.5px); scaled to a subtle operator-heading tighten
|
|
169
|
+
duration-unit: 50ms
|
|
170
|
+
duration-fast: 100ms
|
|
171
|
+
duration-normal: 150ms
|
|
172
|
+
duration-slow: 200ms # derived: corpus recommends 150–200ms ease; motion timings were not extracted
|
|
173
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus does not state an easing; standard operator ease
|
|
174
|
+
contrast-boost: 1
|
|
175
|
+
icon-stroke: 1.75 # derived: corpus names no icon library; lucide at a refined operator stroke
|
|
176
|
+
icon-size-base: 16px
|
|
177
|
+
sidebar-width-expanded: 248px # derived: no operator shell in a marketing corpus; standard operator sidebar
|
|
178
|
+
sidebar-width-collapsed: 56px # derived: standard operator icon-rail width
|
|
179
|
+
topbar-height: 56px # derived: MongoDB's ~64px marketing nav tightened to a slightly-taller-than-baseline operator bar
|
|
180
|
+
side-panel-width: 420px # derived: standard operator detail-panel width
|
|
181
|
+
side-panel-width-rich: 640px # derived: standard content-heavy panel width
|
|
182
|
+
modal-width-max: 560px # derived: standard operator confirmation-modal cap
|
|
183
|
+
form-max-width: 640px # derived: standard operator form column
|
|
184
|
+
table-row-height: 44px # derived: MongoDB's 44px control height carries as a comfortable operator row
|
|
185
|
+
verbosity: default
|
|
186
|
+
feedback: subtle
|
|
187
|
+
density-tier: standard # derived: MongoDB reads comfortable and breathable, not terminal-dense; archetypes step denser per the surface catalog
|
|
188
|
+
product-traits: [dev-tools, database, dashboard, cloud-console]
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
```yaml lever-manifest
|
|
192
|
+
version: 1
|
|
193
|
+
fonts: { sans: "Euclid Circular A, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif", mono: "Source Code Pro, SFMono-Regular, Menlo, Consolas, monospace" }
|
|
194
|
+
color-tokens:
|
|
195
|
+
light:
|
|
196
|
+
background: "#ffffff"
|
|
197
|
+
foreground: "#001e2b"
|
|
198
|
+
card: "#ffffff"
|
|
199
|
+
card-foreground: "#001e2b"
|
|
200
|
+
muted: "#f4f7f6"
|
|
201
|
+
muted-foreground: "#5c6c7a"
|
|
202
|
+
border: "#e1e5e8"
|
|
203
|
+
input: "#c1ccd6"
|
|
204
|
+
ring: "#00684a"
|
|
205
|
+
primary: "#00ed64"
|
|
206
|
+
primary-foreground: "#001e2b"
|
|
207
|
+
accent: "#e3fcef"
|
|
208
|
+
accent-foreground: "#00684a"
|
|
209
|
+
destructive: "#d92d20" # derived: MongoDB defines no error red; a clean red tuned to the cool navy base
|
|
210
|
+
destructive-foreground: "#ffffff"
|
|
211
|
+
success: "#00a35c" # derived: brand-green-mid, deliberately deeper than the bright CTA so status reads as status
|
|
212
|
+
warning: "#946f3f"
|
|
213
|
+
popover: "#ffffff"
|
|
214
|
+
popover-foreground: "#001e2b"
|
|
215
|
+
secondary: "#f4f7f6"
|
|
216
|
+
secondary-foreground: "#001e2b"
|
|
217
|
+
chart-1: "#00684a" # derived: brand-green-dark anchors the chart set — readable green on white
|
|
218
|
+
chart-2: "#3d4f9f" # derived: accent-blue from MongoDB's category palette
|
|
219
|
+
chart-3: "#7b3ff2" # derived: accent-purple from the category palette
|
|
220
|
+
chart-4: "#fa6e39" # derived: accent-orange from the category palette
|
|
221
|
+
chart-5: "#f06bb8" # derived: accent-pink from the category palette
|
|
222
|
+
sidebar: "#f9fbfa"
|
|
223
|
+
sidebar-foreground: "#001e2b"
|
|
224
|
+
sidebar-primary: "#00ed64"
|
|
225
|
+
sidebar-primary-foreground: "#001e2b"
|
|
226
|
+
sidebar-accent: "#e3fcef"
|
|
227
|
+
sidebar-accent-foreground: "#00684a"
|
|
228
|
+
sidebar-border: "#e1e5e8"
|
|
229
|
+
sidebar-ring: "#00684a"
|
|
230
|
+
spacing-scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64]
|
|
231
|
+
radius-scale: [0, 4, 6, 8, 12, 9999]
|
|
232
|
+
shadow-levels: [none, sm, md]
|
|
233
|
+
motion: { durations: [100, 150, 200], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
234
|
+
icons: { family: lucide, stroke: 1.75 }
|
|
235
|
+
accent-count: 1
|
|
236
|
+
```
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
schema: design-md/v1
|
|
3
|
+
product: Notion
|
|
4
|
+
provenance: library
|
|
5
|
+
sourced: 2026-07-04
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Notion — the warm-editorial operator design
|
|
9
|
+
|
|
10
|
+
The operator reading of Notion's brand: a warm, paper-toned workspace where hierarchy is carried by
|
|
11
|
+
hairlines and type weight, a single purple reserved for the one action that matters, and sober
|
|
12
|
+
rectangular geometry — never pills. What carries is the temperament — warm-charcoal ink over off-white
|
|
13
|
+
paper, beige hairline discipline, the 8px-button / 12px-card rhythm, one purple signal. What stays
|
|
14
|
+
behind: the deep-navy marketing hero band, the pastel feature-card rainbow, the 80px display. Judgments
|
|
15
|
+
away from the marketing brand are annotated `# derived:`.
|
|
16
|
+
|
|
17
|
+
## 1 Visual Theme
|
|
18
|
+
|
|
19
|
+
Light by default; dark is opt-in. Flat: structure comes from a warm hairline `border`, type weight, and
|
|
20
|
+
contrast — never heavy shadow. A single accent, Notion `primary` (signature purple), reserved for the
|
|
21
|
+
one dominant action on a surface. The neutral ramp is Notion's defining trait — it leans *warm*, not
|
|
22
|
+
cool-slate: warm-charcoal ink, faint paper off-white surfaces, beige-tinted hairlines, so the UI reads
|
|
23
|
+
editorial and calm rather than clinical. The anchor surface is a white content canvas beside a warm
|
|
24
|
+
off-white `sidebar`. Geometry is sober-rectangular — 8px buttons, 12px cards, pills for status badges
|
|
25
|
+
only. Density is `standard`: comfortable, dense-capable in tables, never cramped.
|
|
26
|
+
|
|
27
|
+
## 2 Color Roles
|
|
28
|
+
|
|
29
|
+
Light values first. One accent — `primary` purple is the only chromatic hue that carries an action;
|
|
30
|
+
inline links stay a distinct blue; status hues speak only status; the pastel rainbow does not enter
|
|
31
|
+
operator chrome.
|
|
32
|
+
|
|
33
|
+
| Role | Value | Allowed where |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| `background` / `card` / `popover` | canvas white `#ffffff` | page, cards, and overlays — the dominant surface |
|
|
36
|
+
| `foreground` | warm charcoal `#37352f` | all primary ink (Notion's signature product text color) |
|
|
37
|
+
| `muted` / `secondary` | paper off-white `#f6f5f4` | hover rows, subtle fills, secondary buttons |
|
|
38
|
+
| `muted-foreground` | warm slate `#5d5b54` | labels, captions, secondary text |
|
|
39
|
+
| `border` | warm hairline `#e5e3df` | every separator, grid line, and card edge |
|
|
40
|
+
| `input` | stronger hairline `#c8c4be` | field edges — one step darker than `border`, so inputs read as targets |
|
|
41
|
+
| `primary` | Notion purple `#5645d4` | the one primary action; active nav; key interactive detail |
|
|
42
|
+
| `accent` | lavender tint `#e6e0f5` | selected/hovered rows and nav — the purple's soft cousin |
|
|
43
|
+
| `accent-foreground` | deep purple `#391c57` | text and icons on `accent` fills |
|
|
44
|
+
| `ring` | `primary` | the focus outline — unmistakable, because keyboard-first |
|
|
45
|
+
| `destructive` | red `#e03131` | destructive actions and error state only |
|
|
46
|
+
| `success` / `warning` | green `#1aae39` / orange `#dd5b00` | status signalling only, never chrome |
|
|
47
|
+
|
|
48
|
+
Inline text links use link-blue `#0075de`, kept distinct from `primary` purple (a Notion rule: links and
|
|
49
|
+
CTAs never share a hue). The pastel feature tints and the navy hero are brand graces — no operator role (§7).
|
|
50
|
+
|
|
51
|
+
## 3 Typography
|
|
52
|
+
|
|
53
|
+
One sans, one mono. `font-sans` is Inter — Notion Sans is an Inter-based proprietary variable face, so the
|
|
54
|
+
operator wears its documented fallback; body, UI, and headings all ride it, with weight and tracking (not
|
|
55
|
+
a second family) carrying the display voice. `font-mono` serves IDs, codes, timestamps, and log lines.
|
|
56
|
+
Numeric columns render `tabular-nums` so figures align down a column (floor P4).
|
|
57
|
+
|
|
58
|
+
| Step | Role | Size · line | Weight · tracking |
|
|
59
|
+
| --- | --- | --- | --- |
|
|
60
|
+
| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
|
|
61
|
+
| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
|
|
62
|
+
| h3 | card / group head | 15px / 1.4 | `font-weight-strong` · `heading-tracking` |
|
|
63
|
+
| body | UI + prose | 14px / 1.5 | `font-weight-normal` |
|
|
64
|
+
| small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
|
|
65
|
+
| caption | uppercase eyebrow | 11px / 1.4 | `font-weight-strong`, `+0.09em`, uppercase |
|
|
66
|
+
|
|
67
|
+
Notion's generous body leading (1.5) survives for readability; headings track negative, matching Notion's
|
|
68
|
+
tight display letter-spacing. Bump weight one step for emphasis — never change size to emphasize.
|
|
69
|
+
|
|
70
|
+
## 4 Component Stylings
|
|
71
|
+
|
|
72
|
+
Every recurring operator component composes from the primitives — no literal values.
|
|
73
|
+
|
|
74
|
+
- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius` (8px rectangle), no pill.
|
|
75
|
+
Secondary: `background` fill, 1px `input` border, `foreground`. Ghost: transparent, `accent` on hover.
|
|
76
|
+
- **Input** — `background` fill, 1px `input` border (`border-weight`), `radius`; focus draws the `ring` at
|
|
77
|
+
full 2px, no glow.
|
|
78
|
+
- **Card** — `card` surface, 1px `border`, `radius` (12px), shadow only when lifted (`shadow-intensity`);
|
|
79
|
+
inset by `density-inset`.
|
|
80
|
+
- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
|
|
81
|
+
numeric columns; row selection tints `accent` (lavender).
|
|
82
|
+
- **Side panel** — detail and edit open beside the work (`side-panel-width` / `side-panel-width-rich`),
|
|
83
|
+
not over it (floor P3).
|
|
84
|
+
- **Badge** — status badges take the pill radius (`9999`) with `success` / `warning` / `destructive`
|
|
85
|
+
fills; a feature tag chip is a soft `radius`-4 rectangle in `accent` on `accent-foreground`.
|
|
86
|
+
|
|
87
|
+
## 5 Layout
|
|
88
|
+
|
|
89
|
+
Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `4 · 8 · 12 · 16 · 20 · 24 ·
|
|
90
|
+
32 · 40 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives: sidebar
|
|
91
|
+
`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
|
|
92
|
+
`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables
|
|
93
|
+
full-width. Density is governed globally by `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
|
|
94
|
+
|
|
95
|
+
## 6 Depth
|
|
96
|
+
|
|
97
|
+
Flat. Hierarchy comes from the warm surface ladder and hairlines, not shadow:
|
|
98
|
+
|
|
99
|
+
- **0 — canvas** `background`, no border.
|
|
100
|
+
- **1 — panel / card** `card` on a 1px `border`; a soft low-alpha `sm` shadow only when a tile must lift.
|
|
101
|
+
- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
|
|
102
|
+
shadow (Notion's shadows are near-black at very low alpha, diffuse, never harsh). Rank is border and
|
|
103
|
+
position, never a heavier shadow.
|
|
104
|
+
|
|
105
|
+
Focus is a 2px `ring` outline in `primary` (never a glow), visible on every interactive element (floor
|
|
106
|
+
P6). Three z-levels: content, sticky chrome, overlay.
|
|
107
|
+
|
|
108
|
+
## 7 Do's & Don'ts
|
|
109
|
+
|
|
110
|
+
- **Do** reserve `primary` purple for the single most important action; everything else is neutral or status.
|
|
111
|
+
- **Do** keep the neutrals warm — charcoal ink, paper off-white fills, beige hairlines. Cool slate reads as a different product.
|
|
112
|
+
- **Do** carry hierarchy with hairlines, weight, and whitespace — Notion is predominantly flat.
|
|
113
|
+
- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
|
|
114
|
+
- **Don't** pill the primary CTA — Notion buttons are 8px rectangles; pills are for status badges only.
|
|
115
|
+
- **Don't** promote a second chromatic accent. The pastel rainbow stays marketing-decorative; status uses `success` / `warning` / `destructive`, selection uses `accent`.
|
|
116
|
+
- **Don't** color inline links purple — links are link-blue, distinct from the `primary` CTA hue.
|
|
117
|
+
- **Don't** signal elevation with heavy drop shadows or reach for the navy hero band as a surface.
|
|
118
|
+
|
|
119
|
+
## 8 Responsive
|
|
120
|
+
|
|
121
|
+
The operator sweep is 375 / 768 / 1024 / 1440.
|
|
122
|
+
|
|
123
|
+
| Breakpoint | What changes |
|
|
124
|
+
| --- | --- |
|
|
125
|
+
| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
|
|
126
|
+
| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
|
|
127
|
+
| 1024 | sidebar expands; two-pane list+detail holds side by side |
|
|
128
|
+
| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
|
|
129
|
+
|
|
130
|
+
## 9 Agent Prompt Guide
|
|
131
|
+
|
|
132
|
+
Directives the emitting agent follows verbatim:
|
|
133
|
+
|
|
134
|
+
- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
|
|
135
|
+
- Keep the neutral ramp warm — charcoal ink on paper off-white, beige hairlines. Do not cool it to slate.
|
|
136
|
+
- Accent only the primary action with purple. Inline links are link-blue; the two hues never merge.
|
|
137
|
+
- Selection and hover tint `accent` (lavender); the pastel rainbow and the navy hero stay behind.
|
|
138
|
+
- Sober rectangles: 8px buttons, 12px cards. Pills are for status badges only — never the CTA.
|
|
139
|
+
- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
|
|
140
|
+
- Every workflow completes from the keyboard, `ring` focus always visible (P6); stay flat — hairline and weight before shadow, reaching past a hairline only for a real overlay.
|
|
141
|
+
|
|
142
|
+
```yaml design-primitives
|
|
143
|
+
radius: 8px # derived: Notion button/input radius (md 8px) is the base component radius; scale offers 12px for cards
|
|
144
|
+
shadow-intensity: 0.5 # derived: Notion cards carry soft low-alpha shadows over a flat docs base — moderate lift, never harsh
|
|
145
|
+
border-weight: 1px
|
|
146
|
+
density-gap: 1
|
|
147
|
+
density-inset: 1
|
|
148
|
+
font-sans: Inter, system-ui, sans-serif # derived: Notion Sans is proprietary Inter-based; the operator wears its documented Inter fallback
|
|
149
|
+
font-mono: ui-monospace, SFMono-Regular, Menlo, monospace # derived: corpus ships no branded mono; the system mono stack matches Notion's restrained editorial voice
|
|
150
|
+
font-weight-normal: 400
|
|
151
|
+
font-weight-strong: 600 # Notion headings are 600
|
|
152
|
+
heading-tracking: -0.015em # derived: Notion tracks display sizes negative (-0.5px at 48px, -2px hero); proportional negative tracking at operator heading sizes
|
|
153
|
+
duration-unit: 50ms # derived: corpus records no motion; standard operator base
|
|
154
|
+
duration-fast: 100ms # derived: standard operator fast tier
|
|
155
|
+
duration-normal: 160ms # derived: corpus recommends 150–200ms ease
|
|
156
|
+
duration-slow: 240ms # derived: top of the corpus-recommended 150–200ms band, rounded for slow tier
|
|
157
|
+
ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent on easing; standard operator ease
|
|
158
|
+
contrast-boost: 1 # Notion's hairlines are soft and low-contrast by design; no boost
|
|
159
|
+
icon-stroke: 1.5 # derived: Notion's iconography reads light and editorial — one step under the operator 1.75 default
|
|
160
|
+
icon-size-base: 16px
|
|
161
|
+
sidebar-width-expanded: 248px # derived: marketing corpus has no app sidebar; standard operator width, matching Notion's ~240px product rail
|
|
162
|
+
sidebar-width-collapsed: 56px # derived: standard operator icon rail
|
|
163
|
+
topbar-height: 56px # derived: Notion marketing nav is ~64px; tightened one step for an operator topbar
|
|
164
|
+
side-panel-width: 420px # derived: standard operator detail-panel width
|
|
165
|
+
side-panel-width-rich: 640px # derived: content-heavy panel, matching Notion's editorial reading measure
|
|
166
|
+
modal-width-max: 560px # derived: standard operator modal cap
|
|
167
|
+
form-max-width: 640px # derived: Notion's editorial content column reads ~640px
|
|
168
|
+
table-row-height: 40px # derived: comfortable standard row; dense archetypes step down via the surface catalog
|
|
169
|
+
verbosity: default
|
|
170
|
+
feedback: subtle
|
|
171
|
+
density-tier: standard # derived: Notion marketing breathes, but its database/table product runs at a comfortable standard density — the operator mirrors the product, not the marketing
|
|
172
|
+
product-traits: [workspace, docs, knowledge-base, crm, dashboard]
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```yaml lever-manifest
|
|
176
|
+
version: 1
|
|
177
|
+
fonts: { sans: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
|
|
178
|
+
color-tokens:
|
|
179
|
+
light:
|
|
180
|
+
background: "#ffffff"
|
|
181
|
+
foreground: "#37352f"
|
|
182
|
+
card: "#ffffff"
|
|
183
|
+
card-foreground: "#37352f"
|
|
184
|
+
muted: "#f6f5f4"
|
|
185
|
+
muted-foreground: "#5d5b54"
|
|
186
|
+
border: "#e5e3df"
|
|
187
|
+
input: "#c8c4be"
|
|
188
|
+
ring: "#5645d4"
|
|
189
|
+
primary: "#5645d4"
|
|
190
|
+
primary-foreground: "#ffffff"
|
|
191
|
+
accent: "#e6e0f5"
|
|
192
|
+
accent-foreground: "#391c57"
|
|
193
|
+
destructive: "#e03131"
|
|
194
|
+
destructive-foreground: "#ffffff"
|
|
195
|
+
success: "#1aae39"
|
|
196
|
+
warning: "#dd5b00"
|
|
197
|
+
popover: "#ffffff"
|
|
198
|
+
popover-foreground: "#37352f"
|
|
199
|
+
secondary: "#f6f5f4"
|
|
200
|
+
secondary-foreground: "#37352f"
|
|
201
|
+
chart-1: "#5645d4"
|
|
202
|
+
chart-2: "#2a9d99"
|
|
203
|
+
chart-3: "#1aae39"
|
|
204
|
+
chart-4: "#dd5b00"
|
|
205
|
+
chart-5: "#ff64c8"
|
|
206
|
+
sidebar: "#f6f5f4"
|
|
207
|
+
sidebar-foreground: "#37352f"
|
|
208
|
+
sidebar-primary: "#5645d4"
|
|
209
|
+
sidebar-primary-foreground: "#ffffff"
|
|
210
|
+
sidebar-accent: "#e6e0f5"
|
|
211
|
+
sidebar-accent-foreground: "#391c57"
|
|
212
|
+
sidebar-border: "#e5e3df"
|
|
213
|
+
sidebar-ring: "#5645d4"
|
|
214
|
+
spacing-scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64]
|
|
215
|
+
radius-scale: [4, 6, 8, 12, 16, 9999]
|
|
216
|
+
shadow-levels: [none, sm, md]
|
|
217
|
+
motion: { durations: [100, 160, 240], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
|
|
218
|
+
icons: { family: lucide, stroke: 1.5 }
|
|
219
|
+
accent-count: 1
|
|
220
|
+
```
|