DS
Premium Docs

Design System Showroom

Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modern
Published package
Primary
#0A0A0A
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections
212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
FoundationsCurrent section
4
Tokens
Themes
Engines
Icons
109
97
Display
Inputs
Feedback
Layout
Navigation
Overlay
48
Data
Forms
Visualization
Communication
Workflow
Navigation
Misc
21
Headers
Workspace
Record
Dashboard
Feedback
36
Admin
Data
Experience
Forms
Operations
Workspace
3
Platform
Bit Hire
Evnto
1
Playground
2
Developers
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package ยท System Layer ยท Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#0A0A0ARottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Engines

Engines

Active profilePlatform Flagship
Runtime postureRottay / modern
Preview the same design system across Classic, Modern, and Rustic engines.
Runtime controls
Foundations
/
Rendering layer
Quick jumps
Classic
Modern
Rustic
Runtime switching
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
API promise
Shared
One component contract
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

Side-by-side engine previews

Same workflow frame
ClassicAnt Design 5.21
classic
Structured, enterprise-weighted, and familiar for data-heavy admin surfaces.
Sharper radiusCorporate shadowsDense layout biasOperational tone
Best fit: Control planes, governance, admin-intensive products.
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar ยท solid dividers
TenantRottay
EngineModern
createEngineComponentToken-aware snippet from the active showroom runtime.
tsx
9 lines
Consumption
Runtime-aware snippet
createEngineComponentTSX
Quick copy
const Button = createEngineComponent({
  classic: ClassicButton,
  modern: ModernButton,
  rustic: RusticButton,
});

<DesignSystemProvider forceEngine="modern">
  <Button />
</DesignSystemProvider>
Workflow moduleActive
borderRadius.md = 10pxshadows.md = 0 2px 4px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.18)

Modern

Tailwind / DaisyUI
modern
Rounded, contemporary, and more expressive for product experiences with visible brand energy.
Rounded corners
Confident elevation
Generous rhythm
Soft motion
Workflow module
Active
borderRadius.md = 10pxshadows.md = 0 2px 4px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.18)
Best fit: Growth products, recruiting, mixed marketing-product flows.

Rustic

Vanilla CSS
rustic
Minimal and quiet, designed to reduce visual noise while still supporting the same API.
Minimal radius
Whisper shadows
Reserved motion
Calm surfaces
Workflow module
Active
borderRadius.md = 10pxshadows.md = 0 2px 4px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.18)
Best fit: Low-noise workflows, premium restraint, bespoke white-label UI.

Choosing the right engine

Selection heuristics
ClassicControl 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
ModernGrowth 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
RusticLow-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