Supabase

Supabase sets large Manrope headlines on a light bone white canvas. Deep Lagoon (#15593b) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 10.6667px, with 3.35544e+07px and 5.33333px on smaller elements.

supabase.com ↗

Colors

Deep Lagoon

#15593b

Primary actions and links

Iris

#6b35dc

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#111111

Headlines and body copy

Silver Mist

#a0a0a0

Supporting colour

Ash

#525252

Supporting colour

Ember

#b45309

Supporting colour

Deep Void

#000000

Surface or divider

Deep Indigo

#0c0f24

Surface or divider

Type scale

DisplayBuild in a weekendScale to millionsManrope · 46px · 500

HeadingPostgres DatabaseManrope · 16px · 600

SubheadingStay productive and manage your app without leaving the dashboardManrope · 34px · 600

BodyPricingInter · 14px · 500

NavPricingInter · 14px · 500

Style reference measured from the public page at supabase.com on 2026-10-12 for design education. Supabase and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Supabase — Style Reference
> Supabase sets large Manrope headlines on a light bone white canvas. Deep Lagoon (#15593b) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 10.6667px, with 3.35544e+07px and 5.33333px on smaller elements.

**Theme:** light · **Source:** https://supabase.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Deep Lagoon | `#15593b` | `--color-accent` | Primary actions and links |
| Iris | `#6b35dc` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#111111` | `--color-ink` | Headlines and body copy |
| Silver Mist | `#a0a0a0` | `--color-surface-1` | Supporting colour |
| Ash | `#525252` | `--color-surface-2` | Supporting colour |
| Ember | `#b45309` | `--color-surface-3` | Supporting colour |
| Deep Void | `#000000` | `--color-surface-4` | Surface or divider |
| Deep Indigo | `#0c0f24` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Manrope | 46px | 500 | 1.00 | 0 |
| Heading | Manrope | 16px | 600 | 1.50 | 0 |
| Subheading | Manrope | 34px | 600 | 1.11 | 0 |
| Body | Inter | 14px | 500 | 1.38 | 0 |
| Nav | Inter | 14px | 500 | 1.00 | 0 |

Font families on the page: Inter, Manrope, Source Code Pro. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 10.6667px, 3.35544e+07px, 5.33333px, 21.3333px, 16px

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer