Start with a default

Every card is a system's own out-of-the-box settings: the colour its buttons ship in, the typeface it names, the corners it cuts. Pick one and you begin where that system begins. Nothing is fixed: every value is a knob you can move a second later.

Nothing on this screen is our taste: every value was read out of the kit's own package, and the card's last line says what you get.

Make it yours.

Colours, two typefaces, and how solid you want the edges. Nothing here is final, so shuffle as often as you like. The strip along the bottom is really your kit rendering, not a picture of one.

Colours

One colour is all you say. The rest is read out of what your stack publishes. Click a card to change it.

All eleven roles by hand

Typography

Two faces is plenty. Every one of them is a real family your stack can load, and the size below is the one everything else is measured against.

Set the type by hand

The feel of it

Corners, weight and the room between things. This is where a kit stops being a palette and starts having a personality.

Set the shape by hand

This is what your app will look like

Your colour

One value. The other ten roles derive from it and from what your stack publishes, and the note in the card says which kit answered.

Or a family your stack already ships

    Your colour

      Lightness up, chroma right, in OKLCH, so a step is the same size wherever you are on the wheel. The right edge is as far as that lightness can go in sRGB, which is further near white than it is near black.

      Headings