Design that disappears on purpose.
The foundations, components, and voice that keep Cloaked calm, trustworthy, and unmistakably ours — across iOS, Android, web, and everything we ship after that.
Everything you need to build Cloaked.
Pick up tokens, components, and guidance. Ship something calm, fast, and unmistakably ours.
Color
Figma-native Brand, Blue, Purple, Green, Red, Marketing, Status, Surface, and Overlay variables mapped directly into CSS.
Typography
STK Bureau Sans for the workhorse, SF Pro on iOS, Roboto on Android, Simula for the editorial moments.
Spacing & radius
A 4px grid with a named scale, and radii that range from square data cells to full-pill CTAs.
Iconography
1.5px strokes, 24px grid, rounded ends. Icons whisper — they don't shout.
Buttons
Primary, Secondary, Tertiary, Text Mono — four types, four states, four sizes, one live playground.
Voice & tone
Calm, concrete, human. How we say things — and the dozen habits we've retired for good.
Six principles that do most of the work for us.
Calm beats loud
We deal in money, identity, and trust. Interfaces should slow the heart rate, not raise it.
Concrete beats clever
Say the real thing. “Your address was exposed on 3 sites” is better than “Oops, something happened.”
One primary action
One Brand/300 Cloaked button per screen. If two actions feel equal, one of them isn't ready to ship yet.
Data looks like data
Mono typefaces on anything machine-generated. Users should be able to see a number and trust it.
Soft corners, hard facts
Generous radii, small shadows, and a Marketing/200 surface that makes our black type feel legible not heavy.
Good defaults, few knobs
Components arrive opinionated. Theme switches and feature flags are earned, not assumed.
What's new
Latest changes to tokens, components, and documentation.
Button pressed state unified updated
All four button types now use a 3px inset ring in surface color for the pressed state, replacing the old opacity shift. Matches Figma source.
Purple variables imported new
Figma Purple/100 Subtle, Purple/200, and Purple/300 are available as canonical registry variables for personal data moments that are not alerts.
Spacing scale extended to 120 updated
New --space-14 token for marketing hero rhythm. Nothing in product changes.
Text Mono button type new
Fourth button type for minimum-emphasis inline links — footnotes, privacy links, not-now actions.