authored, not assembled
this is not a bag of components someone scraped together. it has a point of view, and the point of view is what you are taking on. if a choice here annoys you, it was still a choice.
the design language
usva.
the rules, and why they are the rules
usva is mist; fog. the one that hangs low and close, softening every edge without hiding what is behind it. you can walk through it and still see where you are going.
principles
one grammar, three registers
kajo is loud, sisu is working, savi is quiet. they are not three design systems. they are one vocabulary spoken at three volumes, and every component speaks all three without knowing which one it is in.
reusable before impressive
a thing that only works in the demo is not a component, it is a screenshot. if it cannot survive a long label, a narrow column and a screen reader, it does not ship, however good it looked in the tweet.
coherence beats proliferation
I would rather have fifteen components you can predict than three hundred you have to check. every new one has to earn its place against the ones already here, and most candidates lose.
the five degrees
everything usva ships sits at one of five volumes, from the primitive that recedes to the atmosphere that is the whole room. a screen is tuned by choosing how high up this ladder it is allowed to climb. that choice has a page of its own.
1recedescore · primitivesthe button, the input, the badge. they do the least, on purpose.
2structurescore · patternscards, headers, lists. they organise what the primitives hold.
3guidescore · motionreveals and transitions. they lead the eye; they do not perform.
4assertssulathe fluid material. it takes the focus, and only one per region.
5roomatmospheresthe environment behind everything. the room, not an object.
the chapters
01colorthe role tokens. you never write a hex.02typeone family, spoken at the weight extremes.03spacerhythm is fluid, containers not viewports.04depthelevation is weather, not z-index.05motionfour tiers, three easings, tuned per theme.06iconographyglyphs inherit, arrows are punctuation.07voicehow it sounds, and how it names.08identitytwo marks, and which one gets to appear.09intensityhow loud a screen is allowed to be.10accessibilitythe floor is AA.11tokensthe reference, and the exports.themeskajo, sisu, savi. the three registers, each on its own page.