Supabase design guide

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.