Back to Library
S

Supabase

Supabase

Visit Website

开源 Firebase 替代。深翡翠主题,代码优先,开发者友好的暗色界面。

翡翠主题暗色界面代码优先开发者向开源精神

Color Palette

primary
secondary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size16px
Line Height1.6
Weights400, 500, 600, 700

Heading Scale

h1Supabase Heading
h2Supabase Heading
h3Supabase Heading
h4Supabase Heading

DESIGN.md

# Supabase Design System

## Visual Theme & Atmosphere
Dark emerald energy. The signature green (#3ECF8E) pops against deep charcoal (#1C1C1C). Code-forward aesthetic with monospace fonts and terminal vibes. Open-source spirit with polished execution — developer tools that look as good as they work.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #3ECF8E | Emerald brand color |
| Background | #1C1C1C | Dark canvas |
| Surface | #232323 | Panels, cards |
| Text | #FFFFFF | Primary text |
| Muted | #909090 | Secondary text |
| Border | #2E2E2E | Subtle dividers |

## Typography Rules
- **Fonts**: Inter + JetBrains Mono
- **Base Size**: 16px
- **Line Height**: 1.6

## Component Stylings
- **Buttons**: Emerald bg, dark text or ghost style
- **Code**: Dark bg, syntax highlighting
- **Cards**: Surface bg, hover emerald border

## Agent Prompt Guide
Dark theme with emerald accents. Code blocks prominently. Developer-focused layouts.

Frequently Asked Questions

What is Supabase's design style?

开源 Firebase 替代。深翡翠主题,代码优先,开发者友好的暗色界面。

What is Supabase's primary color?

Supabase uses #3ECF8E as primary color, #1C1C1C for background, and #FFFFFF for text.

What fonts does Supabase use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 16px.

How to use Supabase design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Supabase's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems