Supabase

mint-lit postgres on warm paper

Developer Tools Light light technical minimal precise friendly Built with Next.js, Tailwind CSS, React

Supabase feels like a clean developer tool that is sure of itself. The pages are mostly bright white and hairline-ruled, with one fresh mint-green note for the brand and its main buttons. Small technical touches keep it from looking corporate: a pixel-bracket pattern in the warm announcement bar, uppercase monospace plan names, a dot-matrix star counter and thin line-art diagrams of Postgres elephants and wireframe globes. It reads as serious infrastructure with some playfulness.

The type uses three families. Manrope (500–600) handles headings. Inter at the variable weight 450 handles body copy and UI. Source Code Pro covers prices, plan names and code, and a custom Departure Mono bitmap font draws the decoration. Colour is nearly all neutral: #ffffff pages, #000000 and #525252 text, and a #f8f3ef paper band. Green comes in steps: #72e3ad button fills, #3ecf8e brand strokes and the second headline line, and #0a844e/#00482f for links and text on light backgrounds. Components are small and precise: 6px buttons about 34–38px tall, 8–12px cards with 1px borders and almost no shadow, a 1280px container, a 4px spacing grid and 96px gaps between sections.

https://supabase.com

Colors

Click a swatch to copy

Typography

display

Manrope

400 · 500 · 600 · falls back to Plus Jakarta Sans, DM Sans, system-ui, sans-serif

All headings. 500 for the big hero display, 600 for section H1–H3. Letter-spacing is normal, except -0.7px on the 28px auth-page title. The hero puts two lines in black and #3ecf8e green.
body

Inter

400 · 450 · 500 · falls back to Inter Fallback, system-ui, Helvetica Neue, Arial, sans-serif

A variable font whose default weight is 450, between regular and medium. Used for body, nav and buttons at 14–16px. Weight 500 is for button labels and FAQ questions.
mono

Source Code Pro

450 · 500 · 700 · falls back to JetBrains Mono, Menlo, monospace

Uppercase plan names (FREE, PRO, TEAM), large prices ($0, $25) with -0.9px tracking at 18px, code blocks, email chips and terminal snippets.
accent

Departure Mono Superbase

400 · falls back to Departure Mono, VT323, monospace

A bitmap pixel font used only for decoration: the ‹[{( bracket glyph pattern in the announcement bar and the dot-matrix GitHub star counter. Rendered at 15px, line-height 1.01, in pale greens.

Display

46px / 1

500 · normal

Supabase

H1

34px / 1.11

600 · normal

Mint-lit postgres on warm paper

H2

28px / 1.2

600 · normal

Mint-lit postgres on warm paper

H3

22px / 1.33

600 · normal

The quick brown fox jumps over the lazy dog

Lead

22px / 1.33

450 · -0.16px

The quick brown fox jumps over the lazy dog

Card title

16px / 1.5

600 · normal

The quick brown fox jumps over the lazy dog

Body

16px / 1.5

450 · normal

The quick brown fox jumps over the lazy dog

UI / Button

14px / 1.43

500 · normal

The quick brown fox jumps over the lazy dog

Caption

12px / 1.33

450 · normal

The quick brown fox jumps over the lazy dog

Mono price

46px / 1

450 · normal

Supabase

Spacing & Shape

Spacing

Base unit: 4px
Density: comfortable
Container: 1280px
Section gap: 96px
Card padding: 24px (feature cards) / 32px (large panels)

4

8

12

16

20

24

32

48

64

96

128

Radius

Small badges, code chips 4px
Buttons, inputs, nav links 6px
Cards, pricing columns, framework tiles 8px
Feature bento tiles, docs prompt panel 12px
Large media and story cards 16px
Pill tabs, blog category chips, terminal command chip 9999px

Shadows

none Default for buttons, cards and nav. Depth comes from 1px borders, not shadows.

none

sm Small lift on the docs AI-prompt panel and active segmented tabs

0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)

lg Dropdown mega-menus, popovers and floating panels

0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)

inset-ring-dark Hairline edge on dark cards (customer stories, dark-scheme panels)

inset 0 0 0 1px rgba(255,255,255,0.12)

ring-white Outline on elements placed over dark or gradient media

0 0 0 1px rgba(255,255,255,0.3)

Components

Live previews rendered from recipes

Supabase ProductPricingChangelogDocs Get started

Buttons

Inputs

Tags

New Developer Tools light

Ghost nav link

Ghost nav link

Card

Everything in one ledger

Reconcile every account overnight and close the month in an afternoon instead of a fortnight.

Get started

Primary button — Hero size is about 38px tall. The nav version is compact (about 26px tall, 12px text, 4px 10px padding). Pricing uses a full-width version about 36px tall. In dark scheme the fill becomes #006239 with #3ecf8e border and white text.
Secondary button — Used for 'Request a demo', 'Sign in' and 'Contact Us'. Always placed next to the primary button with an 8px gap.
Ghost nav link — Product, Developers and Solutions have small chevrons and open large dropdown menus. Pricing, Docs and Blog are plain links.
Text input — About 35px tall. Search fields have a leading magnifier icon, and docs search shows a ⌘K keycap. Placeholder colour is #a0a0a0.
Feature card — Layout: icon plus Manrope 600 title, then a muted sentence with key phrases in #000000, then a line-art illustration that bleeds off the card edge. Cards form a bento grid with 16px gaps.
Pricing column — The four columns share borders. The featured Pro column is raised above the row with a 2px #525252 border and a dark 'Most Popular' badge. Plan names use uppercase Source Code Pro at 22px, prices Source Code Pro at 46px, and feature lists use #3ecf8e check marks.
Pill tab / category chip — Used for Table Editor / SQL Editor / RLS Policies tabs and blog category filters. Blog post tags are tiny uppercase outline pills (about 10px text, 4px radius or full pill).
Top nav — Left: logo, then links. Right: GitHub icon with star count in #525252, then Sign in (secondary) and Start your project (primary), both compact. A 54px #f8f3ef announcement bar with the pixel-bracket pattern sits above the nav.

Do / Don't

Split hero headlines in two: the first line in #000000, the second in #3ecf8e, both Manrope 500 at 46px with line-height 1.
Set body and UI text in Inter at weight 450, and in a muted paragraph make the key phrase #000000 while the rest stays #525252.
Use Source Code Pro for anything numeric or technical: prices, uppercase plan names, CLI commands and code chips.
Build depth with 1px hairline borders and 6/8/12px radii. Keep shadows for dropdowns and floating panels only.
Pair a #72e3ad primary button (1px #3ecf8e border, #001a10 label) with a white bordered secondary button, both 6px radius.
Use thin monochrome line-art illustrations that bleed off card edges instead of colourful 3D renders.
Save #f8f3ef parchment and the Departure Mono pixel glyphs for the announcement band and small decorative moments.

Don't use #3ecf8e as a button fill with white text. Primary fills are the lighter #72e3ad with dark #001a10 text.
Don't make headings bold. Manrope stays at 500–600 with normal tracking.
Don't add drop shadows to cards or buttons in the resting state.
Don't add extra brand hues. Greens carry the brand, and purple and amber are rare accents.
Don't use large radii or pill shapes for buttons. Pills are for tabs and category chips only.
Don't use gradients on UI surfaces. Gradients appear only inside customer-story media.
Don't set long body copy in Manrope or monospace. Inter carries all paragraphs.

Screens

Supabase | The Postgres Development Platform — Supabase | The Postgres Development Platform /

Pricing & Fees | Supabase — Pricing & Fees | Supabase /pricing

Supabase Docs — Supabase Docs /docs

Supabase Blog: the Postgres development platform — Supabase Blog: the Postgres development platform /blog

Supabase — Supabase /dashboard/sign-up

Mobile view — Mobile 390×844

Mobile navigation open — Mobile navigation menu open

Dark mode

Supabase — Design Reference

mint-lit postgres on warm paper

Source: https://supabase.com
Theme: light
Category: Developer Tools
Mood: light, technical, minimal, precise, friendly
Captured: 2026-09-13

Overview

Supabase feels like a clean developer tool that is sure of itself. The pages are mostly bright white and hairline-ruled, with one fresh mint-green note for the brand and its main buttons. Small technical touches keep it from looking corporate: a pixel-bracket pattern in the warm announcement bar, uppercase monospace plan names, a dot-matrix star counter and thin line-art diagrams of Postgres elephants and wireframe globes. It reads as serious infrastructure with some playfulness.

The type uses three families. Manrope (500–600) handles headings. Inter at the variable weight 450 handles body copy and UI. Source Code Pro covers prices, plan names and code, and a custom Departure Mono bitmap font draws the decoration. Colour is nearly all neutral: #ffffff pages, #000000 and #525252 text, and a #f8f3ef paper band. Green comes in steps: #72e3ad button fills, #3ecf8e brand strokes and the second headline line, and #0a844e/#00482f for links and text on light backgrounds. Components are small and precise: 6px buttons about 34–38px tall, 8–12px cards with 1px borders and almost no shadow, a 1280px container, a 4px spacing grid and 96px gaps between sections.

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--color-bg`	Page background, card fills, secondary button fill and the mobile menu panel
Warm Parchment	`#f8f3ef`	`--color-surface-warm`	Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface
Ink	`#000000`	`--color-text`	Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds
Graphite	`#525252`	`--color-text-muted`	Body descriptions, hero subcopy and the de-emphasised part of feature card sentences
Ash	`#a0a0a0`	`--color-text-subtle`	Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations
Mint Fill	`#72e3ad`	`--color-primary`	Primary CTA button background ('Start your project', 'Get Started', 'Sign up')
Supabase Green	`#3ecf8e`	`--color-brand`	Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens
Forest Link	`#0a844e`	`--color-link`	Green text links and accents on light backgrounds where #3ecf8e would fail contrast
Deep Moss	`#00482f`	`--color-link-strong`	Announcement-bar link ('Apply to attend') and underlined green text on the parchment band
Green Black	`#001a10`	`--color-on-primary`	Label colour on mint primary buttons
Midnight Navy	`#0c0f24`	`--color-story-navy`	Dark customer-story tile background in the case-study carousel
Deep Teal	`#002533`	`--color-story-teal`	Alternate dark customer-story tile background
Postgres Violet	`#6b35dc`	`--color-accent-violet`	Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills)
Amber	`#b45309`	`--color-warning`	Warning or notice text in docs and pricing notes

