Personality System

The personality system is what makes Rokle parametric. Four continuous dimensions (0-100) control how every component looks and behaves.

Shape (0-100)

Controls border-radius across all components. At 0, everything is sharp and angular: no rounded corners. At 100, everything is fully rounded. The Shape slider maps to --radius-sm, --radius-md, --radius-lg, and --radius-xl tokens proportionally.

Weight (0-100)

Controls visual heaviness: font-weight and border-width. At 0, text is light and borders are hairline thin. At 100, text is bold and borders are thick. Weight overrides the --font-weight-normal, --font-weight-medium, --font-weight-semibold, and --font-weight-bold tokens, and injects a global border-width override.

Density (0-100)

Controls spacing throughout the interface. At 0 (spacious), padding and gaps are generous: components breathe. At 100 (compact), everything tightens: more content fits on screen. Density scales every --space-* token proportionally.

Feel (0-100)

Controls animation easing and timing. At 0 (mechanical), transitions are instant and linear: no personality in motion. At 100 (bouncy), transitions use spring easing with overshoot, and durations are longer so the easing curve is visible. Feel also adds subtle hover lift and press scale effects to interactive elements.

Brand personality profiles

Each brand system defines its own personality scores. Meridian is 20/40/70/15 (sharp, moderate weight, compact, mechanical). Bloom is 90/35/35/90 (fully rounded, light, spacious, bouncy). Switching brands changes all four dimensions at once.