# Supabase — Design Reference

> Developer-clean white, one green that ships

**Theme:** light · **Measured from:** supabase.com (English, 1440 px)

Supabase looks like a well-organized dashboard turned into a homepage. The canvas is white, structure comes from 1px hairlines (`#e8e8e8`) rather than fills or shadows, and the product lineup sits in a bento grid of white cards with 16px corners. Headlines use **Manrope**, a geometric sans, at medium weight; body is **Inter** at a slightly-heavier-than-regular 450; code and CLI snippets are **Source Code Pro**. There is one action color, a deep green (`#0f7c4e`), and it also paints the second line of the hero: "Build in a weekend / *Scale to millions*". Headings and card copy are two-tone — a dark phrase and a gray phrase in the same block. Illustrations are thin gray line drawings with a single green highlight. Quiet, precise, technical.

> The capture rendered the light theme. measure.json mostly reported white text and transparent backgrounds from hidden dark-mode layers; the colors below follow what is visible in the screenshot, with greens and grays sampled from it where the measurement was null.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Supabase Green | `#0f7c4e` | Primary button fill; green second line of the hero |
| Brand Green | `#3fcf8e` | Logo bolt, bright accents, focus borders |
| Deep Green | `#15593b` | Green inline text (highlighted words, command keywords) |
| Ink | `#0a0a0a` | Headlines and emphasized text |
| Gray | `#525252` | Body copy, nav links |
| Muted | `#a0a0a0` | Gray half of two-tone headings, captions |
| Hairline | `#e8e8e8` | Card, button and nav borders |
| White | `#ffffff` | Canvas and cards |
| Code Purple | `#6b35dc` | Syntax highlight only |
| Code Amber | `#b45309` | Syntax highlight only |

Green is the only chromatic color in the UI. Customer-story cards carry their customers' brand colors (Lovable's pink-orange gradient, etc.) — those are not Supabase colors.

## Typography

All three families are free on Google Fonts: **Manrope** (headlines), **Inter** (body/UI), **Source Code Pro** (code).

- Headlines are Manrope **500** (hero) or **600** (section titles) — never bold-black.
- Inter body uses variable weight **450**; buttons and nav use **500**.
- The hero headline sits tight at line-height 1.0; section headings at 1.11.
- Monospace appears in real content (table cells, emails, `supabase functions deploy`), not as decoration.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display (Manrope) | 46px | 500 | 1 | 0 |
| Heading (Manrope) | 34px | 600 | 1.11 | 0 |
| Lead (Manrope) | 22px | 450 | 1.375 | 0 |
| Card title (Manrope) | 16px | 600 | 1.5 | 0 |
| Body large (Inter) | 16px | 450 | 1.5 | 0 |
| Body (Inter) | 15px | 450 | 1.5 | 0 |
| Button (Inter) | 14px | 500 | 20px | 0 |
| Mono (Source Code Pro) | 13px | 500 | 1.7 | 0 |
| Caption (Inter) | 12px | 450 | 16px | 0 |

**Two-tone text:** headings split into a Muted phrase and an Ink phrase ("Use Supabase with **React**", "Kickstart your next project / **with production ready templates**"). Card descriptions do the same at body size: the key phrase in Ink, the rest in Gray.

## Shape and spacing

- **Buttons and inputs:** 8px radius.
- **Cards:** 16px radius, 1px Hairline border, no shadow. (Some measured radii appear as 10.67px / 21.33px because part of the page is rendered inside a scaled container; the visible result is 8px and 16px.)
- **Tabs and chips:** full pill.
- **Base unit:** 8px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 128.
- **Content width:** 1280px container; content columns run about 1088px.
- **Section gap:** about 128px.

## Components

### Primary button
Supabase Green `#0f7c4e` fill, white text, 8px radius, 38px tall with about 16px side padding, Inter 500 at 14px. No shadow. Label: "Start your project". In the nav it shrinks to about 26px tall with 12px text.

### Secondary button
White fill, Ink text, 1px Hairline border, 8px radius, same size as the primary, placed 8px to its right. Labels: "Request a demo", "Sign in".

### Navigation
White bar, about 64px tall, 1px Hairline bottom rule. Logo (green bolt + "supabase" wordmark) on the left, then Inter 500 14px links in Ink with small chevrons (Product, Developers, Solutions, Pricing, Docs, Blog). Right side: GitHub icon with star count ("114.2K"), "Sign in" outline, "Start your project" green.

### Product bento card
White card, 16px radius, 1px Hairline border, 24px padding. A small line icon plus a Manrope 600 16px title ("Postgres Database", "Authentication"), a two-tone 15px description, and a gray line illustration or live UI fragment (email table cells in mono, a globe wireframe, a `$ supabase functions deploy` chip) that bleeds off the card edge. One large card spans two columns; the rest tile in a 4-column grid with 12px gaps.

### Pill tabs
Full-pill buttons, 38px tall, padding `8px 32px`, Inter 450 14px, 1px border; the active one has a stronger border. Labels: "Table Editor", "SQL Editor", "RLS Policies". They switch the screenshot below.

