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.
Foundations4 documented routes
4
Tokens
Themes
109
93
49
24
36
3
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 · Live Sandbox · 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
Theme BuilderBrandTheme -> live preview

Author a bounded BrandTheme and watch it compile onto light and dark grounds in real time.

Every edit is compiled with the same brand compiler the runtime uses, injected into two scoped preview grounds, and validated for WCAG contrast inline. The same component states render on both grounds so drift is easy to trust.

Brand Studio

Studio Draft
Bounded BrandTheme fields
Palette
Primary
Secondary
Accent
Success
Warning
Error
Info
Dark primary (dark ground)
Live preview on both grounds
Hostile input checkApplies deliberately extreme values and reports the failing color pairs per ground.
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
PlaygroundCurrent section
1
Playground
Developers2 documented routes
Developers
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
Theme BuilderTheme Builder

Theme Builder

Active profilePlatform Flagship
Runtime postureRottay / modern
Tune palette, typography, and surface behavior with immediate feedback.
Runtime controls
TenantRottay
EngineModern
Dark background (dark ground)
Typography
Base font
Heading font
Mono font
Display font
Heading weight
Label style
Surfaces
Radius sm
Radius md
Radius lg
Radius xl
Effect intensity
Density scale
Motion
Entrance
Entrance duration (ms)
Hover lift
Hover scale
Pulse speed
Skeleton
Chrome
Primary button bg
Primary button text
Input bg
Input border
Card bg
Card text
Card muted text
Card border
Table header bg
Table row hover
Modal bg
Modal overlay
Active tab color
Tabs border
Dark surfacedark
Variants
Primary
Secondary
Default
Ghost
States
Default
Disabled
Sizes
Small
Medium
Large
States
Default
Filled
Disabled
Read only
Validation

Enter a valid email address.

Error

Shown across all routes.

Required
States
Placeholder
Selected
Disabled
Validation

Pick an approval status.

Error
Compositions

Workspace

Grouped content lives on a contained surface.
Basic

Route policy

NorthwindActive
Secondary approvers inherit workspace defaults.
With status
Variants
primary
Primary
secondary
Secondary
success
Success
warning
Warning
error
Error
States
Workspace
Owner
Status
OperationsDanielReady
FinanceMarielaReview
SupportJordanBlocked
Populated
Workspace
Owner
Status
No data
Empty
Active item
Overview panel
First active
Activity panel
Second active
Surface
Trigger + dialog
Dark ground contrastWCAG AA clean
Every checkable color pair meets its required ratio.
Light surfacelight
Variants
Primary
Secondary
Default
Ghost
States
Default
Disabled
Sizes
Small
Medium
Large
States
Default
Filled
Disabled
Read only
Validation

Enter a valid email address.

Error

Shown across all routes.

Required
States
Placeholder
Selected
Disabled
Validation

Pick an approval status.

Error
Compositions

Workspace

Grouped content lives on a contained surface.
Basic

Route policy

NorthwindActive
Secondary approvers inherit workspace defaults.
With status
Variants
primary
Primary
secondary
Secondary
success
Success
warning
Warning
error
Error
States
Workspace
Owner
Status
OperationsDanielReady
FinanceMarielaReview
SupportJordanBlocked
Populated
Workspace
Owner
Status
No data
Empty
Active item
Overview panel
First active
Activity panel
Second active
Surface
Trigger + dialog
Light ground contrastWCAG AA clean
Every checkable color pair meets its required ratio.