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.
Foundations4 documented routes
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
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 · Live Sandbox · 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
Playground

Playground

Active profilePlatform Flagship
Runtime postureRottay / modern
Experiment with tokens, themes, and visual output in a live sandbox.
Runtime controls
Live playground
Real DS provider
No local theme hacks

Build with the runtime, not around it.

The shell already swaps tenant and engine for real. This page should make those shifts obvious: a tighter top fold, denser live scenes, and enough hierarchy to trust what the DS is doing.
What should moveTheme, chrome, and spacingA provider swap should visibly change the mood, shell weight, and surface temperature.
What should stayScenario language and workflowSearch, actions, and hierarchy still need to read like the same product flow under every runtime.
Best next clickTheme Builder or Engine LensUse the linked routes below when you want to isolate brand drift versus engine drift.
Entry pointsJump into the two most useful docs surfaces without leaving this runtime view.
Theme Builder
Interactive
Compare tenant themes side by side with the live provider chain already wired up.Open route
Engine Lens
Compare
See how Classic, Modern, and Rustic shift the same component contract in the DS.Open route
Runtime signals
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
PlaygroundCurrent section
1
Playground
Developers2 documented routes
roundedtop bar · solid dividers
TenantRottay
EngineModern
Tenant
Rottayrottay
Engine
ModernSpacing, shape, and chrome move here
Profile
Platform FlagshipPlatform
Runtime snapshotThe same provider tree is driving these values.
Live
Rottay
Modern
TenantRottayrottay
EngineModernshape + density
ProfilePlatform FlagshipPlatform
Real tenant switching should alter palette, chrome, and product profile without route hacks.
Real engine switching should move spacing, shape, and emphasis in the same component tree.
If a state barely changes here, the runtime plumbing needs attention upstream.
Current combination
Tenant
RottayBrand theme and vertical
Engine
ModernSpacing and chrome
Profile
Platform FlagshipRuntime profile key
Command surfaceA realistic shell of search, actions, and state chips rendered through the active runtime.
Live DS sceneRottay / modern / Platform Flagship
Light surface
Platform
Primary #0A0A0A
Radius 14px
Badge rounded
Work queueThis scene should feel like a product surface, not a showcase slab.
Ready
Searchable
Stateful
Needs review
review state
In progress
review state
Stable
review state
Engine comparisonEngine lensThe same tenant, the same tree, and a live engine swap that should move spacing, shape, and emphasis.
Rottay
3 live engines
Same tenant, isolated engine
ClassicAnt Design
Live provider
Shared control barActive tenant
What to compare
Watch the same control stack across all three engines.
Treat spacing, rounding, and emphasis as the variables that should move.
If the scene looks identical everywhere, the runtime signal is too weak.
Copy
StableShared text should survive the engine swap

Keep exploring

Use these routes when you want to isolate a specific runtime variable instead of scanning the broader playground.
3 linked tools
Theme BuilderInteractive
Open
Adjust palette, typography, and surface treatment with immediate DS feedback.
EnginesCompare
Open
Review how Classic, Modern, and Rustic reshape the same component contract.
ThemesTenant
Open
Validate how brand and vertical variables affect the same shared component set.
Tenant color shift landedCheck that badge contrast, button emphasis, and queue affordances still read cleanly after the palette update.
Theme audit
Surface density passSpacing should tighten or relax with the engine without flattening the card hierarchy or the action rhythm.
Engine lens
Runtime regression sweepThe same search and state shell should survive brand, profile, and engine changes without route-specific hacks.
Provider chain
Review lane
Searchability, action rhythm, and contrast should survive the active runtime without route-specific rescue code.
Queue depth
18 items6 new in the last hour
Focus state
Needs review2 records escalated
Alert level
StableNo runtime regressions
Surface checks
Contrast good
Spacing tidy
State visible
The card stack should still look deliberate under dark-first Rottay, while BitHire and Evnto can add more energy without rewriting the shell.
Contrast
AdaptiveSurfaces need to keep hierarchy readable
Motion
RevealedThe engine should feel different, not arbitrary
ModernDaisyUI
Live provider
Shared control bar
Active tenant
What to compare
Watch the same control stack across all three engines.
Treat spacing, rounding, and emphasis as the variables that should move.
If the scene looks identical everywhere, the runtime signal is too weak.
RusticVanilla CSS
Live provider
Shared control bar
Active tenant
What to compare
Watch the same control stack across all three engines.
Treat spacing, rounding, and emphasis as the variables that should move.
If the scene looks identical everywhere, the runtime signal is too weak.
Copy
StableShared text should survive the engine swap
Contrast
AdaptiveSurfaces need to keep hierarchy readable
Motion
RevealedThe engine should feel different, not arbitrary
Copy
StableShared text should survive the engine swap
Contrast
AdaptiveSurfaces need to keep hierarchy readable
Motion
RevealedThe engine should feel different, not arbitrary