Supabase Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

10type steps

5radius steps

2pxspacing base

Supabase, in one page

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.

The product itself appears as composited UI screenshots on every page: dashboard tables, SQL editors, query builders, log streams. These screenshots are the brand's argument. They sit inside {rounded.lg} 12px containers with subtle 1px hairlines, often arranged 2-up or in a floating "stacked panes" composition above the hero band.

Key Characteristics:

Single emerald primary ({colors.primary} #3ecf8e) as the only chromatic event; everything else is monochrome.
White canvas marketing track with greyscale hierarchy from {colors.hairline-cool} to {colors.ink}.
Custom humanist sans display tier at weight 500 with negative letter-spacing of -1.92px to -0.42px.
Composited product UI screenshots (dashboard, SQL editor, log stream) are the dominant decorative element — never photography, never illustrations.
Tight 6px / 8px button radii — square-ish, technical, never pill-shaped.
Code blocks rendered in deep {colors.canvas-night} (#1c1c1c) with monospace inline code; the brand's developer DNA is visible in every snippet.
Pricing tiers use a dark inverted {colors.canvas-night} featured tier, not a green one — the green is reserved for buttons and dot accents.

Do's and don'ts

Do

Reserve {colors.primary} emerald for filled CTAs and the wordmark accent — it should appear sparingly.
Render display tiers at weight 500 with negative letter-spacing — the engineered tightness is part of the brand.
Use {rounded.sm} 6px for buttons — square-ish radii, never pill-shaped.
Composite product UI mockups inside {rounded.lg} containers with subtle Level 2 shadows.
Use near-black {colors.ink} on the emerald button (not white) — the green reads as "lit" with dark type, which is the brand's idiosyncratic choice.
Apply system mono for every code block.

Don't

Don't introduce additional accent colors as system colors — purples, yellows, and pinks belong inside chart points and integration logos only.
Don't bump display weight above 500 — the brand's calibrated mid-weight breaks at 600+.
Don't use pill-shaped buttons; the brand's button radius is square-ish 6px.
Don't use white text on the emerald button — the brand specifically uses near-black on green.
Don't add atmospheric gradients to hero bands — the white canvas is the design.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Supabase design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- 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

Type:
- families: Circular, Helvetica Neue, Helvetica, Arial
- scale: 12, 13, 14, 16, 18, 22, 28, 36, 48
- weights: 400, 500

Shape:
- radius: 4, 6, 8, 12, 16

Spacing: 2, 4, 8, 12, 16, 24, 32, 64

Rules:
- Reserve `{colors.primary}` emerald for filled CTAs and the wordmark accent — it should appear sparingly.
- Render display tiers at weight 500 with negative letter-spacing — the engineered tightness is part of the brand.
- Use `{rounded.sm}` 6px for buttons — square-ish radii, never pill-shaped.
- Composite product UI mockups inside `{rounded.lg}` containers with subtle Level 2 shadows.
- Use near-black `{colors.ink}` on the emerald button (not white) — the green reads as "lit" with dark type, which is the brand's idiosyncratic choice.
- Apply system mono for every code block.

Avoid:
- Don't introduce additional accent colors as system colors — purples, yellows, and pinks belong inside chart points and integration logos only.
- Don't bump display weight above 500 — the brand's calibrated mid-weight breaks at 600+.
- Don't use pill-shaped buttons; the brand's button radius is square-ish 6px.
- Don't use white text on the emerald button — the brand specifically uses near-black on green.
- Don't add atmospheric gradients to hero bands — the white canvas is the design.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.
Emerald Soft ({colors.primary-soft} — #4ade80): Lighter emerald used in chart accents and product UI.
Accent Purple ({colors.accent-purple} — #6b01c2): Rare accent used in integration logos and chart points; never a button.
Accent Violet ({colors.accent-violet} — #644fc1): Secondary accent in the same role as accent purple.
Accent Yellow ({colors.accent-yellow} — #ffdb13): Chart accent / status indicator only.
Accent Pink / Crimson / Indigo / Tomato: Reserved for integration logos and rare chart highlights, never as system colors.

Surface

Canvas ({colors.canvas} — #ffffff): Default page background.
Canvas Soft ({colors.canvas-soft} — #fafafa): Barely-tinted off-white for alternating section bands.
Canvas Night ({colors.canvas-night} — #1c1c1c): Deep near-black used in code blocks, dashboard mockups, featured pricing tier.
Canvas Night Soft ({colors.canvas-night-soft} — #202020): Slightly lifted dark for nested chrome.
Hairline ({colors.hairline} — #dfdfdf): 1px borders on cards and tables.
Hairline Strong ({colors.hairline-strong} — #c7c7c7): Slightly darker border for emphasis.
Hairline Cool ({colors.hairline-cool} — #ededed) / Hairline Cool 2 (#efefef) / Hairline Cool 3 (#d4d4d4): The brand's grey ladder for fine chrome work.

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.
Ink Mute ({colors.ink-mute} — #707070): Secondary text and helper copy.
Ink Mute 2 ({colors.ink-mute-2} — #9a9a9a): Tertiary text.
Ink Faint ({colors.ink-faint} — #b2b2b2): Disabled / placeholder text.
On Primary ({colors.on-primary} — #171717): Text on the emerald primary fill — near-black, not white. The button reads as a "lit" surface with dark type, not a colored chip.
On Dark ({colors.on-dark} — #ffffff): Text on canvas-night surfaces.

Type scaleRead the full spec

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.

Code blocks use system mono (ui-monospace, with Menlo / Monaco / Consolas fallbacks).

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	64px	500	1.1	-1.92px	Hero headline
`{typography.display-xl}`	48px	500	1.1	-1.44px	Section opener
`{typography.display-lg}`	36px	500	1.15	-0.72px	Sub-section / pricing tier
`{typography.display-md}`	28px	500	1.2	-0.42px	Card title
`{typography.heading-lg}`	22px	500	1.2	0	Compact heading
`{typography.heading-md}`	18px	500	1.4	0	Section sub-heading
`{typography.body-lg}`	18px	400	1.55	0	Marketing body lead
`{typography.body-md}`	16px	400	1.5	0	Default UI body
`{typography.button-md}`	14px	500	1.0	0	Button label
`{typography.caption}`	13px	400	1.45	0	Helper, footnote
`{typography.micro}`	12px	400	1.45	0	Pill label, fine print
`{typography.code}`	14px	400	1.5	0	Code block content

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.
Mono for code. System mono families (Menlo / Monaco) — no proprietary mono webfont.

Note on Font Substitutes

Circular is proprietary. Use Inter at weight 500 with letter-spacing: -1.92px for display tiers. Geist Sans (open-source from Vercel) is another close alternative for both display and body. Avoid Helvetica defaults — they're heavier and lack the geometric warmth.

Components and layoutRead the full spec

Buttons

button-primary-green — the signature CTA.

Background {colors.primary}, text {colors.on-primary} (near-black, NOT white), type {typography.button-md}, padding {spacing.sm} {spacing.lg} (8px 16px), rounded {rounded.sm} 6px.
Pressed state button-primary-green-pressed shifts to {colors.primary-deep}.

button-secondary-outline — outline alternative on white.

Background {colors.canvas}, text {colors.ink}, 1px solid {colors.hairline-strong} border, same shape.

button-on-dark — used on dark surfaces / code-block CTAs.

Background {colors.canvas-night}, text {colors.on-dark}, same shape.

button-link — text-only inline button.

Transparent background, text {colors.ink} rendered in {typography.button-md}, no padding, with a subtle underline on hover.

Cards & Containers

card-feature-light — feature card on white.

Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg} 12px, 1px {colors.hairline} border.

card-pricing — standard pricing tier.

Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg}, 1px {colors.hairline} border. Title in {typography.heading-lg}, price in {typography.display-md}, body in {typography.body-md}, CTA button-primary-green pinned bottom.

card-pricing-featured — inverted dark featured tier.

Background {colors.canvas-night}, text {colors.on-dark}, otherwise identical structure.

card-feature-dark — feature card with deep dark fill.

Background {colors.canvas-night}, text {colors.on-dark}, padding {spacing.xxl}, rounded {rounded.lg}. Used for code-heavy feature explanations.

code-block — code snippet container.

Background {colors.canvas-night}, text {colors.on-dark} rendered in {typography.code}. Padding {spacing.lg} 16px, rounded {rounded.sm} 6px.

Inputs & Forms

text-input — standard form input.

Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, padding {spacing.sm} {spacing.md} (8px 12px), rounded {rounded.sm} 6px, 1px {colors.hairline} border.

Navigation

nav-bar-light — top nav across the site.

Background {colors.canvas}, text {colors.ink}, padding {spacing.lg} {spacing.xl}. Logo on the left, primary nav center, "Sign In" link + filled button-primary-green on the right.

Pills, Tags, and Chips

pill-tag-green — small green pill used for "new" or featured indicators.

Background {colors.primary}, text {colors.on-primary}, type {typography.micro}, padding {spacing.xxs} {spacing.sm}, rounded {rounded.full}.

pill-tag-soft — neutral pill on light surfaces.

Background {colors.canvas-soft}, text {colors.ink}, otherwise same shape.

Signature Components

Composited Product UI Mockups — multi-layer dashboard / SQL editor / log pane composites with subtle Level 2 shadows. The product is the brand's argument; mockups always sit on white canvas with no surrounding decoration.

link-on-light — inline links in body copy.

Text {colors.ink} rendered in {typography.body-md} with a persistent underline.

footer-light — site-wide footer.

Background {colors.canvas}, text {colors.ink-mute}, type {typography.caption}, padding {spacing.huge} {spacing.xl} (64px 24px). Holds 4–5 columns of link groups, social icons, and a small legal row.

Spacing System

Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px.
Section padding: 64–96px on marketing surfaces.
Card internal padding: 32px on feature/pricing cards.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Wide	≥ 1440px	Full container width; product mockups at full scale
Desktop	1024–1440px	Default content max-width; pricing 4-up
Tablet	768–1023px	Pricing 2-up; mockups simplify to single panel
Mobile	< 768px	Pricing 1-up; hamburger nav; display drops 64 → 36px

Touch Targets

Buttons hit ≥ 36×36px on mobile; vertical padding scales up to maintain WCAG AA minimum.
Form fields stay at 36px minimum height.

Collapsing Strategy

Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
Product UI mockups simplify to a single primary panel on mobile.
Pricing tiers stair-step 4-up → 2-up → 1-up; dark featured tier always distinguished.

Image Behavior

Product UI mockups use srcset with desktop / mobile crops; mobile crops focus on the most actionable inner panel.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-supabase {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #171717;
  --heading-color: #171717;
  --link-color: #1e774d;
  --link-hover-color: #144e33;
  --border-color: #d5d5d5;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(23,23,23,0.06);
  --card-hover-shadow: 0 6px 18px rgba(23,23,23,0.12);
  --header-bg: #171717;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #686868;
  --button-bg: #3ecf8e;
  --button-text-color: #171717;
  --button-hover-bg: #2baf74;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f1f1f1;
  --button-secondary-text-color: #171717;
  --button-secondary-hover-bg: #e3e3e3;
  --button-secondary-border: 1px solid #d5d5d5;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #171717;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

cal 79.6%
resend 78.7%
mongodb 78.5%
notion 78.2%
mintlify 76.9%

Where this came from

Source document: volt/design-md/supabase/DESIGN.md · 20.7 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.