A card
Radius, border weight, and shadow are all format decisions.
Learn more
Demo
Try it on.
Color and styling are separate choices, so any palette works with any format. Use Try a look in the header. Everything on this page repaints as you go, and the rest of the site keeps whatever you pick.
Type
Headings, body, and the rest.
The scale, weights, and spacing all shift with the format you choose.
A third-level heading
Body copy at the size it ships. Long enough to judge the measure, the leading, and how the paragraph sits against the page ground. This is a link inside a sentence.
Small print, captions, and disclaimers land here.
Components
Buttons, cards, and controls.
Another card
Three across on a wide screen, stacked on a phone.
Learn moreA third
Judge the set together, not one card on its own.
Learn more
On dark
The same system, inverted.
Every palette has to work here too, not just on the page ground.
Ready
Found one you like?
Name it in the switcher and press Copy settings. That puts the whole spec on your clipboard, so you can send it over exactly.