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
#3ECF8EBrand, buttons, links
Background
#1C1C1CMain background
Surface
#2A2A2ACards, panels
Border
#3A3A3ADividers
Text Primary
#EDEDEDHeadings
Text Secondary
#8F8F8FBody 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
Small
4pxMedium
8pxLarge
12pxSupabase 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 — $19One-time payment · 20 extractions · No subscription
Similar Design Systems
Explore more design systems
Updated: 2025-01-15