---
title: "Supabase design system"
variant: extended
source: https://supabase.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/supabase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Supabase · Design System

> A quiet canvas for powerful developer tools

**Theme:** light · **Industry:** devtools · **Source:** https://supabase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Supabase pairs a near-white canvas and crisp typography with restrained green accents to make its developer platform feel approachable and precise. Modular product cards, code samples, community stories, and a vivid customer-story gradient add variety without disrupting the page’s calm rhythm.

## North star

Keep the interface bright, restrained, and developer-oriented; reserve vivid color for purposeful accents and featured story artwork.

## Overview

The page is built around a nearly white canvas, with black headlines, muted gray supporting copy, and thin pale-gray borders defining cards and section boundaries. Supabase green is reserved for primary actions and selected emphasis, keeping the large areas of whitespace calm; a pink-to-orange gradient appears as a distinct customer-story visual rather than a general interface color. Manrope gives headlines a softly geometric, modern character, while Inter handles navigation, body copy, and controls. Source Code Pro separates code snippets from prose. The layout uses a centered, constrained content area and shifts between multi-column feature grids and spacious single-column moments. Product interface captures, line illustrations, logos, and testimonials provide evidence of the platform without heavy photographic styling. Cards stay mostly flat, relying on hairlines and rounded corners instead of conspicuous shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#fdfdfd` | `--color-cloud-canvas` | surface | Near-white page canvas and the continuous background across the homepage sections. |
| Slate Copy | `#696969` | `--color-slate-copy` | neutral | Muted body copy, footer links, and secondary labels. |
| Fine Divider | `#e8e8e8` | `--color-fine-divider` | neutral | Card outlines and delicate separators against the light canvas. |
| Supabase Green | `#0e7e4e` | `--color-supabase-green` | brand | Primary project-start buttons and selected green text accents. |
| Near Black | `#030303` | `--color-near-black` | neutral | Main headings, navigation labels, and high-contrast body text. |
| Story Pink | `#fd49a8` | `--color-story-pink` | accent | Leading edge of the vivid gradient used in customer-story artwork. |
| Bright Rose | `#fd2980` | `--color-bright-rose` | accent | Intermediate stop in the customer-story gradient, not a general UI color. |
| Hot Coral | `#fc1a58` | `--color-hot-coral` | accent | Mid-gradient transition within featured customer-story artwork. |
| Signal Red | `#fa1f41` | `--color-signal-red` | accent | Gradient transition used inside customer-story artwork. |
| Vermilion | `#fa2733` | `--color-vermilion` | accent | Warm gradient stop in the featured customer-story visual. |
| Flame Orange | `#fb3d26` | `--color-flame-orange` | accent | Gradient transition appearing within the customer-story card artwork. |
| Tangerine | `#fc541f` | `--color-tangerine` | accent | Orange gradient stop confined to the customer-story artwork. |
| Bright Ember | `#fe6a1e` | `--color-bright-ember` | accent | Warm gradient transition in the featured customer-story artwork. |
| Citrus Flame | `#fe771d` | `--color-citrus-flame` | accent | Orange gradient transition used in the customer-story visual. |
| Amber Orange | `#ff861b` | `--color-amber-orange` | accent | Late gradient stop in the customer-story artwork, not a page-wide accent. |
| Golden Ember | `#ff8f1b` | `--color-golden-ember` | accent | Warm endpoint of the customer-story gradient treatment. |
| Deep Forest | `#15593b` | `--color-deep-forest` | brand | Darker green text accent supporting the primary brand green. |

### Semantic aliases

`--color-canvas` → `#fdfdfd` (Cloud Canvas) · `--color-text` → `#030303` (Near Black) · `--color-text-muted` → `#696969` (Slate Copy) · `--color-text-subtle` → `#fdfdfd` (Cloud Canvas) · `--color-border` → `#e8e8e8` (Fine Divider) · `--color-accent` → `#0e7e4e` (Supabase Green) · `--color-accent-2` → `#15593b` (Deep Forest) · `--color-accent-3` → `#fd49a8` (Story Pink) · `--color-on-accent` → `#fafcfb`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#030303` | `#fdfdfd` | 20.28:1 | AAA |
| `#696969` | `#fdfdfd` | 5.4:1 | AA |
| `#0e7e4e` | `#fdfdfd` | 5.02:1 | AA |

### Gradients

