<!-- Generated: 2026-04-05 | Source: https://supabase.com | Pages: 3 | Framework: tailwind --> <!-- This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. -->

Design System: Supabase

1. Visual Theme & Atmosphere

Supabase's website is a dark-mode-native developer platform that channels the aesthetic of a premium code editor -- deep black backgrounds (#171717) with emerald green accents (#3ecf8e) that reference the brand's open-source, PostgreSQL-green identity. The design system feels like it was born in a terminal window and evolved into a marketing surface without losing its developer credibility.

The typography is built on Circular -- a geometric sans-serif with rounded terminals that softens the technical edge. At 72px with a 1.00 line-height, the hero text is compressed to its absolute minimum vertical space, creating dense statements that waste nothing. The monospace companion (Source Code Pro) appears for uppercase technical labels, creating the "developer console" markers that connect the marketing site to the product experience.

What makes Supabase distinctive is its border-defined depth system. In a dark interface where shadows are functionally invisible, Supabase communicates elevation through a precisely calibrated gray border hierarchy -- from barely-visible #242424 through standard #2e2e2e (frequency: 25,197 uses) to prominent #393939. The green accent (#3ecf8e) appears selectively -- in the logo, in link colors (#00c573), and in border highlights -- always as an identity signal rather than decoration. Pill-shaped buttons (9999px radius) for primary CTAs contrast with standard 6px radius for secondary elements, encoding importance into geometry.

Key Characteristics:

• Dark-mode-native: near-black backgrounds (#0f0f0f, #171717) -- never pure black, never gray
• Emerald green brand accent (#3ecf8e, #00c573) used sparingly as identity marker, not decoration
• Circular geometric sans-serif with rounded terminals -- the humanizing element in a technical interface
• Source Code Pro for uppercase labels with text-transform: uppercase -- the developer console voice
• Hero text at 72px with 1.00 line-height -- zero-leading as typographic signature
• Weight restraint: 400 for nearly everything, 500 only for navigation and buttons -- hierarchy through size, not weight
• Border-defined depth: #242424 (subtle) through #2e2e2e (standard) to #393939 (prominent) replaces shadows entirely
• Pill buttons (9999px) for primary CTAs, 6px radius for functional elements -- importance encoded in geometry
• Neutral gray scale from #171717 through #898989 to #fafafa with no warm or cool bias
• Tailwind CSS with Radix UI primitives -- utility-first with accessible component foundations

2. Color Palette & Roles

Brand

• Supabase Green (#3ecf8e): Primary brand color, logo accent, feature highlights. A mid-saturation emerald that reads as technical and organic simultaneously -- PostgreSQL's identity evolved into a brand signal.
• Green Link (#00c573): Interactive green for links and actions. Deeper and more saturated than the brand green, creating a clear distinction between decorative and interactive uses.
• Deep Green (#006239): Dark green used for background fills on green-accented elements. The deepest member of the green scale, appearing behind lighter green text.
• Light Green (#85e0ba): Lighter green variant for pricing tier highlights and secondary green text. Provides AAA contrast (8.64:1) against the standard border color #2e2e2e.

Neutral Scale (Dark Mode)

• Near Black (#0f0f0f): Deepest surface -- footer background, primary button fills. One step above pure black to retain screen texture.
• Dark Canvas (#171717): Page background, primary canvas, card fills. The dominant background color across all surfaces (441 background uses).
• Elevated Dark (#242424): Elevated surface backgrounds, horizontal rules, section dividers. The first visible step above the canvas.
• Standard Border (#2e2e2e): The workhorse border color (24,968 border uses). Card edges, tab outlines, section separators. The single most-used color token in the system.
• Mid Border (#363636): Button borders, prominent dividers, ghost card outlines. One step above standard for interactive element edges.
• Light Border (#393939): Secondary borders, input field outlines (672 border uses). The brightest border in the neutral system.
• Dark Gray (#4d4d4d): Heavy secondary text, muted body copy. Not quite readable enough for long-form but sufficient for labels and metadata.
• Mid Gray (#898989): Muted text, card body copy, tertiary links. The primary color for non-headline text (1,924 text uses).
• Light Gray (#b4b4b4): Secondary link text, sub-headings (1,174 text uses). Provides 8.65:1 contrast against #171717 -- comfortably AAA.
• Off White (#fafafa): Primary text, button labels, hero copy. The brightest text color, used 7,888 times as text. Not pure white -- the 2% warmth prevents harshness on dark backgrounds.

Functional

• Pure Black (#000000): Used exclusively for background fills (108 uses) and shadow color bases. Never appears as text.
• Warning Amber (#db8e00): Border color for warning states in pricing tiers. Appears only on the pricing page.
• Focus Blue (rgba(147, 197, 253, 0.5)): Focus ring shadow color. A soft blue at 50% opacity for keyboard navigation indicators.

3. Typography Rules

Font Family

• Primary: Circular, with fallbacks: custom-font, Helvetica Neue, Helvetica, Arial
• Monospace: Source Code Pro, with fallbacks: Office Code Pro, Menlo

Hierarchy

Principles

• Weight restraint: Nearly all text uses weight 400. Weight 500 appears only for navigation links, button labels, and table headers. Weight 700 appears exactly once (a monospace price callout). Hierarchy is built through size and color, not weight.
• 1.00 hero line-height: The hero text at 72px is compressed to absolute zero leading -- text that feels like a terminal command. This density is the defining typographic gesture.
• Negative tracking on cards: Card titles at 24px use -0.16px letter-spacing, a subtle tightening that differentiates them from body text without being obvious.
• Monospace as ritual: Source Code Pro in uppercase creates the "developer console" voice -- used for pricing tier names, category labels, and technical markers that bridge marketing and product.
• Geometric personality: Circular's rounded terminals create warmth in what could otherwise be a cold, technical interface. The font is the humanizing element.

4. Component Stylings

Buttons

Ghost Button

• Background: transparent
• Text: #fafafa, 14px weight 500
• Padding: 8px
• Radius: 6px
• Border: 1px solid transparent
• Transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
• Use: Navigation items ("Product", "Developers", "Solutions"), tertiary actions

Primary Button (Dark)

• Background: #242424
• Text: #fafafa, 12px weight 400
• Padding: 4px 10px
• Radius: 6px
• Border: 1px solid #363636
• Transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
• Use: Header CTAs ("Sign in", "Start your project")

Secondary Button (Light)

• Background: #fafafa
• Text: #121212, 12px weight 400
• Padding: 4px 10px
• Radius: 6px
• Border: 1px solid #b4b4b4
• Transition: 0.2s cubic-bezier(0, 0, 0.2, 1)
• Use: Inverted CTA ("Compare Plans")

Cards & Containers

Primary Card

• Background: #171717
• Text: #898989 (body), #fafafa (title)
• Padding: 24px 16px
• Radius: 11px
• Border: none (edge defined by background contrast)
• Use: Feature cards ("Postgres Database", "Authentication", "Edge Functions")

Ghost Card

• Background: transparent
• Text: #b4b4b4
• Padding: 16px
• Radius: 12px
• Border: 1px solid #363636
• Use: Pricing estimate panels, secondary content containers

Badges

• Background: #898989
• Text: #898989
• Radius: 9999px (full pill)
• Use: Status indicators, category markers

Inputs

• Background: rgba(250, 250, 250, 0.027) -- near-transparent with the faintest white wash
• Text: #fafafa, 12px weight 400
• Padding: 8px
• Radius: 6px
• Border: 1px solid #393939
• Use: Search fields, form inputs

Navigation

• Background: transparent on dark page canvas
• Text: #fafafa, 16px weight 400
• Layout: horizontal with product dropdown
• Supabase logo with green icon left-aligned
• CTA buttons right-aligned ("Sign in", "Start your project")
• Sticky header behavior with border-bottom separation

Footer

• Background: #0f0f0f -- the deepest surface in the system
• Text: #fafafa, 16px weight 400
• Multi-column layout with social links, product categories, and legal
• Full-width dark band that anchors the page

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 112, 128px
• Peak frequencies: 24px (938 uses), 8px (1,115 uses), 12px (572 uses), 16px (413 uses)
• Large section jumps: 80px (120 uses), 96px (38 uses), 128px (13 uses)

Grid & Container

• Full-width layout with constrained inner content
• Common column counts: 1, 2, 3, 4, 6, 7, 10, 12
• Feature grids: consistent card sizing within icon-based grids
• Logo grids for "Trusted by" sections
• Footer: multi-column on #0f0f0f background

Whitespace Philosophy

• Dramatic section spacing: 80px-128px between major sections creates cinematic pacing -- each section is its own scene in the dark void
• Dense content blocks: Within sections, spacing is tight (16px-24px), creating concentrated information clusters that contrast with the vast inter-section gaps
• Border-defined separation: Instead of whitespace and shadows, Supabase uses thin borders (#2e2e2e) on dark backgrounds -- separation through line, not gap

Border Radius Scale

• Micro (4px): Small internal elements
• Standard (6px): Buttons, inputs, functional elements
• Comfortable (8px): Cards, containers, table rows
• Mid (11px-12px): Feature cards, mid-size panels
• Large (16px): Major containers, feature sections
• Pill (9999px): Primary CTAs, badges, tab indicators

6. Depth & Elevation

Shadow Philosophy: Supabase deliberately avoids shadows as a depth mechanism. In a dark-mode-native system, shadows cast onto near-black backgrounds are functionally invisible -- adding them achieves nothing and adds rendering cost. Instead, depth is communicated through a border hierarchy where #242424 reads as recessed, #2e2e2e as neutral, and #393939 as raised. The only meaningful shadow stack (rgba(0, 0, 0, 0.1) 0px 10px 15px -3px) appears on overlay elements like dropdowns where the content must visually detach from the page. Focus states use a blue-tinted ring (rgba(147, 197, 253, 0.5)) that signals interactivity without implying elevation.

6.5. Motion & Transitions

Duration Scale

Timing Functions

• Primary: ease (21 uses) -- default for most transitions
• Custom cubic: cubic-bezier(0.4, 0, 0.2, 1) (18 uses) -- Material-style deceleration for button interactions
• Ease in-out: ease-in-out -- used sparingly for symmetrical animations

Keyframe Animations

• marquee-reverse (30s): Continuous horizontal scrolling for logo/partner strips
• sonner-spin (1.2s): Loading spinner with opacity pulsing
• bounce (1s): Transform-based bounce for attention indicators
• opacity-pulse: Skeleton loading state pulsing
• lineLoading (2.3s): Progress bar fill animation using margin-left and width

7. Do's and Don'ts

Do

• Use near-black backgrounds (#0f0f0f, #171717) for all primary surfaces -- depth comes from the border hierarchy, not background variation
• Apply Supabase green (#3ecf8e, #00c573) sparingly -- it marks identity and interactivity, never fills backgrounds or large surfaces
• Use Circular at weight 400 for nearly everything -- 500 only for nav links and button labels, never 700 for body or headings
• Set hero text to 1.00 line-height at 72px -- the zero-leading is the typographic signature, increasing it breaks the character
• Create depth through border color stepping (#242424 to #2e2e2e to #393939) -- three distinct elevation levels from border color alone
• Use pill shape (9999px) exclusively for primary CTAs and badges -- the geometry signals "this is actionable and important"
• Use Source Code Pro uppercase for technical labels -- it connects the marketing surface to the developer product experience
• Keep button transitions at 0.2s cubic-bezier(0, 0, 0.2, 1) -- the custom easing gives interactions a precise, engineered feel
• Use rgba(250, 250, 250, 0.027) for input backgrounds -- the near-invisible white wash distinguishes inputs from the void without adding visual noise
• Space major sections at 80px-128px apart -- the dramatic gaps create cinematic pacing between content clusters

Don't

• Don't add box-shadow for depth on dark surfaces -- shadows are invisible on #171717 backgrounds and break the border-defined depth system
• Don't use weight 700 on Circular text -- the system caps at 500, and only for interactive elements. Hierarchy is size and color, not weight
• Don't apply green (#3ecf8e) to backgrounds or large surface fills -- it exists for borders, links, icons, and small accents only
• Don't use pure black (#000000) as a page background -- #171717 is the canonical canvas. Pure black appears only as a shadow base
• Don't increase hero line-height above 1.00 -- the compressed density is intentional. Standard line-heights (1.25-1.50) would make the hero feel like every other landing page
• Don't use border radius values between 16px and 9999px -- the system jumps from large cards (16px) directly to full pill (9999px) with no intermediate stops
• Don't use warm accent colors (amber #db8e00, reds) as design elements -- they are semantic tokens reserved for warning and error states
• Don't forget the 4px base unit -- spacing should align to the scale (4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 128)
• Don't use #898989 for primary text -- it serves as muted body copy (contrast ratio 5.12:1 on #171717). Primary text is always #fafafa
• Don't apply ease-in-out as the default transition timing -- cubic-bezier(0.4, 0, 0.2, 1) and ease are the system standards

8. Responsive Behavior

Breakpoints

Touch Targets

• Ghost buttons maintain 8px padding minimum for 44px effective touch area
• Primary buttons at 4px 10px padding require container-level touch expansion on mobile
• Navigation links need increased spacing in mobile hamburger layout
• Footer links at 12px Circular need vertical stacking with 12px minimum gap on mobile

Collapsing Strategy

• Hero: 72px display -> scales proportionally down to ~36px on mobile
• Feature grids: multi-column (3-4) -> single column stacked
• Logo row: horizontal marquee -> wrapped grid
• Navigation: full horizontal bar -> hamburger menu
• Section spacing: 80-128px -> 48-64px
• Buttons: inline pairs -> full-width stacked
• Pricing cards: side-by-side comparison -> vertically stacked with tabs
• Footer columns: multi-column -> single column accordion

Image Behavior

• Framework logo grids scale to maintain recognizable icon sizes
• Product screenshots maintain aspect ratio with max-width constraints
• Background gradients and decorative elements scale with viewport
• No observed art direction changes -- images scale uniformly

9. Agent Prompt Guide

Quick Color Reference

• Page background: #171717
• Deepest surface: #0f0f0f
• Elevated surface: #242424
• Primary text: #fafafa
• Secondary text: #b4b4b4
• Muted text: #898989
• Dark muted: #4d4d4d
• Standard border: #2e2e2e
• Prominent border: #363636
• Input border: #393939
• Brand green: #3ecf8e
• Link green: #00c573

Example Component Prompts

• "Create a hero section on #171717 background. Headline at 72px Circular weight 400, line-height 1.00, #fafafa text. Sub-text at 16px Circular weight 400, line-height 1.50, #b4b4b4. Two pill CTA buttons side by side: primary (#242424 bg, #fafafa text, 12px weight 400, 6px radius, 1px solid #363636 border, 4px 10px padding) and secondary (same but #fafafa bg, #121212 text, 1px solid #b4b4b4 border)."
• "Design a feature card: #171717 background, 11px radius, 24px 16px padding. Title at 24px Circular weight 400, letter-spacing -0.16px, #fafafa. Body at 16px weight 400, line-height 1.50, #898989. No border, no shadow -- the card background creates contrast against the #0f0f0f or darker section behind it."
• "Build a navigation bar: transparent background over #171717 page. Supabase logo with green (#3ecf8e) icon left-aligned. Nav links at 14px Circular weight 500, #fafafa, 8px padding, 6px radius ghost buttons. Right side: 'Sign in' button (#242424 bg, 1px solid #363636, 6px radius, 4px 10px padding) and 'Start your project' button (same style). Sticky with border-bottom 1px solid #2e2e2e."
• "Create a pricing tier card: #171717 background, 11px radius, 24px 16px padding. Tier name in Source Code Pro 20px weight 400 uppercase, #fafafa. Price in Source Code Pro 48px weight 400, #fafafa. Body list in Circular 13px weight 400, #898989, 1.50 line-height. CTA button at bottom: #242424 bg, 6px radius, 1px solid #363636."
• "Design a technical label component: Source Code Pro 12px weight 400, uppercase, #898989 text. Use for category markers like 'Customer Stories' or product names. Place above section headings with 8px bottom margin."
• "Build a footer on #0f0f0f background. Multi-column layout with category headings at 14px Circular weight 500, #fafafa. Links at 12px Circular weight 400, #898989. Social icons row. Green Supabase logo. Full-width with inner content constrained. Bottom row: copyright at 12px, #898989."

Iteration Guide

1. Start with #171717 background -- everything is dark-mode-native, no light mode exists
2. Green (#3ecf8e, #00c573) is the brand identity marker -- use it for the logo, links, and small accent borders only, never for backgrounds
3. Depth comes from borders (#242424, #2e2e2e, #363636), not shadows -- three luminance steps encode three elevation levels
4. Weight 400 is the default for everything -- 500 only for nav links, buttons, and table headers. No bold (700) in the heading system
5. Hero line-height of 1.00 is the signature -- all other text uses standard ratios (1.33-1.56)
6. Pill (9999px) for badges and status indicators, 6px for buttons and inputs, 11px-16px for cards
7. Button transitions use 0.2s cubic-bezier(0, 0, 0.2, 1) -- not ease, not linear
8. Source Code Pro uppercase is the developer voice -- use it for tier names, category labels, and technical markers only