Skip to main content
Back to Gallery

Supabase · Full Page

Supabase

Open-source Postgres platform with developer-warm confidence — pure dark ground, accent-only brand green, Circular + Source Code Pro. Technical depth behind a welcoming front door.

supabase.com/Added
Supabase Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Supabase is the landing page that proves a developer platform can be technical to the bone and still feel welcoming at the front door. We catalogued it because it resolves the tension every infra company struggles with — the page reads like documentation written by someone who actually wants you to succeed, with a single confident accent that signals 'this thing is alive' without ever shouting. If you are building for engineers who open the network tab before they open their wallet, keep this one in the next tab while you work.

Design decisions observed

  • A near-monochrome surface that lets one signal color do all the talking — the body is a quiet neutral-gray ladder, so the single brand accent reads as a status light, not decoration.
  • Documentation-grade restraint applied to marketing — the hierarchy is carried by type size and weight steps alone, with hairline borders doing the structural work that lesser pages hand to shadows.
  • A monospace voice woven through the sans body — code and labels switch register deliberately, signalling 'this is a developer's tool' before a single feature is named.
  • Logo walls and social proof presented as quiet evidence, not a billboard — partner marks sit at a uniform muted scale, letting the breadth speak without any one logo grabbing the spotlight.
  • Motion held to a single short, functional tempo — every hover and reveal resolves on the same curve, so the page feels responsive without ever feeling animated.
  • Generous breathing room around dense technical blocks — the page trusts whitespace to make a feature grid feel calm rather than crammed.

What to study

  • How a single accent earns its keep — Supabase spends almost the entire surface on neutral grays so the brand green lands like a live indicator. Steal the ratio, not the hue.
  • The sans-plus-mono dialogue — watch where the page switches to monospace and why. It's a register change that tells engineers 'you're home' faster than any headline copy.
  • Border-first structure on a near-black canvas — hairline 1px borders, not drop shadows, carve the layout. It's the cheapest, crispest way to make a dense page feel engineered.
  • Disciplined motion as a feel, not a feature — one short duration on one easing curve across the whole page. Learn how a constrained motion budget reads as 'fast' more reliably than any spring.

What to avoid

  • Don't borrow Supabase's information density for a consumer landing — this much text-forward, code-flavored content is a signal aimed at builders. Match the rhythm to who's actually reading.
  • Don't let the accent green creep past its lane — the moment a brand color stops being rare it stops being a signal. If you fill buttons, badges, and headings with it, you've thrown away the whole effect.
  • Don't graft on a second display typeface to 'warm it up' — the authority here comes from one sans plus one mono. A third family dilutes exactly the developer-native confidence you came to borrow.

Taste notes

The page feels like a well-kept terminal — calm, monospaced where it counts, with a single green prompt-cursor of a color that tells you the system is running. Nothing is trying to delight you; everything is trying to be legible, and that restraint is the seduction. You leave trusting it the way you trust a tool that boots fast and never lies to you, which is precisely the feeling an open-source infrastructure brand needs to manufacture on first contact.

