design system
Tokens & components.
The complete handoff package — the colours, type, spacing, radii and components used across the marketing site, recreated as live React + Tailwind tokens.
01
Brand
lowkeymail
private mail, low-key by design
The mark is a stylised envelope — a flap built on the brand gradient. Wordmark is set in Geist Medium; “lowkey” is semi-bold, “mail” softened with --muted.
02
Color tokens
Brand · indigo
50#EEEAFF
100#D7CDFF
200 · accent#B8A4FF
300#9379FF
400#7158EE
500 · primary#5B4BCC
600#4A3DB0
700#3B2E6E
800#261E4A
900#18122F
secure#86EFAC
warn#F0C5A8
Surfaces — dark theme
--bg#0B0814
--bg-elev#110D1E
--surface#16121F
--surface-2#1C1730
--ink#F4F1FF
--muted#8A82A8
Surfaces — light theme
--bg#FAFAFD
--surface#FFFFFF
--surface-2#F3F1FA
--ink#16151A
--ink-2#2E2A44
--muted#6B6485
03
Type
Display
One inbox.
H1
A pool of domains.
H2
Built so we can't read your mail.
H3
End-to-end encryption
Body
Mail like mail. Aliases like email addresses. Nothing to learn.
Eyebrow
the hub
Geist (display + body) · Geist Mono (addresses, labels) · features ss01, cv11.
04
Spacing & radii
Spacing scale
--s-1 / 4
--s-2 / 8
--s-3 / 12
--s-4 / 16
--s-5 / 24
--s-6 / 32
--s-7 / 48
--s-8 / 64
--s-9 / 96
--s-10 / 128
Radii
xs · 6
sm · 10
md · 14
lg · 20
xl · 28
pill
05
Shadows
--shadow-smsubtle inset, list rows, chips
--shadow-mdcards, popovers
--shadow-lginbox panel, hero hub
06