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.
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 move Theme, chrome, and spacing A provider swap should visibly change the mood, shell weight, and surface temperature.
What should stay Scenario language and workflow Search, actions, and hierarchy still need to read like the same product flow under every runtime.
Best next click Theme Builder or Engine Lens Use the linked routes below when you want to isolate brand drift versus engine drift.
Entry points Jump into the two most useful docs surfaces without leaving this runtime view.
Primitives 93 documented routes
Patterns 49 documented routes
Structures 24 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground Current section
1 Developers 2 documented routes
rounded top bar · solid dividers
Playground
Playground Active profile Platform Flagship
Runtime posture Rottay / modern
Experiment with tokens, themes, and visual output in a live sandbox. 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
Modern Spacing, shape, and chrome move here
Platform Flagship Platform Runtime snapshot The same provider tree is driving these values.
Engine Modern shape + density
Profile Platform Flagship Platform
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
Rottay Brand theme and vertical
Platform Flagship Runtime profile key Command surface A realistic shell of search, actions, and state chips rendered through the active runtime.
Dark surface
Live DS scene Rottay / modern / Platform Flagship
Light surface Platform
Primary #FFFFFF Radius 14px Badge rounded
Engine comparison Engine lens The 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
Shared control bar
Primary action Secondary action Tertiary
Keep exploring Use these routes when you want to isolate a specific runtime variable instead of scanning the broader playground. Adjust palette, typography, and surface treatment with immediate DS feedback.
Review how Classic, Modern, and Rustic reshape the same component contract.
Validate how brand and vertical variables affect the same shared component set.
Work queue This scene should feel like a product surface, not a showcase slab.
Create record
Save draft
Share view
Tenant color shift landed Check that badge contrast, button emphasis, and queue affordances still read cleanly after the palette update.
Theme audit Surface density pass Spacing should tighten or relax with the engine without flattening the card hierarchy or the action rhythm.
Engine lens Runtime regression sweep The 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.
18 items 6 new in the last hour
Needs review 2 records escalated
Stable No 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. 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.
Stable Shared text should survive the engine swap
Adaptive Surfaces need to keep hierarchy readable
Revealed The engine should feel different, not arbitrary Shared control bar Active tenant
Primary action Secondary action Tertiary
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.
Shared control bar Active tenant
Primary action Secondary action Tertiary
What to compare Watch the same control stack across all three engines.
Treat spacing, rounding, and emphasis as the variables that should move.
Stable Shared text should survive the engine swap
Adaptive Surfaces need to keep hierarchy readable
Revealed The engine should feel different, not arbitrary If the scene looks identical everywhere, the runtime signal is too weak.
Stable Shared text should survive the engine swap
Adaptive Surfaces need to keep hierarchy readable
Revealed The engine should feel different, not arbitrary