Supabase Storage
Engineering-first, minimal developer tooling aesthetic. Clean off-white canvas with precise borders, muted greys, and subtle mint green accents.
Visit siteColour
Background#fdfdfd
Text#030303
Accent#72e3ad
Surface#ffffff
Muted#696969
Typefaces
- Display
- Inter
- Body
- Inter
- Mono
- Source Code Pro
- Source
- Scale
- 11 · 12 · 13 · 14 · 15 · 16
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 6px · 8px
Capture
- Category
- tools
- Sections
- 9
- Captured
- 2026-08-30
- Rhythm
- light throughout with pure white cards on off-white canvas
Type rules
- display headlines use sentence case with key phrases styled in muted weights or secondary tones
- code and technical labels use monospace font at compact scale
Colour rules
- background is strictly light off-white with pure white cards
- mint green is reserved for primary action CTAs and active states
Voice rules
- lead with developer capabilities over marketing hype
- use standard SQL and API terminology throughout
Holds it together
- split headline emphasis across bold and muted grey lines
- enclose code snippets and feature breakdowns in subtle bordered white cards
- use mint green exclusively for primary actions and key status indicators
Contrast
text on background20.3:1 AAA
muted text on background5.4:1 AA
text on surface20.6:1 AAA
accent on background1.6:1 fail
background on accent1.6:1 fail
Type, measured
- Body
- 15px / 1.5
- Measure
- 76 characters
- Display
- 46px / 1
- Tracking
- 0em display
- Scale ratio
- 1.32
Voice
- Tone
- technical, concise, declarative
- Sentences
- short
- Person
- second
- Vocabulary
- developer
- Calls to action
- start, apply, learn
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 7 items
- Length
- 6.6 screens
Sections in page order
3 marked strong · 9- 00
hero
Crisp and airy developer product hero pairing bold statement typography with a horizontally split layout and subtle monospace accents.
- Mood
- clinical + quiet
- Layout
- 1 col · split · airy
- 01
feature grid
StrongClean, whisper-quiet dev-tool feature section with subtle diagrammatic icons housed in crisp rounded cards.
- Mood
- clinical + quiet
- Layout
- 3 col · grid · airy
- 02
testimonial
Quiet and minimal customer quote floating in vast pale grey space with subtle typography.
- Mood
- quiet
- Layout
- 12 col · centered · airy
- 03
feature grid
Clean and restrained light-mode feature grid presenting technical capabilities through uniform structured cards.
- Mood
- clinical + quiet
- Layout
- 24 col · grid · airy
- 04
feature
Minimal, developer-focused API showcase featuring interactive action tabs paired with a clean syntax-highlighted code editor preview.
- Mood
- clinical + quiet
- Layout
- 2 col · split · airy
- 05
feature
StrongMinimal, airy feature section presenting code-level auth configuration in a clean two-column developer interface.
- Mood
- clinical + quiet
- Layout
- 1 col · split · airy
- 06
showcase
Crisp, modular developer templates arranged in neat card grids with subtle wireframe UI illustrations.
- Mood
- clinical + quiet
- Layout
- 4 col · grid · balanced
- 07
cta
An airy, clinical call-to-action anchored by concise copy, twin buttons, and enterprise security badges.
- Mood
- clinical + quiet
- Layout
- 1 col · centered · airy
- 08
footer
StrongA clean, expansive developer footer organized into precise vertical link columns on a crisp light background.
- Mood
- clinical + quiet
- Layout
- 1 col · grid · balanced
