Premium Docs
Design System Showroom Density normal Platform Flagship
Landing
Playground
Navigator Library map
8 sections 212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS Runtime
Rottay / Modern Platform Flagship
Primary
#FFFFFF Secondary #A0A0A5
Compact runtime evidence across 3+ token signals.
Runtime editorial reference
Engines Engines keep the component API stable while changing rendering posture, spacing feel, motion cadence, and overall product silhouette.
Featured read
What changes
Implementation strategy, visual tone, radius, shadow, and motion interpretation.
Engines
3
Three renderer personalities
Switch model
Runtime
Resolved by provider context
Token shift
Automatic
Radius, shadow, motion follow engine
What stays fixed
Imports, component names, and semantic usage contracts across apps.
Use this page for
Comparing visual personality before teams commit to a product direction or tenant rollout.
Runtime selection model Engine swapping is an implementation concern, not a route or API fork. createEngineComponent Primitives 93 documented routes
Patterns 49 documented routes
Structures 24 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers 2 documented routes
rounded top bar · solid dividers
Engines
Engines Active profile Platform Flagship
Runtime posture Rottay / modern
Preview the same design system across Classic, Modern, and Rustic engines.
createEngineComponent Token-aware snippet from the active showroom runtime.
Consumption
Runtime-aware snippet
Copy const Button = createEngineComponent({
classic: ClassicButton,
modern: ModernButton,
rustic: RusticButton,
});
<DesignSystemProvider forceEngine="modern">
<Button />
</DesignSystemProvider>
Side-by-side engine previews Same workflow frame
Classic Ant Design 5.21 classic Structured, enterprise-weighted, and familiar for data-heavy admin surfaces.
Sharper radius Corporate shadows Dense layout bias Operational tone
Approve Secondary
Workflow module Active
borderRadius.md = 10px shadows.md = var(--ds-elevation-2) Best fit: Control planes, governance, admin-intensive products.
Modern Tailwind / DaisyUI modern Rounded, contemporary, and more expressive for product experiences with visible brand energy.
Rounded corners Confident elevation Generous rhythm Soft motion
Approve Secondary
Workflow module Active
borderRadius.md = 10px shadows.md = var(--ds-elevation-2) Best fit: Growth products, recruiting, mixed marketing-product flows. Minimal and quiet, designed to reduce visual noise while still supporting the same API.
Minimal radius Whisper shadows Reserved motion Calm surfaces
Approve Secondary
Workflow module Active
borderRadius.md = 10px shadows.md = var(--ds-elevation-2) Best fit: Low-noise workflows, premium restraint, bespoke white-label UI.
Choosing the right engine Selection heuristics Classic Control planes, governance, admin-intensive products.
Ant Design 5.21 Structured, enterprise-weighted, and familiar for data-heavy admin surfaces. Sharper radius Corporate shadows Dense layout bias Operational tone
Modern Growth products, recruiting, mixed marketing-product flows.
Tailwind / DaisyUI Rounded, contemporary, and more expressive for product experiences with visible brand energy. Rounded corners Confident elevation Generous rhythm Soft motion
Rustic Low-noise workflows, premium restraint, bespoke white-label UI.
Vanilla CSS Minimal and quiet, designed to reduce visual noise while still supporting the same API. Minimal radius Whisper shadows Reserved motion Calm surfaces
createEngineComponent TSX
Quick copy