Design System — Supabase Design System

Visual Theme & Atmosphere

Supabaze's design language is engineered for clarity above all else. The marketing surfaces sit on {colors.canvas} (pure white), with text rendered in {colors.ink} (#171717 — near-black, never pure black). Across the entire system the only consistent chromatic event is the emerald green primary ({colors.primary} — #3ecf8e) — used as the filled CTA, occasional accent dot, and the signature highlight color in the wordmark. Everything else is a calibrated grey ladder from #ededed hairline-cool to #171717 ink, with thin black-on-white typography doing most of the visual work.

Typography runs Circular at weight 500 for display and 400 for body. The display tier uses tight negative letter-spacing (-1.92px at 64px) to pull the rounded humanist letterforms into editorial density. There's no atmospheric gradient, no full-bleed photography, no dark-canvas marketing track — the brand commits to white.

...

Key Characteristics:

Single emerald primary ({colors.primary} #3ecf8e) as the only chromatic event; everything else is monochrome.
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: home (/), /database, /partners/integrations, /partners/integrations/powersync, /solutions/ai-builders, /pricing.

Brand & Accent

Emerald ({colors.primary} — #3ecf8e): The signature CTA color. Filled-button background, brand wordmark accent, dot indicator.
Emerald Deep ({colors.primary-deep} — #24b47e): Pressed-state lift of the primary.
...

Surface

Canvas ({colors.canvas} — #ffffff): Default page background.
Canvas Soft ({colors.canvas-soft} — #fafafa): Barely-tinted off-white for alternating section bands.
...

Text

Ink ({colors.ink} — #171717): Default body text. Near-black, never pure.
Ink Secondary ({colors.ink-secondary} — #212121): Slightly cooler near-black for body emphasis.
...

primary

#3ecf8e

primary-deep

#24b47e

primary-soft

#4ade80

ink

#171717

ink-secondary

#212121

ink-mute

#707070

ink-mute-2

#9a9a9a

ink-faint

#b2b2b2

on-primary

#171717

on-dark

#ffffff

canvas

#ffffff

canvas-soft

#fafafa

canvas-night

#1c1c1c

canvas-night-soft

#202020

hairline

#dfdfdf

hairline-strong

#c7c7c7

hairline-cool

#ededed

hairline-cool-2

#efefef

hairline-cool-3

#d4d4d4

accent-purple

#6b01c2

accent-violet

#644fc1

accent-purple-soft

#eddbf9

accent-yellow

#ffdb13

accent-tomato

#ff2201

accent-pink

#c7007e

accent-indigo

#054cff

accent-crimson

#e2005a

Typography Rules

Font Family

The display and UI tier is Circular — a proprietary geometric humanist sans by Lineto. Fallback chain: 'Helvetica Neue', Helvetica, Arial.

For maximum brand fidelity when Circular isn't licensed, use Inter (open-source via Google Fonts) at weight 500 for display with letter-spacing: -1.92px at 64px. Inter is the closest open-source analogue to Circular's geometric humanist character.

...

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

Weight 500 across display. Mid-weight reads as engineered, not decorative.
Negative tracking on display. -1.92px at 64px scaling proportionally down — tightens the rounded humanist letterforms into editorial density.
...