skills/creative/popular-web-designs/templates/supabase.md
Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
- Primary:
Inter| Mono:Source Code Pro- Font stack (CSS):
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):
font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">Use
write_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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 makes Supabase distinctive is its sophisticated HSL-based color token system. Rather than flat hex values, Supabase uses HSL with alpha channels for nearly every color (--colors-crimson4, --colors-purple5, --colors-slateA12), enabling a nuanced layering system where colors interact through transparency. This creates depth through translucency — borders at rgba(46, 46, 46), surfaces at rgba(41, 41, 41, 0.84), and accents at partial opacity all blend with the dark background to create a rich, dimensional palette from minimal color ingredients.
The green accent (#3ecf8e) appears selectively — in the Supabase logo, in link colors (#00c573), and in border highlights (rgba(62, 207, 142, 0.3)) — always as a signal of "this is Supabase" rather than as a decorative element. Pill-shaped buttons (9999px radius) for primary CTAs contrast with standard 6px radius for secondary elements, creating a clear visual hierarchy of importance.
Key Characteristics:
#0f0f0f, #171717) — never pure black#3ecf8e, #00c573) used sparingly as identity marker#171717 through #898989 to #fafafa#2e2e2e, #363636, #393939)#3ecf8e): Primary brand color, logo, accent borders#00c573): Interactive green for links and actionsrgba(62, 207, 142, 0.3)): Subtle green border accent#0f0f0f): Primary button background, deepest surface#171717): Page background, primary canvas#242424): Horizontal rule, section dividers#2e2e2e): Card borders, tab borders#363636): Button borders, dividers#393939): Secondary borders#434343): Tertiary borders, dark accents#4d4d4d): Heavy secondary text#898989): Muted text, link color#b4b4b4): Secondary link text#efefef): Light border, subtle surface#fafafa): Primary text, button text--colors-slate5 through --colors-slateA12 — neutral progression--colors-purple4, --colors-purple5, --colors-purpleA7 — accent spectrum--colors-violet10 (hsl(251, 63.2%, 63.2%)) — vibrant accent--colors-crimson4, --colors-crimsonA9 — warm accent / alert--colors-indigoA2 — subtle blue wash--colors-yellowA7 — attention/warning--colors-tomatoA4 — error accent--colors-orange6 — warm accentrgba(41, 41, 41, 0.84)): Translucent dark overlayhsla(210, 87.8%, 16.1%, 0.031)): Ultra-subtle blue washhsla(200, 90.3%, 93.4%, 0.109)): Light frost overlayrgba(0, 0, 0, 0.1) 0px 4px 12px — minimal, functional.Circular, with fallbacks: custom-font, Helvetica Neue, Helvetica, ArialSource Code Pro, with fallbacks: Office Code Pro, Menlo| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Circular | 72px (4.50rem) | 400 | 1.00 (tight) | normal | Maximum density, zero waste |
| Section Heading | Circular | 36px (2.25rem) | 400 | 1.25 (tight) | normal | Feature section titles |
| Card Title | Circular | 24px (1.50rem) | 400 | 1.33 | -0.16px | Slight negative tracking |
| Sub-heading | Circular | 18px (1.13rem) | 400 | 1.56 | normal | Secondary headings |
| Body | Circular | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
| Nav Link | Circular | 14px (0.88rem) | 500 | 1.00–1.43 | normal | Navigation items |
| Button | Circular | 14px (0.88rem) | 500 | 1.14 (tight) | normal | Button labels |
| Caption | Circular | 14px (0.88rem) | 400–500 | 1.43 | normal | Metadata, tags |
| Small | Circular | 12px (0.75rem) | 400 | 1.33 | normal | Fine print, footer links |
| Code Label | Source Code Pro | 12px (0.75rem) | 400 | 1.33 | 1.2px | text-transform: uppercase |
Primary Pill (Dark)
#0f0f0f#fafafa1px solid #fafafa (white border on dark)rgba(0, 0, 0, 0.1) 0px 4px 12pxSecondary Pill (Dark, Muted)
#0f0f0f#fafafa1px solid #2e2e2e (dark border)Ghost Button
#fafafa1px solid transparent#171717 or slightly lighter)1px solid #2e2e2e or #3636361px solid #2e2e2e#00c573 — Supabase-branded links#fafafa — standard links on dark#b4b4b4 — muted links#898989 — tertiary links, footer#171717)| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single column, stacked layout |
| Desktop | >600px | Multi-column grids, expanded layout |
Note: Supabase uses a notably minimal breakpoint system — primarily a single 600px breakpoint, suggesting a mobile-first approach with progressive enhancement.
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, border #2e2e2e | Default state, most surfaces |
| Subtle Border (Level 1) | Border #363636 or #393939 | Interactive elements, hover |
| Focus (Level 2) | rgba(0, 0, 0, 0.1) 0px 4px 12px | Focus states only |
| Green Accent (Level 3) | Border rgba(62, 207, 142, 0.3) | Brand-highlighted elements |
Shadow Philosophy: Supabase deliberately avoids shadows. In a dark-mode-native design, shadows are nearly invisible and serve no purpose. Instead, depth is communicated through a sophisticated border hierarchy — from #242424 (barely visible) through #2e2e2e (standard) to #393939 (prominent). The green accent border (rgba(62, 207, 142, 0.3)) at 30% opacity is the "elevated" state — the brand color itself becomes the depth signal.
#0f0f0f, #171717) — depth comes from the gray border hierarchy#3ecf8e, #00c573) sparingly — it's an identity marker, not a decoration#242424 → #2e2e2e → #363636)#171717 for primary surfaces — the darkness is structuralrgba border colors are the layering mechanism| Name | Width | Key Changes |
|---|---|---|
| Mobile | <600px | Single column, stacked features, condensed nav |
| Desktop | >600px | Multi-column grids, full nav, expanded sections |
#0f0f0f (button), #171717 (page)#fafafa (primary), #b4b4b4 (secondary), #898989 (muted)#3ecf8e (brand), #00c573 (links)#242424 (subtle), #2e2e2e (standard), #363636 (prominent)rgba(62, 207, 142, 0.3) (accent)