Supabase DESIGN.md

Supabase — Design Reference

Overview

Visual Theme & Atmosphere

Supabase is an open-source Postgres development platform: its architecture documentation places a full Postgres database at the center of a project, with Auth, Storage, Realtime, Functions, and other services around it. The current public site communicates that developer platform with a bright, low-chrome interface rather than the older dark-terminal treatment in this reference. Across the captured home, features, and pricing routes, a mint #72e3ad action fill punctuates white and near-white surfaces; Inter supplies repeated UI text, Manrope carries the larger marketing hierarchy, and Source Code Pro appears sparingly in live public content. The result is technical but open rather than ornamental—small radii, direct controls, and lightweight overlays support dense product information without standing in for the authenticated dashboard.

The official brand-assets page separately governs logo and integration-button use: official logos are supplied in light and dark treatments, and Supabase says its trademarks and other brand elements must represent Supabase. This reference therefore keeps that identity guidance separate from the computed public-route values. It also keeps public marketing, public pricing, authenticated product UI, documentation chrome, and declared-only font assets as different evidence domains.

• Mint action signal: #72e3ad is the repeated observed public background color, not a blanket status or product-surface palette.
• Light public chrome: the captured menu and dialog surfaces compute to near-white Oklch values with thin neutral rules.
• Compact geometry: 4px, 8px, 12px, 16px, 24px, and 32px are recurring public-route measurements; the packet does not publish them as an official scale.

Primary tasks

• Start a project that puts a full Postgres database at its center
• Work with full Postgres access instead of a wrapped abstraction
• Begin small and find deeper technical detail when needed
• Contribute code, improve documentation, or help other developers

Brand Narrative

Supabase presents a Postgres-centered platform rather than an abstraction over it: its architecture documentation says each project contains several tools around a single Postgres instance, and explains that the company chose open-source tools that are scalable and approachable. Its company page frames the present organization as a large open-source community, while the contribution page describes a mission of helping developers succeed through work in the open. This is product and culture context, not evidence that public marketing values describe every product surface.

Principles

1. Keep Postgres legible. UI implication: describe database capability directly rather than masking it behind generic backend language.
2. Work in the open. UI implication: make contribution, documentation, and community paths concrete.
3. Make the platform approachable. UI implication: public information architecture should let users begin small and find deeper technical detail when needed.

Personas

Stakeholder groups below are source-backed categories, not fictional people.

• Developers new to Postgres: the architecture guidance says they can start small and grow into the platform.
• Postgres veterans: the same guidance identifies users who want full Postgres access and familiarity.
• Open-source contributors and helpers: the contribution page invites people to contribute code, improve documentation, and help developers across community channels.

Colors

Selector-backed public roles

