Supabase

---
version: alpha
name: "Supabase Design System"
description: "Primary visual anchor uses #dfdfdf with dividers, card outlines, nav bottom border — most-used structural color. Typography baseline relies on Circular for hero headline — 'build in a weekend' large display text."
colors:
  border-default: "#2e2e2e"
  background-base: "#121212"
  background-surface: "#171717"
  brand-green-dark: "#006239"
  brand-green: "#3ecf8e"
  text-muted: "#4d4d4d"
  text-primary: "#fafafa"
  text-secondary: "#b4b4b4"
  text-tertiary: "#898989"
  border-subtle: "#393939"
  brand-green-light: "#72e3ad"
  surface-white: "#ffffff"
typography:
  display-hero:
    fontFamily: "Circular"
    fontSize: "72px"
    fontWeight: "400"
    lineHeight: "72px"
  heading-xl:
    fontFamily: "Circular"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "43.2px"
  heading-lg:
    fontFamily: "Circular"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "32px"
    letterSpacing: "-0.16px"
  heading-md:
    fontFamily: "Circular"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "28px"
  body-base:
    fontFamily: "Circular"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-sm:
    fontFamily: "Circular"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  label-md:
    fontFamily: "Circular"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "20px"
  label-sm:
    fontFamily: "Circular"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
  code-sm:
    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"
spacing:
  spacing-1: "4px"
  spacing-2: "8px"
  spacing-3: "12px"
  spacing-4: "16px"
  spacing-5: "20px"
  spacing-6: "24px"
  spacing-8: "32px"
  spacing-10: "40px"
  spacing-12: "48px"
  spacing-16: "64px"
  spacing-20: "80px"
  spacing-24: "96px"
  spacing-32: "128px"
---

## Overview

Primary visual anchor uses #dfdfdf with dividers, card outlines, nav bottom border — most-used structural color. Typography baseline relies on Circular for hero headline — 'build in a weekend' large display text.

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

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 20 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 and surface background in light theme".
- **action-text** maps to `text-primary`: Role "text" is grounded by usage context "Body text, headings, nav links, buttons — dominant foreground".
- **content-text** maps to `text-secondary`: Role "text" is grounded by usage context "Secondary body text, muted labels".
- **border-primary** maps to `border-default`: Role "primary" is grounded by usage context "Dividers, card outlines, nav bottom border — most-used structural color".

### Dark Theme

### Primary Brand
- **Border Default** (#2e2e2e): Dividers, card outlines, nav bottom border in dark theme. Role: primary. {authored: rgb(46, 46, 46), space: rgb}

### Text Scale
- **Brand Green** (#3ecf8e): Hero accent text, CTA button fill, logo mark in dark theme. Role: text. {authored: rgb(62, 207, 142), space: rgb}
- **Text Muted** (#4d4d4d): Disabled states, very muted secondary text in dark theme. Role: text. {authored: rgb(77, 77, 77), space: rgb}
- **Text Primary** (#fafafa): Body text, headings, nav links — dominant foreground in dark theme. Role: text. {authored: rgb(250, 250, 250), space: rgb}
- **Text Secondary** (#b4b4b4): Secondary body text, muted labels in dark theme. Role: text. {authored: rgb(180, 180, 180), space: rgb}
- **Text Tertiary** (#898989): Placeholder text, captions in dark theme. Role: text. {authored: rgb(137, 137, 137), space: rgb}

### Interactive
- **Border Subtle** (#393939): Subtle dividers and input borders in dark theme. Role: border. {authored: rgb(57, 57, 57), space: rgb}

### Surface & Shadows
- **Background Base** (#121212): Primary page background in dark theme. Role: background. {authored: rgb(18, 18, 18), space: rgb}
- **Background Surface** (#171717): Card and panel surfaces in dark theme. Role: background. {authored: rgb(23, 23, 23), space: rgb}
- **Brand Green Dark** (#006239): Deep green tint used for brand button backgrounds in dark theme. Role: background. {authored: rgb(0, 98, 57), space: rgb}

### Light Theme

### Primary Brand
- **Border Default** (#dfdfdf): Dividers, card outlines, nav bottom border — most-used structural color. Role: primary. {authored: rgb(223, 223, 223), space: rgb}

### Text Scale
- **Brand Green** (#3fcf8e): Hero accent text ('Scale to millions'), CTA button fill, logo mark. Role: text. {authored: rgb(63, 207, 142), space: rgb}
- **Text Muted** (#b2b2b2): Disabled states, very muted secondary text. Role: text. {authored: rgb(178, 178, 178), space: rgb}
- **Text Primary** (#171717): Body text, headings, nav links, buttons — dominant foreground. Role: text. {authored: rgb(23, 23, 23), space: rgb}
- **Text Secondary** (#525252): Secondary body text, muted labels. Role: text. {authored: rgb(82, 82, 82), space: rgb}
- **Text Tertiary** (#707070): Placeholder text, captions, de-emphasized content. Role: text. {authored: rgb(112, 112, 112), space: rgb}

### Interactive
- **Border Subtle** (#c7c7c7): Input borders, subtle dividers. Role: border. {authored: rgb(199, 199, 199), space: rgb}

### Surface & Shadows
- **Background Base** (#fcfcfc): Primary page and surface background in light theme. 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 White** (#ffffff): Card surfaces, modal backgrounds, toast backgrounds. 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 — 'Build in a weekend' large display text | Circular | 72px | 400 | 72px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Section headings and feature titles | Circular | 36px | 400 | 43.2px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Sub-section headings and card titles | Circular | 24px | 400 | 32px | -0.16px | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Tertiary headings and feature labels | Circular | 18px | 400 | 28px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Primary body text, nav items, general content | Circular | 16px | 400 | 24px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Secondary body text, descriptions, metadata | Circular | 14px | 400 | 20px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Button labels, nav trigger labels, emphasized UI text | Circular | 14px | 500 | 20px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Badges, tags, small captions | Circular | 12px | 400 | 16px | normal | Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |
| Inline code snippets and monospace labels | 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.

### 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 |
|------|-------|----|-------|
| spacing-1 | 4px | 4 | Extracted spacing token |
| spacing-2 | 8px | 8 | Extracted spacing token |
| spacing-3 | 12px | 12 | Extracted spacing token |
| spacing-4 | 16px | 16 | Extracted spacing token |
| spacing-5 | 20px | 20 | Extracted spacing token |
| spacing-6 | 24px | 24 | Extracted spacing token |
| spacing-8 | 32px | 32 | Extracted spacing token |
| spacing-10 | 40px | 40 | Extracted spacing token |
| spacing-12 | 48px | 48 | Extracted spacing token |
| spacing-16 | 64px | 64 | Extracted spacing token |
| spacing-20 | 80px | 80 | Extracted spacing token |
| spacing-24 | 96px | 96 | Extracted spacing token |
| spacing-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, -134.423, 0) ; matrix(1, 0, 0, 1, -249.324, 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, -157.065, 0) ; matrix(1, 0, 0, 1, -291.32, 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-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 |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm 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.