Visual personality
Personality
A palette changes hue and a type voice changes the letterforms. A personality changes the material: radius, control height, row density, type proportions, motion physics and glow strength — all from one attribute on any subtree.
What actually moves
Four token groups move together. Nothing about behaviour, semantics, contrast or keyboard support changes — a personality is a surface property, not another mode.
Geometry
--radius-xs … --radius-2xl. How much the material curves.
Density
--control-height-*, --density-gap, --density-row. How tightly it packs.
Proportions
Leading, tracking and display weights. How much air the type takes.
Physics
--motion-*, --ease-*, --ambient-*, --effect-*-strength. How it moves.
Four materials, one component set
Each column is a real subtree with its own data-personality attribute. The components inside are imported once and rendered four times.
Instrument
Calibrated geometry, precise motion — the default.
Editorial
Generous curves, unhurried motion, looser leading.
Dense
Tight geometry, faster motion, closer rows.
Expressive
Large curves, springy motion, stronger light.
How a product should use it
Pick one personality for the whole product and put it on <html>, exactly like the theme. The subtrees above exist so a reviewer can compare; shipping four personalities inside one application is a way to make it feel assembled, not designed.
<html data-theme="dark" data-palette="violet" data-typeface="inter" data-personality="expressive">The attribute is inherited, so a nested subtree can reset to a different personality only when that is genuinely a different product surface — a marketing page embedded in an application shell, for example.