Screenrove / Design references
Supabase design guide
A near-white, low-contrast developer site with Manrope headings, Inter body text, hairline borders and a single green for primary actions.
Typography
Observed family: Inter. Font files are not distributed.
marketing: Light, low-contrast technical
- Canvas:
oklch(0.995 0 34) - Card and secondary button surface:
oklch(1 0 34) - Primary text:
oklch(0.1 0 34) - Secondary text:
oklch(0.52065 0 34) - Muted strong text:
oklch(0.394455 0 34) - Primary button fill:
oklch(0.525 0.12 157.5) - Brand green (logo, icons):
#3ecf8e - Announcement bar:
#f8f3ef
Layout and components
- A 55px announcement bar sits above a 64px navigation bar (logo, five menu items, GitHub star count, Sign in and Start your project); the navigation bar stays pinned when scrolled and is shown only at the top of the stitched image.
- Content width is 1088px (x 176 to 1264) on the home and Database pages and 1120px on pricing; the FAQ narrows to 864px.
- Sections are divided by full-width 1px rules; feature sections on the Database page repeat at roughly 690–700px intervals (headings at y 2536, 3268, 3962, 4656, 5340).
- All three pages end with the same centred 'Build in a weekend, scale to millions' call to action, a compliance strip (SOC2 Type 2, HIPAA, ISO 27001) and a seven-column footer with a newsletter field.
- Primary action: 38px high, 9.29px radius, oklch(0.525 0.12 157.5) fill with a faint linear-gradient overlay, near-white 14px / 500 label, 8px 16px padding. Secondary action: same size on a white oklch(1 0 34) fill with dark label.
- Pricing plan buttons are 42px high with a 9.72px radius and a 15px / 500 label; Enterprise uses the white secondary style.
- Demo tabs (Table Editor, SQL Editor, RLS Policies) are fully rounded 38px pills with a 1px border; the active tab has a dark border.
- Cards use a white fill, hairline borders at oklch(0.1 0 34 / 0.0812725) and rounded corners; template and product cards pair a small icon, a 14px / 500 title and 14px grey description.
- FAQ rows are 56px disclosure buttons with 16px / 500 questions in oklch(0.394455 0 34), a chevron on the right and hairline dividers; all were closed at capture.
Independent reference guide from headless-browser captures and computed styles. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.
Download DESIGN.md