@nurix/etna 0.18.18 → 0.18.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/harness-index.json +1 -1
- package/data/harnesses/code/harness.json +2 -2
- package/data/harnesses/code/rules/general.md +2 -1
- package/data/harnesses/code/skills/design/SKILL.md +65 -0
- package/data/harnesses/code/skills/design/data/catalog/rules.csv +132 -0
- package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md +317 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md +235 -0
- package/data/harnesses/code/skills/design/data/design-md/library/airtable.md +232 -0
- package/data/harnesses/code/skills/design/data/design-md/library/anthropic-claude.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/apple.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/binance.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/bmw.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cal.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clay.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/clickhouse.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cohere.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/coinbase.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/composio.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/cursor.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/elevenlabs.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/expo.md +228 -0
- package/data/harnesses/code/skills/design/data/design-md/library/figma.md +221 -0
- package/data/harnesses/code/skills/design/data/design-md/library/framer.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/hashicorp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ibm.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/intercom.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/kraken.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/linear-app.md +237 -0
- package/data/harnesses/code/skills/design/data/design-md/library/lovable.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/meta.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/minimax.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mintlify.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/miro.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mistral-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/mongodb.md +236 -0
- package/data/harnesses/code/skills/design/data/design-md/library/notion.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/nvidia.md +222 -0
- package/data/harnesses/code/skills/design/data/design-md/library/ollama.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/opencode-ai.md +223 -0
- package/data/harnesses/code/skills/design/data/design-md/library/posthog.md +234 -0
- package/data/harnesses/code/skills/design/data/design-md/library/raycast.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/replicate.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/resend.md +285 -0
- package/data/harnesses/code/skills/design/data/design-md/library/revolut.md +225 -0
- package/data/harnesses/code/skills/design/data/design-md/library/runwayml.md +219 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sanity.md +251 -0
- package/data/harnesses/code/skills/design/data/design-md/library/sentry.md +244 -0
- package/data/harnesses/code/skills/design/data/design-md/library/shopify.md +227 -0
- package/data/harnesses/code/skills/design/data/design-md/library/slack.md +240 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spacex.md +252 -0
- package/data/harnesses/code/skills/design/data/design-md/library/spotify.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/stripe.md +241 -0
- package/data/harnesses/code/skills/design/data/design-md/library/supabase.md +255 -0
- package/data/harnesses/code/skills/design/data/design-md/library/superhuman.md +226 -0
- package/data/harnesses/code/skills/design/data/design-md/library/tesla.md +233 -0
- package/data/harnesses/code/skills/design/data/design-md/library/theverge.md +248 -0
- package/data/harnesses/code/skills/design/data/design-md/library/together-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/uber.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/vercel.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/voltagent.md +245 -0
- package/data/harnesses/code/skills/design/data/design-md/library/warp.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/webflow.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wired.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/wise.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/x-ai.md +220 -0
- package/data/harnesses/code/skills/design/data/design-md/library/zapier.md +238 -0
- package/data/harnesses/code/skills/design/data/design-md/nurix.md +217 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx +248 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/entity-detail.tsx +245 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/list-detail.tsx +223 -0
- package/data/harnesses/code/skills/design/data/operator-pack/exemplars/log-stream.tsx +249 -0
- package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md +88 -0
- package/data/harnesses/code/skills/design/data/operator-pack/surface-catalog.md +132 -0
- package/data/harnesses/code/skills/design/data/operator-pack/trust-rubric.md +76 -0
- package/data/harnesses/code/skills/design/references/create.md +126 -0
- package/data/harnesses/code/skills/design/references/diagnosis.md +108 -0
- package/data/harnesses/code/skills/design/references/hard-rules.md +155 -0
- package/data/harnesses/code/skills/design/references/improve.md +85 -0
- package/data/harnesses/code/skills/design/references/interaction.md +77 -0
- package/data/harnesses/code/skills/design/references/introspect.md +100 -0
- package/data/harnesses/code/skills/design/references/lifecycle.md +73 -0
- package/data/harnesses/code/skills/design/references/personality.md +504 -0
- package/data/harnesses/code/skills/design/references/structure.md +138 -0
- package/data/harnesses/code/skills/design/scripts/derive-personality.mjs +706 -0
- package/data/harnesses/code/skills/design/scripts/detector.mjs +898 -0
- package/data/harnesses/code/skills/design/scripts/generate-fixtures.mjs +551 -0
- package/data/harnesses/code/skills/design/scripts/hook-config.json +11 -0
- package/data/harnesses/code/skills/design/scripts/phase-gate.mjs +386 -0
- package/data/harnesses/code/skills/design/scripts/preship-sweep.mjs +280 -0
- package/data/harnesses/code/skills/design/scripts/render-rung.mjs +690 -0
- package/data/harnesses/code/skills/design/scripts/scaffold.mjs +552 -0
- package/data/harnesses/code/skills/design/scripts/self-integrity.mjs +432 -0
- package/data/harnesses/etna/CLAUDE.md +1 -1
- package/data/harnesses/etna/harness.json +2 -2
- package/data/harnesses/etna/rules/general.md +2 -1
- package/data/harnesses/mobile/harness.json +2 -2
- package/data/harnesses/mobile/rules/general.md +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,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
|
+
```
|