- `linear-gradient(oklch(0.1 0 337.5 / 0.0812725) 0px, oklab(0.1 0 0 / 0.0406362) 100%)`
- `linear-gradient(rgb(253, 73, 168) 0%, rgb(253, 41, 128) 10%, rgb(252, 26, 88) 20%, rgb(250, 31, 65) 30%, rgb(250, 39, 51) 40%, rgb(251, 61, 38) 50%, rgb(252, 84, 31) 60%, rgb(254, 106, 30) 70%, rgb(254, 119, 29) 80%, rgb`
- `linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, oklch(1 0 337.5) 85%)`
- `linear-gradient(to left bottom, color(display-p3 0.275 0.306 0.8) 0%, color(display-p3 0.118 0.176 0.769) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 450, 500 | Navigation, body copy, captions, buttons, and links. | Roboto |
| Manrope | `--font-display` | webfont | 450, 600, 500 | Hero and section headings. | Plus Jakarta Sans |
| Source Code Pro | `--font-mono` | webfont | 500 | Code examples and developer snippets. | Roboto Mono |

- **Inter:** Measured weights 450 and 500; compact, unembellished interface text with sentence case.
- **Manrope:** Measured weights 450, 500, and 600; geometric headline forms, natural casing, and open line spacing.
- **Source Code Pro:** Measured weight 500; monospaced code styling and generous line height for readable samples.

### Type scale — Augmented Fourth (ratio ≈ 1.453, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 500 | 1 | 0 | — | Manrope | Hero headline, set large with Manrope. |
| h2 | 34px | 600 | 1.11 | 0 | — | Manrope | Major section headings, including feature and community sections. |
| h3 | 22px | 450 | 1.38 | 0 | — | Manrope | Product-card and smaller feature headings. |
| body | 15px | 450 | 1.5 | 0 | — | Inter | Feature descriptions, explanations, and testimonial copy. |
| caption | 14px | 450 | 1.43 | 0 | — | Inter | Compact supporting labels and secondary card details. |
| button | 14px | 450 | 1.43 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 12px | 500 | 1.33 | 0 | — | Inter | Header navigation and compact menu labels. |
| link | 12px | 450 | 1.33 | 0 | — | Inter | Small inline and footer links. |
| code | 13px | 500 | 1.7 | 0 | — | Source Code Pro | Syntax-like code examples and developer snippets. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 96 px.
- Section rhythm 64px · element gap 8px · card padding 24px · max content width 1088px.

A centered content frame uses the measured 1088px maximum width, with the header and major sections aligned to its edges. The hero pairs a left-aligned headline and actions with explanatory copy, followed by a dense, asymmetric product-feature grid. Lower sections alternate between broad product showcases, multi-column template and story cards, and quieter single-column content. Section spacing is generous, while card interiors remain comfortable rather than sparse. The footer returns to a dense multi-column link layout.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `21px` · media `50%` · badge `9999px` · nav `8px` · link `16px` · xs `5px` · sm `8px` · md `9px` · lg `11px` · xl `15px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1p`
- Shadow `inset-2` (button): `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-3` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1p`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat. Pale hairline borders define cards, controls, and section edges; rounded corners soften feature and testimonial panels. Buttons receive subtle inset treatment, but large floating shadows are not a defining motif. Maintain clear separation through whitespace and borders rather than stacked layers.

## Imagery

Product imagery is mostly interface capture, dashboard previews, code panels, and fine-line technical illustrations. Small brand and customer logos support the trust section; testimonials use compact avatars and text-led cards. A customer case-study panel provides the notable saturated pink-to-orange gradient. Keep visual assets clean, lightly framed, and integrated into the grid rather than using generic lifestyle photography.

## Components

### Primary action

Supabase-green button with light text, Inter label, and softly rounded corners; prominent at the hero and repeated in calls to action.

### Secondary action

Light button with near-black label and a subtle outline or edge, paired directly with the primary action.

### Product feature card

Near-white card with a pale border, rounded corners, compact heading and copy, plus a product UI capture or technical illustration where relevant.

### Code sample panel

Developer example framed as a quiet interface card, using Source Code Pro to distinguish code from surrounding copy.

### Customer story card

Featured case-study artwork may use the vivid measured pink-to-orange gradient; keep surrounding cards and page surfaces restrained.

### Trust logo strip

Compact monochrome customer marks arranged in a horizontal multi-column band on the same light canvas.

### Footer link columns

Dense multi-column navigation with muted small text, brand and social links, and a compact email subscription form.

### Measured component styles

