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
93
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 · Pattern Library · 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
48 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
11
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.

Commerce

Turn pricing and transactional decisions into a coherent surface.
1 items
Commerce patterns package the comparison and decision structures that sit in front of a purchase or plan choice, from feature matrices to structured plan tiers.
Use when
Turn pricing and transactional decisions into a coherent surface.
Best for
Pricing pages, plan comparison, upsell and billing decision points
Common surfaces
PricingSurfaceBillingSurface+1 more
Sample modules
PricingTable

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

Customization

Let a tenant see and shape their own visual identity live.
3 items
Customization patterns expose tenant branding and token surfaces themselves: live preview sandboxes, inspection tools, and the reusable card that shows what a tenant's theme actually looks like.
Use when
Let a tenant see and shape their own visual identity live.
Best for
Brand editors, live theme preview, developer and token inspection tools
Common surfaces
BrandStudioSurfacePreviewSurface+1 more
Sample modules
BrandingPreviewSandbox
TenantPreview
TokenInspector

Data

Package repeatable data exploration work.
12 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
+9 more

Feedback

Adapt feedback flows to the device without changing their intent.
2 items
Feedback patterns package responsive modal, drawer, and sheet posture so confirmation and interruption stay coherent.
Use when
Adapt feedback flows to the device without changing their intent.
Best for
Responsive overlays, confirmations, guided interruptions
Common surfaces
FormSurfaceDetailSurface+1 more
Sample modules
AdaptiveOverlay
EmptyState

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

Identity

Give people a consistent, reusable face across the product.
1 items
Identity patterns package how a person is represented: compact profile cards, avatars, and identity chrome that stays consistent wherever a user needs to be recognized.
Use when
Give people a consistent, reusable face across the product.
Best for
User lists, mentions, assignee pickers, profile summaries
Common surfaces
DetailSurfaceListSurface+1 more
Sample modules
UserProfileCard

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

Shell

Frame a page consistently before any content loads.
3 items
Shell patterns own the outer chrome of a screen: page-level layout, dense operational headers, and workbench framing that hosts everything else without knowing what it contains.
Use when
Frame a page consistently before any content loads.
Best for
App shells, operational dashboards, workbench-style multi-panel pages
Common surfaces
DashboardSurfaceCollectionWorkspaceSurface+1 more
Sample modules
CockpitHeader
PageShell
WorkbenchHeader

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

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
Engines
Icons
Primitives93 documented routes
Display
Inputs
Feedback
Layout
Navigation
Overlay
PatternsCurrent section
49
Data
Forms
Visualization
Communication
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
PatternsPatterns

Patterns

Active profilePlatform Flagship
Runtime postureRottay / modern
Composite solutions for dashboards, workflows, communication, and product operations.
Runtime controls
TenantRottay
EngineModern
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell