# Supabase Design System

> High-contrast developer utility meets vibrant emerald accents on a clean, structured canvas.

**Source:** https://supabase.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Supabase utilizes a "monochrome plus one" strategy, where a high-density grayscale foundation is punctuated by a single vibrant emerald green (`#3fcf8e`). The interface is highly structured, using a rigorous grid of cards with 6px to 12px radii and 1px borders (`#dfdfdf`). Typography pairs the geometric **Circular** for marketing and UI with **Source Code Pro** for technical headings and data, signaling a developer-first toolset. The system avoids shadows in favor of flat surfaces and hairline dividers, creating a precise, "dashboard-ready" aesthetic.

## Signature DNA
1. **The Emerald Pulse:** Use of `#3fcf8e` as the exclusive chromatic signal for primary actions and success states against a strictly achromatic backdrop (Found on `supabase.com`, `supabase.com/pricing`).
2. **Technical Monospace Display:** Large-scale `Source Code Pro` used for display copy and sub-headers to ground the brand in engineering utility (Found on `supabase.com`, `supabase.com/about`).
3. **Hairline Grid System:** Content is almost universally contained in cards with 1px borders (`#dfdfdf`) and no elevation shadows, mimicking a code editor or IDE layout (Found on `supabase.com`, `supabase.com/pricing`).

## Family Map
Not applicable. No sub-brands captured in source.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-gray-1200` | `#171717` | Primary text, dark surfaces, main buttons | 993 | 1 | Computed Style |
| `--color-white` | `#fdfdfd` | Page background, card surfaces | 291 | 1 | Computed Style |
| `--color-gray-1100` | `#707070` | Secondary body text, muted labels | 226 | 1 | Computed Style |
| `--color-gray-700` | `#dfdfdf` | Default card borders, dividers | 136 | 1 | Computed Style |
| `--color-gray-800` | `#c7c7c7` | Stronger borders, disabled states | 54 | 1 | Computed Style |
| `--color-black` | `#000000` | Deepest backgrounds, footer icons | 54 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-brand-900` | `#3fcf8e` | Primary CTA background, success icons | 19 | 1 | `--color-brand-900` |
| `accent-soft` | `#72e3ad` | Hover states for brand buttons | 11 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `--color-green-900` | `#30a46c` | Success text / Confirmation |
| `--color-red-900` | `#e5484d` | Error states / Destructive actions |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Circular | 400, 500 | Main UI, Body, Marketing | Inter | Proprietary |
| Source Code Pro | 400, 500, 700 | Technical headings, Code | Source Code Pro | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 72px | 72px | normal | 400 | Hero H1 | `h1.text-foreground` |
| `display-lg` | 48px | 48px | normal | 400 | Section Intro | `p.mt-2.pb-1` |
| `heading-lg` | 36px | 43.2px | normal | 400 | Section Headers | `h3.h2` |
| `heading-md` | 30px | 36px | normal | 400 | Pricing Headers | `h2#how-compute-pricing-works` |
| `heading-sm` | 24px | 32px | normal | 400 | Card Titles | `h3.text-foreground.text-2xl` |
| `body-lg` | 18px | 28px | normal | 400 | Lead Paragraphs | `p.pt-2.text-foreground` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `a.group.relative` |
| `body-sm` | 14px | 20px | normal | 500 | UI Labels / Small text | `p.text-foreground.text-sm` |
| `caption` | 12px | 16px | normal | 400 | Table headers / Meta | `div.absolute.inset-0` |

### Principles
1. **Monospace for Emphasis:** Use Source Code Pro for large display text to signal technical authority.
2. **Tight Heading Leading:** Display sizes (72px) use 1.0 line-height for maximum impact.
3. **Medium Weight for UI:** Interactive elements like buttons and nav links use weight 500 for clarity.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-1` | 4px | 104 |
| `space-3` | 12px | 166 |
| `space-4` | 16px | 113 |
| `space-6` | 24px | 114 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sm` | 6px | Buttons, small cards | Pricing CTAs |
| `radius-md` | 8px | Standard cards | Feature cards |
| `radius-lg` | 12px | Large containers | Pricing tiers |
| `radius-xl` | 16px | Feature heroes | Homepage cards |
| `radius-pill` | 9999px | Badges, tags | Community badges |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Universal | All cards on `supabase.com` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Start project)
**Pages observed:** `supabase.com`, `supabase.com/pricing`
**Spec:** Background `#3fcf8e` / Text `#171717` / Radius `6px` / Padding `8px 16px` / Typography `Circular 500 14px`
**States observed:** Default | Hover: `#72e3ad` | Focus | Active | Disabled: captured

