Cards
Our standard container. Generous radii, soft borders, a small family of backgrounds. Cards carry content — they don't need their own personality.
Anatomy
Four surfaces
Pick the surface that matches the content's emotional weight. Default for most things; cream for grouping; ink and accent for rare, loud moments.
Default
White surface with a 1px border. Use for 80% of content.
Cream tonal
Brand cream surface. Great for grouped "about this account" blocks.
Ink
Black surface. Reserved for upsell moments and confirmation.
Firey
Brand orange. Use at most once per screen, for the single biggest idea.
Patterns
Stat card
The workhorse of every dashboard. Big number, short key, optional delta.
Sites scanned
1,284
Exposures found
23
Removed this month
17
Patterns
List card
Dividers inside, not between.
🛡
Identity protection
Active
✉
Email aliases
12 active
☎
Phone numbers
3 active
💳
Virtual cards
Coming soon
Patterns
Alerts
Use for genuine, actionable information. Never for marketing.
3 new exposures found
Your address appeared on 3 new people-search sites this week.
Scan complete
We checked 217 sites. Everything else looks clean.
Dev
Anatomy
| Radius | --radius-xl 16px (20+ only at hero sizes) |
|---|---|
| Padding | 24 (default) · 32 (feature) · 16 (dense list) |
| Border | 1px --border-default · omit on tonal surfaces |
| Shadow | None by default. Hover adds --shadow-sm. |