# Supabase design system: colors, fonts and tokens

> Supabase's website (supabase.com) uses a light interface with #72e3ad as its primary color and Circular as the main typeface, with Source Code Pro alongside it. designlang measured 7 font sizes from 12px to 72px, 11 spacing values, 3 corner radii.

Source: https://supabase.com, captured 25 June 2026. Page: https://designlang.app/design-system/supabase

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#72e3ad` | 5 |
| Secondary | `#00bb68` | 1 |
| Accent | `#a9f1ca` | 1 |

Neutrals: `#dfdfdf`, `#171717`, `#525252`, `#707070`, `#ffffff`, `#b2b2b2`, `#000000`, `#c7c7c7`, `#ededed`, `#d4d4d4`

Backgrounds: `#fcfcfc`, `#f8f8f8`, `#ffffff`, `#fdfdfd`

## Fonts

- Circular (sans), 2865 elements
- Source Code Pro (mono), 1 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 72px | 400 | 72px | normal | h1, span |
| 36px | 400 | 45px | normal | div, span, h3, br |
| 24px | 400 | 32px | -0.16px | p, span |
| 18px | 400 | 28px | normal | p, br, h4 |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 14px | 500 | 20px | normal | li, button, svg, path |
| 12px | 400 | 16px | normal | a, span, svg, path |

## Spacing

1px, 40px, 48px, 64px, 90px, 112px, 128px, 157px, 208px, 246px, 304px

## Radii

6px, 11px, 16px

## Motion

Feel: mixed. Durations: 75ms, 150ms, 200ms, 300ms, 750ms.

## Audit

Overall 96/100 (grade A).

- Color Discipline: 92/100
- Typography Consistency: 100/100
- Spacing System: 100/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 100/100
- Accessibility: 100/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #72e3ad;
  --color-secondary: #00bb68;
  --color-accent: #a9f1ca;
  --color-background: #fcfcfc;
  --color-text: #000000;
  --color-neutral-1: #dfdfdf;
  --color-neutral-2: #171717;
  --color-neutral-3: #525252;
  --color-neutral-4: #707070;
  --font-primary: "Circular", sans-serif;
  --font-secondary: "Source Code Pro", monospace;
  --radius-sm: 6px;
  --radius-md: 11px;
  --radius-lg: 16px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/supabase-com/supabase-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/supabase-com/supabase-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/supabase-com/supabase-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/supabase-com/supabase-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/supabase-com/supabase-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/supabase-com/supabase-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/supabase-com/supabase-com-DESIGN.md)

Regenerate: `npx designlang supabase.com`