- **Primary button** (“Start your project”): background #0e7e4e · text #fafcfb · radius 8px · padding 4px 10px · 500 12px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Request a demo”): background #ffffff · text #030303 · radius 9.29231px · padding 8px 16px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“@Rodrigo66799141 After a week of diving ”): transparent background · text #030303 · radius 0px · padding 0px · 450 16px Inter
- **Input**: transparent background · text #030303 · border 1px solid #d8d8d8 · radius 8px · padding 8px · 450 14px Inter
- **Card** (“@Rodrigo66799141 After a week of diving ”): background #ffffff · text #030303 · border 1px solid #e8e8e8 · radius 21.3333px · padding 24px · 450 16px Inter
- **Badge** (“$ supabase functions deploy”): transparent background · text #696969 · border 1px solid #dadada · radius 3.35544e+07px · padding 6px 10px · 450 12px Inter
- **Navigation item** (“Product”): transparent background · text #030303 · radius 0px · padding 0px · 500 14px Inter

## Do

- Keep the page canvas near-white and visually continuous.
- Use Near Black for key headings and interface labels.
- Reserve Supabase Green for primary actions and selective emphasis.
- Use pale borders to define cards without making them feel heavy.
- Pair Manrope headings with Inter interface and body text.
- Keep code visually distinct with a monospaced face.
- Confine the vivid gradient to featured story artwork.

## Don't

- Do not turn the whole page into a saturated gradient.
- Do not introduce colored section bands absent from the reference.
- Do not rely on heavy shadows to separate cards.
- Do not use generic lifestyle photography in place of product visuals.
- Do not make every button or link green.
- Do not crowd the generous gaps between major sections.

## Agent prompt

Build a developer-platform page using a bright, near-white Cloud Canvas (#fdfdfd) and a centered content frame. Use Near Black (#030303) for headings and navigation, Slate Copy (#696969) for secondary text, and Fine Divider (#e8e8e8) for quiet card edges. Set headlines in Manrope and interface copy in Inter; use Source Code Pro for code. Make the hero spacious, then organize product capabilities into an asymmetric grid of rounded, lightly bordered cards. Alternate product UI previews, code examples, trust marks, customer stories, and testimonials with generous section breathing room. Use Supabase Green (#0e7e4e) for the main CTA, paired with a restrained light secondary action. Keep shadows subtle and reserve the pink-to-orange gradient for a featured story visual, not the general interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Spacious two-column hero with headline and actions left, descriptive copy right. | Clear primary and secondary actions, Concise platform proposition | Large two-line heading, Green primary button, Light secondary button |
| 2 | feature-grid | Asymmetric multi-column capability grid with product visuals and compact feature cards. | Scan features by capability, Show product evidence alongside descriptions | Rounded outlined cards, Line illustrations, Embedded interface previews |
| 3 | logo-cloud | Horizontal customer logo band beneath a short trust statement. | Build trust through recognizable customers | Compact monochrome logos, Open light background |
| 4 | product-showcase | Single-column introduction with tab-like controls and a wide dashboard preview. | Switch between dashboard tools, Demonstrate the working product | Tool tabs, Large interface screenshot, Light framing |
| 5 | feature-split | Split layout pairing a React integration heading with a code example panel. | Show framework compatibility, Make implementation legible | Code card, Monospaced syntax, Framework icon row |
| 6 | product-grid | Multi-column grid of template cards beneath a section heading and browse-all link. | Browse ready-to-use starters, Scan project categories | Template preview images, Compact card descriptions, Text link |
| 7 | gallery | Featured wide case-study panel with narrow adjacent story tiles. | Explore customer stories, Highlight a featured example | Vivid gradient feature artwork, Narrow dark story cards |
| 8 | testimonials | Centered introduction above a broad, multi-column feed of testimonial cards. | Discover community sentiment, Join the community | Text-led quote cards, Small avatars, Subtle card separation |
| 9 | feature-split | Single-row split between explanatory copy and a green visual treatment. | Explain open-source values, Link to GitHub | Text-and-visual pairing, GitHub link, Green technical artwork |
| 10 | cta | Centered closing headline and paired calls to action. | Repeat project-start action, Offer a demo alternative | Centered heading, Green primary button, Light secondary button |
| 11 | footer | Security assurance row followed by brand area and dense multi-column link navigation. | Surface security credentials, Collect product updates, Provide broad site navigation | Certification list, Social icons, Email signup, Link columns |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/supabase-com