Click a color name, font or slider to edit. Everything updates live.
Color palette
Semantic colors
Typography

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Lead paragraph that introduces a section with a slightly larger, calmer voice.

Body text with a link, bold, italic, inline code() and a ⌘ K shortcut. Small muted text.

Design is not just what it looks like. Design is how it works.
  1. First step
  2. Second step
  3. Third step
const theme = await fetch('/ds/my-site/tokens.json')
Buttons
Link button
Forms
We never share it.
Must be 12+ characters.



Badges & alerts
NeutralPrimarySecondaryAccentSuccessWarningDangerInfo
Heads upA new version is available.
SavedYour changes are live.
CarefulThis affects all projects.
ErrorCould not reach the server.
Cards
New
Card title

Supporting text that explains what this card is about.

SS
Severin S.
Product designer

Card with medium shadow and an avatar row.

Loading state
Fetching…
Navigation


Data display
NameStatusRoleScore
ALAda LovelaceActiveEngineer98
GHGrace HopperInvitedAdmiral95
ATAlan TuringSuspendedResearcher91

Overlays & disclosure
What is a design system?

A shared set of tokens and components that keeps every product consistent.

How do I connect it?

Pull tokens.css into your project, or link it directly.

Delete project?

This cannot be undone.

Spacing · radius · shadow
0
sm
md
lg
xl
full
shadow-sm
shadow-md
shadow-lg
Custom CSS
Use in your project