Design system
Every component, in the theme you're currently viewing. Toggle to check both.
Colour
Navy and lime sampled from the logo; semantic tokens swap between themes.
navy
50
100
200
300
400
500
600
700
800
900
950
lime
50
100
200
300
400
500
600
700
800
900
Semantic tokens
bg
surface
surface-2
fg
fg-muted
fg-subtle
border
border-strong
primary
accent
tertiary
success
warning
danger
info
Brand
Buttons
Form controls
Badges & pills
Cards
Padded card
The default surface for grouped content.
Interactive
Border and background shift on hover.
With header
And a footer
Body content sits here.
Revenue
$284,910
▲ 12.4%vs last period
Orders
1,284
▼ 3.2%vs last period
Products
40
Customers
1,240
▲ 2.1%vs last period
Feedback
Information
Saved
Low stock
Payment failed
Nothing here yet
Empty states carry an icon, a title, a sentence and one action.
Tables
Sortable headers, sticky option, empty and loading states.
| Atlas 28L Commuter | $148 | 60 |
| Market Canvas Tote | $42 | 276 |
| Padded Paper Mailer | $52 | 1010 |
| Kraft Stand-Up Pouch | $48 | Out |
Overlays
Typography
Heading 1 — extrabold, tight
Heading 2
Heading 3
Body text sits at the base size with relaxed leading. Long-form copy on this site tops out around 65 characters a line.
Muted text for secondary information and helper copy.
Subtle text for timestamps, counts and metadata.
Overline / eyebrow label
PK-26042 · $1,284.50 · tabular numerals