supabase.com website design: fonts, colors and UI patterns

Overview

Supabase presents a developer-centric visual system built almost entirely in dark mode. The interface rests on deep near-black foundations that create a focused, technical atmosphere. A vivid emerald green serves as the singular accent color, appearing in the logo mark, primary actions, and interactive highlights. The typography relies on Circular Std in Book and Medium weights, delivering a geometric, modernist voice that feels precise and engineered. Layouts are spacious and centered, with generous horizontal margins that frame content against the dark canvas. Component surfaces layer subtly through slight lightness increases rather than heavy borders or shadows, creating depth through restrained tonal shifts. The overall impression is of a tool built for serious work—clean, confident, and visually quiet except where action is required.

Colors

The palette is fundamentally monochromatic with a single vibrant accent. Dark surfaces dominate every context, from marketing pages to authentication flows to product dashboards.

The color logic follows a strict hierarchy: backgrounds progress from pure black through #0F0F0F to #171717 as elevation increases. Text inverts this, with #FAFAFA reserved for primary content and stepping down through #B4B4B4 and #898989 for diminishing emphasis. The green accent (#00C573) is used sparingly and always signals action or brand identity. No gradients appear in the interface proper; a single linear gradient from #2E2E2E to transparent is used decoratively in some hero sections. Borders are consistently 1px and serve as optical separators rather than structural elements.

Typography

The system uses Circular Std as its primary typeface, designed by Laurenz Brunner and available from Lineto. Two weights appear in the interface: Book (400) for body and display text, and Medium (500) for button labels and emphasized UI elements. The authentication page at supabase.com/dashboard/sign-in uses Custom Font, a separate family that appears in Regular weight at sizes including 16px, 30px, 14px, 12px, and 160px. Verify licensing for these families before production use.

Display sizes use tight line heights (1.0 to 1.2) while body text maintains comfortable readability at 1.5. Letter spacing remains normal throughout; no condensed or expanded tracking is applied. The 72px hero size appears in large statistical displays and animated marquee text. The 36px section heading anchors major content divisions. Body text at 16px with 24px line height forms the readable core. Smaller sizes at 14px and 12px handle secondary information without becoming illegible. The sign-in page uses a 30px heading with 36px line height and -0.75px letter spacing for its "Welcome back" display, and a 160px decorative quotation mark in the testimonial panel.

Layout

The layout system centers content within generous margins. Primary sections use padding: 96px 80px with horizontal margins of 260px on either side, creating a contained reading area that floats within the dark canvas. This produces an elegant, editorial feel with substantial breathing room around all content.

Sections stack vertically with consistent rhythm. The base spacing unit is 0.125rem (2px), and all measurements derive from this. Common section padding values include 96px vertical for major divisions, 32px for internal card padding, and 24px for compact groupings. Content blocks within sections typically separate with 16px to 32px gaps.

Grid structures appear in multiple configurations. The footer uses a five-column link grid with equal distribution. Testimonial sections employ a staggered masonry-like arrangement with cards at varying heights. Feature sections center content with tab selectors above and large media frames below.

Navigation sits at the top with 0px 80px padding and the same 260px side margins, maintaining visual alignment with page content. The nav contains logo, primary links, and action buttons in a horizontal flex arrangement.

Visual language

The visual character is restrained and technical. Surfaces communicate hierarchy through subtle lightness shifts rather than shadows or borders. A card at #171717 on a #0F0F0F background creates sufficient distinction without visual noise. Borders are hairline-thin at 1px and colored #2E2E2E or #363636, serving as gentle separators rather than heavy outlines.

Imagery and media receive rounded frames at 12px or 16px radius, often with subtle inner borders that suggest depth. Dashboard screenshots appear with dark chrome frames, mimicking application windows. The aesthetic treats product imagery as embedded interface rather than decorative photography.

Iconography is minimal and functional. Small glyphs accompany buttons and navigation items. The logo mark is a geometric lightning bolt in emerald green, instantly recognizable and consistently placed.

Motion and interactivity are implied through state changes: buttons shift from #171717 to lighter surfaces on hover, primary green buttons brighten to #3ECF8E. Focus states use the same green as a ring or border highlight. No heavy drop shadows appear; elevation is suggested through color alone.

Components

Primary button

• Anatomy: Text label with optional leading icon, contained in a rounded rectangle
• Surface: Background {colors.action-primary}, text {colors.action-primary-text}
• Typography: {typography.body-small} at Medium (500) weight
• Shape: border-radius: {rounded.button}, padding 8px 16px
• Spacing: Internal padding creates compact but tappable targets
• Variants: Secondary variant uses {colors.surface-elevated} background with {colors.ink} text and {colors.border-subtle} border; ghost variant uses transparent background with border

Secondary button / Ghost button

• Anatomy: Text label with optional icon
• Surface: Background {colors.surface-elevated} or transparent, text {colors.ink}, border {colors.border-subtle} or {colors.border-default}
• Typography: {typography.body-small} or {typography.body}
• Shape: border-radius: {rounded.button}, border: 1px solid
• Spacing: Padding 8px 16px standard, 4px 10px for compact nav variants

