Appearance

Try it from Customise, in the top bar.

Accent colour

Kanto ships violet. Seven presets are a data attribute away, on the page or on any container:

violet · blue · teal · green · orange · pink · slate

Any other colour goes through setAccent, which solves the variants for it:

Whatever the colour, white text reads on a primary fill at 4.5:1 or more, and the accent as text reads at 4.5:1 or more on the surfaces, on its own tint and on the hover wash of a secondary button, in both themes. A bright colour — a yellow, a light orange — is darkened for it, as Kanto's own violet is. The neutral surfaces take a trace of the accent's hue; a grey accent gives plain greys.

accentPalette(color) returns the values without applying them — to write them into a stylesheet at build time, for instance. The inputs it sets are --accent-base, --accent-hover, --accent-text-dark, --accent-text-light, --accent-wash, --neutral-hue and --neutral-chroma; components never read them, only the tokens do.

A red or a green accent sits close to the danger and success colours; Kanto does not stop you, but a primary button and a destructive one will look alike.

Font, corners, density and text size

Besides the accent, four settings change how Kanto looks. Each is a data attribute, on the page or on any container:

Or all at once, with the accent:

setAppearance changes only the settings it is given, and checks them all first: an unknown value throws and changes nothing.

Density scales the heights of controls and fields — a button is 34px in compact, 46px in comfortable, on even pixels — the padding and gap tokens, and table cells. Text size scales every type token and table text. Both compose with the mobile and ultra-wide scales. A few inner sizes — calendar cells, the small segmented control — keep their own.

The rounding of heights uses CSS round() where the browser has it (Chrome 125, Firefox 118, Safari 15.4); before that, heights keep their exact fraction and nothing else changes.

Kanto ships its own faces only. With inter, plex or geist, load the font yourself (Google Fonts has all three); without it, the system face shows.

The inputs behind the attributes are --radius-scale, --density-scale, --text-scale, --font-body and --font-display. Set in CSS, they need one of the attributes on the same element for the tokens to re-read them there; --font-body and --font-display take a full font stack, the scales a plain number.

An element carrying one of these attributes re-declares Kanto's spacing and type tokens from these inputs, so an app that overrides a token itself — :root { --button-height: 36px } — repeats the override for that element, or overrides the input instead. The same goes for colour tokens under data-accent.