---
version: alpha
name: Supabase
description: "Postgres green on clean white — open-source infrastructure with editorial calm."
colors:
  on-surface-variant: "#A0A0A0"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#3FCF8E"
  primary: "#72E3AD"
  deep-green: "#15593B"
  link-green: "#0A874F"
  pale-green: "#A9F1CA"
  body-gray: "#525252"
  violet: "#6B35DC"
  orchid: "#8E4EC6"
  lilac: "#BE93E4"
  blue: "#0070F3"
  amber: "#B45309"
typography:
  micro:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  base:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading-4:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.005em
  heading-3:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-2:
    fontFamily: Inter
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.015em
rounded:
  underline-hairline-detail: 2px
  small-chip: 4px
  buttons-inputs-links: 6px
  icon-tiles: 8px
  badges: 11px
  cards: 16px
spacing:
  2xs: 4px
  xs: 8px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
---
# Supabase — Style Reference
> Postgres green on clean white — open-source infrastructure with editorial calm.

**Theme:** light

Supabase dresses developer infrastructure in a designer's restraint: a bright emerald (`#3FCF8E`) is the single brand voice, and it is spent deliberately — the second line of a two-line headline, the logo, a hairline border, the fill of one button — never sprayed across the page. Everything else is a disciplined neutral stack: pure white canvas, near-black display type, and two grays for body and muted text. The signature move is the split headline — a black clause ("Build in a weekend") answered by an emerald clause ("Scale to millions") — set in Manrope at a heavy 46px display weight. Body and UI run in Inter with Supabase's tell-tale `450` weight, and every code fragment drops into Source Code Pro. The layout is airy and contained: generous whitespace, a bordered feature-card grid at 16px radius, and lightweight shadows that barely lift a surface off the page. Purples, a blue, and an amber exist only inside code samples and category badges — editorial accents, never chrome.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Emerald | `#3FCF8E` | `--color-emerald` | The brand. The accent headline word, the logo, hairline borders, focus rings. The one color that means "Supabase" — use it once per view, never as body text. |
| Mint | `#72E3AD` | `--color-mint` | Primary CTA fill ("Start your project"). A softer, lighter green than the brand emerald so dark text stays legible on top. Reserved for the single most important action. |
| Deep Green | `#15593B` | `--color-green-deep` | Dark green ink used on mint/pale-green fills — the label color inside a green button or pill. Never on white. |
| Link Green | `#0A874F` | `--color-green-link` | Saturated mid-green for inline text links and success states — the readable green when emerald is too light on white. |
| Pale Green | `#A9F1CA` | `--color-green-pale` | Faint mint wash for subtle highlights, hover fills, and code-diff additions. Background only. |
| Ink | `#000000` | `--color-ink` | Display headings and highest-contrast text. Effectively the page's black; carries the bold half of every split headline. |
| Canvas | `#FFFFFF` | `--color-canvas` | The page. Pure white, edge to edge — no off-white tint. Also the fill of secondary (outlined) buttons and inputs. |
| Body Gray | `#525252` | `--color-text` | Default paragraph and description text. The workhorse reading color — softer than ink so headings stay dominant. |
| Muted Gray | `#A0A0A0` | `--color-muted` | Placeholder text, disabled labels, faint metadata (GitHub counts, code prompts). The quietest legible tone. |
| Violet | `#6B35DC` | `--color-violet` | Syntax keyword / function color in code samples and doc chrome. Editorial only — never a UI accent, never a CTA. |
| Orchid | `#8E4EC6` | `--color-orchid` | Category-badge / illustration fill in the purple family. Decorative surface accent, used sparingly. |
| Lilac | `#BE93E4` | `--color-lilac` | Lighter purple badge/illustration fill, paired with Orchid for tinted chips. Background only. |
| Blue | `#0070F3` | `--color-blue` | Info links and framework/logo accents inside content. Not a brand color — appears in code and integration contexts. |
| Amber | `#B45309` | `--color-amber` | Warning / string-literal accent in code and callouts. The single warm note; strictly editorial. |

## Tokens — Typography

### Manrope — Display & headings. The confident, slightly-geometric sans that carries the split hero headline at a heavy display weight. · `--font-display`
- **Substitute:** Inter Tight, Satoshi, system-ui
- **Weights:** 500 (display), 600 (section headings), up to 700
- **Sizes:** 46px display, 34px, 28px, 22px
- **Line height:** 1.0–1.15 on display; tight, so the two headline clauses stack cleanly
- **Letter spacing:** near-zero to slightly negative on large sizes
- **Role:** Headlines and section titles only — the emphatic, brand-forward voice.

