Skip to content
supabase.com logo

Supabase

supabase.com

“Supabase projects a vibe of robust, developer-centric efficiency, blending the reliability of traditional SQL with the speed of modern JavaScript frameworks. It feels technical yet accessible, prioritizing clarity and performance over decorative flair, creating an environment where building production-grade apps feels straightforward and powerful.”

developer-first
robust
efficient
technical
modern
reliable
minimalist
action-oriented

Color Palette

Colors

Light Mode

#006239

primary

#1c1c1c

background

#898989

muted

#b4b4b4

border

#3ecf8e

accent

Dark Mode

#121212

background

#fafafa

text

#b4b4b4

secondaryText

#b4b4b4

muted

Typography

Fonts

Circular

body
400
500
self-hosted

custom-font, Helvetica Neue, Helvetica, Arial, sans-serif

Circular

heading
400
self-hosted

custom-font, Helvetica Neue, Helvetica, Arial, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h6

The quick brown fox

Components

Design System

Product
outline
6px
#fafafa
Sign in
secondary
6px
#242424#fafafa
Start your project
primary
6px
#006239#fafafa
element
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

element
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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

element
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.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

gradient

linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, rgb(23, 23, ...

gradient

radial-gradient(50% 100% at 50% 0px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%,...

gradient

linear-gradient(to right bottom in oklab, rgb(31, 31, 31) 0px, rgb(41, 41, 41) 1...

gradient

linear-gradient(in oklab, rgb(46, 46, 46) 0px, rgb(31, 31, 31) 100%)...

gradient

linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0px, rgb(46, 46, 46) 50%, rg...

Voice & Tone

Personality

Visual Energy

6/10

Design Era

contemporary-minimal

Emotional Tone

confident-technical

Target Audience

Software engineers, full-stack developers, and technical founders who value speed, scalability, and open-source transparency.

Comparable Brands

Vercel
Linear
Stripe
Tailwind CSS

Brand Rules

Dos & Don'ts

Do

  • Use Circular font for all text; apply weight 400 for body copy with a strict 24px line-height, and weight 400 for headings.
  • Format all headings in sentence-case only; do not use title case or all-caps for primary headlines.
  • Primary CTA buttons must use background #006239 with #fafafa text, 6px border-radius, and 4px 10px padding.
  • Secondary buttons should use background #242424, border #363636, and #fafafa text with 6px border-radius.
  • Outline buttons should have transparent background, #fafafa text, 6px border-radius, and 8px padding.
  • Maintain a flat design aesthetic by avoiding drop shadows on interactive elements; use rgba(0,0,0,0) for all button shadows.
  • Utilize subtle linear gradients (top-to-bottom fading to black) only for background overlays or section dividers, never on text or buttons.
  • Keep copy concise and imperative; use action verbs like 'Build', 'Start', and 'Scale' without emojis or exclamations.

Don't

  • Do not use serif fonts; the brand is strictly sans-serif (Circular).
  • Do not use emojis or exclamation marks in any marketing copy or UI text.
  • Do not apply drop shadows to buttons or cards; the design relies on flat contrast and borders.
  • Do not use title case for headings; always use sentence case.
  • Do not use bright or vibrant accent colors outside of the specified #3ecf8e green and #006239 dark green.
  • Do not use pill-shaped buttons (100% radius); maintain a consistent 6px border-radius across all interactive elements.
  • Do not use heavy or multi-layered shadows; the visual style is clean and flat.
  • Do not use light mode backgrounds (#1c1c1c) for dark mode interfaces; strictly use #121212 for dark mode backgrounds.

Design Assets

Visual Elements

mozilla
svg114×60
github
svg139×62
1password
svg143×60
pwc
svg113×60
pika
svg82×60
humata
svg122×60
udio
svg86×60
langchain
svg164×60
resend
svg100×60
loops
svg126×60

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/supabase.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free