@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,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Cal.com
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Cal.com — operator reading
9
+
10
+ The operator reading of Cal.com's design language, distilled from Cal's marketing surface. It keeps what
11
+ an internal tool can wear — the monochrome near-black action layer, the light-gray surface ladder,
12
+ soft-rounded 8px/12px geometry, the Cal Sans / Inter type voice — and leaves the marketing scaffolding
13
+ behind (§9). Judgments where the corpus is silent are annotated `# derived:`.
14
+
15
+ ## 1 Visual Theme
16
+
17
+ Light by default; dark is opt-in. Near-monochrome: the one action that matters wears a near-black
18
+ `primary` (#111111), not a chromatic accent — the system reads confidently engineered without spending
19
+ color on chrome. Flat but soft: hierarchy is carried by hairline `border`, type weight, and a light-gray
20
+ surface ladder, with soft drop shadows lifting only elevated cards. Geometry is soft-rounded (8px
21
+ controls, 12px cards) — the friendly-modern-SaaS read. The anchor surface is a white content canvas over
22
+ a faint cool-gray `sidebar`; one scarce near-black surface (#101010) frames or closes a view — the
23
+ operator descendant of Cal's dark footer. Density is `spacious`: generous whitespace is the brand's
24
+ signature; surfaces step denser per archetype without cramming.
25
+
26
+ ## 2 Color Roles
27
+
28
+ Light values (hex — the corpus's native format). The action layer is monochrome: `primary` is a
29
+ near-black, the only chromatic brand color (`brand-accent` blue) is confined to inline links.
30
+
31
+ | Role | Value | Allowed where |
32
+ | --- | --- | --- |
33
+ | `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
34
+ | `foreground` | near-black `#111111` | all primary ink and headlines |
35
+ | `muted` / `secondary` | light gray `#f5f5f5` | subtle fills, hover rows, secondary buttons |
36
+ | `muted-foreground` | `#6b7280` | labels, captions, secondary text |
37
+ | `accent` | soft gray `#f3f4f6` | selected/active rows and nav — achromatic, no hue |
38
+ | `border` / `input` | hairline `#e5e7eb` | every separator, grid line, and field edge |
39
+ | `primary` | near-black `#111111` (press `#242424`) | the one primary action — monochrome, never a hue |
40
+ | `ring` | ink `#111111` | the focus outline — border shifts to ink on focus |
41
+ | `destructive` | red `#ef4444` | destructive actions and error state only |
42
+ | `success` / `warning` | green `#10b981` / amber `#f59e0b` | status signalling only, never chrome |
43
+
44
+ The `brand-accent` blue (`#3b82f6`) rides inline links only, never a CTA (§7). The badge pastels —
45
+ orange, pink, violet, emerald — are the chart palette (the one place this monochrome brand spends color).
46
+
47
+ ## 3 Typography
48
+
49
+ One UI sans, one mono. `font-sans` is Inter — body, tables, buttons, nav, and captions all ride it. The
50
+ brand's display voice is **Cal Sans** (a custom geometric face, weight 600, negative tracking), but it is
51
+ licensed and unavailable publicly, so headings reproduce the voice through Inter at `font-weight-strong`
52
+ with a tight negative `heading-tracking`. Hero display (48–64px) stays behind; operator headings scale to
53
+ 18–24px. `font-mono` is JetBrains Mono for IDs, codes, and timestamps; numeric columns render
54
+ `tabular-nums` (Inter carries `tnum`) so figures align down a column.
55
+
56
+ | Step | Role | Size · line | Weight · tracking |
57
+ | --- | --- | --- | --- |
58
+ | h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
59
+ | h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
60
+ | h3 | card / group head | 15px / 1.4 | `font-weight-strong` |
61
+ | body | UI + prose | 14px / 1.5 | `font-weight-normal` |
62
+ | small | labels, meta, dense rows | 13px / 1.4 | `font-weight-normal` |
63
+ | caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
64
+
65
+ ## 4 Component Stylings
66
+
67
+ Every recurring operator component composes from the primitives — no literal values.
68
+
69
+ - **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius` (8px), no pill,
70
+ press darkens to `#242424`. Secondary: `background` fill, 1px `border`, `foreground`. Ghost: `muted` hover.
71
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus shifts the edge to the
72
+ ink `ring` at 2px, no glow.
73
+ - **Card** — `card` surface, 1px `border`, `radius` steps up to 12px for content cards; soft shadow only
74
+ when it lifts off the canvas (`shadow-intensity`); inset by `density-inset`.
75
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` hover; `tabular-nums` on
76
+ numeric columns; selection tints `accent`.
77
+ - **Side panel** — detail/edit open beside the work, not over it (`side-panel-width` / `side-panel-width-rich`).
78
+ - **Badge** — pill radius, `muted` or status fill, uppercase caption; status badges take `success` /
79
+ `warning` / `destructive`, never `primary`.
80
+
81
+ ## 5 Layout
82
+
83
+ Base spacing unit 4px; the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64` (the marketing 96px
84
+ section rhythm stays behind). Shell dimensions map one-to-one to the layout primitives: sidebar
85
+ `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height` (64px — Cal's airier nav
86
+ band), side panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms
87
+ `form-max-width`, tables full-width. Density is governed globally by `density-tier` (`spacious`, Cal's
88
+ generous whitespace) and stepped per archetype by the surface catalog.
89
+
90
+ ## 6 Depth
91
+
92
+ Soft and modern. Hierarchy comes from the surface ladder and hairlines, with soft shadow reserved for
93
+ true lift — no heavy drops, no neumorphism, no glassmorphism:
94
+
95
+ - **0 — canvas** `background`, no border.
96
+ - **1 — card / panel** `card` on a 1px `border`; a light-gray `muted` fill distinguishes feature
97
+ surfaces; soft `sm` shadow (`0 1px 2px rgba(0,0,0,0.05)`) only when it must lift off the canvas.
98
+ - **2 — overlay** `popover` / side panel / modal — soft `md` shadow (`0 4px 12px rgba(0,0,0,0.08)`); the
99
+ scarce near-black `#101010` surface elevates by color contrast, not a heavier shadow.
100
+
101
+ Focus is an ink `ring` outline (never a glow), visible on every interactive element. Three z-levels:
102
+ content, sticky chrome, overlay.
103
+
104
+ ## 7 Do's & Don'ts
105
+
106
+ - **Do** reserve near-black `primary` for the single most important action; keep the action layer
107
+ monochrome, and carry hierarchy with hairlines, weight, whitespace, and the surface ladder before shadow.
108
+ - **Do** hold display weight at 600 with the tight negative `heading-tracking` — Cal's voice reads
109
+ off-brand without it; apply `tabular-nums` to numeric columns and `font-mono` to IDs, codes, timestamps.
110
+ - **Don't** promote a chromatic accent to the action layer — `brand-accent` blue is inline-link-only,
111
+ the badge pastels are chart-only.
112
+ - **Don't** pill the primary CTA or use a card radius beyond 16px — larger reads as consumer-toy, not
113
+ professional software.
114
+ - **Don't** scatter the near-black surface (at most one per view, framing or closing it — a scarce
115
+ signal, not a panel), or signal elevation with heavy drop shadows.
116
+
117
+ ## 8 Responsive
118
+
119
+ The operator sweep across breakpoints:
120
+
121
+ | Breakpoint (px) | What changes |
122
+ | --- | --- |
123
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
124
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
125
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
126
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width |
127
+
128
+ ## 9 Agent Prompt Guide
129
+
130
+ What carries from Cal into an operator surface, and what stays on the marketing page.
131
+
132
+ - Reach first for the white canvas, hairline `border`, and light-gray surface ladder — a monochrome
133
+ grayscale system. Accent only the primary action, in near-black; if two things want it, one is not primary.
134
+ - Keep geometry soft: 8px on controls, 12px on cards; never pill a CTA, never exceed 16px on a card.
135
+ - Headings are Inter 600 with tight negative tracking (the Cal Sans voice reproduced) — never ship Cal
136
+ Sans itself, never scale a heading to hero 48–64px. Numeric columns are `tabular-nums`; IDs, codes, and
137
+ timestamps are JetBrains Mono.
138
+ - The near-black `#101010` surface is scarce — one framing element per view, never a panel. Leave behind
139
+ the hero display, the 96px band rhythm, the nav-pill switcher, product-fragment-in-card, and any
140
+ gradient; charts are the only place color spends.
141
+
142
+ ```yaml design-primitives
143
+ radius: 8px # derived: corpus control radius (md 8px); soft-rounded Cal character, scale still offers 12/16px for cards
144
+ shadow-intensity: 0.5 # derived: corpus uses soft drop shadows on elevated cards (0.05–0.08 alpha), more than a fully flat brand
145
+ border-weight: 1px
146
+ density-gap: 1.15 # derived: spacious tier — Cal's generous whitespace opens the scale one notch above the operator default
147
+ density-inset: 1.1 # derived: matches the roomier posture without over-padding dense tables
148
+ font-sans: Inter, system-ui, sans-serif
149
+ font-mono: JetBrains Mono, ui-monospace, monospace
150
+ font-weight-normal: 400
151
+ font-weight-strong: 600
152
+ heading-tracking: -0.02em # derived: Cal Sans's negative-tracking signature (corpus Inter substitute -0.04em at display scale) eased to operator heading sizes
153
+ duration-unit: 50ms # derived: corpus notes animation timings out of scope; functional operator motion
154
+ duration-fast: 100ms # derived: functional operator motion
155
+ duration-normal: 150ms # derived: functional operator motion
156
+ duration-slow: 250ms # derived: functional operator motion
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: standard ease; corpus silent on motion
158
+ contrast-boost: 1 # derived: corpus is high-contrast ink on white already; no boost needed
159
+ icon-stroke: 1.75 # derived: corpus names no icon set; lucide one step under 2 for a refined operator stroke
160
+ icon-size-base: 16px # derived: standard operator icon size; corpus silent
161
+ sidebar-width-expanded: 248px # derived: Cal is marketing top-nav with no sidebar; operator-standard rail width
162
+ sidebar-width-collapsed: 56px # derived: operator-standard icon rail
163
+ topbar-height: 64px # corpus top-nav height (64px) — Cal's airier nav band carried over
164
+ side-panel-width: 420px # derived: operator-standard detail panel; corpus has no side panel
165
+ side-panel-width-rich: 640px # derived: content-heavy detail panel
166
+ modal-width-max: 560px # derived: operator confirmation-modal cap
167
+ form-max-width: 640px # derived: corpus 1200px is marketing content width; operator forms cap tighter
168
+ table-row-height: 44px # derived: spacious posture — a step roomier than 40px controls, matching Cal's friendly density
169
+ verbosity: default
170
+ feedback: subtle
171
+ density-tier: spacious # derived: Cal reads as a spacious consumer-friendly SaaS (generous whitespace), not a dense terminal
172
+ product-traits: [scheduling, booking, saas, dashboard, crm]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Inter, system-ui, sans-serif", mono: "JetBrains Mono, ui-monospace, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#ffffff"
181
+ foreground: "#111111"
182
+ card: "#ffffff"
183
+ card-foreground: "#111111"
184
+ muted: "#f5f5f5"
185
+ muted-foreground: "#6b7280"
186
+ border: "#e5e7eb"
187
+ input: "#e5e7eb"
188
+ ring: "#111111"
189
+ primary: "#111111"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#f3f4f6"
192
+ accent-foreground: "#111111"
193
+ destructive: "#ef4444"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#10b981"
196
+ warning: "#f59e0b"
197
+ popover: "#ffffff"
198
+ popover-foreground: "#111111"
199
+ secondary: "#f5f5f5"
200
+ secondary-foreground: "#111111"
201
+ chart-1: "#3b82f6" # derived: brand-accent blue as primary series
202
+ chart-2: "#34d399" # derived: badge-emerald
203
+ chart-3: "#fb923c" # derived: badge-orange
204
+ chart-4: "#8b5cf6" # derived: badge-violet
205
+ chart-5: "#ec4899" # derived: badge-pink
206
+ sidebar: "#f8f9fa" # derived: corpus surface-soft — faint off-white rail vs white canvas
207
+ sidebar-foreground: "#111111"
208
+ sidebar-primary: "#111111"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#f3f4f6" # derived: hover/active nav tint, one step off the rail
211
+ sidebar-accent-foreground: "#111111"
212
+ sidebar-border: "#e5e7eb"
213
+ sidebar-ring: "#111111"
214
+ spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64] # 96 section rhythm stays behind; 64 derived to fill the operator shell gap
215
+ radius-scale: [0, 4, 6, 8, 12, 16, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```
@@ -0,0 +1,220 @@
1
+ ---
2
+ schema: design-md/v1
3
+ product: Clay
4
+ provenance: library
5
+ sourced: 2026-07-04
6
+ ---
7
+
8
+ # Clay — the warm-cream operator reading
9
+
10
+ Clay's marketing surface is the most playful brand in the GTM-data category: a cream-tinted white
11
+ canvas holding 3D claymation illustrations and saturated single-color feature cards in six hues. This
12
+ is the *operator* reading — the warmth, the near-black actions, the generous radius, and the Inter body
13
+ voice carried into a CRM/queue/dashboard; the hero-scale Plain Black display, the 3D illustrations, and
14
+ the saturated feature-card fills stay behind in marketing. What makes a tool read as Clay is the cream
15
+ substrate and the disciplined near-black action, not a colored card. Every judgment away from the
16
+ marketing brand is annotated `# derived:` where it lands.
17
+
18
+ ## 1 Visual Theme
19
+
20
+ Light by default; warm, not cool. The canvas is a cream-tinted white (`background` — `#fffaf0`), never
21
+ a gray — that faint warmth is Clay's non-negotiable differentiator from the cool-gray data-platform
22
+ field. Flat: hierarchy comes from hairline `border`, warm surface steps, and type weight, never heavy
23
+ shadow. A single reserved action color — near-black `primary` (`#0a0a0a`), Clay's authentic CTA —
24
+ carries emphasis in the chrome. The anchor surface is the cream content canvas beside a faintly deeper
25
+ cream `sidebar`. Radius is generous (`radius` 12px) to keep Clay's rounded, friendly character. Density
26
+ is `spacious` — this brand breathes, and its operator tools breathe with it.
27
+
28
+ ## 2 Color Roles
29
+
30
+ Light values first; hex is Clay's native format. One reserved accent — near-black `primary` is the only
31
+ tone the chrome uses for emphasis; the six saturated brand hues live in charts only, never in chrome.
32
+
33
+ | Role | Value | Allowed where |
34
+ | --- | --- | --- |
35
+ | `background` / `card` / `popover` | cream white `#fffaf0` | page, cards, and overlays — the dominant warm surface |
36
+ | `foreground` | ink `#0a0a0a` | all primary text, headings |
37
+ | `muted` | soft cream `#faf5e8` | hover rows, subtle fills |
38
+ | `muted-foreground` | mid gray `#6a6a6a` | labels, captions, secondary text |
39
+ | `secondary` | cream card `#f5f0e0` | secondary buttons, quiet chips |
40
+ | `border` / `input` | hairline `#e5e5e5` | every separator, grid line, and field edge |
41
+ | `primary` | near-black `#0a0a0a` (hover `#1f1f1f`, disabled `#e5e5e5`) | the one primary action; active nav |
42
+ | `accent` | warm cream `#ebe6d6` | selected/hovered rows and active nav, on-accent surfaces only |
43
+ | `ring` | near-black `#0a0a0a` | the focus outline — unmistakable on cream, because keyboard-first |
44
+ | `destructive` | red `#ef4444` | destructive actions and error state only |
45
+ | `success` / `warning` | green `#22c55e` / amber `#f59e0b` | status signalling only, never chrome |
46
+
47
+ The saturated palette — teal, pink, lavender, ochre, coral — is Clay's brand voltage; here it carries
48
+ **data series** (`chart-1..5`), not chrome. The marketing feature cards stay behind (see §7).
49
+
50
+ ## 3 Typography
51
+
52
+ One sans, one mono. `font-sans` is Inter — body, UI, and headings all ride it; heading weight and a
53
+ faint negative tracking, not a second family, carry the voice. Clay's display face, Plain Black, is a
54
+ hero-scale marketing type (72px, -2.5px tracking) and stays behind. `font-mono` carries IDs, codes,
55
+ timestamps, and log lines. Numeric columns render `tabular-nums` so figures align down a column.
56
+
57
+ | Step | Role | Size · line | Weight · tracking |
58
+ | --- | --- | --- | --- |
59
+ | h1 | page title | 24px / 1.3 | `font-weight-strong` · `heading-tracking` |
60
+ | h2 | section head | 18px / 1.4 | `font-weight-strong` · `heading-tracking` |
61
+ | h3 | card / group head | 16px / 1.4 | `font-weight-strong` · `0` |
62
+ | body | UI + prose | 16px / 1.55 | `font-weight-normal` |
63
+ | small | labels, meta, dense table | 14px / 1.5 | `font-weight-normal` |
64
+ | caption | uppercase eyebrow | 12px / 1.4 | `font-weight-strong`, `+0.1em`, uppercase |
65
+
66
+ Bump weight one step for emphasis; never change size to emphasize.
67
+
68
+ ## 4 Component Stylings
69
+
70
+ Every recurring operator component composes from the primitives — no literal values.
71
+
72
+ - **Button** — `primary`: filled near-black `primary` on `primary-foreground`, `radius` (generous),
73
+ no pill; hover deepens to `#1f1f1f`. Secondary: `secondary` cream fill, 1px `border`. Ghost:
74
+ transparent, `accent` on hover.
75
+ - **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the near-black
76
+ `ring` at 2px, no glow.
77
+ - **Card** — `card` surface, 1px `border`, `radius`; shadow only when it must lift off the canvas
78
+ (`shadow-intensity`); inset by `density-inset`.
79
+ - **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
80
+ numeric columns; row selection tints `accent`.
81
+ - **Side panel** — detail and edit open beside the work in `side-panel-width` (`-rich` when heavy).
82
+ - **Badge** — pill (`radius-scale` 9999, Clay's brand-authentic chip shape), `muted`/status fill,
83
+ uppercase caption; status badges take `success` / `warning` / `destructive`, never `primary`.
84
+
85
+ ## 5 Layout
86
+
87
+ Base spacing unit 4px (Clay's documented base); the on-scale ramp is `4 · 8 · 12 · 16 · 24 · 32 · 48 ·
88
+ 64` (marketing's 96px section rhythm stays behind). Shell dimensions map one-to-one to the layout
89
+ primitives: sidebar `sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side
90
+ panel `side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
91
+ tables full-width. Density is governed globally by `density-tier` (`spacious`, rewriting the spacing
92
+ scale through `density-gap`) and stepped per archetype by the surface catalog.
93
+
94
+ ## 6 Depth
95
+
96
+ Flat. Hierarchy comes from warm surface steps and hairlines, not shadow:
97
+
98
+ - **0 — canvas** `background` cream, no border.
99
+ - **1 — panel / card** `card` on a 1px `border`; a step to `muted` / `secondary` cream separates
100
+ nested surfaces before any shadow does.
101
+ - **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
102
+ shadow. No level stacks a heavier shadow to signal rank; rank is border, warm surface, and position.
103
+
104
+ Focus is a 2px near-black `ring` outline, never a glow; three z-levels: content, chrome, overlay.
105
+
106
+ ## 7 Do's & Don'ts
107
+
108
+ - **Do** anchor every surface on the cream `background` (`#fffaf0`). The warm tint is the identity.
109
+ - **Do** reserve near-black `primary` for the single most important action; everything else is neutral.
110
+ - **Do** let the saturated palette carry data (`chart-1..5`) — that is where Clay's color belongs.
111
+ - **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
112
+ - **Don't** cool the neutrals to gray. A gray canvas is a different brand.
113
+ - **Don't** bring the saturated feature-card fills into chrome — no hot-pink button, no teal panel.
114
+ - **Don't** pill the primary CTA (pill is for badges/chips) or reach past `radius-scale`.
115
+ - **Don't** import Plain Black or 3D claymation into the tool — they are hero-scale marketing assets.
116
+ - **Don't** signal elevation with heavy drop shadows.
117
+
118
+ ## 8 Responsive
119
+
120
+ The operator sweep is 375 / 768 / 1024 / 1440.
121
+
122
+ | Breakpoint | What changes |
123
+ | --- | --- |
124
+ | 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
125
+ | 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
126
+ | 1024 | sidebar expands; two-pane queue+detail holds side by side |
127
+ | 1440 | forms cap at `form-max-width`; tables and dashboards use the full width, generous cream gutters |
128
+
129
+ ## 9 Agent Prompt Guide
130
+
131
+ Directives the emitting agent follows verbatim:
132
+
133
+ - Reach for the cream canvas first; the warm `background` is what makes the tool read as Clay.
134
+ - Accent only the primary action, and the accent is near-black. If two want it, one is not primary.
135
+ - Charts carry Clay's saturated palette (`chart-1..5`); chrome stays warm-neutral. Never invert this.
136
+ - Keep radius generous — the rounded character is the brand; do not tighten controls to a hard edge.
137
+ - Detail and edit go in the side panel; a modal is a confirmation, not a workspace.
138
+ - Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono`.
139
+ - Every workflow completes from the keyboard; the near-black `ring` focus outline is always visible.
140
+ - Plain Black hero type and 3D illustrations are marketing. They never enter the operator surface.
141
+
142
+ ```yaml design-primitives
143
+ radius: 12px # derived: brand's generous radius (12px buttons/inputs) is the rounded character the brief keeps; operator wears it as-is
144
+ shadow-intensity: 0.35 # derived: brand uses no heavy shadow — depth is color contrast; shadow only lifts true overlays
145
+ border-weight: 1px
146
+ density-gap: 1.1 # derived: brand breathes (spacious marketing whitespace); operator leans airy, not cramped
147
+ density-inset: 1.1 # derived: matches the spacious tier
148
+ font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif # brand's body/UI font; Plain Black display stays behind
149
+ font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace # derived: brand ships no mono (marketing site); operator needs one for IDs/codes/log lines
150
+ font-weight-normal: 400
151
+ font-weight-strong: 600 # brand titles are Inter 600 (display's 500 is hero-scale, stays behind)
152
+ heading-tracking: -0.01em # derived: brand's negative display tracking, dialled to operator heading sizes (hero -2.5px stays behind)
153
+ duration-unit: 50ms # derived: brand states motion is out of scope; functional operator default
154
+ duration-fast: 100ms # derived: functional operator default
155
+ duration-normal: 150ms # derived: functional operator default
156
+ duration-slow: 250ms # derived: functional operator default
157
+ ease-default: cubic-bezier(0.4,0,0.2,1) # derived: brand states motion is out of scope; standard operator ease
158
+ contrast-boost: 1
159
+ icon-stroke: 1.75 # derived: brand documents no icon set; refined operator stroke
160
+ icon-size-base: 16px # derived: standard operator icon size
161
+ sidebar-width-expanded: 260px # derived: no brand sidebar (horizontal marketing nav); spacious operator rail
162
+ sidebar-width-collapsed: 60px # derived: icon rail
163
+ topbar-height: 56px # derived: from brand's 64px top-nav, tightened for an operator topbar
164
+ side-panel-width: 440px # derived: spacious tier
165
+ side-panel-width-rich: 680px # derived: content-heavy detail
166
+ modal-width-max: 560px # derived: standard operator modal cap
167
+ form-max-width: 640px # derived: single-column form width
168
+ table-row-height: 48px # derived: spacious tier; dense archetypes step down via the surface catalog
169
+ verbosity: default
170
+ feedback: subtle
171
+ density-tier: spacious # derived: brand voice is airy and warm; operator tools wearing it breathe, unlike a terminal
172
+ product-traits: [crm, sales, data-orchestration, dashboard]
173
+ ```
174
+
175
+ ```yaml lever-manifest
176
+ version: 1
177
+ fonts: { sans: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", mono: "JetBrains Mono, ui-monospace, SFMono-Regular, monospace" }
178
+ color-tokens:
179
+ light:
180
+ background: "#fffaf0"
181
+ foreground: "#0a0a0a"
182
+ card: "#fffaf0"
183
+ card-foreground: "#0a0a0a"
184
+ muted: "#faf5e8"
185
+ muted-foreground: "#6a6a6a"
186
+ border: "#e5e5e5"
187
+ input: "#e5e5e5"
188
+ ring: "#0a0a0a"
189
+ primary: "#0a0a0a"
190
+ primary-foreground: "#ffffff"
191
+ accent: "#ebe6d6"
192
+ accent-foreground: "#0a0a0a"
193
+ destructive: "#ef4444"
194
+ destructive-foreground: "#ffffff"
195
+ success: "#22c55e"
196
+ warning: "#f59e0b"
197
+ popover: "#fffaf0"
198
+ popover-foreground: "#0a0a0a"
199
+ secondary: "#f5f0e0"
200
+ secondary-foreground: "#0a0a0a"
201
+ chart-1: "#1a3a3a"
202
+ chart-2: "#ff4d8b"
203
+ chart-3: "#b8a4ed"
204
+ chart-4: "#e8b94a"
205
+ chart-5: "#ff6b5a"
206
+ sidebar: "#faf5e8"
207
+ sidebar-foreground: "#0a0a0a"
208
+ sidebar-primary: "#0a0a0a"
209
+ sidebar-primary-foreground: "#ffffff"
210
+ sidebar-accent: "#ebe6d6"
211
+ sidebar-accent-foreground: "#0a0a0a"
212
+ sidebar-border: "#e5e5e5"
213
+ sidebar-ring: "#0a0a0a"
214
+ spacing-scale: [4, 8, 12, 16, 24, 32, 48, 64]
215
+ radius-scale: [0, 6, 8, 12, 16, 9999]
216
+ shadow-levels: [none, sm, md]
217
+ motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
218
+ icons: { family: lucide, stroke: 1.75 }
219
+ accent-count: 1
220
+ ```