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
36
Admin
Data
Experience
Forms
Operations
Workspace
3
Platform
Bit Hire
Evnto
1
Playground
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 · Developer Docs · 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
Developers
Developers
Getting Started

Getting Started

Active profilePlatform Flagship
Runtime postureRottay / modern
Install, import, and begin composing the design system in product code.
Runtime controls
Back to Developers
Getting started
First 30 minutes of adoption

The fastest path to value is direct: install, mount, render one healthy panel, then choose engine and tenant with intent.

This page is optimized for the first successful render. It blocks the common failure mode where teams discuss architecture or theming before the design system has ever produced a credible route inside the app.
Primary goalOne healthy route
Prove the DS is alive before discussing abstractions.
Key decisionsEngine + tenant
Choose posture and brand intentionally, not by accident.
Authoring habitUse DS primitives first
Avoid wrapper debt until real repetition appears.
Recommended sequenceInstall once, mount the provider, render one convincing route, validate engine posture, then let tenant branding handle the identity layer.
Install
Mount
Render
Choose engine
Apply tenant

First successful render

The baseline that proves the DS is mounted correctly
Healthy
ProviderMounted
Enginemodern
Tenantrottay
OutcomeCredible UI
If this level of composition renders cleanly, the next problems are classification and scale, not setup uncertainty.
Provider mounted
Engine selected
Tenant resolved
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
DevelopersCurrent section
2
Developers
Getting Started
Architecture
roundedtop bar · solid dividers
TenantRottay
EngineModern
Preflight checklist
01
Know which workspace owns the app shell that should render the DS.
02
Pick the initial engine before polishing the first route.
03
Pick a tenantSlug or baseline brand for the first success state.
04
Verify TypeScript resolves the workspace package correctly.
Delivery sequence
5 setup steps

Setup runway

Follow this sequence to get from zero to a credible product panel without wrapper debt or runtime confusion.
1

Install the package in the real app workspace

Add the design system where the UI actually renders so imports, types, and styles resolve from the same workspace boundary.
Success signalThe app can import DS components without alias hacks or duplicate package copies.
Watch forInstall once at the UI workspace instead of sprinkling local wrappers across packages.
InstallToken-aware snippet from the active showroom runtime.
bash
1 line
Consumption
Risk audit

Common failure modes

These are the adoption mistakes that make docs feel abstract and implementation feel slower than it needs to be.
Healthy render never happens
Teams keep talking about tokens and architecture without ever proving the DS can render a real panel in the actual app shell.
Fix
Render one small but credible route immediately and use that as the baseline.
Too many wrappers, too early
Custom layout utilities appear before the DS primitives are given a real chance to compose the screen.
Fix
Author the first route with DS primitives directly, then create wrappers only where repetition is undeniable.
Engine choice is left implicit
A route inherits whatever visual tone happened to be mounted instead of selecting the product posture intentionally.
Fix
Choose Classic, Modern, or Rustic early and validate that choice with the playground.
Next step

After the first render

Once the provider is healthy and one route feels real, the next decision is where to deepen: ownership, visual proof, or brand overrides.
Need the ownership model next?
Use the 4-tier architecture guide before adding shared APIs or abstractions.
Need visual proof next?
Compare scenes across engines and tenants before polishing product code.
Need brand overrides next?
Inspect which brand variables move the UI most without changing the markup.
Runtime-aware snippet
InstallBASH
Quick copy
pnpm add @rottay/design-system
2

Mount DesignSystemProvider at the correct boundary

The provider establishes engine, tenant variables, and token access. Put it high enough that real route content shares the same runtime context.
Success signalTokens, engine styles, and tenant variables are available to every DS child below.
Watch forDo not mount the provider so low that neighboring route content uses different runtime assumptions.
Root layoutToken-aware snippet from the active showroom runtime.
tsx
17 lines
Consumption
Runtime-aware snippet
3

Render one convincing DS panel

Use DS primitives and cards to prove composition is healthy before introducing custom wrappers or route-specific utility layers.
Success signalThe UI already looks like product software, not a starter template with tokens bolted on.
Watch forReach for Box, Flex, Stack, Text, Card, Button, and Badge before raw DOM scaffolding.
First panelToken-aware snippet from the active showroom runtime.
tsx
15 lines
Consumption
Runtime-aware snippet
4

Choose engine posture deliberately

Classic, Modern, and Rustic preserve the same consuming API while changing tone, density, and framing underneath.
Success signalThe same markup can pivot tone without any API churn in the route code.
Watch forEngine choice is a product posture decision, not a styling afterthought.
Engine choiceToken-aware snippet from the active showroom runtime.
tsx
7 lines
Consumption
Runtime-aware snippet
5

Let tenant branding handle last-mile identity

Keep business semantics in the app while BrandTheme variables control color, radius, shadow, and chrome details across the same component tree.
Success signalBrand identity moves through variables while the component tree remains stable and reusable.
Watch forDo not bury tenant-specific colors or spacing values inside route components.
Tenant identityToken-aware snippet from the active showroom runtime.
tsx
3 lines
Consumption
Runtime-aware snippet
<DesignSystemProvider tenantSlug="bithire" forceEngine="modern">
  <App />
</DesignSystemProvider>
Root layoutTSX
Quick copy
import { DesignSystemProvider } from '@rottay/design-system'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <DesignSystemProvider forceEngine="modern" tenantSlug="rottay"> {children} </DesignSystemProvider> </body> </html> ); }
First panelTSX
Quick copy
import { Badge, Card, Flex, Stack, Text } from '@rottay/design-system'; export function TeamPanel() { return ( <Card> <Stack spacing="md"> <Flex align="center" justify="between"> <Text as={"h2" as any} size="lg" weight="semibold">Users</Text> <Badge variant="success">Healthy</Badge> </Flex> <Text size="sm">Use DS layout primitives before inventing wrappers.</Text> </Stack> </Card> ); }
Engine choiceTSX
Quick copy
<DesignSystemProvider forceEngine="classic" tenantSlug="rottay"> <Button variant="primary">Classic enterprise tone</Button> </DesignSystemProvider> <DesignSystemProvider forceEngine="modern" tenantSlug="rottay"> <Button variant="primary">Modern product tone</Button> </DesignSystemProvider>
Tenant identityTSX
Quick copy