---
site: "Supabase | The Postgres Development Platform."
url: "https://supabase.com"
generated_at: "2026-06-25T08:25:31.983Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: shadcn/ui
tokens:
  colors:
    primary: "#72e3ad"
    secondary: "#00bb68"
    accent: "#a9f1ca"
    background: "#fcfcfc"
    foreground: "#000000"
  typography:
    sans: Circular
    base: 16
  spacing:
    base: 2
    scale: "[1, 40, 48, 64, 90, 112, 128, 157, 208, 246]"
  radii:
    md: 6
    lg: 16
  shadows:
    sm: "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 4px 6px -4px"
---

# Overview

A **landing** page (heuristic confidence 0.29), dressed in **flat** material.

Component library appears to be **shadcn/ui** (0.65).

> "Build in a weekend
Scale to millions"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → nav → testimonials → footer`.

Source: <https://supabase.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#72e3ad` | 5 |
| secondary | `#00bb68` | 1 |
| accent | `#a9f1ca` | 1 |
| background | `#fcfcfc` | — |
| foreground | `#000000` | — |

**Neutrals:** `#dfdfdf` · `#171717` · `#525252` · `#707070` · `#ffffff`

**Total unique colors detected:** 16.

# Typography

**Families**
- `Circular` · 2865 uses
- `Source Code Pro` · 1 uses

**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `72px` | `400` | `72px` |
| h2 | `36px` | `400` | `45px` |
| h3 | `18px` | `400` | `28px` |
| h4 | `16px` | `400` | `24px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `40px` · `48px` · `64px` · `90px` · `112px` · `128px` · `157px` · `208px` · `246px`

**Layout primitives:** 7 grid containers · 591 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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`
- `sm` — `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 4px 6px -4px`

**Z-index layers:** 6

# Shapes

**Radius scale**
- `md` — `6px`
- `lg` — `11px`
- `lg` — `16px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| link | — | md | 54 |
| card | — | xs | 54 |
| button | outline | md, lg | 24 |

# Do's and Don'ts

**Do's**
- Use `view`, `nerdburn`, `patrickc` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 433 !important rules — prefer specificity over overrides.
- Don't 4482 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://supabase.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._