Card
A container component for displaying related content.
Variants
Default
White background with border
Default card style, border darkens on hover.
Muted
Gray background without border
Lightweight card, suitable for secondary content.
Outline
Transparent background with border
Wireframe card, suitable for list items.
Elevated
With shadow
Use only when emphasis is needed.
Small Radius
More neutral rounding
Useful for dense layouts and list UIs.
Hero Card
Clarity
v6
Refinement in
essence
A grayscale-first UI system built for precision typography, soft radius, and disciplined interaction.
8–32
Spacing scale
7
Gray steps
200ms
Motion
Pricing Card
Clarity Pro
For product teams
Annual −20%
$29
/ mo
Design tokens & presets
Dark mode parity
Chart + data patterns
Figma-friendly spacing
Team Members Card
Team Members
Invite team members to collaborate.
3 online
L
Liu
Design Lead
A
Ava
Engineer
M
Mina
Product
Analytics Card
Revenue trend
Net revenue · $24,980
Sessions
86,240
+12%
Conversion
3.2%
+0.4
Retention
41%
+6