### Inter — Body & UI. The quiet interface workhorse; Supabase's distinctive `450` weight sits between regular and medium for crisp-but-calm reading. · `--font-body`
- **Substitute:** system-ui, Helvetica Neue, sans-serif
- **Weights:** 400, 450 (signature UI weight), 500, 600
- **Sizes:** 12px, 13px, 14px (base UI), 15px, 16px, 18px
- **Line height:** ~1.5 on paragraphs, ~1.4 on dense UI labels
- **Letter spacing:** default; no tracking tricks
- **Role:** Paragraphs, descriptions, buttons, inputs, nav — everything that isn't a headline or code.

### Source Code Pro — Code & terminal. Monospace for CLI snippets, email placeholders, and API paths — the "it's real infrastructure" texture. · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 400, 500
- **Sizes:** 11px, 12px, 13px, 14px
- **Line height:** ~1.5 for scannable code blocks
- **Letter spacing:** default monospace
- **Role:** Inline code, command examples (`$ supabase functions deploy`), placeholder data.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro | 11px | 1.4 | 0 | `--text-micro` |
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 13px | 1.45 | 0 | `--text-sm` |
| Body | 14px | 1.5 | 0 | `--text-body` |
| Body Lg | 15px | 1.5 | 0 | `--text-body-lg` |
| Base | 16px | 1.5 | 0 | `--text-base` |
| Lead | 18px | 1.5 | 0 | `--text-lead` |
| Heading 4 | 22px | 1.3 | -0.005em | `--text-h4` |
| Heading 3 | 28px | 1.2 | -0.01em | `--text-h3` |
| Heading 2 | 34px | 1.15 | -0.01em | `--text-h2` |
| Display | 46px | 1.05 | -0.015em | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 10px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 32px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Underline / hairline detail | 2px |
| Small chip | 4px |
| Buttons, inputs, links (default) | 6px |
| Icon tiles | 8px / 9px |
| Badges | 11px / 12px |
| Cards | 16px |
| Pill button ("Start your project" variant) | full (rounded-full) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Ring (subtle 1px) | `rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px` | `--shadow-sm` |
| Lift (card hover) | `rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px` | `--shadow-lg` |
| Inset hairline (on dark) | `rgba(255,255,255,0.12) 0px 0px 0px 1px inset` | `--shadow-inset` |

### Layout
- **Page max-width:** ~1200px, centered
- **Section gap:** generous vertical rhythm (~64–96px)
- **Card padding:** 24px
- **Element gap:** 8–16px

## Components

### Primary Button
**Role:** The single most important action ("Start your project").
Mint fill `#72E3AD` with dark `#15593B`/ink text, 6px radius, ~8px 16px padding, Inter 14px `450`. No shadow — the green does the lifting. Exactly one per view. A pill variant exists (full radius, 8px 32px padding) for hero placements.

### Secondary Button
**Role:** The supporting action ("Request a demo").
White `#FFFFFF` fill with a 1px neutral hairline, ink text, 6px radius, matching padding and 14px `450` weight. Sits calmly beside the primary — same shape, no color.

### Nav Bar
**Role:** Top-level navigation (Product, Developers, Solutions, Pricing, Docs, Blog).
White, near-transparent bar with a subtle bottom hairline. Emerald wordmark left, text links center in Inter 14px, and a GitHub star-count chip + Sign in + primary CTA right. Quiet until you need it.

### Feature Card
**Role:** Product-capability tile in the hero grid (Postgres Database, Authentication, Edge Functions…).
16px radius, 1px hairline border, 24px padding, white fill. Icon + heading (Manrope) + Inter body copy, often with a monospace or illustrated inset. Shadow appears only on hover (`--shadow-lg`).

### Input
**Role:** Text/email field.
White fill, 1px hairline, 6px radius, 8px padding, Inter 14px `450`, muted `#A0A0A0` placeholder. Emerald focus ring — the only place the brand green touches a form.

### Text Link
**Role:** Inline navigation and doc links.
Link Green `#0A874F` or Blue `#0070F3` (in content contexts), Inter `450`, 2px underline detail. No color shift on the surrounding text — just the link itself.