Lineage & references

  • A flagbearer of the open-source developer-infrastructure renaissance — Supabase took the 'Postgres is enough' thesis and dressed it in a landing page that markets to builders who distrust marketing.
  • Sits in the Postgres-native cohort alongside Neon and PlanetScale, and in the broader Vercel/Railway/Render developer-platform neighborhood — pages that sell primitives, not outcomes, and trust the audience to connect the dots.
  • Part of the dark-first, terminal-literate generation of dev tools (Vercel, Railway, Resend) — brands that treat their marketing surface with the same engineering rigor they apply to the product, so the page and the dashboard feel cut from one cloth.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Near-monochrome developer surface with one homeopathic signal color. The body lives on a neutral-gray ladder (#171717 / #707070 / #525252 / #b2b2b2) over white #ffffff or pure-black #000000; Circular carries voice across a tight 400/500 weight pair while Source Code Pro handles code and tracked labels (letter-spacing 1.2px). The single brand green #3fcf8e behaves as a status light — accent only, never a fill. Elevation is delivered through hairline 1px borders (#dfdfdf / #c7c7c7), not drop shadows. Motion is a single functional tempo: 0.15s on cubic-bezier(0.4, 0, 0.2, 1). Legibility over decoration, evidence over spectacle.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (neutral-gray reading ladder on white or pure-black canvas + a single homeopathic green #3fcf8e accent used like a status light), typographic register (Circular-class sans at a 400/500 weight pair, with a Source Code Pro-class monospace for code and tracked uppercase labels at 1.2px letter-spacing), the 4px-based spacing scale, border-first elevation (hairline 1px borders, no drop shadows), the cubic-bezier(0.4, 0, 0.2, 1) motion curve at 0.15s, and a docs-grade information density across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default and call out any decision that deviates.

Overview

Layout
Grid
Content width
Bounded
Framing
Flat
Grid strength
Strong

Color philosophy

Near-monochrome canvas — white #ffffff (or pure-black #000000 for dark sections) carrying a neutral-gray reading ladder: #171717 primary text → #525252 → #707070 → #b2b2b2 secondary, with hairline borders at #dfdfdf and #c7c7c7. The single brand green #3fcf8e is the only chromatic note, appearing as accent — links, focus, live indicators — at well under 2% of the surface. A deeper green #00bb68 and a mint #a9f1ca exist only for rare semantic positive states.

Mode strategydual-paired
  • Primary text #171717 on white (or near-white on black) does the dominant reading work — measured at the highest text frequency in the capture (~1125 occurrences).
  • Secondary gray ladder #525252 / #707070 / #b2b2b2 for captions, metadata, and progressively de-emphasized labels.
  • Hairline borders #dfdfdf (dominant, ~1918 occurrences) and #c7c7c7 carve structure — borders, not shadows, are the primary delimiter.
  • Brand green #3fcf8e reserved for accent only — links, focus rings, live/active indicators — surface area under ~2% (a measured 14 occurrences, flagged brand-tier).
  • Semantic-only greens: #00bb68 for emphatic positive text, mint #a9f1ca for subtle positive backgrounds — never decorative, never a default fill.

Gradients (paste-ready)

linear-gradient(rgb(223, 223, 223) 0px, oklab(0.904028 0.0000411272 0.0000180602 / 0.5) 100%)
linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, rgb(255, 255, 255) 85%)
linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0px, rgb(223, 223, 223) 50%, rgba(0, 0, 0, 0) 100%)

Typography rules

  • Primary family: Circular (geometric sans). Monospace companion: Source Code Pro for code blocks, kbd, and tracked uppercase labels. Two families only — no third display face.
  • Weight pair: 400 (reading + most headings) / 500 (emphasized body, UI labels). The capture shows headings carried by size, not heavy weight — do not reach for 600/700.
  • Type scale (observed px): 12 / 14 / 16 / 18 / 24 / 36 / 72. Hero runs 72px with unitless 1.0 line-height (72px/72px); section headings 36px/45px and 24px/32px; body 16px/24px; UI 14px/20px; fine print 12px/16px.
  • Letter-spacing is normal at every sans size except the 24px body lead (-0.16px optical correction). Tracked monospace labels use Source Code Pro 12px with +1.2px letter-spacing — the signature 'developer label' register.
  • Line-height ladder: 1.0 on the 72px hero (tight display), ~1.25 on 36px headings (45px), ~1.33 on 24px (32px), 1.5 on 16px body (24px), ~1.43 on 14px UI (20px), ~1.33 on 12px (16px).
  • Switch to monospace deliberately — code, inline tokens, and small uppercase eyebrow labels only. The sans/mono register change is meaning-bearing, not stylistic noise.
  • No italic for emphasis — shift weight (400→500) or switch to mono. Paragraph measure 45-65 ch at 16px body.

