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
Display

Display

Active profilePlatform Flagship
Runtime postureRottay / modern
Primitives contains 19 documented entries.
Runtime controls
TenantRottay
Primitives/Display
Readability and content delivery
19 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.
Components
19
Indexed in this category
Runtime
3 engines
Classic, Modern, Rustic
Inspect first
legibility
Suggested first comparison lens
Catalog
19 indexed

Browse components

Open a component to inspect usage guidance, live preview coverage, and engine support without losing the category context.
PrimitivesCurrent section
Display
Avatar
Badge
Calendar
Callout
Card
Carousel
Descriptions
Empty
Image
Kbd
List
QRCode
Statistic
Table
Tag
Timeline
Tooltip
Tree
Typography
Inputs
Feedback
Layout
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.
dashboards
metadata panels
detail 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
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
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
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstfallback states
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstcontent density
Engine supportFull runtime coverage
Classic
Modern
Rustic
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
density
Inspect firstlegibility
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
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