Skip to content
Back to extractor

Overview

Supabase employs a dark-first design language oriented toward developers, combining neutral dark-gray surfaces with precise typographic hierarchy using Manrope for headings and Inter for body copy. The system favors restrained color use — subtle borders, muted secondary text, and a concentrated blue/green brand accent — to keep focus on content and code. Code surfaces use Source Code Pro in dark terminal-style containers, reinforcing the platform's developer identity.

Signature traits: dark-first color scheme, developer-centric monospace code blocks, Manrope display/heading pairing with Inter body, tight border radius scale, minimal shadow elevation, semantic semantic semantic semantic semantic emerald/brand accent system.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #161b22 | Page backgrounds, base layer | | Surface | --color-surface | #2a2929 | Card/panel/tab backgrounds | | Text Primary | --color-text-primary | #f0f6fc | Headings, body copy | | Text Secondary | --color-text-secondary | #8b949e | Captions, placeholders, muted labels | | Border | --color-border | #30363d | Dividers, outlines, panel edges | | Accent | --color-accent | #3794ff | CTAs, active states, links, highlights |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Manrope, Manrope Fallback, system-ui, sans-serif | 5.875rem | 500 | 1 | 0em | Hero headlines | | Heading | Manrope, Manrope Fallback, system-ui, sans-serif | 2.125rem | 600 | 1.25 | -0.025em | Section titles, h2–h4 | | Body | Inter, Inter Fallback, system-ui, sans-serif | 0.9375rem | 450 | 1.5 | 0em | Paragraph text, prose | | Caption | Inter, Inter Fallback, system-ui, sans-serif | 0.75rem | 400 | 1 | 0em | Labels, metadata, TOC links | | Mono | Source Code Pro, Source Code Pro Fallback, Menlo, monospace | 0.875rem | 400 | 1.71429 | 0 | Code blocks, terminals, data |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.25rem | Inline gaps, icon margins | | Spacing SM | 0.5rem | Component padding, tight gaps | | Spacing MD | 1rem | Component internal padding, list gaps | | Spacing LG | 1.5rem | Card padding, section sub-gaps | | Spacing XL | 3rem | Section separators, large margins | | Spacing 2XL | 6rem | Page-level section spacing | | Max Width | 80rem (container-7xl) | Primary content container | | Max Width Prose | 65ch | Prose/article content | | Max Width XL | 36rem (container-xl) | Narrow content panels |

Responsive strategy: Mobile-first with explicit breakpoints at 480px, 40rem (640px), 48rem (768px), 64rem (1024px), 80rem (1280px), and 96rem (1536px); section containers shift from 1.5rem to 3rem to 6rem horizontal padding across breakpoints.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | 0 1px 1px rgba(0,0,0,0.05) | Subtle component lift (drop-shadow-xs) | | md | 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3), 0 -6px 16px -6px rgba(0,0,0,0.025) | Code blocks, codegroups, previews | | lg | 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3) | Modals, overlays, simple frames |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Flush editor tabs, terminal containers | | sm | 0.25rem | Inline code badges, list markers, small chips | | md | 0.375rem | Prose code blocks, pre containers | | lg | 0.5rem | Cards, panels, iframes, expand dialogs | | xl | 0.75rem | Input fields, larger interactive surfaces | | full | 9999px | Pill buttons, circular icon buttons, radio inputs |

Components

Code blocks & terminals: .ch-codeblock, .ch-codegroup use border-radius 6px with a layered box-shadow for lift, border: 1px solid var(--border-default), and dark #1e1e1e terminal backgrounds. Code scroll areas use 14px/19px line metrics at weight 400.

Editor tabs: .ch-editor-tab renders with background-color: var(--ch-21) (dark surface), 12px font size at 1.4em line height, right-border dividers, and active state indicated by a distinct background shift — no underline or color-only active signal.

Prose: The .prose modifier applies a complete typographic rhythm: 1rem base, 1.75 line height, custom bullet/counter colors, emerald-style link underlines with text-underline-offset: 2px, and transition: all 0.18s on hover.

Buttons: Reset to appearance: button, background: transparent, border: none, inheriting color — styled entirely by context class. Focus visible uses outline-color: currentColor.

Scrollycoding / Spotlight: Sticky sticker panels at top: 10vh, max-height: 80vh, width: 420px default — designed for side-by-side scroll-driven code narrative layouts.

Animations: System includes marquee, marquee-vertical, fade-in, spinner, accordion-down/up, collapsible-down/up, slide-in, caret-blink, and bounce keyframe utilities. Most transitions use 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use Manrope for all headings and display text | Mix Inter or Source Code Pro into heading roles | | Apply #3794ff accent for interactive highlights and CTAs | Use raw red or arbitrary colors for active states | | Use border-radius: 0.5rem (lg) as the default card/panel radius | Apply full-radius (pill) to rectangular content cards | | Rely on the spacing scale (0.25rem increments) for all layout gaps | Use arbitrary pixel values outside the defined spacing tokens | | Use Source Code Pro in terminal/code surfaces at 14px/19px | Use Inter or Manrope in code blocks or terminal UIs | | Maintain dark surfaces (#161b22, #2a2929) as base and surface layers | Override to white or light backgrounds without a .light theme context | | Use font-weight: 600 for headings h2–h6 via Manrope | Use weights above 700 for body or caption text | | Use transition: all 0.18s for hover interactions on links | Use instant or excessively long (>300ms) transitions for micro-interactions |

Agent Prompt Guide

You are working within the Supabase design system. Key constraints:

  • —Colors: background #161b22, surface #2a2929, text-primary #f0f6fc, text-secondary #8b949e, border #30363d, accent #3794ff
  • —Typography: Manrope (weights 200–800) for all headings and display; Inter (weights 100–900) for body and UI text; Source Code Pro (weights 200–900) for all code and mono surfaces
  • —Font sizes: display 5.875rem, heading 2.125rem, body 0.9375rem, caption 0.75rem, mono 0.875rem
  • —Font weights: display 500, headings 600, body 450, caption/mono 400
  • —Spacing: use the scale — xs 0.25rem, sm 0.5rem, md 1rem, lg 1.5rem, xl 3rem, 2xl 6rem only
  • —Radius: sm 0.25rem, md 0.375rem, lg 0.5rem (default for cards/panels), xl 0.75rem, full 9999px for pills
  • —Shadows: use the three-layer code-block shadow for elevated surfaces; avoid heavy drop shadows on text elements
  • —Animations: prefer 0.15s ease-in-out for transitions; use defined keyframes (fade-in, slide-in, marquee) rather than custom animations
  • —Never use colors, fonts, or spacing values outside this system