Supabase Inspired Design System

Overview

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

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

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

Key Characteristics:

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

Known Gaps

• In-product dashboard chrome: table header densities, SQL-editor syntax-highlighting palette, and log-stream row treatments live inside the product app and weren't captured on the public marketing surfaces.
• Focus rings: form inputs document the border and padding but not the focus-ring color, width, or offset on :focus-visible.
• Hover-state colors: beyond the documented pressed state at {colors.primary-deep} (#24b47e), hover-state lifts on cards and link rows were not consistently observable.
• Empty / loading / skeleton screens: not visible on the captured marketing pages.
• Toast and inline-alert system: semantic info / success / warning / error treatments aren't represented in the marketing track.
• Dark-mode marketing variant: the product app defaults to dark but the marketing site commits to white; the inverse mapping (which tokens swap in a dark marketing build) isn't captured.