supabase.com design system

---
version: alpha
name: "supabase.com"
description: "Design system extracted from https://supabase.com/ on 2026-09-28"
colors:
  background: "#f8f3ef"
  foreground: "#ffffff"
  muted-foreground: "#001a10"
  primary: "#3fcf8e"
  on-primary: "#111111"
  secondary: "#8e4ec6"
  border: "#3fcf8e"
typography:
  headline-display:
    fontFamily: "Manrope"
    fontSize: "46px"
    fontWeight: 500
    lineHeight: "1"
  headline-lg:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: "1.5"
  headline-md:
    fontFamily: "Manrope"
    fontSize: "34px"
    fontWeight: 600
    lineHeight: "1.11"
  body-md:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 450
    lineHeight: "1.43"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.33"
  button:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "1.14"
rounded:
  none: "0px"
  xl: "21px"
  lg: "11px"
  full: "9999px"
  md: "5px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "32px"
  5: "40px"
  6: "96px"
components:
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "26px"
    padding: "4px 10px"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "9px"
    height: "64px"
    padding: "8px 10px"
  card:
    backgroundColor: "transparent"
    rounded: "21px"
    padding: "24px"
---

# supabase.com

## Overview

Supabase | The Postgres Development Platform: Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

Sharp, squared-off controls, layered shadows for depth, confident display type at 46px / 500, a single green accent on neutrals. The site ships in light mode by default. Measured from 6000 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f8f3ef` | Page background |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#001a10` | Secondary text, captions |
| primary | `#3fcf8e` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#8e4ec6` | Secondary accent (pink) |
| border | `#3fcf8e` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f8f3ef`, `#000000`, `#0c0f24`, `#002533`, `#a9f1ca`, `#8e4ec6`, `#be93e4`, `#0070f3`.

Gradients in use: `linear-gradient(oklch(0.1 0 34 / 0.0812725) 0px, oklab(0.1 0 0 / 0.0406362) 100%)`; `linear-gradient(rgb(253, 73, 168) 0%, rgb(253, 41, 128) 10%, rgb(252, 26, 88) 20%, rgb(250, 31, 65) 30%, rgb(250, 39, 51) 40%, rgb(251, 61, 38) 50%, rgb(252, 84`; `linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, oklch(1 0 34) 85%)`.

The accent `#3fcf8e` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Manrope** for h1, h2, h3: Google Fonts (Manrope).
- **Inter** for body, label, button: Google Fonts (Inter).

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Manrope | 46px | 500 | 1 | normal |
| headline-lg | Manrope | 16px | 600 | 1.5 | normal |
| headline-md | Manrope | 34px | 600 | 1.11 | normal |
| body-md | Inter | 14px | 450 | 1.43 | normal |
| label-md | Inter | 12px | 500 | 1.33 | normal |
| button | Inter | 14px | 500 | 1.14 | normal |

Type scale in use: 12px, 13px, 14px, 15px, 16px, 34px, 46px. Base body size 14px.

The H1 renders at 46px / 500, start aligned, up to 536px wide. Sample: "Build in a weekendScale to millions".

## Layout

- Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 40, 96 (px).
- Flex and grid gaps: 8, 16, 24, 32 px.
- Content max width: 1280px, centred.
- Breakpoints: 640px, 768px, 1024px, 1280px, 1536px.
- Header: 65px tall, relative, backdrop blur, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid oklch(0.1 0 34 / 0.0812725); 7 nav links at 16px / 450 (Pricing · Docs · Blog · 110.8K · Sign in · Start your project).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset`
- shadow-2: `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`
- shadow-3: `oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px`
- shadow-4: `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`

## Shapes

- Buttons: 0px
- Inputs: 0px
- Cards and panels: 21px
- Images and media: 0px
- Radius scale: none 0px, xl 21px, lg 11px, full 9999px, md 5px

## Components

### Button, ghost

Background transparent, text `#000000`, border none, radius 8px, height 26px, padding 4px 10px, 12px / 500, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset`. Sample label: "Skip to content".

### Button, secondary

Background transparent, text `#000000`, border 1px solid transparent, radius 9px, height 64px, padding 8px 10px, 14px / 500, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`. Sample label: "Product".

### Card

Background `transparent`, border 1px solid transparent, radius 21px, padding 24px, no shadow. Typical size about 288×237px.

### Link

Colour `#00482f`, underline, weight 500.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via prefers-color-scheme. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#f8f3ef` | `#0b0e0d` |
| foreground | `#ffffff` | `#ffffff` |
| primary | `#3fcf8e` | `#94e6b7` |
| on-primary | `#111111` | `#111111` |
| secondary | `#8e4ec6` | `#8e4ec6` |
| border | `#3fcf8e` | `#3ecf8e` |

Dark-theme shadows: `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset`; `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`; `oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px`; `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 176px | 16px | 46px, 2 lines, start | 65px, 6 links, 2 CTA | text only | 2→2 col; 2→1 col; 6→6 col | content-width |
| laptop 1024px | 928px | 48px | 16px | 46px, 2 lines, start | 65px, 6 links, 2 CTA | text only | 2→2 col; 2→1 col; 6→6 col | content-width |
| tablet 768px | 720px | 24px | 16px | 46px, 2 lines, start | 65px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 342px | 24px | 16px | 34px, 2 lines, start | 65px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | 1 full-width |

- H1 goes 46px → 34px (74%), 2 → 2 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 16px at every width.
- Phone side gutter 24px.
- 1 buttons stretch full-width on phones.

## Interaction & Motion

3559 elements carry transitions; typical 0.4s with ease, mostly on opacity, background-color, border-color. 4 running keyframe animations (pulse 0.6s infinite; marquee-reverse 30s infinite; marquee 35s infinite).

- Hover on button-primary ("Start your project"): no visible change; cursor pointer; transition background-color, border-color, color, scale | 0.2s | cubic-bezier(0.22, 1, 0.36, 1).
- Hover on button-secondary ("Product"): text oklch(0.1 0 34) → oklch(0.525 0.12 157.5), icon/inner colour → oklch(0.525 0.12 157.5); cursor pointer; transition background-color, border-color, color, scale | 0.2s | cubic-bezier(0.22, 1, 0.36, 1).
- Hover on nav-link ("Pricing"): no visible change; cursor pointer.
- Focus on button-primary: box-shadow ring rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.995 0 34) 0px .
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 6px gap, shifted right; oklch(1 0 34), radius 16px, padding 0px 0px, shadow yes; 18 items, 40px tall, 14px, padding 0px 0px, with icons, with descriptions, 2 columns; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 5 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 8px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#3fcf8e` for actions and focus; never paint large areas with it.
- Do keep body text at 14px in Inter and headings in Manrope.
- Do match corner radii per element class (buttons 0px, cards 21px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).