Spacing rules

  • 4px base unit. Scale (observed px): 1 / 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 40 / 48. The dominant rhythm sits on 8 / 16 / 24; the 1px step is hairline-border alignment, not layout padding.
  • Container max-widths step through 672 → 1152 → 1400 → 1536 → 1600 px. The 1536px container is the workhorse (most frequent); 672px is the narrow reading rail for prose clusters.
  • Card padding: 16-24px on desktop, 12-16px on mobile — always from scale values, never a magic number.
  • Flex/grid gutters draw from 4 / 8 / 12 / 16 / 20 / 24 / 32 px; 8px is by far the most frequent gap, with 16px second.
  • Section vertical rhythm leans on the 32 / 40 / 48 px steps for block separation; tighten to 16-24px inside dense feature grids.

Design tokens

Palette, type, and space — all agent-readable.

11 colors · hex / rgb / hsl / oklch

Save PNG
  • neutral
    37%
    • HEX#DFDFDF
    • RGBrgb(223, 223, 223)
    • HSLhsl(0, 0%, 87%)
    • OKLCHoklch(90.37% 0.0000 89.76)
  • foreground
    22%
    • HEX#171717
    • RGBrgb(23, 23, 23)
    • HSLhsl(0, 0%, 9%)
    • OKLCHoklch(20.46% 0.0000 89.76)
  • foreground
    11%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • foreground
    9%
    • HEX#B2B2B2
    • RGBrgb(178, 178, 178)
    • HSLhsl(0, 0%, 70%)
    • OKLCHoklch(76.36% 0.0000 89.76)
  • foreground
    8%
    • HEX#707070
    • RGBrgb(112, 112, 112)
    • HSLhsl(0, 0%, 44%)
    • OKLCHoklch(54.52% 0.0000 89.76)
  • background
    6%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • foreground
    6%
    • HEX#525252
    • RGBrgb(82, 82, 82)
    • HSLhsl(0, 0%, 32%)
    • OKLCHoklch(43.86% 0.0000 89.76)
  • neutral
    1%
    • HEX#C7C7C7
    • RGBrgb(199, 199, 199)
    • HSLhsl(0, 0%, 78%)
    • OKLCHoklch(82.97% 0.0000 89.76)
  • accent
    0%
    • HEX#3FCF8E
    • RGBrgb(63, 207, 142)
    • HSLhsl(153, 60%, 53%)
    • OKLCHoklch(76.26% 0.1540 159.27)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 6 nodes captured; depth capped at 6 for readability.

  • body
  • └─ div
  • ├─ div
  • │ └─ Nav
  • ├─ Main
  • └─ Footer

Accessibility

WCAG contrast matrix.

88 combinations · 38 pass AA · 30 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#171717#FFFFFF17.93AAAAAA+105foreground on background
Aa
#FFFFFF#17171717.93AAAAAA-107background on foreground
Aa
#000000#A9F1CA16.12AAAAAA+89foreground on accent
Aa
#A9F1CA#00000016.12AAAAAA-89accent on foreground
Aa
#DFDFDF#00000015.76AAAAAA-87neutral on foreground
Aa
#000000#DFDFDF15.76AAAAAA+87foreground on neutral
Aa
#171717#A9F1CA13.76AAAAAA+87foreground on accent
Aa
#A9F1CA#17171713.76AAAAAA-88accent on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total30Lazy loaded18%svg78unknown2

Hero image

https://supabase.com/_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=1920&q=100
Format
UNKNOWN
Dimensions
780×860
Loading
auto
srcset
yes
srcset descriptor
/_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=16&q=100 16w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=32&q=100 32w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=48&q=100 48w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=64&q=100 64w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=96&q=100 96w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=128&q=100 128w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=256&q=100 256w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=384&q=100 384w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=640&q=100 640w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=750&q=100 750w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=828&q=100 828w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=1080&q=100 1080w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=1200&q=100 1200w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=1920&q=100 1920w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=2048&q=100 2048w, /_next/image?url=%2Fimages%2Findex%2Fproducts%2Fdatabase-light.png&w=3840&q=100 3840w
Page type
  • Full Page
Industry
  • developer-tools
  • saas
Theme
  • dark
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.