@nurix/etna 0.18.19 → 0.18.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/data/harness-index.json +1 -1
  2. package/data/harnesses/code/harness.json +2 -2
  3. package/data/harnesses/code/skills/design/SKILL.md +65 -0
  4. package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
  5. package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
  6. package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
  7. package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
  8. package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
  9. package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
  10. package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
  11. package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
  12. package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
  13. package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
  14. package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
  15. package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
  16. package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
  17. package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
  18. package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
  19. package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
  20. package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
  21. package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
  22. package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
  23. package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
  24. package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
  25. package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
  26. package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
  27. package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
  28. package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
  29. package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
  30. package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
  31. package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
  32. package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
  33. package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
  34. package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
  35. package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
  36. package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
  37. package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
  38. package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
  39. package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
  40. package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
  41. package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
  42. package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
  43. package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
  44. package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
  45. package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
  46. package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
  47. package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
  48. package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
  49. package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
  50. package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
  51. package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
  52. package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
  53. package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
  54. package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
  55. package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
  56. package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
  57. package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
  58. package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
  59. package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
  60. package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
  61. package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
  62. package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
  63. package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
  64. package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
  65. package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
  66. package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
  67. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
  68. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
  69. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
  70. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
  71. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
  72. package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
  73. package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
  74. package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
  75. package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
  76. package/data/harnesses/code/skills/design/references/create.md +126 -0
  77. package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
  78. package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
  79. package/data/harnesses/code/skills/design/references/improve.md +85 -0
  80. package/data/harnesses/code/skills/design/references/interaction.md +77 -0
  81. package/data/harnesses/code/skills/design/references/introspect.md +100 -0
  82. package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
  83. package/data/harnesses/code/skills/design/references/personality.md +504 -0
  84. package/data/harnesses/code/skills/design/references/structure.md +138 -0
  85. package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
  86. package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
  87. package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
  88. package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
  89. package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
  90. package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
  91. package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
  92. package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
  93. package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
  94. package/package.json +1 -1
@@ -0,0 +1,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
+ ```