Dark-first charcoal #131413 with one emerald #3ecf8e accent, Manrope headings over Inter, low-alpha white hairlines instead of shadows, and a deep-green bevelled CTA.
Browse Supabase in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: supabase.com (live DOM, computed styles), 2026-07-08 (desktop 1512px). Coverage: marketing home + nav + hero + feature cards. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from stylesheets only; mobile rendering not verified.
Dark-first developer aesthetic built on a near-black charcoal canvas with a single, iconic emerald-green accent. The chrome is almost entirely grayscale — near-white text on charcoal, with structure carried by ultra-low-alpha white hairline borders rather than shadows. Green appears sparingly: the logo mark, the primary CTA, one highlighted word in the hero headline, and inline code/terminal accents. A two-family type system (Manrope for headings, Inter for body/UI) keeps the surface engineered but slightly warmer than a pure-Inter dev tool. Everything is flat, dense, and terminal-adjacent. Feels: dark, technical, confident, open-source.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #131413 | Page background |
| surface-100 | #181a19 | Raised panels, cards, code blocks |
| text-primary | #edefee | Body text, headings |
| text-muted | #989a99 | Secondary/subhead text, captions |
| white | #ffffff | Rare pure-white highlights |
| border-default | rgba(242,242,242,.07) | Hairline borders (most-used color on page) |
| border-card | rgba(243,243,243,.09) | Card/panel dividers |
| border-strong | rgba(240,240,240,.13) | Secondary button border |
| surface-overlay | rgba(255,255,255,.03) | Secondary button fill, subtle hover |
| Token | Hex | Role / usage |
|---|---|---|
| brand-500 | #3ecf8e | Signature Supabase green: logo, links, highlighted headline word, code accents |
| brand-fill | #006239 | Primary CTA background (deep green) |
| brand-border | rgba(63,205,142,.30) | Primary CTA border (lighter green top-light) |
| Token | Value | Role |
|---|---|---|
| success-border | hsl(147 100% 12%) | Success state |
| info-border | hsl(223 100% 12%) | Info state |
| warning-border | hsl(60 100% 12%) | Warning state |
| error-border | hsl(357 89% 16%) | Error state |
Rule: chrome is grayscale on charcoal; emerald green is reserved for brand, CTAs, links, and code. Rule: structure comes from very-low-alpha white hairlines (~.07–.13 alpha), never shadows.
Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serifInter, "Inter Fallback", system-ui, sans-serif#edefee| Role | Size/Line | Weight | Family |
|---|---|---|---|
| Display (h1) | 46 / 46 | 500 | Manrope |
| Section (h2) | ~32–36 | 500 | Manrope |
| Subhead | ~20 | 400 | Inter, #989a99 |
| Body | 16 / 24 | 400 | Inter |
| UI / buttons | 14 | 450–500 | Inter |
| Nav items | 14 | 500 | Inter |
Patterns: Manrope headings at tight leading (46/46 — line-height equals size), weight capped at 500. Body/UI in Inter at 400–500. No bold 700 in chrome.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.