Semantic roles

Role	Value
background	`#ffffff`
surface	`#ffffff`
surface raised	`#f8f3ef`
border	`rgba(82, 82, 82, 0.18)`
text	`#000000`
text muted	`#525252`
primary	`#72e3ad`
primary text	`#001a10`
accent	`#3ecf8e`
success	`#0a844e`
warning	`#b45309`

Tokens — Typography

Display: Manrope (400, 500, 600) — fallbacks: Plus Jakarta Sans, DM Sans, system-ui, sans-serif. All headings. 500 for the big hero display, 600 for section H1–H3. Letter-spacing is normal, except -0.7px on the 28px auth-page title. The hero puts two lines in black and #3ecf8e green.
Body: Inter (400, 450, 500) — fallbacks: Inter Fallback, system-ui, Helvetica Neue, Arial, sans-serif. A variable font whose default weight is 450, between regular and medium. Used for body, nav and buttons at 14–16px. Weight 500 is for button labels and FAQ questions.
Mono: Source Code Pro (450, 500, 700) — fallbacks: JetBrains Mono, Menlo, monospace. Uppercase plan names (FREE, PRO, TEAM), large prices ($0, $25) with -0.9px tracking at 18px, code blocks, email chips and terminal snippets.
Accent: Departure Mono Superbase (400) — fallbacks: Departure Mono, VT323, monospace. A bitmap pixel font used only for decoration: the ‹[{( bracket glyph pattern in the announcement bar and the dot-matrix GitHub star counter. Rendered at 15px, line-height 1.01, in pale greens.

Role	Size	Line height	Weight	Letter spacing	Family
Display	46px	1	500	normal	display
H1	34px	1.11	600	normal	display
H2	28px	1.2	600	normal	display
H3	22px	1.33	600	normal	display
Lead	22px	1.33	450	-0.16px	body
Card title	16px	1.5	600	normal	display
Body	16px	1.5	450	normal	body
UI / Button	14px	1.43	500	normal	body
Caption	12px	1.33	450	normal	body
Mono price	46px	1	450	normal	mono

Tokens — Spacing & Layout

Base unit: 4px
Density: comfortable
Container max width: 1280px
Section gap: 96px
Card padding: 24px (feature cards) / 32px (large panels)
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px, 128px

Tokens — Radius

Element	Value
Small badges, code chips	4px
Buttons, inputs, nav links	6px
Cards, pricing columns, framework tiles	8px
Feature bento tiles, docs prompt panel	12px
Large media and story cards	16px
Pill tabs, blog category chips, terminal command chip	9999px

Tokens — Shadows

Name	Value	Usage
none	`none`	Default for buttons, cards and nav. Depth comes from 1px borders, not shadows.
sm	`0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)`	Small lift on the docs AI-prompt panel and active segmented tabs
lg	`0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)`	Dropdown mega-menus, popovers and floating panels
inset-ring-dark	`inset 0 0 0 1px rgba(255,255,255,0.12)`	Hairline edge on dark cards (customer stories, dark-scheme panels)
ring-white	`0 0 0 1px rgba(255,255,255,0.3)`	Outline on elements placed over dark or gradient media

Components

Primary button (button)

Property	Value
background	`#72e3ad`
color	`#001a10`
border	`1px solid #3ecf8e`
radius	`6px`
padding	`8px 16px`
font size	`14px`
font weight	`500`
shadow	`none`
hover	`background shifts toward #3ecf8e; border stays green`

Hero size is about 38px tall. The nav version is compact (about 26px tall, 12px text, 4px 10px padding). Pricing uses a full-width version about 36px tall. In dark scheme the fill becomes #006239 with #3ecf8e border and white text.

Secondary button (button)

Property	Value
background	`#ffffff`
color	`#000000`
border	`1px solid rgba(82,82,82,0.2)`
radius	`6px`
padding	`8px 16px`
font size	`14px`
font weight	`500`
shadow	`none`
hover	`border darkens to rgba(82,82,82,0.4); background #f8f3ef-tinted`

Used for 'Request a demo', 'Sign in' and 'Contact Us'. Always placed next to the primary button with an 8px gap.

Ghost nav link (link)

Property	Value
background	`transparent`
color	`#000000`
border	`none`
radius	`6px`
padding	`8px`
font size	`14px`
font weight	`500`
shadow	`none`
hover	`text goes to #525252 or a faint grey fill; chevron rotates on open dropdowns`

Product, Developers and Solutions have small chevrons and open large dropdown menus. Pricing, Docs and Blog are plain links.

Text input (input)

Property	Value
background	`transparent`
color	`#000000`
border	`1px solid rgba(82,82,82,0.2)`
radius	`6px`
padding	`8px`
font size	`14px`
font weight	`450`
shadow	`none`
hover	`focus ring in #3ecf8e at low opacity`

About 35px tall. Search fields have a leading magnifier icon, and docs search shows a ⌘K keycap. Placeholder colour is #a0a0a0.

Feature card (card)

Property	Value
background	`#ffffff`
color	`#525252`
border	`1px solid rgba(82,82,82,0.15)`
radius	`12px`
padding	`24px`
font size	`16px`
font weight	`450`
shadow	`none`
hover	`border darkens slightly; illustration animates`

Layout: icon plus Manrope 600 title, then a muted sentence with key phrases in #000000, then a line-art illustration that bleeds off the card edge. Cards form a bento grid with 16px gaps.

Pricing column (card)

Property	Value
background	`#ffffff`
color	`#000000`
border	`1px solid rgba(82,82,82,0.15)`
radius	`8px`
padding	`16px`
font size	`14px`
font weight	`450`
shadow	`none`
hover	`none`

The four columns share borders. The featured Pro column is raised above the row with a 2px #525252 border and a dark 'Most Popular' badge. Plan names use uppercase Source Code Pro at 22px, prices Source Code Pro at 46px, and feature lists use #3ecf8e check marks.

Pill tab / category chip (badge)

Property	Value
background	`transparent`
color	`#525252`
border	`1px solid transparent`
radius	`9999px`
padding	`8px 32px`
font size	`14px`
font weight	`450`
shadow	`none`
hover	`active state gets a white fill, a 1px hairline border and #000000 text`

Used for Table Editor / SQL Editor / RLS Policies tabs and blog category filters. Blog post tags are tiny uppercase outline pills (about 10px text, 4px radius or full pill).

Top nav (nav)

Property	Value
background	`rgba(255,255,255,0) with backdrop-filter: blur(4px)`
color	`#000000`
border	`border-bottom 1px solid rgba(82,82,82,0.12)`
radius	`0`
padding	`0 24px; height 65px`
font size	`14px`
font weight	`500`
shadow	`none`
hover	`links fade to #525252`

Left: logo, then links. Right: GitHub icon with star count in #525252, then Sign in (secondary) and Start your project (primary), both compact. A 54px #f8f3ef announcement bar with the pixel-bracket pattern sits above the nav.

Layout

Content sits in a centred 1280px container with about 24px gutters (pages visually 1060–1200px wide). The home hero is split: a two-line Manrope headline on the left, muted Inter subcopy aligned to the right column, and a pair of CTAs underneath. Next comes a bento grid of feature cards (one wide Postgres card, then narrower ones in rows of 3–4), then a greyscale logo wall, a product-screenshot section with pill tabs, a code sample next to a framework icon row, template cards, a case-study carousel with dark #0c0f24/#002533 tiles, a tweet wall, an open-source band with the dot-matrix star counter, and a final CTA. Sections are separated by 96px and full-width hairline dividers. The footer is a dense multi-column link list. Docs pages use a left-aligned title with a framework grid of 52px bordered icon tiles.

Imagery

Imagery is mostly monochrome thin-stroke line art: an outlined Postgres elephant on a construction grid, a wireframe globe with dotted network paths, a vector cube and blurred email chips. Real product screenshots (Table Editor) appear in white bordered frames. Customer logos are flat greyscale. Colour shows up only in customer-story media (a Lovable orange-to-pink gradient) and in the dark blog thumbnails (#000000 with a green bolt). Pixel-bracket glyphs and the dot-matrix star counter use Departure Mono in pale greens (#95e6b8, #a9f1ca) for a retro-terminal touch. Icons are 16–20px outline strokes.

Motion

Motion is restrained. Hover states are short colour and border transitions (about 150ms ease). Illustrations inside feature cards animate gently: globe paths trace and chips scroll. The tweet wall and logo row drift slowly, and the bracket pattern in the announcement bar shimmers. There are no large parallax effects or scroll-jacking.

Responsive

On phones the announcement bar wraps to two lines, with the link below the title and the bracket pattern cropped to a narrow strip on the right. The nav shrinks to the logo plus a hamburger icon. Opening it replaces the icon with an X and shows a full-screen white panel under the banner. The panel lists Product, Developers and Solutions as accordion rows with chevrons, then Pricing, Docs and Blog, all at about 18px Inter 500 with 1px hairline dividers and roughly 60px row height. The hero stacks headline, subcopy, then two side-by-side buttons that keep their natural width (not full-width) and grow to about 16px text. Feature cards collapse to a single column with 20px side gutters and drop or simplify their illustrations. Section gaps shrink from 96px to about 48–64px.

Do

Split hero headlines in two: the first line in #000000, the second in #3ecf8e, both Manrope 500 at 46px with line-height 1.
Set body and UI text in Inter at weight 450, and in a muted paragraph make the key phrase #000000 while the rest stays #525252.
Use Source Code Pro for anything numeric or technical: prices, uppercase plan names, CLI commands and code chips.
Build depth with 1px hairline borders and 6/8/12px radii. Keep shadows for dropdowns and floating panels only.
Pair a #72e3ad primary button (1px #3ecf8e border, #001a10 label) with a white bordered secondary button, both 6px radius.
Use thin monochrome line-art illustrations that bleed off card edges instead of colourful 3D renders.
Save #f8f3ef parchment and the Departure Mono pixel glyphs for the announcement band and small decorative moments.

Don't

Don't use #3ecf8e as a button fill with white text. Primary fills are the lighter #72e3ad with dark #001a10 text.
Don't make headings bold. Manrope stays at 500–600 with normal tracking.
Don't add drop shadows to cards or buttons in the resting state.
Don't add extra brand hues. Greens carry the brand, and purple and amber are rare accents.
Don't use large radii or pill shapes for buttons. Pills are for tabs and category chips only.
Don't use gradients on UI surfaces. Gradients appear only inside customer-story media.
Don't set long body copy in Manrope or monospace. Inter carries all paragraphs.

Agent prompt

Design a light, precise developer-platform site in the Supabase style. White #ffffff pages in a 1280px container, a 4px spacing grid, 96px section gaps and 1px hairline borders (rgba(82,82,82,0.15–0.2)) instead of shadows. Headings are Manrope 500–600 with normal tracking: hero 46px/1 with the first line #000000 and the second #3ecf8e, H1 34px/1.11, H2 28px/1.2, H3 22px/1.33. Body and UI are Inter at weight 450, 16px/1.5 in #525252 with key phrases in #000000; nav and buttons are 14px weight 500. Use Source Code Pro for prices, uppercase plan names and code, and a bitmap pixel font (Departure Mono) only for decorative bracket glyphs on a #f8f3ef announcement bar. Primary button: #72e3ad fill, 1px #3ecf8e border, #001a10 label, 6px radius, 8px 16px padding, about 38px tall. Secondary button: white with a hairline border and black text. Nav is 65px, transparent with blur(4px), a hairline bottom border and compact Sign in / Start your project buttons on the right. Feature cards are white, 12px radius, 24px padding, bento-gridded with 16px gaps, each with an outline icon, a Manrope 600 title and a thin monochrome line-art illustration bleeding off the edge. Pill tabs use 9999px radius. Links use #0a844e/#00482f. Dark accent tiles use #0c0f24 and #002533. Shadows appear only on dropdowns (0 10px 15px -3px rgba(0,0,0,.1)). Tone: calm, technical, confident, minimal colour beyond mint green.

CSS custom properties

/* Supabase — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Page background, card fills, secondary button fill and the mobile menu panel */
  --color-surface-warm: #f8f3ef; /* Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface */
  --color-text: #000000; /* Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds */
  --color-text-muted: #525252; /* Body descriptions, hero subcopy and the de-emphasised part of feature card sentences */
  --color-text-subtle: #a0a0a0; /* Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations */
  --color-primary: #72e3ad; /* Primary CTA button background ('Start your project', 'Get Started', 'Sign up') */
  --color-brand: #3ecf8e; /* Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens */
  --color-link: #0a844e; /* Green text links and accents on light backgrounds where #3ecf8e would fail contrast */
  --color-link-strong: #00482f; /* Announcement-bar link ('Apply to attend') and underlined green text on the parchment band */
  --color-on-primary: #001a10; /* Label colour on mint primary buttons */
  --color-story-navy: #0c0f24; /* Dark customer-story tile background in the case-study carousel */
  --color-story-teal: #002533; /* Alternate dark customer-story tile background */
  --color-accent-violet: #6b35dc; /* Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills) */
  --color-warning: #b45309; /* Warning or notice text in docs and pricing notes */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f8f3ef;
  --border: rgba(82, 82, 82, 0.18);
  --text: #000000;
  --text-muted: #525252;
  --primary: #72e3ad;
  --primary-text: #001a10;
  --accent: #3ecf8e;
  --success: #0a844e;
  --warning: #b45309;

  /* Typography */
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --container: 1280px;
  --section-gap: 96px;

  /* Radius */
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
}

Tailwind v4 theme

/* Supabase — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface-warm: #f8f3ef;
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-text-subtle: #a0a0a0;
  --color-primary: #72e3ad;
  --color-brand: #3ecf8e;
  --color-link: #0a844e;
  --color-link-strong: #00482f;
  --color-on-primary: #001a10;
  --color-story-navy: #0c0f24;
  --color-story-teal: #002533;
  --color-accent-violet: #6b35dc;
  --color-warning: #b45309;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f8f3ef;
  --color-border: rgba(82, 82, 82, 0.18);
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-primary: #72e3ad;
  --color-primary-text: #001a10;
  --color-accent: #3ecf8e;
  --color-success: #0a844e;
  --color-warning: #b45309;
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
  --container-site: 1280px;
}

Supabase — Style Reference

mint-lit postgres on warm paper

Theme: light · Mood: light, technical, minimal, precise, friendly

Supabase feels like a clean developer tool that is sure of itself. The pages are mostly bright white and hairline-ruled, with one fresh mint-green note for the brand and its main buttons. Small technical touches keep it from looking corporate: a pixel-bracket pattern in the warm announcement bar, uppercase monospace plan names, a dot-matrix star counter and thin line-art diagrams of Postgres elephants and wireframe globes. It reads as serious infrastructure with some playfulness.

Tokens — Colors

Name	Value	Token	Role
Paper White	`#ffffff`	`--color-bg`	Page background, card fills, secondary button fill and the mobile menu panel
Warm Parchment	`#f8f3ef`	`--color-surface-warm`	Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface
Ink	`#000000`	`--color-text`	Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds
Graphite	`#525252`	`--color-text-muted`	Body descriptions, hero subcopy and the de-emphasised part of feature card sentences
Ash	`#a0a0a0`	`--color-text-subtle`	Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations
Mint Fill	`#72e3ad`	`--color-primary`	Primary CTA button background ('Start your project', 'Get Started', 'Sign up')
Supabase Green	`#3ecf8e`	`--color-brand`	Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens
Forest Link	`#0a844e`	`--color-link`	Green text links and accents on light backgrounds where #3ecf8e would fail contrast
Deep Moss	`#00482f`	`--color-link-strong`	Announcement-bar link ('Apply to attend') and underlined green text on the parchment band
Green Black	`#001a10`	`--color-on-primary`	Label colour on mint primary buttons
Midnight Navy	`#0c0f24`	`--color-story-navy`	Dark customer-story tile background in the case-study carousel
Deep Teal	`#002533`	`--color-story-teal`	Alternate dark customer-story tile background
Postgres Violet	`#6b35dc`	`--color-accent-violet`	Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills)
Amber	`#b45309`	`--color-warning`	Warning or notice text in docs and pricing notes

Tokens — Typography

Display: Manrope (Plus Jakarta Sans, DM Sans, system-ui, sans-serif) — weights 400/500/600
Body: Inter (Inter Fallback, system-ui, Helvetica Neue, Arial, sans-serif) — weights 400/450/500
Mono: Source Code Pro (JetBrains Mono, Menlo, monospace) — weights 450/500/700
Accent: Departure Mono Superbase (Departure Mono, VT323, monospace) — weights 400

Tokens — Radius

Element	Value
Small badges, code chips	`4px`
Buttons, inputs, nav links	`6px`
Cards, pricing columns, framework tiles	`8px`
Feature bento tiles, docs prompt panel	`12px`
Large media and story cards	`16px`
Pill tabs, blog category chips, terminal command chip	`9999px`

Do

Split hero headlines in two: the first line in #000000, the second in #3ecf8e, both Manrope 500 at 46px with line-height 1.
Set body and UI text in Inter at weight 450, and in a muted paragraph make the key phrase #000000 while the rest stays #525252.
Use Source Code Pro for anything numeric or technical: prices, uppercase plan names, CLI commands and code chips.
Build depth with 1px hairline borders and 6/8/12px radii. Keep shadows for dropdowns and floating panels only.
Pair a #72e3ad primary button (1px #3ecf8e border, #001a10 label) with a white bordered secondary button, both 6px radius.
Use thin monochrome line-art illustrations that bleed off card edges instead of colourful 3D renders.
Save #f8f3ef parchment and the Departure Mono pixel glyphs for the announcement band and small decorative moments.

Don't

Don't use #3ecf8e as a button fill with white text. Primary fills are the lighter #72e3ad with dark #001a10 text.
Don't make headings bold. Manrope stays at 500–600 with normal tracking.
Don't add drop shadows to cards or buttons in the resting state.
Don't add extra brand hues. Greens carry the brand, and purple and amber are rare accents.
Don't use large radii or pill shapes for buttons. Pills are for tabs and category chips only.
Don't use gradients on UI surfaces. Gradients appear only inside customer-story media.
Don't set long body copy in Manrope or monospace. Inter carries all paragraphs.

/* Supabase — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface-warm: #f8f3ef;
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-text-subtle: #a0a0a0;
  --color-primary: #72e3ad;
  --color-brand: #3ecf8e;
  --color-link: #0a844e;
  --color-link-strong: #00482f;
  --color-on-primary: #001a10;
  --color-story-navy: #0c0f24;
  --color-story-teal: #002533;
  --color-accent-violet: #6b35dc;
  --color-warning: #b45309;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f8f3ef;
  --color-border: rgba(82, 82, 82, 0.18);
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-primary: #72e3ad;
  --color-primary-text: #001a10;
  --color-accent: #3ecf8e;
  --color-success: #0a844e;
  --color-warning: #b45309;
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
  --container-site: 1280px;
}

/* Supabase — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Page background, card fills, secondary button fill and the mobile menu panel */
  --color-surface-warm: #f8f3ef; /* Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface */
  --color-text: #000000; /* Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds */
  --color-text-muted: #525252; /* Body descriptions, hero subcopy and the de-emphasised part of feature card sentences */
  --color-text-subtle: #a0a0a0; /* Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations */
  --color-primary: #72e3ad; /* Primary CTA button background ('Start your project', 'Get Started', 'Sign up') */
  --color-brand: #3ecf8e; /* Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens */
  --color-link: #0a844e; /* Green text links and accents on light backgrounds where #3ecf8e would fail contrast */
  --color-link-strong: #00482f; /* Announcement-bar link ('Apply to attend') and underlined green text on the parchment band */
  --color-on-primary: #001a10; /* Label colour on mint primary buttons */
  --color-story-navy: #0c0f24; /* Dark customer-story tile background in the case-study carousel */
  --color-story-teal: #002533; /* Alternate dark customer-story tile background */
  --color-accent-violet: #6b35dc; /* Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills) */
  --color-warning: #b45309; /* Warning or notice text in docs and pricing notes */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f8f3ef;
  --border: rgba(82, 82, 82, 0.18);
  --text: #000000;
  --text-muted: #525252;
  --primary: #72e3ad;
  --primary-text: #001a10;
  --accent: #3ecf8e;
  --success: #0a844e;
  --warning: #b45309;

  /* Typography */
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --container: 1280px;
  --section-gap: 96px;

  /* Radius */
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
}

{
  "$name": "Supabase",
  "$source": "https://supabase.com",
  "$theme": "light",
  "$generated": "inspiration library",
  "color": {
    "bg": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Page background, card fills, secondary button fill and the mobile menu panel"
    },
    "surface-warm": {
      "$type": "color",
      "$value": "#f8f3ef",
      "$description": "Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface"
    },
    "text": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds"
    },
    "text-muted": {
      "$type": "color",
      "$value": "#525252",
      "$description": "Body descriptions, hero subcopy and the de-emphasised part of feature card sentences"
    },
    "text-subtle": {
      "$type": "color",
      "$value": "#a0a0a0",
      "$description": "Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations"
    },
    "primary": {
      "$type": "color",
      "$value": "#72e3ad",
      "$description": "Primary CTA button background ('Start your project', 'Get Started', 'Sign up')"
    },
    "brand": {
      "$type": "color",
      "$value": "#3ecf8e",
      "$description": "Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens"
    },
    "link": {
      "$type": "color",
      "$value": "#0a844e",
      "$description": "Green text links and accents on light backgrounds where #3ecf8e would fail contrast"
    },
    "link-strong": {
      "$type": "color",
      "$value": "#00482f",
      "$description": "Announcement-bar link ('Apply to attend') and underlined green text on the parchment band"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#001a10",
      "$description": "Label colour on mint primary buttons"
    },
    "story-navy": {
      "$type": "color",
      "$value": "#0c0f24",
      "$description": "Dark customer-story tile background in the case-study carousel"
    },
    "story-teal": {
      "$type": "color",
      "$value": "#002533",
      "$description": "Alternate dark customer-story tile background"
    },
    "accent-violet": {
      "$type": "color",
      "$value": "#6b35dc",
      "$description": "Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills)"
    },
    "warning": {
      "$type": "color",
      "$value": "#b45309",
      "$description": "Warning or notice text in docs and pricing notes"
    }
  },
  "role": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "surface": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "surface_raised": {
      "$type": "color",
      "$value": "#f8f3ef"
    },
    "border": {
      "$type": "color",
      "$value": "rgba(82, 82, 82, 0.18)"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "text_muted": {
      "$type": "color",
      "$value": "#525252"
    },
    "primary": {
      "$type": "color",
      "$value": "#72e3ad"
    },
    "primary_text": {
      "$type": "color",
      "$value": "#001a10"
    },
    "accent": {
      "$type": "color",
      "$value": "#3ecf8e"
    },
    "success": {
      "$type": "color",
      "$value": "#0a844e"
    },
    "warning": {
      "$type": "color",
      "$value": "#b45309"
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "Plus Jakarta Sans",
        "DM Sans",
        "system-ui",
        "sans-serif"
      ],
      "$description": "All headings. 500 for the big hero display, 600 for section H1–H3. Letter-spacing is normal, except -0.7px on the 28px auth-page title. The hero puts two lines in black and #3ecf8e green."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Inter Fallback",
        "system-ui",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "A variable font whose default weight is 450, between regular and medium. Used for body, nav and buttons at 14–16px. Weight 500 is for button labels and FAQ questions."
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Source Code Pro",
        "JetBrains Mono",
        "Menlo",
        "monospace"
      ],
      "$description": "Uppercase plan names (FREE, PRO, TEAM), large prices ($0, $25) with -0.9px tracking at 18px, code blocks, email chips and terminal snippets."
    },
    "accent": {
      "$type": "fontFamily",
      "$value": [
        "Departure Mono Superbase",
        "Departure Mono",
        "VT323",
        "monospace"
      ],
      "$description": "A bitmap pixel font used only for decoration: the ‹[{( bracket glyph pattern in the announcement bar and the dot-matrix GitHub star counter. Rendered at 15px, line-height 1.01, in pale greens."
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "46px",
        "lineHeight": "1",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "h1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "34px",
        "lineHeight": "1.11",
        "fontWeight": 600,
        "letterSpacing": "normal"
      }
    },
    "h2": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "28px",
        "lineHeight": "1.2",
        "fontWeight": 600,
        "letterSpacing": "normal"
      }
    },
    "h3": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "22px",
        "lineHeight": "1.33",
        "fontWeight": 600,
        "letterSpacing": "normal"
      }
    },
    "lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "22px",
        "lineHeight": "1.33",
        "fontWeight": 450,
        "letterSpacing": "-0.16px"
      }
    },
    "card-title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.display}",
        "fontSize": "16px",
        "lineHeight": "1.5",
        "fontWeight": 600,
        "letterSpacing": "normal"
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "16px",
        "lineHeight": "1.5",
        "fontWeight": 450,
        "letterSpacing": "normal"
      }
    },
    "ui-button": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "14px",
        "lineHeight": "1.43",
        "fontWeight": 500,
        "letterSpacing": "normal"
      }
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.body}",
        "fontSize": "12px",
        "lineHeight": "1.33",
        "fontWeight": 450,
        "letterSpacing": "normal"
      }
    },
    "mono-price": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{fontFamily.mono}",
        "fontSize": "46px",
        "lineHeight": "1",
        "fontWeight": 450,
        "letterSpacing": "normal"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "7": {
      "$type": "dimension",
      "$value": "32px"
    },
    "8": {
      "$type": "dimension",
      "$value": "48px"
    },
    "9": {
      "$type": "dimension",
      "$value": "64px"
    },
    "10": {
      "$type": "dimension",
      "$value": "96px"
    },
    "11": {
      "$type": "dimension",
      "$value": "128px"
    }
  },
  "radius": {
    "small-badges-code-chips": {
      "$type": "dimension",
      "$value": "4px"
    },
    "buttons-inputs-nav-links": {
      "$type": "dimension",
      "$value": "6px"
    },
    "cards-pricing-columns-framework-tiles": {
      "$type": "dimension",
      "$value": "8px"
    },
    "feature-bento-tiles-docs-prompt-panel": {
      "$type": "dimension",
      "$value": "12px"
    },
    "large-media-and-story-cards": {
      "$type": "dimension",
      "$value": "16px"
    },
    "pill-tabs-blog-category-chips-terminal-command-chip": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "shadow": {
    "none": {
      "$type": "shadow",
      "$value": "none",
      "$description": "Default for buttons, cards and nav. Depth comes from 1px borders, not shadows."
    },
    "sm": {
      "$type": "shadow",
      "$value": "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
      "$description": "Small lift on the docs AI-prompt panel and active segmented tabs"
    },
    "lg": {
      "$type": "shadow",
      "$value": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
      "$description": "Dropdown mega-menus, popovers and floating panels"
    },
    "inset-ring-dark": {
      "$type": "shadow",
      "$value": "inset 0 0 0 1px rgba(255,255,255,0.12)",
      "$description": "Hairline edge on dark cards (customer stories, dark-scheme panels)"
    },
    "ring-white": {
      "$type": "shadow",
      "$value": "0 0 0 1px rgba(255,255,255,0.3)",
      "$description": "Outline on elements placed over dark or gradient media"
    }
  },
  "component": {
    "primary-button": {
      "kind": "button",
      "background": "#72e3ad",
      "color": "#001a10",
      "border": "1px solid #3ecf8e",
      "radius": "6px",
      "padding": "8px 16px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "none",
      "hover": "background shifts toward #3ecf8e; border stays green",
      "notes": "Hero size is about 38px tall. The nav version is compact (about 26px tall, 12px text, 4px 10px padding). Pricing uses a full-width version about 36px tall. In dark scheme the fill becomes #006239 with #3ecf8e border and white text."
    },
    "secondary-button": {
      "kind": "button",
      "background": "#ffffff",
      "color": "#000000",
      "border": "1px solid rgba(82,82,82,0.2)",
      "radius": "6px",
      "padding": "8px 16px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "none",
      "hover": "border darkens to rgba(82,82,82,0.4); background #f8f3ef-tinted",
      "notes": "Used for 'Request a demo', 'Sign in' and 'Contact Us'. Always placed next to the primary button with an 8px gap."
    },
    "ghost-nav-link": {
      "kind": "link",
      "background": "transparent",
      "color": "#000000",
      "border": "none",
      "radius": "6px",
      "padding": "8px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "none",
      "hover": "text goes to #525252 or a faint grey fill; chevron rotates on open dropdowns",
      "notes": "Product, Developers and Solutions have small chevrons and open large dropdown menus. Pricing, Docs and Blog are plain links."
    },
    "text-input": {
      "kind": "input",
      "background": "transparent",
      "color": "#000000",
      "border": "1px solid rgba(82,82,82,0.2)",
      "radius": "6px",
      "padding": "8px",
      "font_size": "14px",
      "font_weight": 450,
      "shadow": "none",
      "hover": "focus ring in #3ecf8e at low opacity",
      "notes": "About 35px tall. Search fields have a leading magnifier icon, and docs search shows a ⌘K keycap. Placeholder colour is #a0a0a0."
    },
    "feature-card": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#525252",
      "border": "1px solid rgba(82,82,82,0.15)",
      "radius": "12px",
      "padding": "24px",
      "font_size": "16px",
      "font_weight": 450,
      "shadow": "none",
      "hover": "border darkens slightly; illustration animates",
      "notes": "Layout: icon plus Manrope 600 title, then a muted sentence with key phrases in #000000, then a line-art illustration that bleeds off the card edge. Cards form a bento grid with 16px gaps."
    },
    "pricing-column": {
      "kind": "card",
      "background": "#ffffff",
      "color": "#000000",
      "border": "1px solid rgba(82,82,82,0.15)",
      "radius": "8px",
      "padding": "16px",
      "font_size": "14px",
      "font_weight": 450,
      "shadow": "none",
      "hover": "none",
      "notes": "The four columns share borders. The featured Pro column is raised above the row with a 2px #525252 border and a dark 'Most Popular' badge. Plan names use uppercase Source Code Pro at 22px, prices Source Code Pro at 46px, and feature lists use #3ecf8e check marks."
    },
    "pill-tab-category-chip": {
      "kind": "badge",
      "background": "transparent",
      "color": "#525252",
      "border": "1px solid transparent",
      "radius": "9999px",
      "padding": "8px 32px",
      "font_size": "14px",
      "font_weight": 450,
      "shadow": "none",
      "hover": "active state gets a white fill, a 1px hairline border and #000000 text",
      "notes": "Used for Table Editor / SQL Editor / RLS Policies tabs and blog category filters. Blog post tags are tiny uppercase outline pills (about 10px text, 4px radius or full pill)."
    },
    "top-nav": {
      "kind": "nav",
      "background": "rgba(255,255,255,0) with backdrop-filter: blur(4px)",
      "color": "#000000",
      "border": "border-bottom 1px solid rgba(82,82,82,0.12)",
      "radius": "0",
      "padding": "0 24px; height 65px",
      "font_size": "14px",
      "font_weight": 500,
      "shadow": "none",
      "hover": "links fade to #525252",
      "notes": "Left: logo, then links. Right: GitHub icon with star count in #525252, then Sign in (secondary) and Start your project (primary), both compact. A 54px #f8f3ef announcement bar with the pixel-bracket pattern sits above the nav."
    }
  }
}

