# convex.dev

Source: https://www.convex.dev/
Captured: 2026-09-20
Tags: saas, landing, mixed, both, retro-warm, swiss, confident, warm, technical, nostalgic
Colors: #281d1d, #f6eedb, #544b49, #8b2777, #ee332e, #77706e, #f4a81d, #d2cdc4
Type (h1): neue-haas-grotesk-display · 60px/51px · 900 · tracking -2.4px — "ALL GAS NO BREAKAGES"
Type (h2): vcr · 10px/15px · 400 · tracking 0.6px — "TRUSTED BY"
Type (h3): gtAmerica · 20px/30px · 500 — "Jamie Turner"
Type (body): gtAmerica · 14px/17.5px · 400 — "Stack is the Convex developer portal and blog, sharing bright ideas and techniqu"
Type (small): gtAmerica · 12px/15px · 400 — "1M weekly"
Type (button): gtAmerica · 16px/24px · 500 — "Start building"
Button: "Start building" — fill #f1f1f1, text #141414, radius 9999px, border 1px, padding 10px 20px, height 46px, type 16px/500
Radii: 8px (23), 4px (12), 9999px (11), 12px (8), 16px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/convex-dev/hero.webp?v=6cae7542
- Page crop (mid-1): https://media.lvly.design/library/convex-dev/mid-1.webp?v=6440505a
- Page crop (mid-2): https://media.lvly.design/library/convex-dev/mid-2.webp?v=29612bbb
- Hero (mobile): https://media.lvly.design/library/convex-dev/mobile-hero.webp?v=ed76fdc4
- Full page (desktop): https://media.lvly.design/library/convex-dev/full.jpg?v=b62b71a9
- Full page (mobile): https://media.lvly.design/library/convex-dev/mobile-full.jpg?v=81831e6a
- Clip preview (mp4): https://media.lvly.design/library/convex-dev/video-fj84zo.preview.mp4?v=27e66997

A developer-infrastructure landing page that swaps the usual blue-on-black dev-tool palette for a warm one: espresso brown `#281d1d` and cream `#f6eedb` alternating as full-bleed bands, with olive and oxblood bands further down, so the whole page reads as a stack of colored paper rather than a dark site with sections. The type does the heavy lifting — Neue Haas Grotesk Display at weight 900 set in caps at 60px on 51px leading with -2.4px tracking, which compresses "ALL GAS NO BREAKAGES" into a single dense block, against GT America at a tight 14px/17.5px for body. A bitmap VCR mono at 10px, all caps, 0.6px tracking, sits in a hairline outline pill above every section and is the only other voice on the page. The one piece of illustration in the fold is a three-stripe ribbon — amber, red, magenta — that sweeps out from under the hero panel and runs off the left edge, a 70s racing-stripe gesture that carries the "all gas" line without an image. It works because the restraint is total everywhere else: no gradients, no glass, no glow, flat fills with 8px and 4px radii, pill CTAs, and a hero whose product shot is replaced by three copyable command fields.

## Steal-worthy details

- Caps display at negative leading — 60px on 51px (0.85), weight 900, -2.4px tracking — so two lines of caps lock into one solid rectangle of ink with no gap between them
- The speed ribbon: three stripes in amber `#f4a81d`, red `#ee332e` and magenta `#8b2777` curving out from beneath the hero panel and running full-bleed off the left edge — the only illustration above the fold, and it carries the headline's metaphor instead of decorating it
- A bitmap mono as the label voice — 10px on 15px, caps, 0.6px tracking, inside a 4px-radius hairline outline pill, centered above every section (TRUSTED BY, BUILT FOR THE FRONTIER, QUOTES, BUILT BY, ENTERPRISE READY). One repeated component replaces five eyebrow styles
- The hero shows a console, not a screenshot: three stacked command fields, each with its own copy glyph, the top one an agent-setup prompt. The thing you take away from the fold is on the clipboard, not in an image
- Pill CTA pair with a value swap rather than a color swap — a solid near-white `#f1f1f1` primary on dark and a 1px-outline ghost beside it, both 9999px, 46px tall, 16px/500, 10px 20px padding
- Two-tone benefit lines: bold lede plus regular clause on one line ("ACID transactions so concurrent writes never corrupt your data"), checkbox-marked, stacked as 4px hairline rows — the claim and its reason share a line instead of becoming a heading and a paragraph
- Every feature card ends in its own install command — a mono `$ npm install @convex-dev/…` field with a trailing arrow — so the card is the entry point, not a link to one
- Bands are different warm neutrals, never tints of one: cream over espresso, then olive for the quotes and oxblood for the compliance strip, each one a full-bleed change of paper rather than a lightened surface

## Style recipe

Build on two warm grounds that alternate as full-bleed bands: espresso `#281d1d` and cream `#f6eedb`. Never use pure white or pure black. When a third or fourth band is needed, reach for another warm neutral of the same family — olive `#4a4a33`, oxblood `#6e2b25` — not a tint or a lightened surface of the first two. Body copy is `#f6eedb` on the dark bands and `#281d1d` on the cream; secondary text is the same ink at roughly 60% (`#77706e` on cream, `#d2cdc4` on dark).

Type is two families plus one novelty. Headings: a grotesk display (Neue Haas Grotesk Display, Helvetica Now Display) at weight 900. H1 is caps, 60px on 51px leading — under 1.0, deliberately — with -2.4px (-0.04em) tracking, so multi-line headings read as one mass. Section heads are sentence case at 40–44px, weight 700, -0.02em. Body is a neutral grotesk (GT America, Söhne) at 14px on 17.5px, weight 400, normal tracking; sub-heads 20px/30px weight 500; small print 12px/15px. The third voice is a bitmap or VCR-style mono at 10px on 15px, caps, +0.6px tracking, used **only** for labels, eyebrows, terminal text and compliance strips — never for a sentence.

One accent family, used sparingly: amber `#f4a81d`, red `#ee332e`, magenta `#8b2777`. Deploy them as a set, in a single graphic gesture per page — parallel stripes, a swept ribbon, a scattered pixel motif — rather than as button fills. The primary CTA is a near-white `#f1f1f1` pill with `#141414` text, 9999px, 46px tall, 16px/500, 10px 20px padding; the secondary is the same pill with a transparent fill and a 1px ink-at-30% border. Nothing else is a pill except status chips.

Radii: 8px is the default for cards and fields, 4px for small labels and rows, 12–16px for large panels, 9999px for buttons and chips. Hairlines are 1px at 10–15% ink; there are no shadows and no gradients on surfaces — depth comes only from the band change and from a card one step off its ground. Panels nest: a 12px outer panel holds 8px inner fields with 16px of padding between them.

Rhythm: sections are 120–160px tall in padding, each opened by a centered eyebrow pill in the bitmap mono, then a left-aligned or centered heading, then the content. Feature grids are three equal cards with 24px gutters; logo and integration rows are five or six equal chips at 8px radius. End every card that documents something installable with a mono command field and a trailing arrow.

Motion is minimal and mechanical: 150–200ms ease-out on hover state changes, a copy glyph that swaps to a check, and a typed-cursor effect in one terminal field. No parallax, no scroll-triggered reveals, no glass. The two moves that make it recognizable are the ultra-tight caps display block and the one full-bleed multi-stripe ribbon that escapes its section.