rokle

Personality

20
40
70
15

Active brand: Meridian

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

Import

Import existing brand tokens from Figma, Tailwind, Style Dictionary, or scrape a live website to generate Rokle-compatible tokens.

Import your existing brand system into Rokle, or scrape your current website to extract a Rokle-compatible token set.

This feature is coming soon. Import supports two modes:

Brand Import: Provide your existing design tokens (from Figma, Style Dictionary, Tailwind config, or CSS custom properties) and Rokle maps them to its semantic token structure, assigns personality scores, and generates a complete brand system.

Site Scrape: Point Rokle at your live website and it extracts colours, typography, spacing, and border-radius patterns, then generates a token set that matches your current visual design. This is the fastest path from an existing site to a Rokle-powered design system.

Supported sources: Tailwind CSS, Chakra UI, Material UI, shadcn/ui, Figma tokens, Style Dictionary, raw CSS custom properties.