# Design System — Job-Search Copilot · *Variant A2: Cal.com Softness* > Vercel-discipline + Cal.com warmth. Same monochrome rule (no accent color, no gradient), but the black is warmer (`#101010`), corners are rounder (12px), headings are calmer (weight 600, tracking `-0.025em`), and body breathes (16px / 1.65). The page reads like a refined product, not a code editor. --- ## 🚀 Using the system Tout est packagé dans **un seul CSS** déployé sur Cloudflare Pages : | Resource | URL | |---|---| | Stylesheet | `https://hunter-lp.pages.dev/hunter-design.css` | | Source spec (this doc) | `https://hunter-lp.pages.dev/design.md` | | Live components | `https://hunter-lp.pages.dev/components.html` | ### Drop-in dans n'importe quelle page HTML ```html ``` C'est tout. Tous les tokens, classes, et composants sont dispo. Pas de build step, pas de Tailwind, pas de framework. ### Customiser sans toucher au source Surcharge n'importe quel token via `:root` dans une feuille locale : ```css :root { --primary: #2A2A2A; /* lighten or darken */ --radius-lg: 10px; /* tighter rounding */ --container-max: 1400px; /* wider canvas */ } ``` ### Self-host (recommandé en prod) Quand tu publies un autre projet en prod : copie `hunter-design.css` dans ton repo plutôt que pointer vers `hunter-lp.pages.dev`. Le repo de référence reste `hunter-lp/` mais tu fixes la version qui fonctionne pour toi. ### Composants disponibles `.btn` · `.card` · `.persona` · `.kpi` · `.pill` · `.callout` · `.terminal` · `.pipeline / .stage` · `.demo / .demo__col` · `.plan` · `.waitlist` · `.nav / .brand` · `.footer` · `.eyebrow` · `.section / .section__head` · `.divider` · `.grid-2 / .grid-3 / .grid-4` · `.md` (markdown content) Showcase live + snippets HTML : [/components.html](https://hunter-lp.pages.dev/components.html). --- ## 🎨 Design philosophy | Pillar | What it means | Where it shows | |---|---|---| | **Black, white, and one blue** | The page works without color. Blue is reserved for links and one-of CTAs. | Hairline borders · pure-black headlines · `#0070F3` only on links | | **Precision over warmth** | No rounded warmth, no rust accents. Everything is typeset. | Geist font · `-0.04em` tracking · 1px borders only | | **Numbers are the brand** | Large mono numerals carry every section's claim. | KPI strip · pricing · stats inline | | **Dense but airy** | Compact information, generous whitespace between blocks. | Tight rows, fat sections | --- ## 🎯 Color system ### Core palette — softened monochrome ```css /* Surfaces */ --bg: #ffffff; /* page */ --surface-1: #ffffff; /* cards (defined by border, not fill) */ --surface-2: #f5f5f5; /* hover, subtle tint */ --surface-3: #101010; /* warm-black code blocks */ /* Borders — hairlines do the structure */ --border: #e5e5e5; --border-soft: #f0f0f0; --border-strong:#1F1F1F; /* hover, focus — warm dark, not pure black */ /* Text */ --text: #101010; /* warm black, easier on the eyes */ --text-2: #6F6F6F; --text-3: #8F8F8F; --text-4: #B0B0B0; --text-on-dark: #ededed; /* The brand is dark, not blue. CTAs are warm-black. */ --primary: #101010; --primary-hov: #2A2A2A; --primary-soft: rgba(16, 16, 16, 0.06); /* Reserved for inline links only — sober indigo */ --link: #3B49DF; /* Semantic — used only when truly needed */ --success: #101010; --danger: #D63E3E; /* slightly less alarmist than pure red */ --danger-soft: rgba(214, 62, 62, 0.06); ``` ### Why these specific values - **`#101010` instead of `#000000`** — pure black against pure white is a vibration; warm black is what cal.com, Linear-recent, and Apple settled on after years of UX research. - **`#1F1F1F` for border-strong** — hover that doesn't punch your eyes. - **`#3B49DF` reserved for links only** — never on buttons, never on KPIs. Buttons are warm-black solid. - **`#D63E3E` for errors** — less "red alert", still unmistakable. ### Usage rules - **Black is the brand.** CTAs are *black solid*, not blue. Blue is for **links** and **one** primary outline-CTA per page. - **No `--accent` exists.** No rust, no terracotta, no second hue. Discipline is the look. - **No gradient** anywhere except an optional dotted-grid pattern in the hero background. - **Borders, not shadows.** A `box-shadow` is forbidden except on actively-elevated cards. - **Color signals truth, not decoration.** Red appears only on actual errors; blue only on actual links. --- ## ✍️ Typography One family, used as text AND code. Vercel's discipline. ```css /* Geist Sans — UI, headings, body. */ --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Geist Mono — code, KPI numbers, terminal. */ --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Consolas, monospace; ``` **No serif.** Editorial warmth is exchanged for typographic precision. ### Scale (modular 1.25, calmer tracking than pure Vercel) | Token | Size | Weight | Tracking | Use | |---|---|---|---|---| | `text-xs` | 12px | 400 | 0 | metadata | | `text-sm` | 14px | 400 | 0 | secondary | | `text-base` | 16px | 400 | 0 | body | | `text-lg` | 17px | 400 | -0.005em | lead | | `text-xl` | 20px | 600 | -0.015em | h4 | | `text-2xl` | 24px | 600 | -0.02em | h3 | | `text-3xl` | 34px | 600 | -0.025em | h2 | | `text-4xl` | 44px | 600 | -0.025em | h1 | | `text-display` | 60px | 600 | -0.03em | landing hero (mobile) | | `text-mega` | 84px | 600 | -0.035em | landing hero (desktop) | ### Rules - Headlines: weight `600` (not 700 — calmer), tracking `-0.025em` typical, line-height `1.1` - Body: **16px** (not 15px), line-height `1.65` (not 1.6 — more air) - ALL CAPS labels: tracking `0.10em`, weight `500`, size 11px - KPI numerals: **mono**, weight `500-600`, tracking `-0.015em` - **No italic.** Replace italic emphasis with weight or color. ### Border-radius scale (rounder than Vercel) ```css --radius-sm: 6px; --radius: 10px; /* was 8px in pure Vercel */ --radius-lg: 14px; /* cards, big surfaces */ --radius-xl: 16px; /* waitlist box, hero panels */ ``` Cal.com goes a touch rounder than Vercel — softens the page without making it cute. --- ## 📐 Spacing & rhythm ```css --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; ``` - Section vertical padding: `--space-32` desktop, `--space-20` mobile. - Card padding: `--space-6` (tighter than light variant — Vercel is dense). - Container max-width: **1200px**, gutters `--space-8`. - **Grid is a primary visual element.** Components align to a 4-col / 12-col grid. --- ## 🧩 Components ### KPI block The signature element. Mono numerals huge in pure black. Label in 11px UPPERCASE. ```html
8 854
offres en DB
12 sources · 2026-04-29
``` - 48–64px Geist Mono, weight 600, color `#000` - 11px UPPERCASE label, tracking 0.10em, color `--text-2` - 11px meta caption, color `--text-3` ### Card ```css .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: var(--space-6); transition: border-color 0.12s, transform 0.12s; } .card:hover { border-color: var(--border-strong); /* hover = black */ transform: translateY(-1px); } ``` The hover effect is **border becoming black**. That's the Vercel signature. ### Persona card - 1px gray border, hover → black - Name in sans-serif weight 600 (no italic, no serif) - Role in mono UPPERCASE 11px - Quote in regular sans, line-height 1.55 - Stats as 2-col grid, mono numbers ### Code block — dark, monochromatic syntax ```css pre { background: #000; color: #ededed; border-radius: 6px; padding: var(--space-5) var(--space-6); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; overflow-x: auto; } ``` Token colors — minimal : - Comments: `#666` italic - Strings: `#a8c8ff` - Numbers: `#ffffff` (no color highlight — let mono do it) - Keywords: `#ededed` weight 500 - Functions: `#ededed` ### Pill / badge — hairline ```css .pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; background: transparent; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-2); } ``` No fill. Just a hairline outline. Numbers inside the pill in solid `--text`. ### CTA buttons — black is primary This is the Vercel switch from the warm variant. **CTAs are black, not blue.** ```css .btn--primary { background: #000; color: #fff; font-weight: 500; height: 44px; padding: 0 22px; border-radius: 8px; border: 1px solid #000; transition: background 0.12s, transform 0.08s; } .btn--primary:hover { background: #1a1a1a; } .btn--primary:active { transform: translateY(1px); } .btn--secondary { background: #fff; color: #000; border: 1px solid var(--border); height: 44px; padding: 0 22px; border-radius: 8px; } .btn--secondary:hover { border-color: #000; } ``` Blue (`--primary`) is reserved for **inline links** and one outline CTA per page (the one that says "Read the docs →" or similar). ### Pull-quote / callout No serif italic — that was the warm variant. Vercel just uses indentation + a hairline border-left. ```css .callout { border-left: 2px solid var(--text); padding: 4px 24px; font-size: 18px; line-height: 1.55; color: var(--text); font-weight: 500; } ``` --- ## 🌌 Backgrounds & atmosphere ### Hero No gradient by default. Pure white with optional dotted-grid pattern. ```css .hero-bg { background: var(--bg); background-image: radial-gradient(#eaeaea 1px, transparent 1px); background-size: 32px 32px; background-position: 0 0; /* Fade to transparent at the bottom */ mask-image: linear-gradient(to bottom, black 30%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%); } ``` The grid is **so subtle it almost disappears**. It's there to give the page a sense of structure, like graph paper. ### Section divider ```css .divider { height: 1px; background: var(--border); } ``` Just a flat 1px line in `--border`. No fade, no gradient. --- ## 🎬 Motion | Intent | Duration | Easing | Where | |---|---|---|---| | **Reveal** | 500ms | `cubic-bezier(0.2, 0.8, 0.2, 1)` | scroll fade + 4px up | | **Hover** | 120ms | `ease-out` | card border, button bg | | **Press** | 80ms | `ease-in` | button active | Motion is **shorter and tighter** than the warm variant. Vercel feels snappy. --- ## 🖼️ Imagery - **No stock photos.** Ever. - Persona avatars: solid black geometric shapes, 1 shape per persona. - Diagrams: pure black 1px strokes on white. Highlight node = solid black fill. - Brand mark: 4px solid square or a `Δ`-style triangle. Geometric, no gradient. --- ## ✏️ Voice & tone - **Numbers > adjectives.** "8 854 offres" not "thousands of offers". - **No buzzwords.** Banned: *synergy, leverage, passionate, results-driven, world-class, cutting-edge*. - **Past tense for what shipped, present for current state.** - **Replace italic with weight.** If you want to emphasize a word, make it `font-weight: 600`, not italic. - **Code identifiers in EN, copy in FR.** ### Tone calibration per audience | Doc | Tone | Style mix | |---|---|---| | `saas.md` | Confident-precise | Mono numbers, bordered tables, no decoration | | `ARCHITECTURE.md` | Technical-direct | Dark code blocks dominate, hairline diagrams | | `howtoscrap.md` | Engineering-blunt | Almost all dark code, white between for prose | | Landing page | Authoritative-clean | Black hero, mono KPIs, hairline cards | --- ## ✅ Quality checklist - [ ] No color other than black, white, gray, and one blue - [ ] All CTAs are black solid (blue is for links only) - [ ] No `box-shadow` on cards (border-only) - [ ] All headlines in Geist Sans, weight 700, tracking ≤ -0.04em - [ ] No italic anywhere - [ ] No gradient except optional hero dotted grid - [ ] All borders hairline 1px - [ ] `prefers-reduced-motion` respected - [ ] Light mode is the only mode