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
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 · Component 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
Layout

Layout

Active profilePlatform Flagship
Runtime postureRottay / modern
Primitives contains 15 documented entries.
Runtime controls
TenantRottay
Primitives/Layout
Rhythm and structure
15 components

Layout

Layout primitives are the invisible scaffolding that determine balance, spacing, responsiveness, and page-level consistency.
OutcomeA strong showroom should display layout as composition power, not as blank utility wrappers.
Components
15
Indexed in this category
Runtime
3 engines
Classic, Modern, Rustic
Inspect first
spacing rhythm
Suggested first comparison lens
Catalog
15 indexed

Browse components

Open a component to inspect usage guidance, live preview coverage, and engine support without losing the category context.
PrimitivesCurrent section
Display
Inputs
Feedback
Layout
Aspect Ratio
Box
Collapse
Container
Divider
Flex
Grid
Hide
Layout
Responsive Slot
Scroll Area
Show
Space
Splitter
Stack
Navigation
Overlay
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern
Good starting scenes
3 scenes

Where this category earns its keep

Use these screens first when you want evidence of hierarchy, responsiveness, and runtime polish.
page shells
sections
adaptive grids
Audit lens

What to inspect

Compare one quality lens at a time so the category does not collapse into generic component browsing.
spacing rhythm
alignment
responsive behavior
Fastest entry
4 picks

Start with these

These references are the quickest way to see live DS behavior in this category before you branch into the full index.
AspectRatioContainer that maintains a fixed aspect ratio
BoxGeneric layout box replacing raw div
CollapseExpandable/collapsible content panel
ContainerMax-width centered content wrapper
Primitive

AspectRatio

3/3 engines
Container that maintains a fixed aspect ratio
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstspacing rhythm
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Box

3/3 engines
Generic layout box replacing raw div
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstalignment
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Collapse

3/3 engines
Expandable/collapsible content panel
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstresponsive behavior
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Container

3/3 engines
Max-width centered content wrapper
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstspacing rhythm
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Divider

3/3 engines
Horizontal or vertical content separator
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstalignment
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Flex

3/3 engines
Flexbox layout container with gap and alignment
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstresponsive behavior
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Grid

3/3 engines
CSS grid layout container
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstspacing rhythm
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Hide

3/3 engines
Conditionally hide content at breakpoints
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstalignment
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Layout

3/3 engines
Page-level layout with header, sider, content, footer
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstresponsive behavior
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

ResponsiveSlot

3/3 engines
Slot that renders different content per breakpoint
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstspacing rhythm
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

ScrollArea

3/3 engines
Custom scrollbar container
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstalignment
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Show

3/3 engines
Conditionally show content at breakpoints
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstresponsive behavior
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Space

3/3 engines
Inline spacing between child elements
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstspacing rhythm
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Splitter

3/3 engines
Resizable split pane container
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstalignment
Engine supportFull runtime coverage
Classic
Modern
Rustic
Primitive

Stack

3/3 engines
Vertical or horizontal stack with consistent spacing
Spatial rhythm
Composition power
Sections align before custom page chrome appears.Spacing and balance should feel deliberate under load.
rhythm
balance
grid
gap
flow
Inspect firstresponsive behavior
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page