Design teardown
Supabase
A wide off-white product homepage. A sticky blurred bar holds the mark, short menus, a quiet account action, and one green action. Below, a two-column hero leads into a horizontal row of illustrated product cards, a slow gray logo strip, a dashboard preview with pill tabs, a template grid, story panels, and a footer with a single email field. Headlines are two short lines. Feature notes are one sentence. Longer, conversational quotes appear only in the community area.
supabase.com
Design character
Quiet developer canvas
The page feels like a light studio for software people: lots of air, tight geometric titles, small diagrams, and copy that stays concrete. Green is rare. Most of the page is warm white, near-black, and mid gray.
Typography
Manrope carries headlines at a medium or semibold weight with very tight leading. Inter carries navigation, body, and controls, including a 450 weight for reading text. Source Code Pro appears in code samples. A custom mono, Departure Mono Superbase, labels diagrams at a 1:1 line height.
Color system
The stage is a warm off-white. Text is near-black or a flat mid gray. Green shows up as a deep button fill and a brighter mark. Lines are faint gray. A cream strip sits at the top.
Spacing and geometry
Spacing follows a 4px grid with generous section air. Content sits in a 1280px container. Wide screens add about 96px of side padding. Cards are roomy inside and separated by small gaps.
Layout
A single light column with a sticky top bar. The hero splits a large title from a short lede. Product features run as a sideways card strip. Later sections stack a logo loop, a tabbed preview, a template grid, stories, and a multi-column footer.
Motion
Motion stays short and local. Controls change color and scale in a fifth of a second. Card shells ease over 150ms. A logo strip loops in a straight line for 35 seconds. Small dots pulse about every 600ms. Overlays fade in over 300ms, with slide keyframes available for panels.
UI fingerprint
- Split headline color The hero is two tightly stacked lines in Manrope. The first line is near-black and the second line matches the green action.
- Flat controls with a ring Primary actions are a deep green with near-white type. Quiet actions are white with an inset hairline, not a floating shadow.
- Diagrams over paragraphs Feature cards are tall and mostly illustration, with a short title and a single gray sentence.
- Slow gray loop Customer marks travel as a pale strip on a 35 second linear loop, while the rest of the page stays still.