• Mint action (#72e3ad): high-confidence public background color across all three captured routes; exact submit sample at home::[data-omd-capture="75"].
• Compact dark action (oklch(0.1 0 34)): pricing compact-action background at pricing::[data-omd-capture="17"].
• Near-white public surfaces (oklch(1 0 34) and oklch(0.995 0 34)): observed menu, selected-tab, and dialog backgrounds. They remain raw computed values because the packet does not provide a matching official hex scale.
• Public foreground (oklch(0.1 0 34)): observed button, input, tab, and dialog text; it is not presented as a dashboard token.

The collector also aggregates #3fcf8e and #0a874f on public routes, but no selector-backed role from this packet makes either a canonical token. The brand-assets page supplies logo rules, not a published UI color scale; no semantic success, warning, error, product-console, or documentation palette is inferred.

Typography

Evidence classes

Captured public hierarchy

Official font and licence context

Inter’s official repository describes it as screen-oriented and licensed under the SIL Open Font License. The Manrope project identifies Michael Sharanda as designer and uses the SIL Open Font License. Adobe’s official Source Code Pro repository describes a monospaced family for UI and coding environments under OFL-1.1. Those licences explain the upstream font families; Supabase’s loaded WOFF2 URLs prove public-route use, not a grant to redistribute Supabase’s served files. If a target cannot load the family legitimately, mark the specimen unavailable rather than rendering a system substitute as Inter, Manrope, or Source Code Pro.

Layout

The packet is three desktop captures at 1440×900. It records 4px, 8px, 12px, 16px, 24px, and 32px as recurring public-route spacing values, with 8px most frequent. These observations support compact controls and more generous public-section rhythm, but they do not establish mobile breakpoints, authenticated-dashboard density, or a published Supabase grid.

Responsive Behavior

No responsive viewport was supplied. The three captures are all 1440×900, so no breakpoint, mobile navigation, stacking, or touch-target behavior is documented here.

Elevation & Depth

The captured public menu has two small neutral shadows (rgba(0, 0, 0, 0.1) 0px 4px 6px -1px and rgba(0, 0, 0, 0.1) 0px 2px 4px -2px); the compact action, selected pill tab, and representative input report no shadow. That is evidence for these public overlay/control instances only, not a reusable elevation scale.

Motion & Easing

The public control class names expose duration-200 and transition utilities, but the packet does not contain a measured easing curve or a motion scale. Preserve that boundary; do not promote an inferred motion-token system.

---

Verified: 2026-07-13 Tier 1 sources: https://supabase.com/, https://supabase.com/features, https://supabase.com/pricing, https://supabase.com/brand-assets, https://supabase.com/docs/guides/getting-started/architecture, https://supabase.com/contribute/about Tier 2 sources: https://getdesign.md/supabase (one editorial Supabase record; no token provenance used); Refero query attempted at https://styles.refero.design/?q=Supabase and was unavailable to built-in open, with no indexed Supabase record returned by built-in search. Resolution note: Replaced the legacy dark/Circular snapshot with selector-backed 2026-07-13 public-route evidence. Marketing, features, pricing, unauthenticated overlays, documentation assets, and authenticated product UI remain separate domains. Conflicts unresolved: none

Components

All values below retain their public-route selector and state boundary. The collector reports four interaction kinds and 12 interactions: menu, dialog, tab, and form-error captures. Those records prove the listed expanded/open/selected/error contexts only; unobserved variants are omitted.

Public actions

Green form submit

• Background: #72e3ad
• Text: oklch(0.1 0 34)
• Border: 1px solid oklab(0.685565 -0.144466 0.057858 / 0.75)
• Radius: 6px
• Padding: 4px 10px
• Font: 12px / 450 / Inter
• Dialog-open: captured context at home::[data-omd-capture="75"]; no general dialog-button contract is inferred
• Use: Public home form submit

Dark compact action

• Background: oklch(0.1 0 34)
• Text: oklch(0.995 0 34)
• Border: 1px solid oklch(0.394455 0 34)
• Radius: 6px
• Padding: 4px 10px
• Font: 12px / 450 / Inter
• Hover: computed snapshot recorded for pricing::[data-omd-capture="17"]
• Pressed: computed snapshot recorded for pricing::[data-omd-capture="17"]
• Focus: computed snapshot recorded for pricing::[data-omd-capture="17"]
• Use: Compact public pricing action

Selected public tab

Selected pill tab

• Background: oklch(0.995 0 34)
• Text: oklch(0.1 0 34)
• Border: 1px solid oklch(0.1 0 34)
• Radius: 3.35544e+07px
• Padding: 8px 32px
• Font: 14px / 450 / Inter
• Selected: home::[data-omd-capture="19"] is aria-selected="true"
• Use: Public home tab; this does not establish a general tab system

Public form field

Email input

• Background: oklab(0.1 0 0 / 0.026)
• Text: oklch(0.1 0 34)
• Border: 1px solid oklch(0.1 0 34 / 0.146418)
• Radius: 6px
• Padding: 8px
• Font: 14px / 450 / Inter
• Error: an error capture is recorded at home::[data-omd-interaction-capture="form-error-5-0"]; no changed error color is asserted
• Use: Public home email input at home::[data-omd-capture="74"]

Public overlays

Navigation menu — expanded

• Background: oklch(1 0 34)
• Text: oklch(0.394455 0 34)
• Border: 1px solid oklch(0.1 0 34 / 0.144163)
• Radius: 6px
• Padding: 4px
• Font: 16px / 450 / Inter
• Expanded: menu-open capture at home::[data-omd-interaction-capture="menu-0-0"]
• Use: Public navigation menu, not authenticated application navigation

Public dialog — open

• Background: oklch(0.995 0 34)
• Text: oklch(0.1 0 34)
• Border: 1px solid oklch(0.1 0 34 / 0.0812725)
• Radius: 8px
• Dialog-open: captured at home::[data-omd-interaction-capture="dialog-1-0"]
• Use: Public dialog; no padding or shadow value is asserted because it was not measured in the representative claim

States

Only the public form-error state is captured: home::[data-omd-interaction-capture="form-error-5-0"] preserves the input’s raw background, border, radius, padding, and Inter text values. The packet also captures public menu-open, dialog-open, and selected-tab contexts. It does not supply empty, loading, success, disabled, or product-console state treatments, so none is invented.

Do's and Don'ts

Do

• Use #72e3ad only where a selector-backed public action relationship is appropriate.
• Preserve Inter, Manrope, and Source Code Pro as separate loaded families when the target has legitimate access to them.
• Keep raw Oklch/Oklab values as raw computed evidence instead of inventing a hex token scale.
• Retain selector and state provenance when reusing an observed public component pattern.

Don't

• Do not recreate the obsolete dark/Circular system from the prior snapshot.
• Do not convert ui-sans-serif, Inter Fallback, or declared-only KaTeX faces into Supabase UI typography.
• Do not move marketing/pricing/menu/dialog values into an authenticated dashboard, native application, or documentation chrome without evidence from that surface.
• Do not invent unobserved component variants, semantic status colors, responsive rules, or interaction behavior.

Voice & Tone

Supabase’s official architecture and contribution pages use direct, technically specific language: Postgres stays explicit, open source is an operating choice, and the community invitation is practical—contribute code, documentation, or help. Prefer short capability-led CTAs such as “Start your project” and “Build in a weekend, scale to millions,” both visible on official public pages.

Agent Prompt Guide

Use this reference as a public Supabase-web direction, not as a dashboard clone: prefer the observed mint action, light raw-computed surfaces, Inter UI rhythm, and Manrope display hierarchy. Keep the public-route selector boundary visible in implementation notes. Do not add a dark terminal canvas, Circular, generic product-console widgets, or fonts that the target cannot load.

Governance

Known Gaps

• Contrast, public-input. Text #030303 on #03030307 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.