@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,235 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Airbnb
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Airbnb — the operator reading
9
+
10
+ The warm marketplace brand rendered for internal tools. Airbnb's public surfaces are photography-led
11
+ and generous; an operator surface wearing this brand keeps the palette, the single warm voltage, the
12
+ soft corners, and the modest type voice, but leaves the marketing chrome behind — the pill search bar,
13
+ the 64px rating hero, the 80px nav, and the hand-illustrated product glyphs do not follow the brand
14
+ into a queue or a console. What carries is the feel: pure-white canvas, near-black ink (never pure
15
+ black), one Rausch accent used scarcely, flat depth with a single soft shadow tier, and rounded
16
+ everything. Both machine blocks are fully valued; every judgment past the corpus is annotated
17
+ `# derived:`.
18
+
19
+ ## 1 Visual Theme
20
+
21
+ Light only — Airbnb ships no dark mode on the public web, so light is the default and dark is a
22
+ foreign opt-in, not a native mode. Flat: depth comes from white-on-white surface separation, hairline
23
+ `border`, and rounded-corner clipping, not from layered shadows (there is exactly one soft shadow
24
+ tier). A single accent, Rausch (`primary`, brand `#ff385c`), carries the one action that matters on a
25
+ surface and nothing else. Ink is a deep near-black slate (`foreground`, brand `#222222`), never pure
26
+ `#000000`. The anchor surface is a pure-white content canvas beside a faintly warm-gray `sidebar`.
27
+ Corners are soft throughout — `radius` on buttons and inputs, a larger step on cards, pill on badges —
28
+ there is no hard corner except the body grid. Density is `standard` with a generous per-dimension lean:
29
+ the brand breathes, but marketplace pages already run tighter than SaaS marketing, so the operator
30
+ reading holds standard rather than airy.
31
+
32
+ ## 2 Color Roles
33
+
34
+ Light values (the manifest carries the exact hex — Airbnb's native format). One accent: Rausch is the
35
+ only chromatic hue that carries meaning; status hues speak only status.
36
+
37
+ | Role | Value | Allowed where |
38
+ | --- | --- | --- |
39
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
40
+ | `foreground` | ink `#222222` | all primary ink; never pure black |
41
+ | `muted` | soft gray `#f7f7f7` | hover rows, disabled fields, subtle fills |
42
+ | `muted-foreground` | mid gray `#6a6a6a` | labels, captions, secondary text, inactive tabs |
43
+ | `secondary` | stronger gray `#f2f2f2` | secondary buttons, circular icon-button surfaces |
44
+ | `border` / `input` | hairline `#dddddd` | every separator, grid line, and field edge |
45
+ | `primary` | Rausch `#ff385c` | the one primary action; active nav; the single warm voltage |
46
+ | `accent` | pale Rausch `#ffe8ec` | selected/hovered rows and nav — a whisper of brand warmth |
47
+ | `ring` | ink `#222222` | the focus outline — Airbnb focuses with ink, not a colored glow |
48
+ | `destructive` | error red `#c13515` | destructive actions and error text only — distinct from Rausch |
49
+ | `success` / `warning` | green / amber | status signalling only, never chrome |
50
+
51
+ Luxe purple (`#460479`), Plus magenta (`#92174d`), and the legal-link blue (`#428bff`) are sub-brand
52
+ graces — they carry no operator role and never become a second accent (see §7). Star ratings render in
53
+ ink, not gold, and that carries over: numbers are ink, not a yellow accent.
54
+
55
+ ## 3 Typography
56
+
57
+ One sans, one mono. `font-sans` is Airbnb Cereal VF (with Circular and Inter as the licensed/open
58
+ fallbacks — Inter is the closest open substitute); the whole ramp rides it, display voice carried by
59
+ size and modest weight, not a second family. Airbnb runs deliberately modest weights — `font-weight-strong`
60
+ stops at 600, never the 700+ that fintech and enterprise systems lean on. `font-mono` is derived: Airbnb
61
+ ships no monospace, but operator IDs, codes, and timestamps need one. Numeric columns render
62
+ `tabular-nums` so figures align down a column.
63
+
64
+ | Step | Role | Size · line | Weight · tracking |
65
+ | --- | --- | --- | --- |
66
+ | h1 | page title | 22px / 1.2 | `font-weight-strong` · `heading-tracking` |
67
+ | h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
68
+ | h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
69
+ | body | UI + prose | 14px / 1.45 | `font-weight-normal` |
70
+ | small | labels, meta, dense table | 13px / 1.3 | `font-weight-normal` |
71
+ | caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
72
+
73
+ The 64px rating display and the 28px marketing hero stay behind — that peak-scale typographic moment is
74
+ a marketing trust signal, not operator chrome. Bump weight one step for emphasis; never reach past 600.
75
+
76
+ ## 4 Component Stylings
77
+
78
+ Every recurring operator component composes from the primitives — no literal values.
79
+
80
+ - **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, no pill (the pill CTA is a
81
+ marketing form and stays behind). Secondary: `card` fill, 1px `border`, `foreground`. Ghost:
82
+ transparent, `accent` on hover.
83
+ - **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; on focus the border thickens toward
84
+ 2px and flips to `ring` (ink) — no glow, no colored ring, the signature Airbnb focus.
85
+ - **Card** — `card` surface, 1px `border`, a larger corner step from the radius scale, one soft shadow
86
+ only when floated (`shadow-intensity`); inset by `density-inset`.
87
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
88
+ numeric columns; row selection tints `accent`.
89
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
90
+ for content-heavy), beside the work, not over it.
91
+ - **Badge** — pill (the largest radius step), hairline `border`, `muted`/status fill, uppercase caption;
92
+ status badges take `success` / `warning` / `destructive`, never `primary`.
93
+
94
+ ## 5 Layout
95
+
96
+ Base spacing unit 4px (with a 2px micro-step); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48
97
+ · 64`. Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
98
+ `sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
99
+ `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Card
100
+ internal padding runs generous (24px on rich cards, 16px on meta blocks). Density is governed globally
101
+ by `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
102
+
103
+ ## 6 Depth
104
+
105
+ Flat. Hierarchy comes from the surface ladder, hairlines, and rounded-corner clipping — not shadow:
106
+
107
+ - **0 — canvas** `background`, no border.
108
+ - **1 — panel / card** `card` on a 1px `border`; the one soft shadow tier only when a card must float off
109
+ the canvas.
110
+ - **2 — overlay** `popover` / side panel / modal — the same single soft shadow, over a black scrim at 50%
111
+ opacity for modals. No level stacks a heavier shadow to signal rank; rank is border and position.
112
+
113
+ Focus is a 2px `ring` outline in ink (never a glow, never a colored ring), visible on every interactive
114
+ element. Three z-levels: content, sticky chrome, overlay.
115
+
116
+ ## 7 Do's & Don'ts
117
+
118
+ - **Do** reserve `primary` (Rausch) for the single most important action on a surface; everything else is
119
+ neutral or status. Most surfaces are 90% white + ink with one Rausch moment.
120
+ - **Do** keep corners soft — `radius` on interactive elements, the larger step on cards, pill on badges.
121
+ - **Do** render numbers and ratings in ink, and apply `tabular-nums` to every numeric column; use
122
+ `font-mono` for IDs, codes, and timestamps.
123
+ - **Don't** promote a second chromatic accent. Luxe purple, Plus magenta, and the legal-link blue stay
124
+ sub-brand-decorative; status uses `success` / `warning` / `destructive`.
125
+ - **Don't** focus with a colored ring or a glow — Airbnb focuses by thickening the border to ink.
126
+ - **Don't** use pure black `#000000` for ink; ink is `#222222`.
127
+ - **Don't** pull the pill search bar, the 64px rating hero, or the 80px marketing nav into operator chrome.
128
+
129
+ ## 8 Responsive
130
+
131
+ The operator sweep is 375 / 768 / 1024 / 1440. Grids reduce column counts cleanly at each step — never
132
+ reflow rows.
133
+
134
+ | Breakpoint | What changes |
135
+ | --- | --- |
136
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; sticky detail collapses to a bottom bar carrying the primary action |
137
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow; card grids drop to 2-up |
138
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side; card grids 3-up |
139
+ | 1440 | content caps for forms at `form-max-width`; tables and dashboards use the full width; card grids 4-up |
140
+
141
+ ## 9 Agent Prompt Guide
142
+
143
+ Directives the emitting agent follows verbatim. This brand is warm and generous; keep it restrained for
144
+ operator work.
145
+
146
+ - Lead every list surface with its table; lead every entity with its primary read, not its chrome.
147
+ - Accent only the primary action with Rausch (`primary`). If two things want the accent, one is not primary.
148
+ - Stay flat — surface separation, hairlines, and rounded clipping before shadow. Reach for the one soft
149
+ shadow tier only for a real float or overlay.
150
+ - Focus with ink (`ring`), not a colored glow. Render numbers and ratings in ink, never gold.
151
+ - Keep corners soft: `radius` on buttons and inputs, the larger step on cards, pill on badges. No hard corners.
152
+ - Type stays modest — Cereal/Inter, `font-weight-strong` at 600, never 700+. Mono for IDs, codes, timestamps.
153
+ - One accent. Luxe, Plus, and legal-blue are not operator colors here.
154
+ - Leave marketing behind: the pill search bar, the 64px rating hero, the 80px nav, hand-illustrated
155
+ glyphs, and gradients do not follow the brand into a console. Light only — dark is a foreign opt-in.
156
+
157
+ ```yaml design-primitives
158
+ radius: 8px # derived: Airbnb's button/input radius (rounded.sm); cards step to 14px via the scale
159
+ shadow-intensity: 0.5 # derived: one soft shadow tier only; the system is otherwise flat
160
+ border-weight: 1px
161
+ density-gap: 1
162
+ density-inset: 1
163
+ font-sans: "Airbnb Cereal VF", Circular, Inter, system-ui, sans-serif
164
+ font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace # derived: Airbnb ships no mono; operator IDs/codes/timestamps need one — JetBrains Mono pairs with Cereal's geometric character
165
+ font-weight-normal: 400
166
+ font-weight-strong: 600 # derived: Cereal runs modest weights (500-600); operator strong stops at 600, never the 700+ of fintech/enterprise
167
+ heading-tracking: -0.01em # derived: Cereal's larger display steps track slightly negative (-0.18/-0.44px)
168
+ duration-unit: 50ms
169
+ duration-fast: 150ms # derived: corpus silent on motion; a warm brand runs a touch softer than a dense console
170
+ duration-normal: 200ms # derived: corpus silent on motion
171
+ duration-slow: 300ms # derived: corpus silent on motion
172
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: corpus silent; standard material ease
173
+ contrast-boost: 1
174
+ icon-stroke: 1.5 # derived: Airbnb's line icons read fine and friendly; one step under lucide's 2
175
+ icon-size-base: 16px
176
+ sidebar-width-expanded: 256px # derived: no marketplace sidebar; generous operator reading, a step over the console default
177
+ sidebar-width-collapsed: 64px # derived: generous icon rail
178
+ topbar-height: 64px # derived: operator reading of the 80px marketing nav, tightened for a working header
179
+ side-panel-width: 440px # derived: generous side panel; no corpus panel spec
180
+ side-panel-width-rich: 640px # derived: content-heavy detail width
181
+ modal-width-max: 560px # derived: corpus silent; standard modal cap
182
+ form-max-width: 640px # derived: Airbnb inputs run tall/generous; standard form column
183
+ table-row-height: 48px # derived: Airbnb's 48px CTA/touch-target rhythm; generous rows over a dense grid
184
+ verbosity: default
185
+ feedback: subtle # Airbnb motion is subtle (no-hover policy, gentle lift)
186
+ density-tier: standard # derived: "generous but not airy" — marketplace runs tighter than SaaS marketing; standard with a generous per-dimension lean
187
+ product-traits: [marketplace, crm, booking, dashboard]
188
+ ```
189
+
190
+ ```yaml lever-manifest
191
+ version: 1
192
+ fonts: { sans: "\"Airbnb Cereal VF\", Circular, Inter, system-ui, sans-serif", mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, monospace" }
193
+ color-tokens:
194
+ light:
195
+ background: "#ffffff"
196
+ foreground: "#222222"
197
+ card: "#ffffff"
198
+ card-foreground: "#222222"
199
+ muted: "#f7f7f7"
200
+ muted-foreground: "#6a6a6a"
201
+ border: "#dddddd"
202
+ input: "#dddddd"
203
+ ring: "#222222" # ink focus — Airbnb thickens the border to ink, no colored ring
204
+ primary: "#ff385c"
205
+ primary-foreground: "#ffffff"
206
+ accent: "#ffe8ec" # derived: pale Rausch tint for selected/hovered rows (corpus hovers gray; a whisper of brand carries the warmth)
207
+ accent-foreground: "#e00b41" # Rausch active — readable on the pale tint
208
+ destructive: "#c13515"
209
+ destructive-foreground: "#ffffff"
210
+ success: "#178a50" # derived: corpus silent on status; warm-compatible green, status only
211
+ warning: "#b26a00" # derived: corpus silent on status; amber, status only
212
+ popover: "#ffffff"
213
+ popover-foreground: "#222222"
214
+ secondary: "#f2f2f2" # surface-strong — secondary buttons and circular icon surfaces
215
+ secondary-foreground: "#222222"
216
+ chart-1: "#ff385c" # Rausch
217
+ chart-2: "#460479" # luxe purple (real corpus token, reused for dataviz)
218
+ chart-3: "#178a50" # derived: status green, reused as a chart hue
219
+ chart-4: "#b26a00" # derived: status amber, reused as a chart hue
220
+ chart-5: "#428bff" # legal-link blue (real corpus token, reused for dataviz)
221
+ sidebar: "#f7f7f7" # derived: faintly warm-gray sidebar beside the white canvas
222
+ sidebar-foreground: "#222222"
223
+ sidebar-primary: "#ff385c" # Rausch marks the active nav item
224
+ sidebar-primary-foreground: "#ffffff"
225
+ sidebar-accent: "#ffe8ec" # matches accent
226
+ sidebar-accent-foreground: "#e00b41"
227
+ sidebar-border: "#dddddd"
228
+ sidebar-ring: "#222222"
229
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
230
+ radius-scale: [0, 4, 8, 14, 20, 32, 9999]
231
+ shadow-levels: [none, sm] # the system has exactly one soft shadow tier plus the flat baseline
232
+ motion: { durations: [150, 200, 300], easings: ["cubic-bezier(0.4,0,0.2,1)"] } # derived: corpus silent on motion
233
+ icons: { family: lucide, stroke: 1.5 }
234
+ accent-count: 1
235
+ ```
@@ -0,0 +1,232 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Airtable
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Airtable — operator reading
9
+
10
+ A sober, editorial operator design: white canvas, dark-ink type, hairline separation, and a
11
+ distinctive move at its center — the primary action is **near-black**, not a color. Black *is* the
12
+ brand action here; blue is only the link and the focus ring. This entry is the operator reading of
13
+ Airtable's marketing brand: the temperature, the ink-primary discipline, the moderate radii and the
14
+ never-bold type voice carry; the hero-scale display sizes, the full-bleed signature cards, and the
15
+ 96px marketing section rhythm stay behind. Both machine blocks are fully valued; every judgment away
16
+ from the marketing source is annotated `# derived:`.
17
+
18
+ ## 1 Visual Theme
19
+
20
+ Light by default; dark is opt-in. Flat and editorial: hierarchy is carried by hairline `border`
21
+ (`#dddddd`), type weight, and whitespace — the brand is emphatically shadow-light, color-block first.
22
+ A single brand action, `primary`, is near-black ink (`#181d26`, a cool navy-black) reserved for the
23
+ one action that matters on a surface; it reads confident and final, never decorative. The neutral ramp
24
+ is a cool near-white, and the one chromatic interactive signal is a link blue (`#1b61c9`) that appears
25
+ only as links and the focus `ring`. The anchor surface is a white content canvas beside a faintly cool
26
+ `sidebar`. Density is `standard` and leans editorial-roomy — calm, not cramped, and never terminal-dense.
27
+
28
+ ## 2 Color Roles
29
+
30
+ Light values first. One brand action — `primary` (near-black) is the only fill that means "act"; the
31
+ blue is functional (links, focus) and status hues speak only status. The warm signature palette
32
+ (coral, forest, cream, peach, mint, mustard) is marketing chrome — it survives here only as chart
33
+ categoricals, never as UI chrome or a second accent.
34
+
35
+ | Role | Value | Allowed where |
36
+ | --- | --- | --- |
37
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, overlays — the dominant surface |
38
+ | `foreground` | near-black ink `#181d26` | all primary ink |
39
+ | `muted` / `secondary` | cool near-white `#f8fafc` | hover rows, subtle fills, secondary buttons |
40
+ | `muted-foreground` | mid slate `#41454d` | labels, captions, secondary text |
41
+ | `border` / `input` | hairline `#dddddd` | every separator, grid line, and field edge |
42
+ | `primary` | near-black `#181d26` | the one primary action; filled, white text — never the link blue |
43
+ | `accent` | pale blue tint `#eef3fb` | selected/hovered rows and active nav, on-accent surfaces only |
44
+ | `ring` | link blue `#1b61c9` | the focus outline — blue by brand rule, unmistakable, keyboard-first |
45
+ | `destructive` | warm red `#c0301c` | destructive actions and error state only |
46
+ | `success` / `warning` | green `#006400` / amber `#b45309` | status signalling only, never chrome |
47
+
48
+ The blue is the link and focus color, not the brand action; the most common misread is treating
49
+ link-blue as `primary`. Reserve `primary` for near-black.
50
+
51
+ ## 3 Typography
52
+
53
+ One sans, one mono. `font-sans` is Inter — the open substitute the licensed Haas Grotesk resolves to;
54
+ the UI, body, and headings all ride it, with weight and size (never a second family) carrying the
55
+ display voice. `font-mono` is IBM Plex Mono for record IDs, keys, timestamps, and log lines. Numeric
56
+ columns render `tabular-nums` so figures align down a column.
57
+
58
+ | Step | Role | Size · line | Weight · tracking |
59
+ | --- | --- | --- | --- |
60
+ | h1 | page title | 24px / 1.35 | `font-weight-strong` · `heading-tracking` |
61
+ | h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
62
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `heading-tracking` |
63
+ | body | UI + prose | 14px / 1.45 | `font-weight-normal` |
64
+ | small | labels, meta, dense table | 13px / 1.4 | `font-weight-normal` |
65
+ | caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
66
+
67
+ The Airtable trait: never bold for its own sake. Emphasis bumps weight one step to `font-weight-strong`
68
+ (500) — never 600/700 in the running UI. True bold is reserved, as in the brand, for legal surfaces.
69
+ Bump weight to emphasize; never change size.
70
+
71
+ ## 4 Component Stylings
72
+
73
+ Every recurring operator component composes from the primitives — no literal values.
74
+
75
+ - **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius`, no pill.
76
+ Secondary: `secondary` fill, 1px `border`, `foreground` — the white-outline pair to the near-black CTA.
77
+ Ghost: transparent, `accent` on hover.
78
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the blue `ring`
79
+ at 2px, no glow.
80
+ - **Card** — `card` surface, 1px `border`, `radius`, shadow only when lifted (`shadow-intensity`);
81
+ inset by `density-inset`.
82
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
83
+ numeric columns; row selection tints `accent`.
84
+ - **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
85
+ for content-heavy), beside the work, not over it.
86
+ - **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
87
+ `success` / `warning` / `destructive`, never `primary`.
88
+
89
+ ## 5 Layout
90
+
91
+ Base spacing unit 4px; the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing
92
+ 96px section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
93
+ `sidebar-width-expanded` (240px, the brand's filter-rail width) / `sidebar-width-collapsed`, topbar
94
+ `topbar-height` (64px, the brand nav height), side panel `side-panel-width` / `side-panel-width-rich`,
95
+ modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Rows are a roomy 44px — the
96
+ editorial reading, not a dense grid. Density is governed globally by `density-tier` and stepped per
97
+ archetype by the surface catalog, never by absolute overrides.
98
+
99
+ ## 6 Depth
100
+
101
+ Flat — color-block first, shadow second. Hierarchy comes from the surface ladder and hairlines:
102
+
103
+ - **0 — canvas** `background`, no border.
104
+ - **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
105
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
106
+ shadow. No level stacks a heavier shadow to signal rank; rank is border and position.
107
+
108
+ Focus is a 2px blue `ring` outline (never a glow), visible on every interactive element. Three
109
+ z-levels: content, sticky chrome, overlay.
110
+
111
+ ## 7 Do's & Don'ts
112
+
113
+ - **Do** keep `primary` near-black. The brand action is `#181d26`, not the link blue — mixing them
114
+ turns a confident surface into a confused one.
115
+ - **Do** reserve `primary` for the single most important action on a surface; everything else is
116
+ neutral or status.
117
+ - **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is predominantly flat.
118
+ - **Do** apply `tabular-nums` to numeric columns and `font-mono` to IDs, keys, and timestamps.
119
+ - **Don't** bold the UI. Emphasis tops out at `font-weight-strong` (500); 600/700 read as a template.
120
+ - **Don't** promote a second chromatic accent. The signature warm palette (coral/forest/cream/mustard)
121
+ is marketing chrome; here it lives only in `chart-*`.
122
+ - **Don't** pill the CTA or reach for a radius outside `radius-scale`; the marketing pill is a pricing
123
+ sub-system signal, not an operator option.
124
+ - **Don't** open detail or edit in a modal when the side panel fits — modals are for confirmations.
125
+
126
+ ## 8 Responsive
127
+
128
+ The operator sweep is 375 / 768 / 1024 / 1440.
129
+
130
+ | Breakpoint | What changes |
131
+ | --- | --- |
132
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
133
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
134
+ | 1024 | sidebar expands; two-pane list+detail holds side by side |
135
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width, capped with outer margin |
136
+
137
+ ## 9 Agent Prompt Guide
138
+
139
+ Directives the emitting agent follows verbatim:
140
+
141
+ - Lead every list surface with its table; lead every entity with its primary read, not its chrome.
142
+ - Accent only the primary action, and make it near-black `primary` — never the blue. Blue is links and
143
+ the focus `ring` only. If two things want the accent, one is not primary.
144
+ - Keep type modest: `font-weight-strong` is 500, never 600/700 in the UI; emphasize by weight, not size.
145
+ - Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
146
+ - Every numeric column is `tabular-nums`; every ID / key / timestamp is `font-mono`.
147
+ - Every workflow completes from the keyboard; the blue `ring` outline is always visible.
148
+ - Stay flat and editorial — hairline and whitespace before shadow. A single near-black band is the
149
+ brand's one voltage moment; use it sparingly for a summary or hero card, never as routine chrome.
150
+ - The warm signature palette (coral, forest, cream, peach, mint, mustard) stays behind as marketing;
151
+ it survives only as chart categoricals. Hero-scale display type (48/40/32) and the 96px section
152
+ rhythm are marketing — do not carry them into operator surfaces.
153
+
154
+ ```yaml design-primitives
155
+ radius: 6px # derived: brand's input radius (rounded.sm, 6px) as operator default; marketing's 12px CTA softness stays for hero — scale keeps 10/12 for cards
156
+ shadow-intensity: 0.35 # derived: color-block-first brand — shadow only lifts true overlays
157
+ border-weight: 1px
158
+ density-gap: 1
159
+ density-inset: 1
160
+ font-sans: Inter, system-ui, sans-serif # derived: Haas Grotesk is licensed/proprietary; the corpus names Inter as its open substitute — plain Inter for dense operator body legibility
161
+ font-mono: IBM Plex Mono, ui-monospace, monospace # derived: no mono in corpus; IBM Plex Mono's humanist temperature matches Airtable's sober editorial sans
162
+ font-weight-normal: 400
163
+ font-weight-strong: 500 # derived from corpus: Airtable never bolds display — emphasis pivots to 500, never 600/700 (600 reserved for legal)
164
+ heading-tracking: 0 # from corpus: Haas display runs letterSpacing 0 — Airtable does not tighten headings
165
+ duration-unit: 60ms # derived: motion out of corpus scope
166
+ duration-fast: 120ms # derived: motion out of corpus scope
167
+ duration-normal: 180ms # derived: functional operator scale nudged ~20% slower than baseline for editorial calm
168
+ duration-slow: 280ms # derived: motion out of corpus scope
169
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard functional ease; motion out of corpus scope
170
+ contrast-boost: 1 # derived: honor the soft #dddddd hairline discipline — no grid boost
171
+ icon-stroke: 1.75 # derived: no icon spec in corpus; lucide one step under default for a refined operator stroke
172
+ icon-size-base: 16px
173
+ sidebar-width-expanded: 240px # from corpus: topic-filter-rail width 240px
174
+ sidebar-width-collapsed: 56px # derived: standard icon-rail collapse
175
+ topbar-height: 64px # from corpus: top-nav height 64px
176
+ side-panel-width: 420px # derived: standard operator detail-panel width; corpus documents no side panel
177
+ side-panel-width-rich: 640px # derived: content-heavy detail width
178
+ modal-width-max: 560px # derived: confirmation-scale modal cap
179
+ form-max-width: 640px # derived: single-column form cap
180
+ table-row-height: 44px # derived from corpus: 44px input height + comparison-row padding → a roomy editorial row, not a 40px dense grid
181
+ verbosity: default
182
+ feedback: subtle # derived: calm, minimal-shadow brand reads subtle
183
+ density-tier: standard # derived: editorial-roomy brand held at standard for operator legibility; archetypes step denser, never the whole app
184
+ product-traits: [database, data-grid, workflow, collaboration]
185
+ ```
186
+
187
+ ```yaml lever-manifest
188
+ version: 1
189
+ fonts: { sans: "Inter, system-ui, sans-serif", mono: "IBM Plex Mono, ui-monospace, monospace" }
190
+ color-tokens:
191
+ light:
192
+ background: "#ffffff"
193
+ foreground: "#181d26"
194
+ card: "#ffffff"
195
+ card-foreground: "#181d26"
196
+ muted: "#f8fafc"
197
+ muted-foreground: "#41454d"
198
+ border: "#dddddd"
199
+ input: "#dddddd"
200
+ ring: "#1b61c9"
201
+ primary: "#181d26"
202
+ primary-foreground: "#ffffff"
203
+ accent: "#eef3fb" # derived: pale blue tint of the link blue for row/nav selection
204
+ accent-foreground: "#181d26"
205
+ destructive: "#c0301c" # derived: no semantic error red in corpus; warm red tuned to the oxide-coral (#aa2d00) temperature, brightened for status legibility
206
+ destructive-foreground: "#ffffff"
207
+ success: "#006400"
208
+ warning: "#b45309" # derived: warm amber in the signature mustard/yellow (#d9a441/#f4d35e) family, darkened for legible status text
209
+ popover: "#ffffff"
210
+ popover-foreground: "#181d26"
211
+ secondary: "#f8fafc"
212
+ secondary-foreground: "#181d26"
213
+ chart-1: "#1b61c9" # link blue
214
+ chart-2: "#aa2d00" # signature coral
215
+ chart-3: "#006400" # forest / success green
216
+ chart-4: "#d9a441" # signature mustard
217
+ chart-5: "#fcab79" # signature peach
218
+ sidebar: "#f8fafc" # derived: corpus nav is white; the operator rail tints one step (surface-soft) for shell separation
219
+ sidebar-foreground: "#181d26"
220
+ sidebar-primary: "#181d26"
221
+ sidebar-primary-foreground: "#ffffff"
222
+ sidebar-accent: "#eef3fb" # derived: matches accent tint
223
+ sidebar-accent-foreground: "#181d26"
224
+ sidebar-border: "#dddddd"
225
+ sidebar-ring: "#1b61c9"
226
+ spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
227
+ radius-scale: [0, 2, 6, 10, 12, 9999]
228
+ shadow-levels: [none, sm, md]
229
+ motion: { durations: [120, 180, 280], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
230
+ icons: { family: lucide, stroke: 1.75 }
231
+ accent-count: 1
232
+ ```