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
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 · Component 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
Primitives/Display
Readability and content delivery19 components

Display

Display primitives carry meaning, hierarchy, and quiet density without forcing product teams to rebuild visual semantics from scratch.
OutcomeUse this category to prove the system can present information with polish before layout or workflow logic enters the room.
Catalog
19 indexed

Browse components

Open a component to inspect usage guidance, live preview coverage, and engine support without losing the category context.
Engines
Icons
PrimitivesCurrent section
93
Display
Avatar
Badge
Calendar
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
Display

Display

Active profilePlatform Flagship
Runtime postureRottay / modern
Primitives contains 19 documented entries.
Runtime controls
TenantRottay
EngineModern
Components
19
Indexed in this category
Runtime
3 engines
Classic, Modern, Rustic
Inspect first
legibility
Suggested first comparison lens
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.
dashboardsmetadata panelsdetail views
Audit lens

What to inspect

Compare one quality lens at a time so the category does not collapse into generic component browsing.
legibility
fallback states
content density
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.
AvatarUser or entity avatar with image, initials, or icon fallback
Primitive

Avatar

3/3 engines
User or entity avatar with image, initials, or icon fallback
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
density
Primitive

Badge

3/3 engines
Small count or status indicator attached to another element
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Calendar

3/3 engines
Date calendar panel for date selection and display
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Callout

3/3 engines
Highlighted block for tips, warnings, or important notes
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Card

3/3 engines
Contained surface for grouping related content
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Carousel

3/3 engines
Horizontally scrollable set of slides
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Descriptions

3/3 engines
Key-value list for displaying metadata fields
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Empty

3/3 engines
Placeholder shown when a container has no data
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Image

3/3 engines
Responsive image with lazy loading and fallback
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Kbd

3/3 engines
Keyboard shortcut indicator
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

List

3/3 engines
Ordered or unordered list with optional actions
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

QRCode

3/3 engines
QR code generator for URLs or text
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Statistic

3/3 engines
Large numeric value with label and optional trend
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Table

3/3 engines
Basic data table primitive with rows and columns
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Tag

3/3 engines
Compact label for categorization or filtering
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Timeline

3/3 engines
Vertical sequence of chronological events
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Tooltip

3/3 engines
Contextual popup shown on hover or focus
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Tree

3/3 engines
Hierarchical tree structure with expand/collapse
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Primitive

Typography

3/3 engines
Text rendering with heading, paragraph, and inline styles
Read surface
Legibility first
Headline, support, and metadata stay legible.Quiet information density without losing hierarchy.
content
hierarchy
status
badge
Callout
Card
Carousel
Descriptions
Empty
Image
Kbd
List
QRCode
Statistic
Table
Tag
Timeline
Tooltip
Tree
Typography
Inputs
Feedback
Layout
Navigation
Overlay
BadgeSmall count or status indicator attached to another element
CalendarDate calendar panel for date selection and display
CalloutHighlighted block for tips, warnings, or important notes
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
Open referenceJump into usage guidance, API surface, and runtime-specific notes.
View page