# Supabase — Design Reference
> mint-lit postgres on warm paper

**Source:** https://supabase.com  
**Theme:** light  
**Category:** Developer Tools  
**Mood:** light, technical, minimal, precise, friendly  
**Captured:** 2026-09-13

## Overview

Supabase feels like a clean developer tool that is sure of itself. The pages are mostly bright white and hairline-ruled, with one fresh mint-green note for the brand and its main buttons. Small technical touches keep it from looking corporate: a pixel-bracket pattern in the warm announcement bar, uppercase monospace plan names, a dot-matrix star counter and thin line-art diagrams of Postgres elephants and wireframe globes. It reads as serious infrastructure with some playfulness.

The type uses three families. Manrope (500–600) handles headings. Inter at the variable weight 450 handles body copy and UI. Source Code Pro covers prices, plan names and code, and a custom Departure Mono bitmap font draws the decoration. Colour is nearly all neutral: #ffffff pages, #000000 and #525252 text, and a #f8f3ef paper band. Green comes in steps: #72e3ad button fills, #3ecf8e brand strokes and the second headline line, and #0a844e/#00482f for links and text on light backgrounds. Components are small and precise: 6px buttons about 34–38px tall, 8–12px cards with 1px borders and almost no shadow, a 1280px container, a 4px spacing grid and 96px gaps between sections.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Paper White | `#ffffff` | `--color-bg` | Page background, card fills, secondary button fill and the mobile menu panel |
| Warm Parchment | `#f8f3ef` | `--color-surface-warm` | Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface |
| Ink | `#000000` | `--color-text` | Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds |
| Graphite | `#525252` | `--color-text-muted` | Body descriptions, hero subcopy and the de-emphasised part of feature card sentences |
| Ash | `#a0a0a0` | `--color-text-subtle` | Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations |
| Mint Fill | `#72e3ad` | `--color-primary` | Primary CTA button background ('Start your project', 'Get Started', 'Sign up') |
| Supabase Green | `#3ecf8e` | `--color-brand` | Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens |
| Forest Link | `#0a844e` | `--color-link` | Green text links and accents on light backgrounds where #3ecf8e would fail contrast |
| Deep Moss | `#00482f` | `--color-link-strong` | Announcement-bar link ('Apply to attend') and underlined green text on the parchment band |
| Green Black | `#001a10` | `--color-on-primary` | Label colour on mint primary buttons |
| Midnight Navy | `#0c0f24` | `--color-story-navy` | Dark customer-story tile background in the case-study carousel |
| Deep Teal | `#002533` | `--color-story-teal` | Alternate dark customer-story tile background |
| Postgres Violet | `#6b35dc` | `--color-accent-violet` | Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills) |
| Amber | `#b45309` | `--color-warning` | Warning or notice text in docs and pricing notes |

