convex.dev

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.

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.