Migration

Migrate to Rokle from another design system in three steps: token mapping, component replacement, and brand configuration.

Migrating to Rokle from another design system involves three steps.

Step 1: Token Mapping

Map your existing tokens to Rokle's semantic token structure. Rokle uses a three-layer system: primitive (raw values), semantic (purpose-driven), and component (per-component overrides).

Step 2: Component Replacement

Replace your existing components with Rokle equivalents. Most components share similar APIs. The main addition is the personality prop.

Step 3: Brand Configuration

Create a brand system that matches your existing visual identity. Define cssOverrides for your colours, then set personality scores that match your design language.

Rokle's CLI can scaffold the migration with: npx rokle migrate --from <system>