---
name: supabase-design-reference
provider: DesignSkill (https://designskill.dev)
reference: supabase.com
source_url: https://supabase.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T08:55:17.435Z
mode: full-render
classification: reference_only
---

# Supabase — Design Reference (measured)

Measured design tokens extracted from `https://supabase.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 523 observation records.
- Primary action color observed as `#0a874f` (basis: inferred, confidence 0.52).
- Dominant font family: **Inter** (×1004; secondary Source Code Pro ×257).
- Type scale observed at 8 sizes from 12px to 46px.
- Corner radius values in use: 8px, 4px, 16px, 6px….

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#0a874f` | inferred | 0.52 | ×9 |
| `{color.background}` | `#ffffff` | cross-validated | 0.92 | ×148 |
| `{color.ink}` | `#000000` | cross-validated | 0.93 | ×199 |
| `{color.muted}` | `#a0a0a0` | inferred | 0.7 | ×51 |
| `{color.surface}` | `#a9f1ca` | inferred | 0.7 | ×2 |
| `{color.accent}` | `#6b35dc` | inferred | 0.65 | ×45 |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#000000` | 21.2% | background-color, border-color, color, --tw-shadow, --tw-gradient-from | ×199 (cross-validated, 0.93) |
| `#ffffff` | 15.8% | color, background-color, border-color, font-family, custom-property | ×148 (cross-validated, 0.92) |
| `#3ecf8e` | 10.1% | color, --tw-gradient-from, border-color, background-color, --tw-gradient-via | ×95 (cross-validated, 0.92) |
| `#ffffff` | 7.0% | color | ×66 (observed, 0.76) |
| `#15593b` | 6.4% | color | ×60 (cross-validated, 0.91) |
| `#525252` | 6.1% | color, --tw-gradient-via, --tw-gradient-from | ×57 (cross-validated, 0.91) |
| `#a0a0a0` | 5.4% | color | ×51 (cross-validated, 0.91) |
| `#bda4ff` | 4.9% | color, custom-property | ×46 (cross-validated, 0.91) |
| `#6b35dc` | 4.8% | color | ×45 (cross-validated, 0.91) |
| `#ffcda1` | 1.4% | color, custom-property | ×13 (cross-validated, 0.89) |
| `#72e3ad` | 1.1% | background-color | ×10 (observed, 0.73) |
| `#006239` | 1.1% | background-color | ×10 (observed, 0.73) |
| `#0070f3` | 1.0% | border-color, background-color | ×9 (cross-validated, 0.88) |
| `#b45309` | 1.0% | color | ×9 (cross-validated, 0.88) |
| `#0a874f` | 1.0% | color | ×9 (observed, 0.73) |
| `#f4fffa` | 0.8% | color, border-color, --tw-gradient-from | ×7 (inferred, 0.58) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Inter` | ×1004 |
| `Source Code Pro` | ×257 |
| `Manrope` | ×233 |
| `#ffffff` | ×12 |
| `Ubuntu` | ×4 |
| `#1e1e1e` | ×1 |

Use **Inter** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 46px | ×8 |
| `{type.h1}` | 34px | ×50 |
| `{type.h2}` | 22px | ×46 |
| `{type.h3}` | 16px | ×109 |
| `{type.body-lg}` | 15px | ×139 |
| `{type.body}` | 14px | ×761 |
| `{type.body-sm}` | 13px | ×255 |
| `{type.caption}` | 12px | ×107 |

The most frequently observed size is **14px** (×761) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `8px` | ×940 |
| `16px` | ×350 |
| `24px` | ×290 |
| `12px` | ×196 |
| `4px` | ×111 |
| `32px` | ×106 |
| `20px` | ×98 |
| `6px` | ×90 |
| `40px` | ×84 |
| `10px` | ×56 |
| `96px` | ×52 |
| `64px` | ×28 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `8px` | ×345 |
| `4px` | ×168 |
| `16px` | ×96 |
| `6px` | ×79 |
| `12px` | ×70 |
| `11px` | ×28 |
| `7px` | ×14 |
| `2px` | ×6 |

## Elevation

| Shadow | Observed |
|---|---|
| `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset` | ×20 |
| `#32325d` | ×2 |
| `var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)` | ×2 |
| `0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)` | ×1 |
| `inset 0 1px 0 0 var(--card)` | ×1 |
| `inset 0 0 0 1px rgba(255,255,255,0.12)"
style="opacity:0` | ×1 |

## Motion

| Duration | Observed |
|---|---|
| `0.4s` | ×236 |
| `0.15s` | ×35 |
| `0.2s` | ×3 |
| `0.3s` | ×2 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#72e3ad` · radius `6px` · padding `8px 16px` · font `14px/450` | ×2 |
| button.outline | border `1px solid rgba(0, 0, 0, 0)` · radius `6px` · padding `8px` · font `14px` | ×7 |
| form.input | border `1px solid oklch(0.1 0 34 / 0.146418)` · radius `6px` · padding `8px` · height `35` | ×1 |
| card | radius `16px` · border `1px solid oklch(0.1 0 34 / 0.0812725)` · padding `24px` | ×15 |
| badge | radius `999px` · font `12px/450` · padding `6px 10px` | ×2 |
| nav | height `65px` · position `relative` · backdrop `blur(4px)` | — |

### Hero Gradient (observed)

```css
background-image: linear-gradient(to left bottom, color(display-p3 0.980392 0.364706 0.098039) 0%, color(display-p3 0.980392 0.364706 0.098039 / 0.9) 100%);
```

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| hover | color | `oklch(0.1 0 34)` | `rgb(10, 135, 79)` |
| hover | outline-color | `oklch(0.1 0 34)` | `rgb(10, 135, 79)` |
| hover | color | `oklch(0.1 0 34)` | `rgb(10, 135, 79)` |
| focus | color | `oklch(0.1 0 34)` | `rgb(10, 135, 79)` |
| focus | box-shadow | `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` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.995 0 34) 0px 0px 0px 2px, oklch(0.76 0.15 159 / 0.55) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` |
| focus | outline-color | `oklch(0.1 0 34)` | `rgb(0, 95, 204)` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#000000` | `#ffffff` | 21 | pass | ink_on_background |
| `#ffffff` | `#0a874f` | 4.57 | pass | white_on_primary |
| `#a0a0a0` | `#ffffff` | 2.61 | fail | muted_on_background |

1 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#0a874f`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#000000`) on `{color.background}` (`#ffffff`).
- Set all text in `Inter` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (8px, 4px, 16px, 6px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.
- Treat `{color.primary}` with caution — confidence below 0.6.

## Provenance

- Source: https://supabase.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T08:55:17.435Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12 · missing: none
- Warning: primary 불일치: static=#3ecf8e vs render=#0a874f — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>