Supabase

---
version: alpha
name: "Supabase Design System"
description: "Supabase uses a dual-theme (light/dark) developer-focused design system anchored by a single custom typeface. Circular. across all text roles. The brand identity is expressed through a vivid green (#3ecf8e / #3fcf8e) used exclusively for accent text, CTA buttons, and logo marks against near-black or near-white surfaces. Elevation is communicated entirely through border contrast (1px borders in #2e2e2e dark / #dfdfdf light) rather than shadows, creating a flat, structured aesthetic. Spacing follows an 8px base grid with consistent multiples (8, 16, 24, 32, 96px). Border radii cluster at 6–8px for interactive elements and 12–16px for cards and panels."
colors:
  border-default: "#2e2e2e"
  background-base: "#121212"
  brand-green-dark: "#006239"
  surface-card: "#171717"
  surface-elevated: "#242424"
  brand-green: "#3ecf8e"
  text-muted: "#898989"
  text-primary: "#fafafa"
  text-secondary: "#b4b4b4"
  border-subtle: "#393939"
  brand-green-light: "#72e3ad"
typography:
  hero-display:
    fontFamily: "Circular"
    fontSize: "72px"
    fontWeight: "400"
    lineHeight: "72px"
  section-heading:
    fontFamily: "Circular"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "43.2px"
  subheading:
    fontFamily: "Circular"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "32px"
    letterSpacing: "-0.16px"
  large-body:
    fontFamily: "Circular"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "28px"
  body-default:
    fontFamily: "Circular"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-medium:
    fontFamily: "Circular"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  label-medium:
    fontFamily: "Circular"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  label-small:
    fontFamily: "Circular"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
  code:
    fontFamily: "Source Code Pro"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "1.2px"
rounded:
  radius-sm: "6px"
  radius-md: "8px"
  radius-lg: "12px"
  radius-xl: "16px"
  radius-pill: "11px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-5: "20px"
  space-6: "24px"
  space-8: "32px"
  space-10: "40px"
  space-12: "48px"
  space-16: "64px"
  space-24: "96px"
  space-32: "128px"
---

## Overview

