Introduction
Rokle is a parametric design system. It generates production-ready component libraries from brand intelligence: colours, typography, spacing, and personality.
What makes Rokle different
Traditional design systems are static. You pick a component library, customise the theme, and ship. If your brand evolves, you manually update tokens, rebuild components, and hope nothing breaks.
Rokle is parametric. Every component is driven by design tokens and a 4-dimensional personality system: Shape, Weight, Density, and Feel. Change a personality score and every component transforms in real time. Switch brand systems and the entire interface reshapes to match.
The result: one design system that expresses multiple brands without maintaining separate codebases.
Core concepts
Design Tokens
Every visual property - colour, spacing, radius, shadow, font weight - is a token. Tokens are organised in three layers: primitive (raw values), semantic (purpose-driven references), and component (per-component overrides). Components never reference raw values directly. Learn more →
Personality System
Four continuous dimensions (0–100) that transform how components look and behave: Shape controls border-radius, Weight controls font-weight and border thickness, Density controls spacing, and Feel controls animation easing and timing. Learn more →
Brand Systems
A brand system combines a colour palette with a personality profile. Rokle ships with 6 built-in brands: Meridian, Volta, Serac, Dune, Obsidian, and Bloom. It supports custom brand creation. Switching brands applies CSS custom property overrides to the entire page. Learn more →
71 Components
From Button to DataTable, TreeView to Tour. Every component is accessible, personality-responsive, and available in React with Vue and Solid coming soon. Browse components →
Rokle Platform
The components and default tokens are free and open source. Install them from npm and start building. The Rokle platform on rokle.app is how you make them yours.
Generate a custom token set from your brand, import tokens from your existing design system, or audit your codebase for drift. The components are the distribution channel. The platform is the intelligence.
Generate
Coming soonGenerate a complete Rokle design system for your brand. Provide your brand colours, typography, and personality preferences. Rokle produces tokens.css, component configurations, and documentation ready to use.
Drift Audit
Coming soonCheck your implementation for drift against a Rokle source file. Detect hardcoded values that should be tokens, components that don't respond to personality, and brand inconsistencies across your codebase.
Import
Coming soonImport your existing brand system into Rokle, or scrape your current website to extract colours, typography, and spacing into a Rokle-compatible token set. Supports migration from Tailwind, Chakra, Material, and shadcn/ui.
Quick start
Ready to build? Head to the installation guide to set up Rokle in your project.