### Badge / Chip
**Role:** Category tag or status pill.
11–12px radius, small padding, Inter 12px `450`. Neutral by default; purple family (`#8E4EC6` / `#BE93E4`) or pale green (`#A9F1CA`) for tinted categories. Never used for primary actions.

### Code Block
**Role:** CLI commands and API examples.
Source Code Pro 12–14px on a light or dark inset panel. Emerald for the command verb, Violet `#6B35DC` for keywords, Amber `#B45309` for strings — syntax colors that live only here.

### Icon Tile
**Role:** Feature glyph container.
~8–9px radius square, thin border or tinted fill, holding a line icon above each feature heading. Small, consistent, monochrome.

### GitHub Stat Chip
**Role:** Social-proof count in the nav (106.8K).
Small pill with the mark + count in muted gray, Inter caption size. Understated credibility, not a CTA.

### Split Headline
**Role:** The hero signature.
Two stacked Manrope clauses at 46px `500` — the first in Ink `#000000`, the second in Emerald `#3FCF8E`. The whole brand argument ("Build in a weekend / Scale to millions") in one color contrast.

## Do's and Don'ts

### Do
- Spend emerald `#3FCF8E` like currency — the logo, one accent word, a border, a focus ring. Once per view.
- Use the split headline: black clause + emerald clause in Manrope at display weight.
- Keep the canvas pure white `#FFFFFF` and let whitespace carry the layout.
- Set body and UI in Inter at the `450` weight — it's the Supabase fingerprint.
- Give exactly one mint `#72E3AD` primary button per section; make everything else white/outlined.
- Reserve purples, blue, and amber for code syntax and category badges only.
- Bound feature cards with a 1px hairline at 16px radius; reveal shadow on hover, not at rest.

### Don't
- Don't paint emerald across large surfaces or use it as body text — it is an accent, not a fill.
- Don't introduce a second primary button color; the mint CTA is the only colored action.
- Don't tint the canvas — no cream, no gray page background.
- Don't let Violet/Blue/Amber escape code and badges into UI chrome or CTAs.
- Don't lean on heavy shadows; elevation here is a whisper (1–15px, 10% black) or a hairline.
- Don't set headings in Inter or body in Manrope — the two roles never swap.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The page and most content backgrounds. |
| 1 | Card | `#FFFFFF` | Same white as canvas, separated by a 1px hairline rather than a fill step. |
| 2 | Tint (green) | `#A9F1CA` | Faint mint wash for highlighted or additive states. |
| 3 | Inverse | `#000000` | Dark inset panels (code blocks, illustrations) with a `rgba(255,255,255,0.12)` inset hairline. |

## Elevation
Depth is conveyed almost entirely by hairline borders and whitespace, not shadow. Cards sit flat on the white canvas, bounded by a 1px neutral border; on hover they lift with a soft two-layer shadow (`0 10px 15px -3px` + `0 4px 6px -4px`, both 10% black). Dark inset panels invert instead of casting shadow, using a `rgba(255,255,255,0.12)` inset ring to define their edge. The overall impression is a flat, precise, document-like plane — infrastructure that feels engineered, not decorated.

## Imagery
Restrained and technical. Illustrations are line-art and diagrammatic — a wireframe Postgres elephant, a globe grid for Edge Functions, schema-and-endpoint diagrams for Data APIs — rendered in monochrome grays with occasional emerald or purple accent nodes. Real code and email-placeholder data stand in for decorative imagery. No stock photography, no gradients-as-hero. The mood is "look at the actual product," conveyed through UI fragments and developer artifacts rather than lifestyle shots.

## Layout
Contained (~1200px), center-aligned, generously spaced. The hero is a two-column split: an oversized headline + description left, CTAs beneath. Below, a responsive feature grid of bordered cards (2–4 across) forms the product tour, each card a self-contained capability with icon, heading, copy, and an illustrated or code inset. A sticky, near-transparent top nav with a hairline underline holds primary navigation; the primary CTA is pinned top-right and repeated in the hero. Rhythm is airy — sections breathe with large vertical gaps.

