designlang
Brand guidelines #72e3ad

June 25, 2026

supabase.com

A reading of the visual language at https://supabase.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
A 96/100
Tokens
16 colours · 7 sizes
Generated
designlang
Chapter 00

Essence

supabase.com is an Explorer brand — kinetic, cool, modern, adventurous and independent — anchored on #72e3ad and Circular, mixed motion.

Explorer archetype · 82% fit · vs Magician

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 29% confidence
Material language
flat
Imagery style
flat-illustration
Component library
shadcn/ui
Stack
next · Tailwind
Voice tone
neutral
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 11 neutrals · 16 total

Primary #72E3AD
RGB
114, 227, 173
HSL
151°, 67%, 67%
Secondary #00BB68
RGB
0, 187, 104
HSL
153°, 100%, 37%
Accent #A9F1CA
RGB
169, 241, 202
HSL
147°, 72%, 80%

Neutrals

#DFDFDF
#171717
#525252
#707070
#FFFFFF
#B2B2B2
#000000
#C7C7C7
#EDEDED
#D4D4D4
#292929

Full palette

#DFDFDF
#171717
#525252
#707070
#FFFFFF
#B2B2B2
#000000
#C7C7C7
#EDEDED
#D4D4D4
#3FCF8E
#72E3AD
#02772D
#292929
#A9F1CA
#00BB68

WCAG 100% · 3 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

2 families · 7 sizes · 2 weights

Display
Circular
Body
Source Code Pro
Weights
400, 500

Specimen

Build in a weekend Scale to millions
Postgres Database

Scale

StepSizeSample
t00 72px Build in a weekend Scale to
t01 36px Build in a weekend Scale to
t02 24px Build in a weekend Scale to
t03 18px Build in a weekend Scale to
t04 16px Build in a weekend Scale to
t05 14px Build in a weekend Scale to
t06 12px Build in a weekend Scale to
Chapter 05

Spacing

Base 2px · 11 steps captured

Rhythm

1px
40px
48px
64px
90px
112px
128px
157px
208px
246px
Chapter 06

Shape

3 radii · 2 elevation tiers

Border radii

6px
11px
16px

Elevation

xs
sm
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
roundedCaps
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 5 durations · 3 easings

Duration scale

75ms
150ms
200ms
300ms
750ms

Easings

Chapter 09

Components

shadcn/ui · 3 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

link

Slots
—
Variants
—
Sizes
md

card

Slots
heading, description, media, footer
Variants
—
Sizes
xs

button

Slots
label, icon, badge
Variants
outline
Sizes
md, lg
Chapter 10

Voice

neutral · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
3 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #72e3ad;
  --font-display: "Circular";
  --space-base: 2px;
  --radius-md: 11px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#72e3ad' },
      fontFamily: { display: ['Circular', 'serif'] },
      spacing: { base: '2px' },
      borderRadius: { md: '11px' },
    },
  },
};

Run npx designlang pack supabase.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.