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
48
Data
Forms
Visualization
Communication
Workflow
Navigation
Misc
21
Headers
Workspace
Record
Dashboard
Feedback
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 ยท Surface Recipes ยท 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
Surfaces
Surfaces

Surfaces

Active profilePlatform Flagship
Runtime postureRottay / modern
Full-page showcases demonstrating how the system behaves in realistic workflows.
Runtime controls
36 surfaces
6 domains

Surfaces

Full-page contracts that compose structures and patterns while the application supplies data, routing, permissions, and policy.
Config-first
Page-level
Reusable recipes
Contract reading
The DS should own composition and defaults while the application keeps the data, routes, and policy visible through config.
Domains6
Engines3
Contract styleConfig-first
ScopeFull page
Escalation cue
Reach for a surface after primitives, patterns, and structures have already answered the smaller questions and the page still needs a consistent shell.

Read the Surface Contract

Tighten the boundary first, then browse a domain recipe with the right expectations.
Declarative first

Usage Contract

Config-first
Surfaces work best when the config reads like the screen you want to ship.
Declarative usagePaste-ready example that shows the base contract first.
tsx
13 lines
Consumption
Runtime-aware snippet

Browse Domains

Pick the kind of product screen you need, then jump into a surface recipe.
Highest DS layer
Each domain card separates the screen promise, best-fit scenarios, and starter recipes so the overview reads like a routing shelf instead of a wall of copy.

Admin

8 recipes
admin
Admin surfaces package repeated back-office screens into reusable page contracts.
Use when
Run internal systems, settings, and governance flows.
Best for
Admin consoles, settings, multi-tenant control planes
Starts with
SettingsSurface
TeamSurface
AuditSurface
Key surfaces
Audit
Billing
File Browser
Import Export
+4 more

Data

7 recipes
data
Data surfaces turn lists, dashboards, reports, and comparisons into consistent layouts.
Use when
Present entities, metrics, search, and analysis as full screens.
Best for
Reporting, analytics, entity browsing, search
Starts with
ListSurface
DashboardSurface
ReportSurface
Key surfaces
Compare
Dashboard
Detail
List
+3 more
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
SurfacesCurrent section
36
Admin
Data
Experience
Forms
Operations
Workspace
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar ยท solid dividers
TenantRottay
EngineModern
Declarative usageTSX
Quick copy
const usersSurface = { title: 'Users', entityName: 'user', views: ['table', 'grid'], columns: userColumns, data: users, actions: { create: true, export: true, }, }; <ListSurface config={usersSurface} />

Ownership Split

Clear boundary
Design system ownsComposition, chrome, slots, defaults, and repeatable page behavior.
Application ownsData, routes, permissions, mutations, adapters, and domain semantics.
Best splitKeep the surface declarative and pass domain wiring through config.
Escalate to surfaces whenThe screen needs durable page chrome, layout slots, and action defaults that should repeat across routes.
Stay below the surface whenThe work is still a local interaction, a single task module, or a structure choice rather than a full screen contract.
Keep config readableA teammate should be able to scan the config object and understand the page without opening supporting files.

Experience

9 recipes
experience
Experience surfaces cover the public and user-facing edges of the system.
Use when
Ship user-facing journeys with a stronger product posture.
Best for
Auth, onboarding, messaging, marketing, branded journeys
Starts with
AuthSurface
OnboardingSurface
MarketingSurface
Key surfaces
Auth
Chat
Editor
Empty State
+5 more

Forms

4 recipes
forms
Form surfaces lift builders and sections into complete authoring screens.
Use when
Wrap drafting, editing, and review into page-level flows.
Best for
Creation flows, onboarding, editing, reviewable submissions
Starts with
FormSurface
DetailFormSurface
WizardSurface
Key surfaces
Detail Form
Form
Guided Draft Form
Wizard

Operations

4 recipes
operations
Operations surfaces target day-to-day execution work where visibility and action speed matter.
Use when
Support live work, scheduling, queues, and monitoring.
Best for
Command centers, staffing, activity streams, live desks
Starts with
KanbanSurface
SchedulerSurface
OperationalSurface
Key surfaces
Activity
Kanban
Operational
Scheduler

Workspace

4 recipes
workspace
Workspace surfaces combine multiple views and support rails into heavier working environments.
Use when
Assemble the richest operator desks in the system.
Best for
Decision queues, collection workbenches, multi-mode products
Starts with
CollectionWorkspaceSurface
DecisionInboxSurface
RecordWorkbenchSurface
Key surfaces
Collection Workspace
Command Center
Decision Inbox
Record Workbench