DS
Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modernPublished package
Premium Docs

Design System Showroom

Primary
#FFFFFF
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
FoundationsCurrent section
4
Tokens
Themes
109
93
49
24
36
3
1
2
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
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
#FFFFFFRottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
System layer
Quick jumps
Tokens
Themes
Engines
Icons
Runtime editorial reference

Foundations

The runtime layer behind every showroom preview: tokens, tenant themes, rendering engines, and shared iconography.
Featured read
When to open this
Open foundations when a screen looks wrong everywhere, diverges by tenant, or shifts across engines.
Tracks
4
Tokens, themes, engines, icons
Runtime vars
~140
Themeable at runtime
Renderers
3
Classic, Modern, Rustic
Icons
109
Shared visual vocabulary
Reading path
Tokens, then Themes, then Engines covers most diagnosis. Use Icons when the question is vocabulary or affordance.

Choose a foundation track

Each track is framed as a quick diagnostic path, not a passive chapter.
4 live tracks

Tokens

~140 runtime variables
6 live chapters
Summary
Color, type, spacing, radius, shadow, and motion define the values every component resolves before it renders.
Open when
A UI feels inconsistent and you need to trace the value that is driving it.
colors
spacing
typography
motion

Themes

brand resolution chain
3 tenant previews
Summary
Themes layer tenant branding on top of engine and vertical defaults without forking the component set.
Open when
You need to explain how one system becomes Platform, BitHire, or Evnto at runtime.
rottay
bithire
evnto
brand themes

Engines

same API, different personality
3 renderers
Summary
Classic, Modern, and Rustic keep the same API while changing silhouette, depth, and motion.
Open when
Teams want to compare rendering direction without rewriting application code.
classic
modern
rustic
runtime switching

Icons

10 semantic buckets
109 curated assets
Summary
The icon catalog provides a shared visual vocabulary for navigation, actions, status, data, and system chrome.
Open when
You need recognisable affordances without drifting into custom SVG sets.
navigation
status
data
currentColor

Quick routes

Fast entry points for branding, engine comparison, and consistency checks.
Practical entry points
Themes
Brand a tenant
Check theme merging first, validate the token palette, then confirm the icon vocabulary.
ThemesTokensIcons
Engines
Choose a rendering direction
Compare Classic, Modern, and Rustic, then inspect live primitives with the same switch applied.
EnginesPlaygroundPrimitives
Tokens
Audit visual consistency
Start with tokens and themes, then confirm full-page surfaces still stay aligned.
TokensThemesSurfaces
Engines
Icons
Primitives93 documented routes
Display
Inputs
Feedback
Layout
Navigation
Overlay
Patterns49 documented routes
Data
Forms
Visualization
Communication
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell
Structures24 documented routes
Headers
Workspace
Shell
Record
Dashboard
Feedback
Surfaces36 documented routes
Admin
Data
Experience
Forms
Operations
Workspace
Verticals3 documented routes
Platform
Bit Hire
Evnto
Playground1 documented routes
Playground
Developers2 documented routes
Developers
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
FoundationsFoundations

Foundations

Active profilePlatform Flagship
Runtime postureRottay / modern
Explore tokens, themes, engines, and icon assets behind the system.
Runtime controls
TenantRottay
EngineModern