<!-- Generated by ExtractVibe — https://extractvibe.com/brand/supabase.com -->
<!-- Extracted: 2026-05-03T16:48:42.420Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Supabase"
description: "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."
colors:
  primary: "#006239"
  tertiary: "#3ecf8e"
  neutral: "#898989"
  surface: "#1c1c1c"
  border: "#b4b4b4"
  surface-dark: "#121212"
  on-surface-dark: "#fafafa"
typography:
  display-lg:
    fontFamily: "Circular"
    fontSize: "72px"
    fontWeight: "400"
    lineHeight: "72px"
  headline-lg:
    fontFamily: "Circular"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  headline-md:
    fontFamily: "Circular"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "43.2px"
  headline-sm:
    fontFamily: "Circular"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "28px"
  body-md:
    fontFamily: "Circular"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "6px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#fafafa"
    rounded: "6px"
    padding: "8px"
    fontSize: "14px"
    fontWeight: "500"
    borderWidth: "1px"
    boxShadow: "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"
  button-secondary:
    backgroundColor: "#242424"
    textColor: "#fafafa"
    rounded: "6px"
    padding: "4px 10px"
    fontSize: "12px"
    fontWeight: "400"
    borderColor: "#363636"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#006239"
    textColor: "#fafafa"
    rounded: "6px"
    padding: "4px 10px"
    fontSize: "12px"
    fontWeight: "400"
    borderWidth: "1px"
---

# Supabase — Design System

## Overview

Supabase design embodies the archetype of The Creator and The Sage, delivering a developer-first experience that is robust, efficient, and technically precise. Our aesthetic aligns with brands like Vercel, Linear, Stripe, and Tailwind CSS, prioritizing clarity and performance over decorative elements. The visual language is modern and reliable, reflecting a commitment to straightforward, powerful application development. This design system facilitates the creation of interfaces where functionality and speed are paramount, allowing developers to build production-grade applications with confidence.

The emotional register is one of competence and trust. We avoid frivolous ornamentation, excessive animations, or overly playful elements. The design is grounded, direct, and purposeful, ensuring that every visual component serves a clear function. This approach cultivates an environment where complex technical tasks feel accessible and manageable, reinforcing Supabase's position as a dependable and high-performance backend solution. Our interfaces are tools, not distractions, designed to empower developers to achieve their goals efficiently.

**Key characteristics:**

- Vibe — developer-first, robust, efficient, technical, modern, reliable
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Linear, Stripe, Tailwind CSS
- 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.
- Visual energy — 6/10 (moderate)

## Colors

The color palette is deliberately restrained, centered on the primary Supabase green (#006239) to signify growth, reliability, and precision. This bold, singular accent color highlights key actions and information without overwhelming the user. The dominant surface color (#1c1c1c) provides a deep, technical backdrop, ensuring high contrast and readability, reinforcing the brand's robust and developer-centric identity. This minimalist approach ensures that color serves a functional purpose, guiding attention and communicating status effectively.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#006239` | Dark Slate Gray |
| accent / tertiary | `#3ecf8e` | Emerald |
| background | `#1c1c1c` | Near-Black |
| border | `#b4b4b4` | Dark Silver |
| muted | `#898989` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#121212` | Near-Black |
| text | `#fafafa` | Off-White |
| secondary text | `#b4b4b4` | Dark Silver |
| muted | `#b4b4b4` | Dark Silver |

## Typography

Our typographic system utilizes Circular across all text elements. This choice reflects a commitment to modern clarity and legibility, aligning with the brand's technical yet accessible vibe. Hierarchy is established through precise variations in weight and size, ensuring that information is scannable and digestible. The clean, geometric forms of Circular communicate efficiency and precision, reinforcing the developer-first ethos. This type system prioritizes readability and functional aesthetics over expressive flair, supporting an environment where information transfer is paramount.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Circular | body | self-hosted | 400, 500 |
| Circular | heading | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Circular | 72px | 400 | 72px | — |
| Heading 2 | Circular | 16px | 400 | 24px | — |
| Heading 3 | Circular | 36px | 400 | 43.2px | — |
| Heading 4 | Circular | 18px | 400 | 28px | — |
| Body | Circular | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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 | `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 | `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` |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, rgb(23, 23, 23) 85%)`
- `radial-gradient(50% 100% at 50% 0px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, rgb(18, 18, 18) 100%)`
- `linear-gradient(to right bottom in oklab, rgb(31, 31, 31) 0px, rgb(41, 41, 41) 100%)`
- `linear-gradient(in oklab, rgb(46, 46, 46) 0px, rgb(31, 31, 31) 100%)`
- `linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0px, rgb(46, 46, 46) 50%, rgba(0, 0, 0, 0) 100%)`

## Shapes

Border-radius scale:

- `md` — 6px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#fafafa`
- Radius — `6px`
- Padding — `8px`
- Font size — `14px`
- Font weight — `500`
- 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`
- Sample copy — "Product"

**Secondary**

- Background — `#242424`
- Text — `#fafafa`
- Radius — `6px`
- Padding — `4px 10px`
- Font size — `12px`
- Font weight — `400`
- Border — `1px solid #363636`
- Sample copy — "Sign in"

**Primary**

- Background — `#006239`
- Text — `#fafafa`
- Radius — `6px`
- Padding — `4px 10px`
- Font size — `12px`
- Font weight — `400`
- Sample copy — "Start your project"

## Do's and 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.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented imperative verbs
- Rhetorical devices — juxtaposition, imperative verbs, repetition

### Sample copy

> Build in a weekendScale to millions

> Supabase is the Postgres development platform.

> Start building in seconds

> Trusted by the world’s most innovative companies.

> We protect your data.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/supabase.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-svg-24.svg) | 84% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-7.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-6.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-5.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-4.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-3.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-2.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-1.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-0.png) | 74% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-17.ico) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/supabase.com/logo-23.png) | 72% |

## Sources

- Official brand guidelines — https://supabase.com/brand-assets
- Live brand page — https://extractvibe.com/brand/supabase.com
- Raw JSON — https://extractvibe.com/api/brand/supabase.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/supabase.com/design.md
- Extracted — 2026-05-03T16:48:42.420Z
- Generator — ExtractVibe vv1
- Quality score — 100/100