rokle

Personality

20
40
70
15

Active brand: Meridian

Adjust sliders to see every component on the page respond in real time.

Theming

6 pre-built brand systems with instant CSS custom property switching. Create custom brands with colour palettes and personality profiles.

Rokle ships with 6 pre-built brand systems: Meridian, Volta, Serac, Dune, Obsidian, and Bloom. Each defines its own colour palette, personality profile, and visual language.

Switching brands applies CSS custom property overrides to :root, instantly reskinning every component on the page. Personality scores (Shape, Weight, Density, Feel) update independently.

To create a custom brand system, define a cssOverrides record mapping token names to values. The minimum set covers --color-brand-base, --color-brand-hover, --color-brand-active, --color-brand-subtle, --color-brand-text-on, --color-accent-base, --color-surface-default, --color-surface-raised, and --color-surface-sunken.

For dark themes like Obsidian, also override --color-text-primary, --color-text-secondary, --color-text-muted, --color-border-default, and --color-border-strong.

Brand system packages are downloadable from the Themes page. Each zip contains tokens.css, tokens.json, DESIGN.md, claude.md, and a README with install instructions.