Cards

A systematic design language you can hand to any AI.

Tune the color, type and radius on the left. Every token, component and rule on this page updates live — and the prompt you copy carries all of it.

Learn UI design for the AI era

AI can generate an interface in seconds, but it can't tell you if it's any good. Learn to direct it, spot what's off and fix it.

Color

Semantic tokens

Click a swatch to copy its token
Background
bg-{token}
Text
text-{token}
Line
ring-{token} / border-{token}
Primary
bg-primary*

Palettes

Raw ramps — avoid in components
neutral · gray
0
50
100
200
300
400
500
600
700
800
900
950
primary
50
100
200
300
400
500
600
700
800
900
950

State colors

{state}-fg · base · {state}-line · {state}-subtle
danger
warning
success
info
highlight
caution
neutral

Typography

text-heading-1
56/64
Design with intent
Marketing hero only
text-heading-2
48/56
Design with intent
Marketing section titles
text-heading-3
40/48
Design with intent
Large page heroes
text-heading-4
32/40
Design with intent
Page titles in marketing / onboarding
text-heading-5
24/32
Design with intent
App page titles, empty states
text-heading-6
20/28
Design with intent
Section titles inside apps
text-ui-xl
24/32
Workspace settings
Large numbers / stats
text-ui-lg
18/24
Workspace settings
Prominent labels, card stats
text-ui-md
16/24
Workspace settings
Card, dialog and list-item titles
text-ui-sm
14/20
Workspace settings
Buttons, form labels, nav items (default UI label)
text-ui-xs
12/16
Workspace settings
Small labels, table headers
text-body-lg
18/24
Calm surfaces and precise type let the content lead.
Lead paragraphs
text-body-md
16/24
Calm surfaces and precise type let the content lead.
Long-form body
text-body-sm
14/20
Calm surfaces and precise type let the content lead.
Default UI body, descriptions, input text
text-body-xs
12/16
Calm surfaces and precise type let the content lead.
Hints, captions, meta
text-overline-xs
12/16
Section eyebrow
Eyebrows / group labels
text-overline-2xs
11/12
Section eyebrow
Small badges, tiny eyebrows

Spacing

14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
28px

Icon ↔ label, inside controls

3 – 412–16px

Control padding, between a label and its field

4 – 616–24px

Between fields and related items, gap between cards

5 – 620–24px

Card padding

8 – 1232–48px

Between page sections

Radius & elevation

rounded-xs
3px
rounded-sm
5px
rounded-md
6px
rounded-lg
8px
rounded-xl
10px
rounded-2xl
13px
rounded-3xl
19px
shadow-xs
Resting inputs
0 0.5px 1px 0px rgb(0 0 0 / 0.088)
shadow-sm
Cards — the shadow you edit
0 1px 2px 0px rgb(0 0 0 / 0.1)
shadow-md
Popovers, tooltips, toasts
0 4px 8px 0px rgb(0 0 0 / 0.175)
shadow-lg
Dialogs and sheets
0 8px 16px 0px rgb(0 0 0 / 0.275)

Components

Button — variant × mode
primary
neutral
danger
Flat primary
Flat neutral
Flat danger
Sizes
On canvas
The white button keeps its edge on the grey page and on white cards.
Input & textarea

We'll never share it.

Password is too short.

Select, search & sizes
⌘K
Checkbox
Radio
Switch
Badge & status
softneutralprimarysuccesswarningdangerhighlight
tintneutralprimarysuccesswarningdangerhighlight
solidneutralprimarysuccesswarningdangerhighlight
outlineneutralprimarysuccesswarningdangerhighlight
ActivePendingFailedDraft
Accordion

Yes — pick any primary color and the whole ramp, hover states and focus rings are generated from it.

Tile group
Tabs
The overview panel. Line tabs navigate between sibling views; segmented controls switch the presentation of one view.
Avatar, tooltip & progress
ALMKJSRWEP
ABCD
Storage68%
Dialog
Alert

Patterns

Welcome back

Sign in to continue to Cards.

Forgot?
Revenue
$48,290+12.4%
Active users
2,814+3.1%
Churn
1.8%−0.4%
Team members
Manage who has access to this workspace.
MemberRoleStatus
AL
Ava Laurent
ava@example.com
OwnerActive
MK
Milo Kovac
milo@example.com
AdminActive
JS
Jun Sato
jun@example.com
EditorInvited
RW
Rae Wilson
rae@example.com
ViewerInactive
Notifications
Choose what you hear about.
Product updates
News about features and improvements.
Billing
Invoices and payment reminders.
Mentions
When someone @mentions you.
Pro plan · renews May 2
Revenue
$512,600−1.8%
Visitors
68.4k
Bounce rate
32%
Avg. session
4m 12s
This period Previous period
Design

Why every corner should come from one number

A single base radius keeps a whole interface in step, from the smallest badge up to the largest dialog.

MK
Milo Kovac
Mar 12 · 6 min read

Choose your plan

Cancel any time. No charge until your trial ends.

Storage
56 GB of 100 GB used
  • Documents, 28 GB
  • Photos, 19 GB
  • Other, 9 GB
  • Free, 44 GB
Who has access
ALMKJSRW

Slow Tide

Harbour Lights

0:583:34
UL 204On time
YYZ
Toronto
LAX
Los Angeles
Departed 11:12Arrives 16:34
Gate
B12
Seat
14A
Altitude
36,850 ft

Murmur

4.8 · Productivity

Capture a thought before it slips away. Speak, and it lands in your notes as tidy text.

4.8
Rating
2M+
Downloads
48 MB
Size

Out for delivery

4902 8680 1608
  1. Ordered
    Mar 10, 09:24
  2. Shipped
    Mar 11, 14:02
  3. Out for delivery
    Today, 07:48
  4. Delivered
    Expected by 18:00
⌘K

Market overview

  • Market cap
    $3.08T+1.2%
  • Volume
    $153B−4.8%
  • Dominance
    60.1%+0.3%
SentimentGreed, 72

Standup notes

0:38