Supabase uses a dual-theme (light/dark) developer-focused design system anchored by a single custom typeface. Circular. across all text roles. The brand identity is expressed through a vivid green (#3ecf8e / #3fcf8e) used exclusively for accent text, CTA buttons, and logo marks against near-black or near-white surfaces. Elevation is communicated entirely through border contrast (1px borders in #2e2e2e dark / #dfdfdf light) rather than shadows, creating a flat, structured aesthetic. Spacing follows an 8px base grid with consistent multiples (8, 16, 24, 32, 96px). Border radii cluster at 6–8px for interactive elements and 12–16px for cards and panels.

**Signature traits:**
- Dual typeface system: Pairs Circular and Source Code Pro across the type hierarchy.

## Colors

The palette uses 19 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `background-base`: Role "background" is grounded by usage context "Primary page background in light mode".
- **content-text** maps to `text-primary`: Role "text" is grounded by usage context "Primary body and heading text in light mode".
- **border-primary** maps to `border-default`: Role "primary" is grounded by usage context "Default border for nav, cards, dividers, and inputs in light mode".
- **border-border** maps to `border-subtle`: Role "border" is grounded by usage context "Subtle input and component borders in light mode".

### Dark Theme

### Primary Brand
- **Border Default** (#2e2e2e): Default border for nav, cards, dividers, and inputs in dark mode. Role: primary. {authored: rgb(46, 46, 46), space: rgb}

### Text Scale
- **Brand Green** (#3ecf8e): Primary CTA button fill, hero headline accent, logo mark in dark mode. Role: text. {authored: rgb(62, 207, 142), space: rgb}
- **Text Muted** (#898989): Muted/tertiary text, captions, and metadata in dark mode. Role: text. {authored: rgb(137, 137, 137), space: rgb}
- **Text Primary** (#fafafa): Primary body and heading text in dark mode. Role: text. {authored: rgb(250, 250, 250), space: rgb}
- **Text Secondary** (#b4b4b4): Secondary and subdued text in dark mode. Role: text. {authored: rgb(180, 180, 180), space: rgb}

### Interactive
- **Border Subtle** (#393939): Subtle secondary borders in dark mode. Role: border. {authored: rgb(57, 57, 57), space: rgb}

### Surface & Shadows
- **Background Base** (#121212): Primary page background in dark mode. Role: background. {authored: rgb(18, 18, 18), space: rgb}
- **Brand Green Dark** (#006239): Deep green tint used for brand button hover or pressed states. Role: background. {authored: rgb(0, 98, 57), space: rgb}
- **Surface Card** (#171717): Card and panel surface fills in dark mode. Role: background. {authored: rgb(23, 23, 23), space: rgb}
- **Surface Elevated** (#242424): Elevated surface or hover state backgrounds in dark mode. Role: background. {authored: rgb(36, 36, 36), space: rgb}

### Light Theme

### Primary Brand
- **Border Default** (#dfdfdf): Default border for nav, cards, dividers, and inputs in light mode. Role: primary. {authored: rgb(223, 223, 223), space: rgb}

### Text Scale
- **Brand Green** (#3fcf8e): Primary CTA button fill, hero headline accent, logo mark. Role: text. {authored: rgb(63, 207, 142), space: rgb}
- **Text Muted** (#707070): Muted/tertiary text, captions, and metadata in light mode. Role: text. {authored: rgb(112, 112, 112), space: rgb}
- **Text Primary** (#171717): Primary body and heading text in light mode. Role: text. {authored: rgb(23, 23, 23), space: rgb}
- **Text Secondary** (#525252): Secondary and subdued text in light mode. Role: text. {authored: rgb(82, 82, 82), space: rgb}

### Interactive
- **Border Subtle** (#c7c7c7): Subtle input and component borders in light mode. Role: border. {authored: rgb(199, 199, 199), space: rgb}

### Surface & Shadows
- **Background Base** (#fcfcfc): Primary page background in light mode. Role: background. {authored: rgb(252, 252, 252), space: rgb}
- **Brand Green Light** (#72e3ad): Hover states and lighter green tints on brand elements. Role: background. {authored: rgb(114, 227, 173), space: rgb}
- **Surface Card** (#ffffff): Card and panel surface fills in light mode. Role: background. {authored: rgb(255, 255, 255), space: rgb}

## Typography

Typography uses Circular, Source Code Pro across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Circular and Source Code Pro for visual contrast. Weight range spans regular, medium. Sizes range from 12px to 72px.

### Font Roles
- **Headline Font**: Circular
- **Body Font**: Circular

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — largest display text on the page | Circular | 72px | 400 | 72px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Section-level headings and feature titles | Circular | 36px | 400 | 43.2px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Card titles and sub-section headings | Circular | 24px | 400 | 32px | -0.16px | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Hero body copy and introductory paragraphs | Circular | 18px | 400 | 28px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Default body text, nav items, and general content | Circular | 16px | 400 | 24px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Secondary body text, descriptions, and metadata | Circular | 14px | 400 | 20px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Button labels, nav links, and interactive element labels | Circular | 14px | 500 | 20px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Badges, tags, and small UI labels | Circular | 12px | 400 | 16px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Inline code snippets and code block content | Source Code Pro | 12px | 400 | 16px | 1.2px | Source Code Pro, Office Code Pro, Menlo, monospace | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 8px base grid with scale values 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128.

### Responsive Strategy
- **mobile (<= 600px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 4px | 4 | Extracted spacing token |
| space-2 | 8px | 8 | Extracted spacing token |
| space-3 | 12px | 12 | Extracted spacing token |
| space-4 | 16px | 16 | Extracted spacing token |
| space-5 | 20px | 20 | Extracted spacing token |
| space-6 | 24px | 24 | Extracted spacing token |
| space-8 | 32px | 32 | Extracted spacing token |
| space-10 | 40px | 40 | Extracted spacing token |
| space-12 | 48px | 48 | Extracted spacing token |
| space-16 | 64px | 64 | Extracted spacing token |
| space-24 | 96px | 96 | Extracted spacing token |
| space-32 | 128px | 128 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | backdrop-filter | blur(4px) |
| Light | outline-color | rgb(23, 23, 23) ; rgb(112, 112, 112) ; rgb(178, 178, 178) |
| Light | outline-width | 3px ; 0px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, -120.764, 0) ; matrix(1, 0, 0, 1, -223.991, 0) ; matrix(1, 0, 0, 1, -305.438, 0) |
| Dark | backdrop-filter | blur(4px) |
| Dark | outline-color | rgb(250, 250, 250) ; rgb(137, 137, 137) ; rgb(77, 77, 77) |
| Dark | outline-width | 3px ; 0px |
| Dark | outline-offset | 0px |
| Dark | transform | matrix(1, 0, 0, 1, -144.845, 0) ; matrix(1, 0, 0, 1, -268.655, 0) ; matrix(1, 0, 0, 1, -305.438, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 6px | 6 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-pill | 11px | 11 | Control corner |
| radius-lg | 12px | 12 | Control corner |
| radius-xl | 16px | 16 | Card corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 6px | px |
| radius-md | 8px | px |
| radius-lg | 12px | px |
| radius-xl | 16px | px |
| radius-pill | 11px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 600px | (max-width: 600px) |
| Breakpoint 2 | Unknown | (prefers-reduced-motion) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.