### Semantic roles

| Role | Value |
|---|---|
| background | `#ffffff` |
| surface | `#ffffff` |
| surface raised | `#f8f3ef` |
| border | `rgba(82, 82, 82, 0.18)` |
| text | `#000000` |
| text muted | `#525252` |
| primary | `#72e3ad` |
| primary text | `#001a10` |
| accent | `#3ecf8e` |
| success | `#0a844e` |
| warning | `#b45309` |

## Tokens — Typography

- **Display:** Manrope (400, 500, 600) — fallbacks: Plus Jakarta Sans, DM Sans, system-ui, sans-serif. All headings. 500 for the big hero display, 600 for section H1–H3. Letter-spacing is normal, except -0.7px on the 28px auth-page title. The hero puts two lines in black and #3ecf8e green.
- **Body:** Inter (400, 450, 500) — fallbacks: Inter Fallback, system-ui, Helvetica Neue, Arial, sans-serif. A variable font whose default weight is 450, between regular and medium. Used for body, nav and buttons at 14–16px. Weight 500 is for button labels and FAQ questions.
- **Mono:** Source Code Pro (450, 500, 700) — fallbacks: JetBrains Mono, Menlo, monospace. Uppercase plan names (FREE, PRO, TEAM), large prices ($0, $25) with -0.9px tracking at 18px, code blocks, email chips and terminal snippets.
- **Accent:** Departure Mono Superbase (400) — fallbacks: Departure Mono, VT323, monospace. A bitmap pixel font used only for decoration: the ‹[{( bracket glyph pattern in the announcement bar and the dot-matrix GitHub star counter. Rendered at 15px, line-height 1.01, in pale greens.

| Role | Size | Line height | Weight | Letter spacing | Family |
|---|---|---|---|---|---|
| Display | 46px | 1 | 500 | normal | display |
| H1 | 34px | 1.11 | 600 | normal | display |
| H2 | 28px | 1.2 | 600 | normal | display |
| H3 | 22px | 1.33 | 600 | normal | display |
| Lead | 22px | 1.33 | 450 | -0.16px | body |
| Card title | 16px | 1.5 | 600 | normal | display |
| Body | 16px | 1.5 | 450 | normal | body |
| UI / Button | 14px | 1.43 | 500 | normal | body |
| Caption | 12px | 1.33 | 450 | normal | body |
| Mono price | 46px | 1 | 450 | normal | mono |

## Tokens — Spacing & Layout

- **Base unit:** 4px
- **Density:** comfortable
- **Container max width:** 1280px
- **Section gap:** 96px
- **Card padding:** 24px (feature cards) / 32px (large panels)
- **Scale:** 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px, 128px

## Tokens — Radius

| Element | Value |
|---|---|
| Small badges, code chips | 4px |
| Buttons, inputs, nav links | 6px |
| Cards, pricing columns, framework tiles | 8px |
| Feature bento tiles, docs prompt panel | 12px |
| Large media and story cards | 16px |
| Pill tabs, blog category chips, terminal command chip | 9999px |

## Tokens — Shadows

| Name | Value | Usage |
|---|---|---|
| none | `none` | Default for buttons, cards and nav. Depth comes from 1px borders, not shadows. |
| sm | `0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)` | Small lift on the docs AI-prompt panel and active segmented tabs |
| lg | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)` | Dropdown mega-menus, popovers and floating panels |
| inset-ring-dark | `inset 0 0 0 1px rgba(255,255,255,0.12)` | Hairline edge on dark cards (customer stories, dark-scheme panels) |
| ring-white | `0 0 0 1px rgba(255,255,255,0.3)` | Outline on elements placed over dark or gradient media |

## Components

### Primary button (button)

| Property | Value |
|---|---|
| background | `#72e3ad` |
| color | `#001a10` |
| border | `1px solid #3ecf8e` |
| radius | `6px` |
| padding | `8px 16px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `background shifts toward #3ecf8e; border stays green` |

Hero size is about 38px tall. The nav version is compact (about 26px tall, 12px text, 4px 10px padding). Pricing uses a full-width version about 36px tall. In dark scheme the fill becomes #006239 with #3ecf8e border and white text.

### Secondary button (button)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#000000` |
| border | `1px solid rgba(82,82,82,0.2)` |
| radius | `6px` |
| padding | `8px 16px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `border darkens to rgba(82,82,82,0.4); background #f8f3ef-tinted` |

Used for 'Request a demo', 'Sign in' and 'Contact Us'. Always placed next to the primary button with an 8px gap.

### Ghost nav link (link)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#000000` |
| border | `none` |
| radius | `6px` |
| padding | `8px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `text goes to #525252 or a faint grey fill; chevron rotates on open dropdowns` |

Product, Developers and Solutions have small chevrons and open large dropdown menus. Pricing, Docs and Blog are plain links.

### Text input (input)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#000000` |
| border | `1px solid rgba(82,82,82,0.2)` |
| radius | `6px` |
| padding | `8px` |
| font size | `14px` |
| font weight | `450` |
| shadow | `none` |
| hover | `focus ring in #3ecf8e at low opacity` |

About 35px tall. Search fields have a leading magnifier icon, and docs search shows a ⌘K keycap. Placeholder colour is #a0a0a0.

### Feature card (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#525252` |
| border | `1px solid rgba(82,82,82,0.15)` |
| radius | `12px` |
| padding | `24px` |
| font size | `16px` |
| font weight | `450` |
| shadow | `none` |
| hover | `border darkens slightly; illustration animates` |

Layout: icon plus Manrope 600 title, then a muted sentence with key phrases in #000000, then a line-art illustration that bleeds off the card edge. Cards form a bento grid with 16px gaps.

### Pricing column (card)

| Property | Value |
|---|---|
| background | `#ffffff` |
| color | `#000000` |
| border | `1px solid rgba(82,82,82,0.15)` |
| radius | `8px` |
| padding | `16px` |
| font size | `14px` |
| font weight | `450` |
| shadow | `none` |
| hover | `none` |

The four columns share borders. The featured Pro column is raised above the row with a 2px #525252 border and a dark 'Most Popular' badge. Plan names use uppercase Source Code Pro at 22px, prices Source Code Pro at 46px, and feature lists use #3ecf8e check marks.

### Pill tab / category chip (badge)

| Property | Value |
|---|---|
| background | `transparent` |
| color | `#525252` |
| border | `1px solid transparent` |
| radius | `9999px` |
| padding | `8px 32px` |
| font size | `14px` |
| font weight | `450` |
| shadow | `none` |
| hover | `active state gets a white fill, a 1px hairline border and #000000 text` |

Used for Table Editor / SQL Editor / RLS Policies tabs and blog category filters. Blog post tags are tiny uppercase outline pills (about 10px text, 4px radius or full pill).

### Top nav (nav)

| Property | Value |
|---|---|
| background | `rgba(255,255,255,0) with backdrop-filter: blur(4px)` |
| color | `#000000` |
| border | `border-bottom 1px solid rgba(82,82,82,0.12)` |
| radius | `0` |
| padding | `0 24px; height 65px` |
| font size | `14px` |
| font weight | `500` |
| shadow | `none` |
| hover | `links fade to #525252` |

Left: logo, then links. Right: GitHub icon with star count in #525252, then Sign in (secondary) and Start your project (primary), both compact. A 54px #f8f3ef announcement bar with the pixel-bracket pattern sits above the nav.

## Layout

Content sits in a centred 1280px container with about 24px gutters (pages visually 1060–1200px wide). The home hero is split: a two-line Manrope headline on the left, muted Inter subcopy aligned to the right column, and a pair of CTAs underneath. Next comes a bento grid of feature cards (one wide Postgres card, then narrower ones in rows of 3–4), then a greyscale logo wall, a product-screenshot section with pill tabs, a code sample next to a framework icon row, template cards, a case-study carousel with dark #0c0f24/#002533 tiles, a tweet wall, an open-source band with the dot-matrix star counter, and a final CTA. Sections are separated by 96px and full-width hairline dividers. The footer is a dense multi-column link list. Docs pages use a left-aligned title with a framework grid of 52px bordered icon tiles.

## Imagery

Imagery is mostly monochrome thin-stroke line art: an outlined Postgres elephant on a construction grid, a wireframe globe with dotted network paths, a vector cube and blurred email chips. Real product screenshots (Table Editor) appear in white bordered frames. Customer logos are flat greyscale. Colour shows up only in customer-story media (a Lovable orange-to-pink gradient) and in the dark blog thumbnails (#000000 with a green bolt). Pixel-bracket glyphs and the dot-matrix star counter use Departure Mono in pale greens (#95e6b8, #a9f1ca) for a retro-terminal touch. Icons are 16–20px outline strokes.

## Motion

Motion is restrained. Hover states are short colour and border transitions (about 150ms ease). Illustrations inside feature cards animate gently: globe paths trace and chips scroll. The tweet wall and logo row drift slowly, and the bracket pattern in the announcement bar shimmers. There are no large parallax effects or scroll-jacking.

## Responsive

On phones the announcement bar wraps to two lines, with the link below the title and the bracket pattern cropped to a narrow strip on the right. The nav shrinks to the logo plus a hamburger icon. Opening it replaces the icon with an X and shows a full-screen white panel under the banner. The panel lists Product, Developers and Solutions as accordion rows with chevrons, then Pricing, Docs and Blog, all at about 18px Inter 500 with 1px hairline dividers and roughly 60px row height. The hero stacks headline, subcopy, then two side-by-side buttons that keep their natural width (not full-width) and grow to about 16px text. Feature cards collapse to a single column with 20px side gutters and drop or simplify their illustrations. Section gaps shrink from 96px to about 48–64px.

## Do

- Split hero headlines in two: the first line in #000000, the second in #3ecf8e, both Manrope 500 at 46px with line-height 1.
- Set body and UI text in Inter at weight 450, and in a muted paragraph make the key phrase #000000 while the rest stays #525252.
- Use Source Code Pro for anything numeric or technical: prices, uppercase plan names, CLI commands and code chips.
- Build depth with 1px hairline borders and 6/8/12px radii. Keep shadows for dropdowns and floating panels only.
- Pair a #72e3ad primary button (1px #3ecf8e border, #001a10 label) with a white bordered secondary button, both 6px radius.
- Use thin monochrome line-art illustrations that bleed off card edges instead of colourful 3D renders.
- Save #f8f3ef parchment and the Departure Mono pixel glyphs for the announcement band and small decorative moments.

## Don't

- Don't use #3ecf8e as a button fill with white text. Primary fills are the lighter #72e3ad with dark #001a10 text.
- Don't make headings bold. Manrope stays at 500–600 with normal tracking.
- Don't add drop shadows to cards or buttons in the resting state.
- Don't add extra brand hues. Greens carry the brand, and purple and amber are rare accents.
- Don't use large radii or pill shapes for buttons. Pills are for tabs and category chips only.
- Don't use gradients on UI surfaces. Gradients appear only inside customer-story media.
- Don't set long body copy in Manrope or monospace. Inter carries all paragraphs.

## Agent prompt

> Design a light, precise developer-platform site in the Supabase style. White #ffffff pages in a 1280px container, a 4px spacing grid, 96px section gaps and 1px hairline borders (rgba(82,82,82,0.15–0.2)) instead of shadows. Headings are Manrope 500–600 with normal tracking: hero 46px/1 with the first line #000000 and the second #3ecf8e, H1 34px/1.11, H2 28px/1.2, H3 22px/1.33. Body and UI are Inter at weight 450, 16px/1.5 in #525252 with key phrases in #000000; nav and buttons are 14px weight 500. Use Source Code Pro for prices, uppercase plan names and code, and a bitmap pixel font (Departure Mono) only for decorative bracket glyphs on a #f8f3ef announcement bar. Primary button: #72e3ad fill, 1px #3ecf8e border, #001a10 label, 6px radius, 8px 16px padding, about 38px tall. Secondary button: white with a hairline border and black text. Nav is 65px, transparent with blur(4px), a hairline bottom border and compact Sign in / Start your project buttons on the right. Feature cards are white, 12px radius, 24px padding, bento-gridded with 16px gaps, each with an outline icon, a Manrope 600 title and a thin monochrome line-art illustration bleeding off the edge. Pill tabs use 9999px radius. Links use #0a844e/#00482f. Dark accent tiles use #0c0f24 and #002533. Shadows appear only on dropdowns (0 10px 15px -3px rgba(0,0,0,.1)). Tone: calm, technical, confident, minimal colour beyond mint green.

## CSS custom properties

```css
/* Supabase — CSS custom properties. Generated from style.json */
:root {
  /* Palette */
  --color-bg: #ffffff; /* Page background, card fills, secondary button fill and the mobile menu panel */
  --color-surface-warm: #f8f3ef; /* Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface */
  --color-text: #000000; /* Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds */
  --color-text-muted: #525252; /* Body descriptions, hero subcopy and the de-emphasised part of feature card sentences */
  --color-text-subtle: #a0a0a0; /* Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations */
  --color-primary: #72e3ad; /* Primary CTA button background ('Start your project', 'Get Started', 'Sign up') */
  --color-brand: #3ecf8e; /* Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens */
  --color-link: #0a844e; /* Green text links and accents on light backgrounds where #3ecf8e would fail contrast */
  --color-link-strong: #00482f; /* Announcement-bar link ('Apply to attend') and underlined green text on the parchment band */
  --color-on-primary: #001a10; /* Label colour on mint primary buttons */
  --color-story-navy: #0c0f24; /* Dark customer-story tile background in the case-study carousel */
  --color-story-teal: #002533; /* Alternate dark customer-story tile background */
  --color-accent-violet: #6b35dc; /* Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills) */
  --color-warning: #b45309; /* Warning or notice text in docs and pricing notes */

  /* Semantic roles */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-raised: #f8f3ef;
  --border: rgba(82, 82, 82, 0.18);
  --text: #000000;
  --text-muted: #525252;
  --primary: #72e3ad;
  --primary-text: #001a10;
  --accent: #3ecf8e;
  --success: #0a844e;
  --warning: #b45309;

  /* Typography */
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --container: 1280px;
  --section-gap: 96px;

  /* Radius */
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
}
```

## Tailwind v4 theme

```css
/* Supabase — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
  --color-bg: #ffffff;
  --color-surface-warm: #f8f3ef;
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-text-subtle: #a0a0a0;
  --color-primary: #72e3ad;
  --color-brand: #3ecf8e;
  --color-link: #0a844e;
  --color-link-strong: #00482f;
  --color-on-primary: #001a10;
  --color-story-navy: #0c0f24;
  --color-story-teal: #002533;
  --color-accent-violet: #6b35dc;
  --color-warning: #b45309;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-raised: #f8f3ef;
  --color-border: rgba(82, 82, 82, 0.18);
  --color-text: #000000;
  --color-text-muted: #525252;
  --color-primary: #72e3ad;
  --color-primary-text: #001a10;
  --color-accent: #3ecf8e;
  --color-success: #0a844e;
  --color-warning: #b45309;
  --font-display: Manrope, 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: Inter, 'Inter Fallback', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', Menlo, monospace;
  --font-accent: 'Departure Mono Superbase', 'Departure Mono', VT323, monospace;
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: normal;
  --text-display--font-weight: 500;
  --text-h1: 34px;
  --text-h1--line-height: 1.11;
  --text-h1--letter-spacing: normal;
  --text-h1--font-weight: 600;
  --text-h2: 28px;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: normal;
  --text-h2--font-weight: 600;
  --text-h3: 22px;
  --text-h3--line-height: 1.33;
  --text-h3--letter-spacing: normal;
  --text-h3--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.33;
  --text-lead--letter-spacing: -0.16px;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--letter-spacing: normal;
  --text-card-title--font-weight: 600;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-body--letter-spacing: normal;
  --text-body--font-weight: 450;
  --text-ui-button: 14px;
  --text-ui-button--line-height: 1.43;
  --text-ui-button--letter-spacing: normal;
  --text-ui-button--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.33;
  --text-caption--letter-spacing: normal;
  --text-caption--font-weight: 450;
  --text-mono-price: 46px;
  --text-mono-price--line-height: 1;
  --text-mono-price--letter-spacing: normal;
  --text-mono-price--font-weight: 450;
  --radius-small-badges-code-chips: 4px;
  --radius-buttons-inputs-nav-links: 6px;
  --radius-cards-pricing-columns-framework-tiles: 8px;
  --radius-feature-bento-tiles-docs-prompt-panel: 12px;
  --radius-large-media-and-story-cards: 16px;
  --radius-pill-tabs-blog-category-chips-terminal-command-chip: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-inset-ring-dark: inset 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-ring-white: 0 0 0 1px rgba(255,255,255,0.3);
  --container-site: 1280px;
}
```

# Supabase — Style Reference
> mint-lit postgres on warm paper

**Theme:** light · **Mood:** light, technical, minimal, precise, friendly

Supabase feels like a clean developer tool that is sure of itself. The pages are mostly bright white and hairline-ruled, with one fresh mint-green note for the brand and its main buttons. Small technical touches keep it from looking corporate: a pixel-bracket pattern in the warm announcement bar, uppercase monospace plan names, a dot-matrix star counter and thin line-art diagrams of Postgres elephants and wireframe globes. It reads as serious infrastructure with some playfulness.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--color-bg` | Page background, card fills, secondary button fill and the mobile menu panel |
| Warm Parchment | `#f8f3ef` | `--color-surface-warm` | Top announcement bar and the warm band behind the pixel-bracket pattern; the only off-white surface |
| Ink | `#000000` | `--color-text` | Headlines, nav links, emphasised phrases inside muted paragraphs, and dark blog/product thumbnail backgrounds |
| Graphite | `#525252` | `--color-text-muted` | Body descriptions, hero subcopy and the de-emphasised part of feature card sentences |
| Ash | `#a0a0a0` | `--color-text-subtle` | Tertiary metadata, placeholders, blog dates, and icon strokes in line illustrations |
| Mint Fill | `#72e3ad` | `--color-primary` | Primary CTA button background ('Start your project', 'Get Started', 'Sign up') |
| Supabase Green | `#3ecf8e` | `--color-brand` | Logo bolt, second headline line ('Scale to millions'), primary button border, check icons and highlighted terminal tokens |
| Forest Link | `#0a844e` | `--color-link` | Green text links and accents on light backgrounds where #3ecf8e would fail contrast |
| Deep Moss | `#00482f` | `--color-link-strong` | Announcement-bar link ('Apply to attend') and underlined green text on the parchment band |
| Green Black | `#001a10` | `--color-on-primary` | Label colour on mint primary buttons |
| Midnight Navy | `#0c0f24` | `--color-story-navy` | Dark customer-story tile background in the case-study carousel |
| Deep Teal | `#002533` | `--color-story-teal` | Alternate dark customer-story tile background |
| Postgres Violet | `#6b35dc` | `--color-accent-violet` | Occasional accent text for product callouts and code-syntax highlights (paired with #8e4ec6 fills) |
| Amber | `#b45309` | `--color-warning` | Warning or notice text in docs and pricing notes |

## Tokens — Typography

- **Display:** Manrope (Plus Jakarta Sans, DM Sans, system-ui, sans-serif) — weights 400/500/600
- **Body:** Inter (Inter Fallback, system-ui, Helvetica Neue, Arial, sans-serif) — weights 400/450/500
- **Mono:** Source Code Pro (JetBrains Mono, Menlo, monospace) — weights 450/500/700
- **Accent:** Departure Mono Superbase (Departure Mono, VT323, monospace) — weights 400

## Tokens — Radius

| Element | Value |
|---------|-------|
| Small badges, code chips | `4px` |
| Buttons, inputs, nav links | `6px` |
| Cards, pricing columns, framework tiles | `8px` |
| Feature bento tiles, docs prompt panel | `12px` |
| Large media and story cards | `16px` |
| Pill tabs, blog category chips, terminal command chip | `9999px` |

## Do

- Split hero headlines in two: the first line in #000000, the second in #3ecf8e, both Manrope 500 at 46px with line-height 1.
- Set body and UI text in Inter at weight 450, and in a muted paragraph make the key phrase #000000 while the rest stays #525252.
- Use Source Code Pro for anything numeric or technical: prices, uppercase plan names, CLI commands and code chips.
- Build depth with 1px hairline borders and 6/8/12px radii. Keep shadows for dropdowns and floating panels only.
- Pair a #72e3ad primary button (1px #3ecf8e border, #001a10 label) with a white bordered secondary button, both 6px radius.
- Use thin monochrome line-art illustrations that bleed off card edges instead of colourful 3D renders.
- Save #f8f3ef parchment and the Departure Mono pixel glyphs for the announcement band and small decorative moments.

## Don't

- Don't use #3ecf8e as a button fill with white text. Primary fills are the lighter #72e3ad with dark #001a10 text.
- Don't make headings bold. Manrope stays at 500–600 with normal tracking.
- Don't add drop shadows to cards or buttons in the resting state.
- Don't add extra brand hues. Greens carry the brand, and purple and amber are rare accents.
- Don't use large radii or pill shapes for buttons. Pills are for tabs and category chips only.
- Don't use gradients on UI surfaces. Gradients appear only inside customer-story media.
- Don't set long body copy in Manrope or monospace. Inter carries all paragraphs.