darkdeveloper-focusedopen-sourcemodern

Supabase Colors & Fonts

What colors and fonts does Supabase use? Open source Firebase alternative. Green accents, dark theme, developer-friendly.

Supabase Color Palette

Primary: #3ECF8E

Primary

#3ECF8E

Brand, buttons, links

Background

#1C1C1C

Main background

Surface

#2A2A2A

Cards, panels

Border

#3A3A3A

Dividers

Text Primary

#EDEDED

Headings

Text Secondary

#8F8F8F

Body text

What Font Does Supabase Use?

Supabase uses Inter and Inter

Headings

Inter

600google
Body Text

Inter

400google
Code

Source Code Pro

400google

Spacing & Radius

Spacing Scale

Base: 4px

48121624324864

Border Radius

Small4px
Medium8px
Large12px

Supabase Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3ECF8E',
        'background': '#1C1C1C',
        'surface': '#2A2A2A',
        'border': '#3A3A3A',
        'text-primary': '#EDEDED',
        'text-secondary': '#8F8F8F',
      },
      fontFamily: {
        'heading': ['Inter', 'sans-serif'],
        'body': ['Inter', 'sans-serif'],
        'mono': ['Source Code Pro', 'sans-serif'],
      },
    },
  },
}

Extract Supabase's Full Design

Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.

Get PromptUI — $19

One-time payment · 20 extractions · No subscription

Updated: 2025-01-15