Supabase

Developer-focused Postgres platform with a distinctive mint-green brand accent against crisp black-on-white type.

Footer

What Coherent builds from this

generated · not Supabase's site

An original page Coherent generated from Supabase's tokens — its palette, type, and shape applied to fresh content. This is the output, not a screenshot of Supabase.

generated-with-coherent · supabase

A landing page generated by Coherent from Supabase's design tokens

Build on these tokens

Download the file and seed any AI tool — or install it into a real Next.js project so every generated page shares this palette, type, and shape.

Download supabase.mdthen, in your project:

$ npm i -g @getcoherent/cli
$ coherent import design supabase.md

Colour

#72e3ad

brand · a background

#000000

text · page text

Typography

Families: Inter · Inter Fallback · system-ui · Helvetica Neue

display46pxw500/46px

h134pxw600/37.7778px

h222pxw450/29.3333px

h316pxw450/24px

h415pxw600/22.5px

body14pxw500/16px

Spacing

8px16px32px

Radius

0px

2px

4px

6px

8px

11px

12px

16px

Elevation

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, 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

rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset

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

Gradients

linearlinear-gradient(oklch(0.1 0 34 / 0.0812725) 0px, oklab(0.1 0 0 / 0.0406362) 100%)

linearlinear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, oklch(1 0 34) 85%)

linear

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%)

linearlinear-gradient(to left bottom, color(display-p3 0.275 0.306 0.8) 0%, color(display-p3 0.118 0.176 0.769) 100%)

linearlinear-gradient(to left bottom, rgb(42, 42, 42) 0%, rgb(24, 24, 24) 100%)

linearlinear-gradient(to left bottom, color(display-p3 1 0.533 0) 0%, color(display-p3 0.7 0.373 0) 100%)

linearlinear-gradient(to left bottom, rgb(10, 10, 10) 0%, rgb(0, 0, 0) 100%)

Borders

1px solid oklch(0.1 0 34 / 0.0812725)

1px solid oklch(0.1 0 34)

1px solid oklab(0.685565 -0.144466 0.057858 / 0.75)

1px solid oklch(0.1 0 34 / 0.146418)

1px solid rgba(0, 0, 0, 0)

1px solid oklab(0.52065 0 0 / 0.7)

1px solid #3fcf8e

Motion

150mscubic-bezier(0.4, 0, 0.2, 1)all

200mscubic-bezier(0, 0, 0.2, 1)color

300mscubic-bezier(0.4, 0, 0.2, 1)all

150mscubic-bezier(0.4, 0, 0.2, 1)transform

150mscubic-bezier(0.4, 0, 0.2, 1)color

Glassmorphism

blur(4px)

Layout

Breakpoints

md · 600px

Container widths

80%

z-index ladder

102040

Extracted from live CSS by Coherent (light mode). Numeric fields reflect the site at capture time; roles and the summary are inferred. Tokens and prose only — a description, not a copy.

Save supabase.md to your device

Open it on your desktop to run the CLI.