#### Secondary Button
**Role:** Alternative actions (Request a demo)
**Pages observed:** `supabase.com`, `supabase.com/about`
**Spec:** Background `#fdfdfd` / Text `#171717` / Border `1px #d4d4d4` / Radius `6px` / Padding `8px 16px`

### Tier 2: Patterns
#### Feature Card
**Role:** Product feature highlights
**Pages observed:** `supabase.com`
**Spec:** Background `#fcfcfc` / Border `1px #dfdfdf` / Radius `8px` / Padding `24px`
**States observed:** Default | Hover: not captured

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** `supabase.com/pricing`
**Spec:** Background `#ffffff` / Border `1px #dfdfdf` / Radius `12px` / Padding `32px`

### Tier 3: Surface-specific
#### Code Preview Surface
**Role:** Technical documentation snippets
**Pages observed:** `supabase.com`
**Spec:** Background `#171717` / Text `#fdfdfd` / Radius `8px` / Font `Source Code Pro`

#### Community Badge
**Role:** Social proof / Discord link
**Pages observed:** `supabase.com`
**Spec:** Background `transparent` / Border `1px #c7c7c7` / Radius `9999px` / Padding `4px 12px`

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px |
| Section Padding (Vertical) | 128px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; 1-column card stacks |
| Desktop | 1440px | Multi-column feature grids (3-up or 4-up) |

## Imagery & decoration
Supabase uses high-fidelity technical illustrations (e.g., the Postgres Elephant, database schemas) rendered in thin lines and grayscale. The only decorative color is the brand green, used sparingly in icons or small accents.

## Do's
- Use `#3fcf8e` for the primary "Start" action only.
- Contain all distinct content blocks within cards with visible `#dfdfdf` borders.
- Use `Source Code Pro` for any text that describes a technical metric or feature name.
- Maintain a minimum vertical section gap of 64px.
- Use weight 500 for UI labels to ensure legibility against `#fdfdfd`.

## Don'ts
- **Wrong:** Using a shadow for card elevation. **Right:** Use a 1px border. **Reason:** The brand identity is flat and utility-focused.
- **Wrong:** Using green for body text. **Right:** Use `#171717` or `#707070`. **Reason:** Green is reserved for interactive signals and success.
- **Wrong:** Mixing multiple accent colors. **Right:** Stick to the Emerald/Gray/White palette. **Reason:** Supabase is a monochrome-first system.

## Similar brands
- Vercel (monochrome, high-contrast)
- Stripe (structured grids, clean type)
- Linear (developer-tool aesthetic, flat surfaces)

## Quick start

```css
/* CSS Variables */
:root {
  --color-brand: #3fcf8e;
  --color-foreground: #171717;
  --color-background: #fdfdfd;
  --color-border: #dfdfdf;
  --font-sans: "Circular", sans-serif;
  --font-mono: "Source Code Pro", monospace;
  --radius-card: 8px;
}
```

## Agent prompt examples
- "Generate a Supabase-style feature card: white background, 1px #dfdfdf border, 8px radius, using Circular 16px for body text and a small #3fcf8e icon."
- "Create a primary button using the Supabase emerald #3fcf8e, 6px radius, and 14px Circular Medium text."

## Known gaps
- Hover states for non-primary buttons were not explicitly captured in the computed style evidence.
- Dark mode specific tokens were not fully mapped as the primary analysis focused on the light-mode homepage/pricing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://supabase.com | 1440px | 2026-06-06 |
| Pricing | https://supabase.com/pricing | 1440px | 2026-06-06 |
| Mobile | https://supabase.com | 390px | 2026-06-06 |