Button
Primary pill on near-black canvas, secondary muted pill, and 6px ghost. Brand green never fills — only borders.
html
Hand-tuned CSS
1 props · 6 states · 10 tags · 2 sources
Design system
web
v1.0.0
90/100Supabase Backend UI Kit
@dante · Backend & Data
Dark-mode-native developer platform design with emerald-green accent, near-black canvas, pill CTAs, tabular code blocks, and SQL/realtime/table-row primitives that channel a premium code editor.
HTML/CSS
React
shadcn/ui
Tailwind
#backend
#dark
#emerald
#open-source
#sql
Overview
Supabase
Principles
Supabase is a dark-mode-native developer platform that channels the aesthetic of a premium code editor. The system was born in a terminal window and never lost its developer soul — every surface, from the marketing hero to the project dashboard, looks like an extension of the SQL editor.
Canvas
Near-black, never pure black. #171717 is the page; #0f0f0f is the deepest surface (primary buttons, code blocks, table chrome). Pure #000 is forbidden because it kills the border hierarchy that does all the work of depth in this system.
Color discipline
Emerald is the identity marker, not a decoration. #3ecf8e belongs on the logo mark, on link borders, and on the realtime pulse. #00c573 is the link tone. Surfaces never get a green fill. Warm semantic colors (crimson #e5484d, yellow #f5d90a, violet #7c5cff) appear only as state tokens — error pills, attention badges, SQL keywords.
Typography
Circular at weight 400 for everything; weight 500 is reserved for navigation links and button labels. There is no bold. Hierarchy is built from size, never from weight. The hero locks to 72px / 1.00 line-height — that zero-leading density is the typographic signature of the system and must not be loosened. Card titles take a -0.16px letter-spacing for subtle precision. Source Code Pro at 12px uppercase with 1.2px letter-spacing is the developer-console voice and gates every section label, table header, status pill, and stat label.
Depth without shadow
The system deliberately avoids box-shadows. Depth comes from a stepped border palette: #242424 (barely visible), #2e2e2e (standard surface), #363636 (interactive), #393939 (prominent). Brand-touched elevation is rgba(62,207,142,0.3) — a translucent emerald border that signals "this is the Supabase moment." Focus is the lone exception: a quiet 0 4px 12px rgba(0,0,0,0.1).
Shape
Pill (9999px) is reserved for primary CTAs, badges, and tab indicators. 6px is for ghost buttons and inputs. 8px to 16px covers cards and feature panels. Nothing in between — the gap between 16px and 9999px is intentional.
Density
Dramatic 96–128px gaps between major sections, then 16–24px within each section. The page reads as a series of dense terminal blocks separated by void.
Preview
Open in new tab ↗Derived view rendered server-side from package tokens and components — no authored copy.
Colors (19)
supabaseGreen
#3ecf8egreenLink
#00c573greenBorder
rgba(62,207,142,0.3)nearBlack
#0f0f0fdark
#171717darkBorder
#242424borderDark
#2e2e2emidBorder
#363636borderLight
#393939charcoal
#434343darkGray
#4d4d4dmidGray
#898989lightGray
#b4b4b4nearWhite
#efefefoffWhite
#fafafaglassDark
rgba(41,41,41,0.84)violetAccent
#7c5cffcrimsonAlert
#e5484dyellowWarn
#f5d90aTypography (4)
display
Circular, Inter, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
body
Circular, Inter, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
mono
'Source Code Pro', 'JetBrains Mono', 'Office Code Pro', Menlo, ui-monospace, monospace- 48pxThe quick brown fox jumps over the lazy dog 1234
- 32pxThe quick brown fox jumps over the lazy dog 1234
- 24pxThe quick brown fox jumps over the lazy dog 1234
- 18pxThe quick brown fox jumps over the lazy dog 1234
- 14pxThe quick brown fox jumps over the lazy dog 1234
- 12pxThe quick brown fox jumps over the lazy dog 1234
scale
unparsed{
"hero": "72px/1.00",
"h2": "36px/1.25",
"h3": "24px/1.33",
"body": "16px/1.5",
"small": "14px/1.43",
"code": "12px/1.33"
}Components (15)
Input
Dark input on #0f0f0f with #2e2e2e border. Focus ring uses translucent emerald instead of a glow.
html
Hand-tuned CSS
1 props · 5 states · 7 tags · 2 sources
Card
Feature card on #171717 with thin gray border, no shadow. Depth comes from border contrast only.
html
Hand-tuned CSS
1 props · 2 states · 7 tags · 2 sources
Missing states: focus-visible, disabled
Badge
Pill badge for status chips and tags. Source Code Pro uppercase for tech labels.
html
Hand-tuned CSS
1 props · 1 states · 11 tags · 2 sources
Missing states: hover, focus-visible, disabled
Heading
Hero at 72/1.00, section at 36/1.25, card at 24/1.33 with -0.16px tracking. Weight stays at 400.
html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 sources
Missing states: hover, focus-visible, disabled
Link
Three link tones: emerald brand link, near-white primary, and muted gray.
html
Hand-tuned CSS
1 props · 4 states · 7 tags · 2 sources
Missing states: disabled
Hero
Dark-mode hero with green eyebrow, 72/1.00 headline, and pill CTA pair.
html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled
Nav
Sticky dark nav with green-mark wordmark, weight-500 14px links, and emerald CTA.
html
Hand-tuned CSS
0 props · 2 states · 7 tags · 2 sources
Missing states: focus-visible, disabled
Footer
Multi-column dark footer with mono section labels and muted-gray link stacks.
html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled
Stat
Tabular metric tile — large 36/1.0 figure, mono uppercase label, optional emerald delta.
html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled
SqlEditor
Mono-spaced SQL block with title bar, line gutter, and syntax-tinted keywords. Channels the Supabase studio.
html
Hand-tuned CSS
0 props · 1 states · 12 tags · 2 sources
Missing states: hover, focus-visible, disabled
TableRow
Dashboard table — primary surface for inspecting rows. Mono cells, subtle row borders, no zebra fill.
html
Hand-tuned CSS
0 props · 3 states · 10 tags · 2 sources
Missing states: focus-visible, disabled
AuthForm
Magic-link / OAuth auth card stacking provider buttons above an email field — the supabase.com /sign-in look.
html
Hand-tuned CSS
0 props · 2 states · 10 tags · 2 sources
Missing states: hover, focus-visible, disabled
RealtimeBadge
Live indicator with pulsing emerald dot — flags realtime/subscription surfaces.
html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 sources
Missing states: hover, focus-visible, disabled
KeyValuePair
Mono key-value list for env vars, project IDs, and connection metadata. Inline copy affordance.
html
Hand-tuned CSS
0 props · 2 states · 6 tags · 2 sources
Missing states: focus-visible, disabled
DESIGN.md
Supabase
Principles
Supabase is a dark-mode-native developer platform that channels the aesthetic of a premium code editor. The system was born in a terminal window and never lost its developer soul — every surface, from the marketing hero to the project dashboard, looks like an extension of the SQL editor.
Canvas
Near-black, never pure black. #171717 is the page; #0f0f0f is the deepest surface (primary buttons, code blocks, table chrome). Pure #000 is forbidden because it kills the border hierarchy that does all the work of depth in this system.
Color discipline
Emerald is the identity marker, not a decoration. #3ecf8e belongs on the logo mark, on link borders, and on the realtime pulse. #00c573 is the link tone. Surfaces never get a green fill. Warm semantic colors (crimson #e5484d, yellow #f5d90a, violet #7c5cff) appear only as state tokens — error pills, attention badges, SQL keywords.
Typography
Circular at weight 400 for everything; weight 500 is reserved for navigation links and button labels. There is no bold. Hierarchy is built from size, never from weight. The hero locks to 72px / 1.00 line-height — that zero-leading density is the typographic signature of the system and must not be loosened. Card titles take a -0.16px letter-spacing for subtle precision. Source Code Pro at 12px uppercase with 1.2px letter-spacing is the developer-console voice and gates every section label, table header, status pill, and stat label.
Depth without shadow
The system deliberately avoids box-shadows. Depth comes from a stepped border palette: #242424 (barely visible), #2e2e2e (standard surface), #363636 (interactive), #393939 (prominent). Brand-touched elevation is rgba(62,207,142,0.3) — a translucent emerald border that signals "this is the Supabase moment." Focus is the lone exception: a quiet 0 4px 12px rgba(0,0,0,0.1).
Shape
Pill (9999px) is reserved for primary CTAs, badges, and tab indicators. 6px is for ghost buttons and inputs. 8px to 16px covers cards and feature panels. Nothing in between — the gap between 16px and 9999px is intentional.
Density
Dramatic 96–128px gaps between major sections, then 16–24px within each section. The page reads as a series of dense terminal blocks separated by void.
Adapters (6)
All files (11)
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css
Versions
- v1.0.05/8/2026Download