Supabase

Supabase

Open-source Firebase alternative

An open-source backend platform — Postgres, auth, storage, edge functions — styled around a dark, emerald-accented developer theme.

supabase.com

Color palette

Accent

Primary#3ecf8e

Primary brand color — key actions and emphasis.

Primary Deep#24b47e

Accent color used within the product's own UI.

Primary Soft#4ade80

Accent color used within the product's own UI.

Accent Purple#6b01c2

Accent color used within the product's own UI.

Accent Violet#644fc1

Accent color used within the product's own UI.

Accent Purple Soft#eddbf9

Accent color used within the product's own UI.

Accent Yellow#ffdb13

Accent color used within the product's own UI.

Accent Tomato#ff2201

Accent color used within the product's own UI.

Accent Indigo#054cff

Accent color used within the product's own UI.

Accent Crimson#e2005a

Accent color used within the product's own UI.

Neutral

Ink#171717

Primary text color.

Ink Secondary#212121

Secondary supporting color.

Ink Mute#707070

Primary text color.

Ink Mute 2#9a9a9a

Primary text color.

Ink Faint#b2b2b2

Primary text color.

On Primary#171717

Text and icon color on a solid primary fill.

On Dark#ffffff

Text and icon color on a solid primary fill.

Canvas#ffffff

Page background.

Canvas Soft#fafafa

Page background.

Canvas Night#1c1c1c

Page background.

Canvas Night Soft#202020

Page background.

Hairline#dfdfdf

Borders and dividers.

Hairline Strong#c7c7c7

Borders and dividers.

Hairline Cool#ededed

Borders and dividers.

Hairline Cool 2#efefef

Borders and dividers.

Hairline Cool 3#d4d4d4

Borders and dividers.

Accent Pink#c7007e

Primary text color.

Type scale

Display Xxl
64px · 500 · 1.1
Display Xl
48px · 500 · 1.1
Display Lg
36px · 500 · 1.15
Display Md
28px · 500 · 1.2
Heading Lg
22px · 500 · 1.2
Heading Md
18px · 500 · 1.4
Body Lg
18px · 400 · 1.55
Body Md
16px · 400 · 1.5
Button Md
14px · 500 · 1
Code
14px · 400 · 1.5
Caption
13px · 400 · 1.45
Micro
12px · 400 · 1.45

Fonts

PrimaryCircularWeights 400, 500Fallback: Helvetica Neue, Helvetica, Arial, sans-serif
Codeui-monospaceWeights 400Fallback: Menlo, Monaco, Consolas, Liberation Mono

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Huge
64px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Circular, ui-monospace).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 64px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.