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
Themes

Themes

Active profilePlatform Flagship
Runtime postureRottay / modern
Tenant visual identities and how they reshape the same component system.
Runtime controls
Foundations
/
Tenant layer
Quick jumps
Rottay
BitHire
Evnto
BrandTheme merge chain
Runtime editorial reference

Themes

Themes apply tenant and vertical identity on top of the shared token contract, so the same UI can feel like Platform, BitHire, or Evnto without forking components.
Featured read
Resolution order
Base tokens -> engine adjustments -> vertical baseline -> tenant BrandTheme.
Themes
3
First-party brands in this showroom
Merge chain
4 layers
Base -> engine -> vertical -> tenant
Runtime model
No rebuild
CSS variables resolve live
Overrides
~140 vars
Generic + component-specific knobs
Good use of themes
Brand signal, emphasis hierarchy, surface treatment, and motion tone.
Bad use of themes
Business rules, permission logic, workflow branching, or route-level product behavior.

Tenant comparison

Same engine, all first-party tenants
Live providers
Three tenant presets
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

Real side-by-side tenant previews

Each card below renders the same DS primitives under a different tenant preset. Use this section to compare brand signal, surface chemistry, and action posture without relying on showroom-local styling.
Brand signalPrimary emphasis, semantic bias, and accent energy should all move with the tenant.
Surface chemistryCards, neutrals, and contrast rhythm should shift without changing the component API.
Operational postureThe same controls should feel more enterprise, recruiting, or event-driven by runtime alone.

What themes should change

Scope guardrails
Themes should shift brand, not behaviorUse them to move tone, emphasis, and surface chemistry. Keep product logic, permissions, and routing outside the theme layer.
Palette
Surface chemistry
Motion tone
Component chrome
Brand signalPalette, emphasis moments, hero accents, semantic tone bias.
Surface chemistryCard styling, gradients, translucency, borders, and elevation flavor.
Interaction detailsMotion softness, focus treatment, and component-specific chrome variables.
Not business logicThemes should not encode product rules, permissions, or workflow branching.
Theme providerToken-aware snippet from the active showroom runtime.
tsx
6 lines
Consumption
Runtime-aware snippet
Theme providerTSX
Quick copy
<DesignSystemProvider tenantSlug="bithire" forceEngine="modern">
  <DashboardSurface />
</DesignSystemProvider>

// Resolution:
// base tokens -> engine -> vertical baseline -> tenant BrandTheme