Playful-technical and warm — not the cool, restrained light dev-tool its category implies. The hero sits on a warm brown-black gradient (a 238deg #73312b→#473e36 wash over #281e1d) carrying a colossal white GT America headline in tight UPPERCASE (60/57, weight 700, -1.5px tracking), then the page opens into warm cream/paper sections (#f6eedb, #faf4e9). Type mixes three 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). CTAs are full pills — a solid light #f1f1f1 or a frosted rgba(0,0,0,.2) with a 1px white border on dark, 46px tall. The one exuberant moment is a diagonal rainbow "gas" stripe (red→orange→yellow→magenta) flowing out of the hero. Accent is terracotta #de5d33; depth is warm — soft orange glows (rgba(217,119,87,.7)) and faint 1px white grid lines rather than grey drop shadows, with 8px cards.
Browse Convex in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.