### Code panel
White panel with Hairline border and 8px radius, a row of framework icons as tabs on top, Source Code Pro 13px code with purple and amber syntax highlights, and a small "Read docs for React ↗" link at the bottom right.

### Logo rail
Customer logos in gray monochrome, two rows of six, between Hairline rules, under a 12px Muted label "Trusted by fast-growing companies worldwide".

## Do

- Keep the canvas white and draw structure with 1px hairlines.
- Use green only for the primary button and one highlighted phrase.
- Write headings and descriptions as two-tone (gray + ink).
- Put real product fragments (tables, code, CLI) inside cards.
- Use monospace for anything a developer would type.
- Keep illustrations as thin gray line art with a single green dot or stroke.

## Don't

- Don't add drop shadows to cards.
- Don't use the bright `#3fcf8e` as a button fill on white; contrast is too low.
- Don't use bold (700+) headlines.
- Don't fill sections with color bands; separate with whitespace and hairlines.
- Don't round cards beyond 16px or buttons beyond 8px (tabs are the only pills).
- Don't introduce a second accent color outside code samples.

## Layout

Hero split in two: left, the 46px two-line headline (Ink line, green line) with the green + outline button pair; right, a 16px Gray paragraph listing the products, top-aligned with the headline. Directly below, the full-width product bento grid, closing with a "Use one or all. *Best of breed products…*" two-tone line. Then logo rail, a dashboard section with pill tabs over a large screenshot, a framework code section (text left, code right), a templates grid, customer stories, and a community wall of tweet cards.

## Agent prompt guide

- Text: `#0a0a0a` · Body: `#525252` · Muted: `#a0a0a0`
- Canvas: `#ffffff` · Borders: `#e8e8e8`
- Action: `#0f7c4e` (white label) · Logo/accent: `#3fcf8e` · Green text: `#15593b`

Example prompts:

1. "Primary button: background #0f7c4e, white text, 8px radius, 38px tall, 16px side padding, Inter 500 14px, no shadow. Secondary: white, text #0a0a0a, 1px #e8e8e8 border, same size."
2. "Hero headline: Manrope 500 at 46px, line-height 1; first line #0a0a0a 'Build in a weekend', second line #0f7c4e 'Scale to millions'."
3. "Bento card: white, 16px radius, 1px #e8e8e8 border, 24px padding, no shadow; icon + Manrope 600 16px title; description at 15px where the key phrase is #0a0a0a and the rest #525252; a gray line illustration bleeding off the bottom edge."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-supabase-green: #0f7c4e;
  --color-brand-green: #3fcf8e;
  --color-deep-green: #15593b;
  --color-ink: #0a0a0a;
  --color-gray: #525252;
  --color-muted: #a0a0a0;
  --color-hairline: #e8e8e8;
  --color-white: #ffffff;
  --color-code-purple: #6b35dc;
  --color-code-amber: #b45309;

  /* Fonts */
  --font-display: 'Manrope', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Source Code Pro', 'Source Code Pro', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--font-weight: 500;
  --text-heading: 34px;
  --text-heading--line-height: 1.11;
  --text-heading--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.375;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--font-weight: 600;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--font-weight: 450;
  --text-body: 15px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 450;
  --text-button: 14px;
  --text-button--line-height: 20px;
  --text-button--font-weight: 500;
  --text-mono: 13px;
  --text-mono--line-height: 1.7;
  --text-mono--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--font-weight: 450;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 16px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Layout */
  --container-page: 1280px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-supabase-green: #0f7c4e;
  --color-brand-green: #3fcf8e;
  --color-deep-green: #15593b;
  --color-ink: #0a0a0a;
  --color-gray: #525252;
  --color-muted: #a0a0a0;
  --color-hairline: #e8e8e8;
  --color-white: #ffffff;
  --color-code-purple: #6b35dc;
  --color-code-amber: #b45309;

  /* Fonts */
  --font-display: 'Manrope', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Source Code Pro', 'Source Code Pro', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 46px;
  --text-display--line-height: 1;
  --text-display--font-weight: 500;
  --text-heading: 34px;
  --text-heading--line-height: 1.11;
  --text-heading--font-weight: 600;
  --text-lead: 22px;
  --text-lead--line-height: 1.375;
  --text-lead--font-weight: 450;
  --text-card-title: 16px;
  --text-card-title--line-height: 1.5;
  --text-card-title--font-weight: 600;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 1.5;
  --text-body-lg--font-weight: 450;
  --text-body: 15px;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 450;
  --text-button: 14px;
  --text-button--line-height: 20px;
  --text-button--font-weight: 500;
  --text-mono: 13px;
  --text-mono--line-height: 1.7;
  --text-mono--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--font-weight: 450;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 16px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Layout */
  --container-page: 1280px;
}
```

---

*Measured from https://supabase.com/ on 2026-10-28 by Faundr. Inspired by Supabase; not its official design system and not affiliated with Supabase.*