Supabase design system

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.

Captured 25 June 2026Light UI2,866 elements read

Download tokens Read it yourself

Supabase colors

The brand roles and neutrals supabase.com renders, with how many elements use each one.

Brand colors

Primary#72e3ad5 uses
Secondary#00bb681 uses
Accent#a9f1ca1 uses

Neutrals

#dfdfdf2,738 uses
#1717171,418 uses
#525252504 uses
#707070463 uses
#ffffff267 uses
#b2b2b2262 uses
#000000183 uses
#c7c7c773 uses
#ededed12 uses
#d4d4d49 uses

Backgrounds

#fcfcfc
#f8f8f8
#ffffff
#fdfdfd

Text colors

#00000020.47:1 on #fcfcfc
#17171717.47:1 on #fcfcfc
#5252527.62:1 on #fcfcfc
#7070704.83:1 on #fcfcfc
#3fcf8e1.94:1 on #fcfcfc
#b2b2b22.07:1 on #fcfcfc
#00bb682.46:1 on #fcfcfc

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#171717`	`#fdfdfd`	17.62:1	AAA

Supabase fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Circular: sans, most text (2,865 elements)
Source Code Pro: mono, body (1 elements)

Body text: 16px at weight 400, line height 24px.

Weights in use: 400, 500.

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 and radii

Spacing scale

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

Corner radii

6px
11px
16px

Medium radii lead, with a few larger ones. 2 distinct box shadows.

Motion

The motion reads as mixed.

Durations

instant: 75ms
xs: 150ms
sm: 200ms
md: 300ms
xl: 750ms

Easing

custom (309 uses): cubic-bezier(0.4, 0, 0.2, 1)
ease-out (29 uses): cubic-bezier(0, 0, 0.2, 1)
ease-in-out (2 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

96/100, grade A

Components found: buttons (30), cards (127), inputs (1), links (212), navigation (3), footer (1).

By category

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

433 !important rules — prefer specificity over overrides
4482 duplicate CSS declarations

Download the tokens

The files designlang wrote for supabase.com. Run it yourself for a fresh read: npx designlang supabase.com.

The core values as CSS variables

: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;
}

Read supabase.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Duolingo design system

Light UI, duolingo-sans, #d7ffb8

Webflow design system

Light UI, WF Visual Sans Variable, #146ef5

Clerk design system

Light UI, geistNumbers, #6c47ff

Figma design system

Light UI, figmaSans, #e4ff97

Quick answers

What font does Supabase use?

supabase.com sets most of its text in Circular (2,865 elements), with Source Code Pro alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Supabase's brand colors?

The brand roles on supabase.com are primary #72e3ad, secondary #00bb68 and accent #a9f1ca, on a #fcfcfc background. The neutrals used most are #dfdfdf, #171717 and #525252.

How do I use the Supabase design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang supabase.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from supabase.com's public pages on 25 June 2026, so it shows what the site renders, not Supabase's internal source files. Supabase is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of supabase.com on 25 June 2026. Supabase is a trademark of its owner; designlang is not affiliated with it. More: the full Supabase brand kit, the token extraction guide and the markdown version of this page.