name: supabase-design
version: alpha
description: >
  Supabase runs an almost-monochrome light system: a faintly off-white canvas (#fcfcfc)
  over near-black ink (#171717), with everything — UI chrome, illustrations, partner logos,
  feature diagrams — rendered in grayscale. Against that quiet base sits one unmistakable
  brand voltage: Supabase emerald green (#3ECF8E, the lightning-bolt logo and hero accent
  word "Scale to millions"), with a lighter mint (#72E3AD) used as the primary button fill
  carrying black text. Type is the proprietary geometric sans Circular, run at regular
  weight (400) even on huge 72px display — giving the brand its clean, friendly, monospace-
  adjacent precision (code samples sit in mono). Geometry is flat and outlined: 6px buttons,
  16px cards with a 1px hairline and no shadow, pill tabs. The signature is a developer-grade
  restraint — gray wireframe illustrations, dotted globes, isometric cubes — punctuated by
  green only where it matters.
colors:
  # Brand
  primary: '#3ECF8E'          # Supabase emerald — logo, hero accent word, inline links
  primary-button: '#72E3AD'   # lighter mint — primary button fill (with dark text)
  primary-border: 'rgba(62,207,142,0.75)' # button hairline (oklab → ~mint)
  on-primary: '#171717'       # dark text on green buttons
  # Surface (light, near-white)
  surface: '#fcfcfc'          # page canvas
  surface-card: '#ffffff'     # cards / panels
  surface-button: '#fdfdfd'   # secondary button fill
  # Text (neutral ramp)
  on-surface: '#171717'       # primary text/headings
  on-surface-secondary: '#525252' # muted copy / counts
  on-surface-tertiary: '#707070'  # icons / faint meta
  # Hairlines / borders
  hairline: '#dfdfdf'         # card & divider borders
  border-button: '#d4d4d4'    # secondary-button border
  # Semantic
  success: '#3ECF8E'
  warning: '#f59e0b'
  error: '#ef4444'
typography:
  display:
    fontFamily: '"Circular", "Helvetica Neue", Helvetica, Arial, sans-serif'
    fontSize: 72px            # hero h1 "Build in a weekend"
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: 0
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 36px            # section h3 ("Start building in seconds")
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: 0
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 24px            # card titles
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 18px            # hero subcopy
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px            # standard body
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px            # nav, buttons
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  eyebrow:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 13px            # "CUSTOMER STORIES" uppercase label
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  mono:
    fontFamily: '"Office Code Pro", "Source Code Pro", "SF Mono", Menlo, monospace'
    fontSize: 14px            # code snippets ("$ supabase functions deploy")
rounded:
  sm: 6px      # buttons, nav items
  lg: 16px     # cards / feature tiles
  full: 9999px # pill tabs, chips
spacing:        # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
components:
  button-primary:                  # "Start your project"
    backgroundColor: '{colors.primary-button}'
    textColor: '{colors.on-primary}'
    borderColor: '{colors.primary-border}'
    borderWidth: '1px'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '8px 16px'
  button-secondary:                # "Request a demo" / "View events"
    backgroundColor: '{colors.surface-button}'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.border-button}'
    borderWidth: '1px'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '8px 16px'
  nav-item:
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '8px'
  pill-tab:                        # "Table Editor / SQL Editor / RLS Policies"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '8px 20px'
  card:                            # feature / template tile
    backgroundColor: '{colors.surface-card}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.lg}'
    textColor: '{colors.on-surface}'
    padding: '24px'
  link-accent:                     # inline green link ("More on Security", "functions deploy")
    backgroundColor: 'transparent'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
  count-chip:                      # GitHub "103.6K"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface-secondary}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.sm}'
    padding: '4px 10px'
  input:
    backgroundColor: '{colors.surface-card}'
    borderColor: '{colors.border-button}'
    borderWidth: '1px'
    rounded: '{rounded.sm}'
    typography: '{typography.body-md}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 200ms
icons:
  style: outline
  stroke: 1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface}'

Supabase

supabase-design · alpha

Overview

Supabase runs an almost-monochrome light system: a faintly off-white canvas (#fcfcfc) over near-black ink (#171717), with everything — nav chrome, partner logos, feature illustrations, isometric cubes, dotted globes — rendered in grayscale. Against that deliberately quiet base sits one brand voltage: Supabase emerald green (#3ECF8E) — the lightning-bolt logo, the hero accent word ("Scale to millions"), and inline link accents. A lighter mint (#72E3AD) is the primary button fill, and crucially it carries black text, not white — a distinctive, slightly playful choice. Type is the proprietary geometric sans Circular, run at regular weight (400) even at 72px display, which gives Supabase its clean, even, friendly-but-technical voice; code samples drop to mono. Geometry is flat and outlined: 6px buttons, 16px cards with a 1px hairline and no shadow, pill tabs, and big wireframe feature tiles. The whole system reads as developer-grade and open-source: restrained, inspectable, gray — with green as the single spark.

Colors

Brand — primary #3ECF8E is the Supabase emerald: the logo bolt, the green hero word, and inline accent links ("More on Security", the green functions deploy in a code chip). The primary button uses a lighter primary-button #72E3AD fill with dark #171717 text (never white) — a signature contrast. The button carries a faint green hairline (primary-border, authored in oklab).

Surface — canvas surface #fcfcfc (a hair off pure white); cards/panels are true surface-card #fff; secondary buttons sit on surface-button #fdfdfd.

Text — a neutral ramp: on-surface #171717 (headings + body), on-surface-secondary #525252 (muted copy, the second clause of two-tone headlines, counts), on-surface- tertiary #707070 (faint meta and the gray icons).

Hairlines — hairline #dfdfdf draws card borders and dividers; secondary buttons use a slightly darker border-button #d4d4d4.

Two-tone headlines — like Stripe, Supabase splits headings into a black clause + a gray (#525252) clause ("Build in a weekend, scale to millions" in the footer; "Trusted by the world's most innovative companies"). The hero variant flips the second line to green.

Typography

Family: Circular (proprietary geometric sans), falling back to "Helvetica Neue", Helvetica, Arial, sans-serif. Closest open-source substitutes: Geist, Inter, or Nunito Sans (geometric, even weight). The defining trait is weight 400 on display — the 72px hero and 36px section heads are regular, not bold, which keeps the airy feel. Card titles step to 500; eyebrows are 13px/500 with wide tracking and uppercase. Code uses a monospace (Office Code Pro / Source Code Pro family).

Token	Size	Weight	Line-height	Usage
display	72px	400	72px	Hero h1
headline-lg	36px	400	43.2px	Section heads ("Start building in seconds")
headline-md	24px	500	1.3	Card titles
body-lg	18px	400	1.5	Hero subcopy
body-md	16px	400	24px	Standard body
label	14px	500	16px	Nav, buttons
eyebrow	13px	500	1.4	Uppercase section labels (+0.08em tracking)
mono	14px	400	—	Code snippets

Layout

Base unit 8px; scale 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96. The page is center-stage and symmetric: a centered hero (logo nav bar → big two-tone headline → subcopy → primary + secondary CTA → grayscale logo strip), then a bento-style grid of outlined feature tiles (Postgres Database, Authentication, Edge Functions, Storage, Realtime, Vector, Data APIs) in mixed 1- and 2-column spans. Section intros are centered with an eyebrow label above. Cards are 16px-radius, 24px-padded, hairline-bordered, often holding gray wireframe illustrations. The footer repeats the hero headline, security badges, and the green CTA. Content caps around 1200px; whitespace is generous.

Elevation & Depth

Flat by rule. Supabase uses 1px hairline borders and tint, never drop shadows — every card and tile is an outlined rectangle on the off-white canvas. Depth in illustrations is faked with gray wireframe geometry (isometric cubes, dotted globes, overlapping logo-grid construction), not real shadow. The dashboard mock in "Stay productive…" is the rare element with a faint ambient lift. No gradients, no glows on controls.

Shapes

Three radii: 6px for buttons and nav items, 16px for cards/feature tiles, and fully-pill (9999px) for the section tab switchers (Table Editor / SQL Editor / RLS Policies) and chips. The mix of small-radius buttons and large-radius cards is clean and modern without being soft.

Components

• button-primary — mint #72E3AD fill, black text, 6px radius, faint green border ("Start your project").
• button-secondary — near-white #fdfdfd fill, #d4d4d4 border, dark text ("Request a demo").
• pill-tab — outlined fully-pill toggle; active gets a darker border (feature tab switcher).
• card — white fill, 1px #dfdfdf border, 16px radius, 24px padding, no shadow.
• nav-item — transparent, dark text, 6px radius, 8px hover padding.
• link-accent — inline emerald #3ECF8E text link.
• count-chip — outlined 6px chip for the GitHub star count ("103.6K").
• input — white fill, #d4d4d4 border, 6px radius (email signup).

Motion

Calm and minimal — ~200ms standard ease for hovers, tab switches, and button states. A few feature tiles animate gently (the storage grid, the realtime cursors), but the marketing page avoids parallax and big entrance choreography. Motion is functional and quiet, matching the developer-tool restraint.

Iconography

Outline icons (~1.5px stroke) on a 24px grid, rendered 16/20/24px in on-surface #171717 or muted gray. Feature illustrations are monochrome gray wireframes (Postgres elephant construction grid, dotted edge-functions globe, isometric vector cube). The only colored mark is the green lightning-bolt logo. Partner and framework logos are desaturated to gray. Icons never carry the green except the logo and inline link glyphs.

Do's and Don'ts

• Do keep the canvas off-white #fcfcfc with near-black #171717 ink and a full gray ramp.
• Do reserve emerald #3ECF8E for the logo, the hero accent word, and inline links.
• Do make the primary button mint #72E3AD with black text — not white.
• Do set display type in Circular at regular weight (400), even at 72px.
• Do use flat, outlined 16px cards (1px #dfdfdf) with no shadows.
• Do render illustrations and partner logos in grayscale wireframe.
• Don't bold the big headlines or use white text on the green button.
• Don't add drop shadows or gradients to cards — keep them outlined and flat.
• Don't colorize illustrations or scatter green across large surfaces.
• Don't ship a dark marketing canvas (a dark dashboard theme exists in-product, but the site is light).

Known Gaps

• Supabase renders client-side with no exposed :root brand tokens, so values above are from computed styles plus Supabase's known palette. The iconic emerald is #3ECF8E (the measured button fill is the lighter #72E3AD tint, border authored in oklab). Circular is proprietary — substitute a geometric sans and preserve weight 400 on display. Semantic warning/error hexes are conventional approximations.