Supabase

How it works

hero:

Centered text stack—small gray label, large teal-highlighted headline "Build in a weekend / Scale to millions" in two-color split, supporting paragraph, dual CTA buttons (teal primary, outlined secondary)—topped by navbar with logo and login.

layout:

Hero at top, then modular 3-column card grids for features, alternating full-width sections (dark background for text, lighter for visual assets), vertical stat rows with icon+number+label stacking, testimonial logos in horizontal rows, footer with multi-column nav—all sections bottom-padded with 60-80px gutters.

type:

Sans serif body (appears to be Inter or similar) sized 16–18px for body copy, large 48–56px headline weights with 1.2–1.3 line height, monospace numerals in stat rows for tech credibility, all-caps small labels (10–12px) in teal for hierarchy markers.

colors:

Near-black background (#0a0a0a range) with teal/cyan (#10b981 or similar) used exclusively for interactive elements (CTAs, links, highlights), secondary gray for labels and metadata, white for primary text, creating maximum affordance hierarchy through color restraint.

distinctive:

Teal accent color applied surgically only to buttons and keyword phrases within headlines, forcing the eye to track conversion paths and creating a visual reward loop that feels restrained rather than aggressive.