Card

• Anatomy: Container with optional header, body text, and footer metadata
• Surface: Background {colors.surface-elevated}, no border or subtle {colors.border-subtle} border
• Typography: Body text at {typography.body-small}, headings at {typography.section-display} or {typography.body}
• Shape: border-radius: {rounded.card}, padding 24px or 32px
• Spacing: Cards in grids use 16px to 24px gaps

Input field

• Anatomy: Label, text input, optional icon or button
• Surface: Background {colors.surface-elevated}, border {colors.border-default}, text {colors.ink}, placeholder {colors.ink-muted}
• Typography: {typography.body} for input text, {typography.body-small} for labels
• Shape: border-radius: {rounded.input}, padding 8px 12px
• States: Focus state uses {colors.action-primary} border or ring

Tab selector

• Anatomy: Horizontal row of text buttons, one active
• Surface: Active tab uses {colors.surface-elevated} background or {colors.action-primary} background, inactive tabs transparent
• Typography: {typography.body-small}
• Shape: border-radius: {rounded.pill} for pill-style tabs, or {rounded.button} for rectangular
• Composition: Centered group with 8px gaps between tabs

Testimonial card

• Anatomy: Avatar image, username, platform icon, quote text
• Surface: Background {colors.surface-elevated}, subtle border {colors.border-subtle}
• Typography: Username at {typography.body-small} weight 500, quote at {typography.body-small} in {colors.ink-secondary}
• Shape: border-radius: {rounded.card}
• Composition: Avatar and name in a row, quote below with comfortable line height

Navigation bar

• Anatomy: Logo, primary links, action buttons
• Surface: Background transparent or {colors.surface}, text {colors.ink}
• Typography: Links at {typography.navigation}, logo text at {typography.body} weight 500
• Shape: Full width, height approximately 64px, padding 0px 80px
• Composition: Logo left, links center or left-aligned, actions right

Footer

• Anatomy: Logo and social icons, multi-column link grid, legal line
• Surface: Background {colors.surface}, top border {colors.border-subtle}
• Typography: Column headings at {typography.body-small} weight 500 in {colors.ink}, links at {typography.body-small} in {colors.ink-secondary}
• Shape: Full width, padding 96px 80px top, 32px 80px bottom
• Composition: Five equal columns for link groups, social icons in a row below logo

Responsive behavior

The system appears optimized for desktop viewing with substantial margins and multi-column grids. At narrower viewports, the 260px side margins should reduce progressively, likely collapsing to 24px or 32px on mobile. The five-column footer grid should stack to two columns then single column. Tab selectors may scroll horizontally or collapse to a dropdown. Hero display text at 72px should scale down to 36px or 24px to maintain readability. Card grids should transition from multi-column masonry to single-column stacks with full-width cards.

Practical implementation guidance

### Preserve - The strict dark-mode palette with near-black foundations and single green accent - Generous whitespace and centered content with substantial side margins - Circular Std in Book weight for almost all text, reserving Medium for buttons and emphasis - Subtle surface elevation through color shifts rather than shadows - Consistent 6px radius for buttons and inputs, 12px for cards, 9999px for pills - Hairline borders at 1px in #2E2E2E or #363636

### Avoid - Light mode backgrounds or inverted color schemes that break the dark technical aesthetic - Multiple accent colors competing with the emerald green - Heavy drop shadows or material-style elevation - Rounded corners larger than 16px on rectangular elements - Body text smaller than 14px for readable content - Generic system fonts in place of Circular Std

### Recommended build order 1. Establish the dark canvas (#000000) and surface hierarchy (#0F0F0F, #171717, #1F1F1F) 2. Implement Circular Std with Book and Medium weights at all specified sizes 3. Build the button system with primary green, secondary dark, and ghost variants 4. Create card and input components with consistent 6px and 12px radii 5. Lay out the navigation and footer with centered margins and grid structures 6. Add the tab selector and testimonial card patterns 7. Implement responsive margin reduction and grid collapsing

### Accessibility - Ensure green (#00C573) on dark backgrounds meets WCAG AA contrast for large text; verify small text contrast ratios - Provide visible focus indicators using the green accent as a ring or border - Maintain placeholder text at #898989 or darker to clearly indicate inactive state - Use prefers-reduced-motion for any marquee or animated text elements - Ensure interactive targets meet minimum 44px touch area even when visual padding is smaller

Scope note

This guide covers the marketing site and authentication interface as visible in the supplied images. Dashboard UI, mobile layouts, loading states, error handling, and interactive animations are not represented. Pricing page structures from legacy captures are excluded. The Custom Font family appears only on the sign-in page and lacks designer or vendor attribution in the available records. Measurements are exact values from the retained interface records.

Related design patterns

• Technology and software
• Developer API
• Accent color
• Primary text color
• Secondary text color
• Moderate density
• API platform
• Software SaaS

More website design guides

Browse website design guides by pattern and website.