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
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 · Pattern Library · 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
Patterns
Patterns

Patterns

Active profilePlatform Flagship
Runtime postureRottay / modern
Composite solutions for dashboards, workflows, communication, and product operations.
Runtime controls
TenantRottay
47 task-level modulesReference index

Patterns

Patterns are where the design system starts feeling productive. They package recurring tasks so teams can ship review flows, workspaces, and dashboards without rebuilding workflow logic screen by screen.
Use this page as a routing map. Open a group or pattern detail when you want the live DS/runtime reference.
Task modulesWorkflow logicReusable screens
Atlas snapshot
System scale
Pattern groups
7
Capability shelves to browse first.
Chart types
18
Dedicated chart grammar catalog.
Engines
3
Classic, modern, and rustic references.
Focus
Task flows
Reusable behavior instead of raw parts.
How to read the shelf
Use patterns when
The task needs durable state, review flow, or behavior that will repeat across multiple screens.
Stay at primitives when
The work is still local UI composition, spacing cleanup, or a one-off interaction without packaged logic.
Pair with surfaces when
The task module is stable enough to slot into a broader page contract or workspace shell.

Fast paths

Jump straight to the shelf that best matches the product job in front of you.
Routing shortcuts
Operate data-rich workspaces
Collections
Search, filtering, saved views, statistics, and dense data operations.
Guide capture and authoring
Authoring
Validation choreography, section pacing, and multi-step setup logic.
Visualize live systems
Analysis
Planning, scheduling, analytics, kanban, maps, and visual interpretation.
Coordinate activity and review
Operations
Review queues, activity streams, and team-facing decision loops.
Need the chart catalog?
Jump to charts when the question is chart grammar, not a broader visualization workflow.
18 chart types

Browse by reusable job

Each group is framed around a product capability question and the surfaces it most naturally powers.
Group atlas
Open a group card when you need the promise, best-fit scenarios, common surface pairings, and a quick sample of modules in one place.

Data

Package repeatable data exploration work.
11 items
Data patterns stop teams from rebuilding table state, views, stats, bulk selection, and collection affordances screen by screen.
Use when
Package repeatable data exploration work.
Best for
Collections, reports, grids, saved views, and repeatable data operations
Common surfaces
ListSurfaceReportSurface+1 more
Sample modules
PatternDataTable
BulkSelectToggle
CellRenderers
+8 more

Forms

Turn structured capture flows into reusable systems.
5 items
Forms patterns package field orchestration, rules, and multi-step authoring so teams can think in workflows instead of isolated inputs.
Use when
Turn structured capture flows into reusable systems.
Best for
Setup flows, filters, invoice flows, wizards, and guided drafting
Common surfaces
FormSurfaceWizardSurface+1 more
Sample modules
PatternFormBuilder
FilterBuilder
FilterPanel
+2 more

Visualization

Reveal systems, trends, and spatial relationships.
5 items
Visualization patterns cover the interactive models behind calendars, kanban boards, maps, trees, timelines, and the dedicated charts catalog.
Use when
Reveal systems, trends, and spatial relationships.
Best for
Dashboards, planning tools, analytics, scheduling, spatial stories
Common surfaces
DashboardSurfaceVisualizationSurface+1 more
Sample modules
PatternCalendarView
PatternKanbanBoard
PatternMapView
+2 more

Communication

Make activity and collaboration legible.
6 items
Communication patterns turn feeds, comments, assistant panels, and notification behaviour into reusable product-grade modules.
Use when
Make activity and collaboration legible.
Best for
Commenting, AI assistant panels, activity logs, notification centers
Common surfaces
ChatSurfaceNotificationSurface+1 more
Sample modules
ActivityLog
Assistant
CommentThread
+3 more

Workflow

Model operational review and decision loops.
5 items
Workflow patterns exist where UI carries process: approvals, moderation, staffing, ledgers, and structured review queues.
Use when
Model operational review and decision loops.
Best for
Approvals, moderation, operations backoffices, scheduling matrices
Common surfaces
DecisionInboxSurfaceOperationalSurface+1 more
Sample modules
ApprovalInbox
ApprovalWorkflow
ModerationGallery
+2 more

Navigation

Give power users faster ways to move and switch context.
5 items
Navigation patterns handle command layers, workspace switching, shortcuts, locale changes, and environment context beyond basic tabs and menus.
Use when
Give power users faster ways to move and switch context.
Best for
Power user shells, multi-workspace tools, global search, cross-app utilities
Common surfaces
CollectionWorkspaceSurfaceCommandCenterSurface+1 more
Sample modules
CommandPalette
EnvironmentToggle
PatternLocaleSwitcher
+2 more

Misc

House specialised product modules that still deserve reuse.
10 items
Misc is where branded or niche but still repeatable modules live, from pricing tables and file managers to token inspectors and workbench headers.
Use when
House specialised product modules that still deserve reuse.
Best for
Product-specific widgets that appear in more than one app or screen
Common surfaces
PricingSurfaceRecordWorkbenchSurface+1 more
Sample modules
BrandingPreviewSandbox
CockpitHeader
EmptyState
+7 more
Primitives97 documented routes
PatternsCurrent section
48
Data
Forms
Visualization
Communication
Workflow
Navigation
Misc
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern