Supabase — Design System Inspiration
Open-source backend with a confident green: Custom Sans, dual themes, and crisp tokens.
Design System Inspiration of Supabase
1. Visual Theme & Atmosphere
2. Color Palette & Roles
Brand
Neutral Scale (Dark Mode)
Radix Color Tokens (HSL-based)
Surface & Overlay
Shadows
# Design System Inspiration of Supabase ## 1. Visual Theme & Atmosphere Supabase's website is a dark-mode-native developer platform that channels the aesthetic of a premium code editor — deep black backgrounds (`#0f0f0f`, `#171717`) with emerald green accents (`#3ecf8e`, `#00c573`) that reference the brand's open-source, PostgreSQL-green identity. The design system feels like it was born in a terminal window and evolved into a sophisticated marketing surface without losing its developer soul. The typography is built on "Circular" — a geometric sans-serif with rounded terminals that softens the technical edge. At 72px with a 1.00 line-height, the hero text is compressed to its absolute minimum vertical space, creating dense, impactful statements that waste nothing. The monospace companion (Source Code Pro) appears sparingly for uppercase technical labels with 1.2px letter-spacing, creating the "developer console" markers that connect the marketing site to the product experience. What…
By @meliwat - License: MIT
Raw markdown