SupadateDesign System
v1.0 · Monochrome · 4pt Grid
FoundationsDesign TokensEvery design decision as a token. Single source of truth.
Design Tokens

Colour Tokens

Extracted directly from the Supadate reference image. Pure monochrome — no accent colour exists in the original design.

Backgrounds — concentric dark circles from the splash screen
canvas#0C0C0C
base#111111
raised#191919
overlay#222222
float#2A2A2A
White scale — all text & border values
w100Primary text
w80Subtitle
w60Body
w40Muted
w24Border strong
w16Border
w8Divider
Semantic colours — minimal additions for functional states
success
warning
error
info
Design Tokens

4pt Spacing Grid

Every value is a multiple of 4px. Always use the scale — no arbitrary values.

14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
Design Tokens

Typography Scale

Fluid clamp() values — scales smoothly from 320px to 1536px viewport.

5xlDating for smart ones
4xlDating for smart ones
3xlDating for smart ones
2xlDating for smart ones
xlDating for smart ones
lgDating for smart ones
mdDating for smart ones
baseDating for smart ones
smDating for smart ones
xsDating for smart ones
Design Tokens

Typefaces

Cormorant Garamond — display serif (the 'Supadate' wordmark)
Find your match.Dating for smart ones.Where minds meet.
DM Sans — body (subtitles + buttons)
lightSmart connections, real conversations.
regularSmart connections, real conversations.
mediumSmart connections, real conversations.
semiboldSmart connections, real conversations.
boldSmart connections, real conversations.
Design Tokens

Border Radius

xs
sm
md
lg
xl
2xl
3xl
pill
Design Tokens

Shadows

Dark-on-dark only. Black shadows with increasing opacity.

xs
sm
md
lg
xl
Design Tokens

Motion Tokens

fast120ms
normal220ms
slow380ms
crawl600ms
standardease in-out
decelerateease out
accelerateease in
springspring bounce
Design Tokens

Z-index Scale

base0Default flow
raised10Dropdowns
overlay100Floating UI
modal200Modals
toast300Toasts
tooltip400Tooltips