Build in a weekend
Scale to millions

Start your projectRequest a demo

The tokens, type and surfaces of supabase.com marketing: near-black charcoal canvas, a single emerald accent, Manrope headings over Inter body, and low-alpha hairline borders instead of shadows.

edge network
Component recipes

Monochrome charcoal, one emerald accent.

Postgres Database

Every project is a full Postgres database, structured with hairline low-alpha borders instead of shadows.

user@example.com
Row Level Security

Edge Functions

Write custom code without deploying or scaling servers. Green is reserved for code and command accents.

$ supabase functions deploy
Deployed to edge in 1.2s

Authentication

Add user sign-ups and logins, securing your data with Row Level Security. The emerald accent marks focus.

●●●●●●●●
Enable email provider
Embedded product surface: table editor (section 4: panels, radius 8px, no shadow)
public/profilesRLS enabledInsert row
id int8username textemail textplan textcreated_at timestamptz
1jane_devjane@example.compro2026-07-02
2omar_bomar@example.comfree2026-07-04
3rina_krina@example.comteam2026-07-09
Controls

38px controls, a top-lit green CTA.

Button variants and states (states rendered statically)
DefaultHoverDisabled Primary Start your projectbg #006239 · border rgba(63,205,142,.30) Start your project+ overlay wash rgba(255,255,255,.03) Start your projectrecipe at 50% opacity Secondary Request a demobg .03 · border rgba(240,240,240,.13) Request a demo+ overlay wash Request a demorecipe at 50% opacity Ghost / nav Documentationtransparent · h 34px Documentationfill = surface-overlay .03 Documentationrecipe at 50% opacity Dashboard pill Dashboardgreen-tinted nav pill Dashboard+ overlay wash Dashboardrecipe at 50% opacity
Inputs (section 4: hairline border, radius 6px, focus goes brand green)
Default · placeholder #989a99 Focus · border #3ecf8e select * from profiles;
Badges and chips (semantic borders from section 2)
neutral · border .13 success · hsl(147 100% 12%) info · hsl(223 100% 12%) warning · hsl(60 100% 12%) error · hsl(357 89% 16%)

The primary CTA is deep green #006239 with a lighter rgba(63,205,142,.30) border, giving a subtle top-lit bevel. Secondary buttons are a near-transparent rgba(255,255,255,.03) fill with a white-alpha hairline. Controls are 38px tall at radius 6px, ghost nav items 34px, cards at radius 8px. Hover adds one surface-overlay wash; disabled is not captured, so it is the same recipe at reduced opacity.

Typography

Manrope headings, Inter body.

Display (h1) · Manrope · 46/46 · 500 · −.5pxBuild in a weekend
Section (h2) · Manrope · 32–36 · 500 · −.5pxScale to millions
Subhead · Inter · 20 · 400 · #989a99The open-source Firebase alternative.
Body · Inter · 16/24 · 400 · #edefeeStructure comes from very-low-alpha white hairlines, never shadows.
UI / buttons · Inter · 14 · 450–500Start your project · Request a demo
Nav items · Inter · 14 · 500Product · Developers · Pricing · Docs
Code / terminal · mono · 12.5 · 400 · green accents (section 4)$ supabase functions deploy
Palette

Charcoal neutrals, emerald accent.

Text
text-primary#edefee
text-muted#989a99
white#ffffff
Surfaces and borders
canvas#131413
surface-100#181a19
surface-overlaywhite .03
border-defaultrgba(242,242,242,.07)
border-cardrgba(243,243,243,.09)
border-strongrgba(240,240,240,.13)
Accent and semantic
brand-500#3ecf8e
brand-fill#006239
brand-borderrgba(63,205,142,.30)
success-borderhsl(147 100% 12%)
info-borderhsl(223 100% 12%)
warning-borderhsl(60 100% 12%)
error-borderhsl(357 89% 16%)
Depth & motion

Flat surfaces, hairline structure.

Radius scale (section 6)
6px buttons, inputs, ghost
8px cards, panels, code
full avatars
Elevation recipes (section 6)
Hairline / default1px rgba(242,242,242,.07). Nav rule, footer rule, table rows. No shadow.
Hairline / card1px rgba(243,243,243,.09) on #181a19. Cards, panels, code at radius 8px.
Hairline / strong1px rgba(240,240,240,.13). Secondary button border, card hover border.
Top-lit bevelThe only elevation trick: lighter rgba(63,205,142,.30) border over the darker #006239 fill.

Motion (section 7): micro-transitions only, 0.15s cubic-bezier(0.4, 0, 0.2, 1) on color, background-color, border-color, outline-color, fill and stroke, plus opacity 0.15s and staggered opacity 0.4s at 0.22s delay for scroll reveals. No animation library, no parallax: product previews animate inside static bordered frames.