# Supabase — Design System
> The open-source Postgres development platform.
- **Canonical:** https://uiuxskills.com/library/supabase
- **Source:** https://supabase.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:41.291Z

---

---
version: alpha
name: Supabase
description: The open-source Postgres development platform.
tone: >-
  Technical, professional, and developer-centric. The tone is direct, efficient, and supportive of
  rapid development workflows.
color-scheme: light
colors:
  primary: "#72E3AD"
  secondary: "#50C896"
  surface: "#FCFCFC"
  surface-dim: "#F6F6F6"
  on-surface: "#171717"
  on-primary: "#171717"
  outline: "#C7C7C7"
  error: "#D91E18"
  neutral-light: "#D4D4D4"
  surface-bright: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Circular
    fontSize: 72px
    fontWeight: 700
  headline-md:
    fontFamily: Circular
    fontSize: 24px
    fontWeight: 700
  body-md:
    fontFamily: Circular
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Circular
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Circular
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Circular
    fontSize: 12px
    fontWeight: 500
  headline-sm:
    fontFamily: Circular
    fontSize: 20px
    fontWeight: 600
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.neutral-light}"
  card:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
    borderColor: "{colors.neutral-light}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.neutral-light}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 4px rgba(0, 0, 0, 0.1)
  md: 0 4px 8px rgba(0, 0, 0, 0.2)
  lg: 0 8px 16px rgba(0, 0, 0, 0.3)
---

## Overview

Supabase provides a modern, developer-focused experience for building production-grade applications. The visual identity is clean, high-contrast, and functional, emphasizing clarity and technical precision through a minimalist aesthetic.

## Colors

The color palette is designed for high-contrast readability and functional clarity, relying on a signature green to guide user action.

*   Primary (#72E3AD): The signature brand green used for primary CTAs and key brand elements.
*   Secondary (#50C896): A slightly darker shade of the primary green used for hover states and borders.
*   Surface (#FCFCFC): The primary background color for the application and marketing pages.
*   Surface-dim (#F6F6F6): A subtle gray used for input fields and secondary containers.
*   On-surface (#171717): The primary text color for high-contrast readability.
*   On-primary (#171717): Text color used on top of the primary green background.
*   Outline (#C7C7C7): Border color for input fields and structural dividers.
*   Error (#D91E18): Semantic color for error states and validation feedback.
*   Neutral-light (#D4D4D4): Secondary border color for buttons and UI elements.
*   Surface-bright (#FFFFFF): Used for elevated cards and popovers.

## Typography

The typography system uses a single font family, Circular, to maintain a cohesive, professional, and readable interface across all screen sizes.

*   Display-lg: High-impact hero headlines.
*   Headline-md: Section headers and card titles.
*   Headline-sm: Sub-headers for feature blocks.
*   Body-md: Standard body text for readability.
*   Body-sm: Secondary text for captions and metadata.
*   Label-md: Button labels and navigation items.
*   Label-sm (inferred): Small labels and UI hints.

## Layout

The layout follows a centered container strategy with a max-width constraint, utilizing an 8px base unit to maintain consistent vertical rhythm. The page structure typically follows the order: nav, hero, social-proof, features, customers, and footer. The hero section is composed of a centered headline and subhead, paired with a primary CTA and a secondary demo request button. The design is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, providing a clear sense of depth for interactive elements.
*   elevation.sm: Card lift and separation from the background.
*   elevation.md: Dropdown and popover depth.
*   elevation.lg: Modal and drawer overlay depth.

## Shapes

The brand utilizes a consistent 6px-8px border-radius for UI components, creating a soft, modern look that is neither overly sharp nor fully pill-shaped. This is codified through the `rounded.md` token, which is the standard for cards and interactive containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `button-primary` for main actions, featuring the primary green background. Use `button-secondary` for alternative actions, which relies on a white background and neutral border.

### Card
Cards use `card` or `card-default` for grouping content. They should always feature `rounded.md` and be separated from the background using `elevation.sm`.

### Input Field
Input fields utilize `input-field` with a `surface-dim` background. On focus, the border should transition to `colors.primary` to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Use {colors.error} for non-destructive actions. |
| Apply {typography.headline-md} for all card titles. | Avoid using {typography.display-lg} for body content. |
| Use {rounded.md} for all card components. | Do not mix {rounded.full} with standard card components. |
| Maintain consistent {spacing.md} between grid items. | Do not use {spacing.xs} for primary section margins. |
| Use {colors.on-surface} for body text. | Never use {colors.primary} for text on white without contrast checks. |
| Apply {elevation.sm} to cards for separation. | Avoid using custom shadows outside the {elevation} scale. |
| Use {colors.secondary} for link hover states. | Use {colors.primary} for secondary button backgrounds. |
| Use {input-field} for form controls. | Use {colors.surface-bright} for background containers. |

## Content Style

The content style is imperative and action-oriented. CTA labels should use short, punchy verbs like "Start" or "Request" to drive user behavior.

Headings are benefit-driven and concise, designed to communicate value immediately. Avoid overly flowery language in favor of direct, technical, and professional phrasing.

The copy density is optimized for scannability. Use short paragraphs and frequent bullet points to break up technical information, ensuring the documentation and marketing copy remain accessible.

## Imagery & Icons

The imagery style is mixed, combining clean, flat-style vector illustrations with high-quality product screenshots. Icons follow a consistent language of thin-stroke weights and rounded terminals, aligning with the brand's minimalist aesthetic. Product imagery should be presented clearly, often using both light and dark mode variations to match the user's system preference.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Supabase, a minimal, developer-centric open-source platform. Match its direct, technical, and professional tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font weights.
2. Only use components listed under `components:`. Do not invent variants (e.g., no `button-ghost` or `card-flat` unless the spec defines them).
3. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) exactly as described under Elevation & Depth. Do not write custom box-shadow values.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) for all transitions on interactive states.

## Output contract

**Must:**
- Use token names for every color, font, spacing, radius, and shadow value.
- Render hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{rounded.md}` to cards and `{rounded.sm}` to input fields per the Shapes section.
- Write CTAs using short imperative verbs consistent with the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or shadows absent from the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a raw value) when a brand token exists.
- Use `{colors.error}` for non-destructive actions or `{colors.primary}` for secondary button backgrounds.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or restructure existing page copy, headings, nav items, or routes as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For unspecified breakpoints, follow the mobile-first approach in Layout with one breakpoint at 768px.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source exists, it takes precedence.
- For ambiguous backgrounds, default to `{colors.surface}`; for elevated containers, use `{colors.surface-bright}`.