## Typography Signature
Supabase runs a clean three-voice system. Manrope is the **loud** voice — reserved for headlines, where its slightly geometric letterforms carry the 46px split headline and make the emerald clause pop against the black one. Inter is the **quiet** voice — everything functional, tuned to the unusual `450` weight that reads a hair firmer than regular without the density of medium, keeping dense UI legible and calm. Source Code Pro is the **literal** voice — every command, path, and placeholder that signals real infrastructure. The move that ties it together: headings stay tight (line-height ~1.05–1.2, faint negative tracking) so they feel engineered, while body opens up to ~1.5 for comfortable reading. Loud / quiet / literal — three fonts, three clearly separated jobs, no overlap.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` / text: `#525252` / heading: `#000000` / surface: `#FFFFFF` (hairline-bordered) / border: `#3FCF8E` (accent) or neutral hairline / accent: `#3FCF8E` / primary action: `#72E3AD` fill with `#15593B` text / link: `#0A874F`

## Example Component Prompts
1. **Split hero headline**: Two stacked lines in Manrope 46px weight 500, line-height 1.05. First line `#000000` ("Build in a weekend"), second line `#3FCF8E` ("Scale to millions"). Left-aligned on white.
2. **Primary CTA button**: Mint `#72E3AD` fill, text `#15593B`, Inter 14px weight 450, 6px radius, 8px 16px padding, no shadow. Pair with a white secondary button (1px hairline, ink text, same shape).
3. **Feature card**: White `#FFFFFF` fill, 1px hairline border, 16px radius, 24px padding. Line icon in an ~8px tile, Manrope 22px heading, Inter 14px `#525252` body. Soft two-layer shadow on hover only.
4. **Input with emerald focus**: White fill, 1px hairline, 6px radius, 8px padding, Inter 14px weight 450, placeholder `#A0A0A0`, focus ring in emerald `#3FCF8E`.
5. **Code snippet inset**: Source Code Pro 13px on a light panel — command verb in `#3FCF8E`, keywords `#6B35DC`, strings `#B45309`, `$` prompt in `#A0A0A0`.

## Similar Brands
- **Vercel** — the same clean-white, hairline-bordered, near-black-type developer aesthetic (and shares the `#0070F3` blue in content).
- **Linear** — restrained neutral canvas with a single confident accent and tight, engineered typography.
- **Stripe** — infrastructure-as-product presented through crisp UI fragments and disciplined color spend.
- **PlanetScale** — database platform peer with the same "developer tooling, designed" polish and green-family accent.
- **Resend** — minimal white canvas, monospace-flecked developer voice, one-accent restraint.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-emerald: #3FCF8E;
  --color-mint: #72E3AD;
  --color-green-deep: #15593B;
  --color-green-link: #0A874F;
  --color-green-pale: #A9F1CA;
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-text: #525252;
  --color-muted: #A0A0A0;
  --color-violet: #6B35DC;
  --color-orchid: #8E4EC6;
  --color-lilac: #BE93E4;
  --color-blue: #0070F3;
  --color-amber: #B45309;

  /* Typography — Families */
  --font-display: 'Manrope', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-micro: 11px;
  --text-caption: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-body-lg: 15px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-h4: 22px;
  --text-h3: 28px;
  --text-h2: 34px;
  --text-display: 46px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-hairline: 2px;
  --radius-chip: 4px;
  --radius-base: 6px;
  --radius-tile: 8px;
  --radius-badge: 12px;
  --radius-card: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px;
  --shadow-lg: rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  --shadow-inset: rgba(255,255,255,0.12) 0px 0px 0px 1px inset;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-emerald: #3FCF8E;
  --color-mint: #72E3AD;
  --color-green-deep: #15593B;
  --color-green-link: #0A874F;
  --color-green-pale: #A9F1CA;
  --color-ink: #000000;
  --color-canvas: #FFFFFF;
  --color-text: #525252;
  --color-muted: #A0A0A0;
  --color-violet: #6B35DC;
  --color-orchid: #8E4EC6;
  --color-lilac: #BE93E4;
  --color-blue: #0070F3;
  --color-amber: #B45309;

  /* Typography — Families */
  --font-display: 'Manrope', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-micro: 11px;
  --text-caption: 12px;
  --text-sm: 13px;
  --text-body: 14px;
  --text-body-lg: 15px;
  --text-base: 16px;
  --text-lead: 18px;
  --text-h4: 22px;
  --text-h3: 28px;
  --text-h2: 34px;
  --text-display: 46px;
  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-hairline: 2px;
  --radius-chip: 4px;
  --radius-base: 6px;
  --radius-tile: 8px;
  --radius-badge: 12px;
  --radius-card: 16px;
  --radius-full: 9999px;
}
```