# Convex — Marketing Site Design Spec > Source: convex.dev (live DOM, computed styles), 2026-07-25 (desktop 1512px). > Coverage: home. Dashboard: behind login (`needs-dashboard`). Responsive: breakpoints not captured. Motion: not captured in detail. ## 1. Visual Theme & Atmosphere Convex reads as playful-technical, not the restrained light dev-tool its category suggests. The hero sits on a warm brown-black gradient (a `238deg` `#73312b`→`#473e36` wash) carrying a colossal white GT America headline in tight uppercase, then the page opens into warm cream/paper sections. The signature is a vibrant rainbow "gas" stripe (red→orange→yellow→magenta) that flows diagonally out of the hero — the visual pun on "all gas, no breakages." Type mixes three voices: GT America grotesque for headlines and UI, IBM Plex Mono for the terminal/command cards, and a retro `vcr` display face for tiny uppercase eyebrows, which gives the whole thing a warm, slightly lo-fi maker character. Controls are full pills; surfaces are mostly flat with occasional warm orange glows and a faint 1px white grid. Feels: warm, playful-technical, maker, confident. ## 2. Color Palette & Roles ### Ink & surfaces | Token | Hex | Role / usage | |---|---|---| | ink | `#141414` | Primary text on light | | ink-800 | `#292929` | Dark headings / panels | | ink-700 | `#38383a` | Dark surface | | warm-dark | `#281e1d` | Warm near-black hero base | | brown | `#473e36` | Hero gradient stop / warm dark | | brown-red | `#73312b` | Hero gradient stop | | paper | `#f6eedb` | Warm cream section | | paper-2 | `#faf4e9` | Cream section | | off-white | `#fffff9` | Near-white text on dark / light panel | | white | `#ffffff` | Panels / light pill | ### Warm tints & neutrals | Token | Hex | Role / usage | |---|---|---| | butter | `#fdf4cc` | Pale-yellow tint | | tan | `#f4dcb4` | Warm tint | | peach | `#f1d4c1` | Warm tint | | sage | `#7d8465` | Olive/sage accent block | | gray-400 | `#a9a9ac` | Secondary text | | gray-500 | `#6d6d70` | Tertiary text | | gray-450 | `#8b8b8e` | Muted | ### Accent | Token | Value | Role / usage | |---|---|---| | terracotta | `#de5d33` | Warm orange accent / icon | | warm glow | `rgba(217,119,87,.7)` | Signature soft warm glow shadow | | rainbow "gas" | red→orange→yellow→magenta | Signature diagonal gradient stripe (image/SVG) | Rule: warm palette throughout — brown-black hero into cream paper; the rainbow gas stripe is the one exuberant moment. ## 3. Typography Rules - `gtAmerica` (GT America) — grotesque; headlines (700, tight tracking), body and buttons (500). - `IBM Plex Mono` — terminal/command cards, code, some labels. - `vcr` — retro VCR display face for tiny UPPERCASE eyebrows/labels (the signature lo-fi touch). | Role | Family | Size/Line | Weight | Tracking | Case | |---|---|---|---|---|---| | Hero display (h1) | gtAmerica | 60 / 57 | 700 | -1.5px | UPPERCASE | | Section (h2) | gtAmerica | 40 / 40 | 700 | -0.4 to -1px | sentence | | Body | gtAmerica | 16 | 400 | normal | sentence | | Button | gtAmerica | 16 | 500 | normal | sentence | | Eyebrow | vcr | 10 / 15 | 400 | +0.6px | UPPERCASE | | Code / terminal | IBM Plex Mono | 13–14 | 400 | normal | — | Patterns: headlines are heavy (700) with tight negative tracking; the hero is uppercase, sections sentence-case. Tiny eyebrows use the retro `vcr` face for character. ## 4. Component Stylings ### Buttons — full pills - **Solid (light)**: bg `#f1f1f1`, text `#141414`, radius full-pill, height `46px`, padding `10px 20px`, gtAmerica 16px/500 (e.g. "Start building"). - **Frosted outline (on dark)**: bg `rgba(0,0,0,.2)`, 1px white border, white text, full-pill, same size (e.g. "Read the docs"). ### Terminal / command cards - Dark cards with IBM Plex Mono command lines ("/plugin install convex", "npm create convex@latest"), a copy icon, and small vcr labels (CLAUDE CODE, CODEX); the signature product component. ### Badges - npm / GitHub stat pills in the nav (rounded, icon + "1.2M weekly" / "21,013 stars"). ### Cards / panels - Radius `8px` (also 4/12/16px); mostly flat, occasional warm glow. ### Nav - "convex" bold lowercase wordmark, Product/Developers dropdowns, Blog, Changelog, Docs, Pricing; right npm/GitHub badges + Log in. A dark announcement bar with a vcr eyebrow sits above. ## 5. Layout Principles - Warm brown-black hero: colossal uppercase headline + sub + two pill CTAs on the left, terminal/command cards on the right, with the rainbow gas stripe flowing out beneath. - Page transitions into warm cream/paper sections; alternating dark/cream bands. - Faint 1px white grid lines structure some sections. - Content roughly centered; generous scale on headlines. ## 6. Depth & Elevation - Radii: full-pill buttons; `8px` cards; `4/6/12/16px` minor. - Elevation: mostly flat; signature soft **warm glow** `rgba(217,119,87,.7)` and faint 1px white grid gradients rather than grey drop shadows. - Depth comes from the warm gradient washes and the rainbow stripe, not heavy shadows. ## 7. Motion - Not captured in detail; animated command-card content and the flowing gas stripe suggest lively but restrained motion. ## 8. Backgrounds, Effects & WebGL - Warm brown-black hero gradient (`238deg #73312b`→`#473e36`) into cream/paper sections. - Signature diagonal **rainbow "gas" gradient stripe** (red→orange→yellow→magenta), delivered as imagery/SVG. - Faint 1px white grid-line gradients; warm glow accents. No heavy WebGL observed. ## 9. Do's and Don'ts ### Do - Open on a warm brown-black hero, then move into warm cream/paper sections. - Set colossal GT America headlines at 700 with tight negative tracking; make the hero UPPERCASE. - Use the retro `vcr` face for tiny uppercase eyebrows and IBM Plex Mono for terminal/command cards. - Make CTAs full pills — solid light on dark, frosted outline on dark imagery. - Deploy the rainbow "gas" stripe as the one exuberant brand moment. - Keep depth warm: soft orange glows and 1px grid lines, not grey shadows. ### Don't - Don't render it as a cool, restrained light dev-tool — the palette is warm brown-black + cream. - Don't drop the retro vcr eyebrows or the mono terminal cards; they carry the maker character. - Don't overuse the rainbow — it is a single signature stripe, not a repeated decoration. - Don't add heavy grey drop shadows; depth is warm gradient + glow. ## 10. Responsive Behavior - Not captured (desktop 1512px only). A cookie banner and announcement bar are present. ## 11. Agent Prompt Guide Quick token reference: - Hero `#281e1d` / gradient `#73312b`→`#473e36` · Paper `#f6eedb` / `#faf4e9` · Ink `#141414` · Accent terracotta `#de5d33` · Rainbow gas stripe - Fonts: `gtAmerica` (headlines 700 tight / UI 500) · `vcr` (retro eyebrows) · `IBM Plex Mono` (terminal) · Hero 60/57 700 UPPER · Radius 8px card / full pill · Button 46px - Buttons: solid light `#f1f1f1` / frosted outline (1px white border) on dark · Warm glow `rgba(217,119,87,.7)`, not grey shadows Use the Convex design language: playful-technical and warm, not a cool restrained dev-tool. Open on a warm brown-black hero (a 238deg `#73312b`→`#473e36` gradient over `#281e1d`) carrying a colossal white GT America headline in tight UPPERCASE (60/57, weight 700, -1.5px tracking), then move into warm cream/paper sections (`#f6eedb`, `#faf4e9`) with sentence-case 40/40 700 headings. Three type voices: GT America grotesque for headlines and UI (buttons 500), IBM Plex Mono for the dark terminal/command cards, and a retro `vcr` display face for tiny uppercase eyebrows (10px, +0.6px) that give the maker character. CTAs are full pills — a solid light `#f1f1f1` with dark text, or a frosted `rgba(0,0,0,.2)` with a 1px white border on dark imagery, 46px tall. The one exuberant moment is a diagonal rainbow "gas" stripe (red→orange→yellow→magenta) flowing out of the hero. Depth is warm — soft orange glows (`rgba(217,119,87,.7)`) and faint 1px white grid lines rather than grey drop shadows; cards are 8px. Accent is terracotta `#de5d33`. Feels: warm, playful-technical, maker, confident. Avoid: a cool/light restrained treatment, dropping the retro vcr eyebrows or mono terminal cards, over-repeating the rainbow, and heavy grey shadows.