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
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 · Page Structure · 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
Structures
Structures

Structures

Active profilePlatform Flagship
Runtime postureRottay / modern
Reusable page chrome and workspace scaffolding for operational products.
Runtime controls
TenantRottay
21 structures5 groups

Structures

The page-scaffolding layer for headers, command rails, record framing, dashboard context, and feedback shells.
IdentityControlContextFeedback
How to read this layer
Page chrome before surfaces
Reach for structures once the underlying pattern is chosen and the remaining problem is page-level hierarchy, separators, command placement, or supporting context.
Patterns
Reusable task behavior
Structures
Page framing around the task
Surfaces
Full route contract
Groups
5
Headers, workspaces, records, dashboards, and feedback shells.
Surface recipes
36
Structures should stay reusable across surface-level route contracts.
Workspace tools
10
The densest group proves how much command scaffolding the system can support.
Primary scope
Page chrome
This layer is about framing, section rhythm, and supporting context around tasks.

Read The Layer Fast

These cues should help teams decide quickly whether the problem belongs in structures or should stay lower in the stack.
Premium docs guidance tray
Use when
The task widget already exists, but the screen around it still needs hierarchy, command placement, or breathing room.
Expect
Headers, toolbars, section framing, guidance trays, rails, and loading shells that make dense pages readable.
Escalate after
Patterns prove the reusable task first. Structures then frame that task before surfaces take over full-route contracts.

Browse Groups

Start with the screen responsibility, then drill into the structure export.
Patterns to Structures to Surfaces

Headers

5 exports
headers
What this group solves
Headers establish page identity fast so the screen does not need extra orientation copy.
Owns
Titles, status, counts, breadcrumbs, and primary actions.
Best for
Collections, details, forms, dashboards
Key exports
Route into detail view
CollectionHeader
DashboardHeader
DetailHeader
EditHeader
+1 more
Pairings
Open group docs
PatternDataTablePatternFormBuilderDashboardSurface

Workspace

10 exports
workspace
What this group solves
Workspace structures wrap dense patterns with the command layer needed for repeat use.
Owns
Search, filters, view modes, selections, and operator controls.
Best for
Admin collections, queues, operator desks
Key exports
Route into detail view
ActiveFiltersBar
ColumnMenu
ExportButton
FieldFiltersPanel
+6 more
Pairings
Open group docs
PatternDataTablePatternGridViewCollectionWorkspaceSurface

Record

2 exports
record
What this group solves
Record structures keep inspection and editing readable once the page moves beyond a simple form.
Owns
Sectioning and field framing for entity-heavy screens.
Best for
Profiles, account detail, settings, entity editing
Key exports
Route into detail view
Record
FormSections
Pairings
Open group docs
DetailSurfaceDetailFormSurfaceRecordWorkbenchSurface

Dashboard

3 exports
dashboard
What this group solves
Dashboard structures help statistics and supporting modules land in the right order.
Owns
Insight framing, metric rhythm, and supporting context.
Best for
Analytics, KPI walls, operations reporting
Key exports
Route into detail view
StatsHeader
DataTerminalCard
DashboardInsights
Pairings
Open group docs
PatternStatsGridDashboardSurfaceOperationalSurface

Feedback

1 exports
feedback
What this group solves
Feedback structures keep loading and high-attention states consistent instead of leaving dead air.
Owns
Route-level waiting, transition, and blocking states.
Best for
Loading routes, long-running actions, blocking states
Key exports
Route into detail view
LoadingOverlay
Pairings
Open group docs
FormSurfaceCommandCenterSurfaceLoading states

Layer Fit

Structures frame the page around reusable tasks.
Primitives
Patterns
Structures
Surfaces
Primitives97 documented routes
Patterns48 documented routes
StructuresCurrent section
21
Headers
Workspace
Record
Dashboard
Feedback
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern