Premium Docs
Design System Showroom Density normal Platform Flagship
Landing
Playground
Navigator Library map
8 sections 212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS Runtime
Rottay / Modern Platform Flagship
Primary
#FFFFFF Secondary #A0A0A5
Compact runtime evidence across 3+ token signals.
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 goal One healthy route Prove the DS is alive before discussing abstractions.
Key decisions Engine + tenant Choose posture and brand intentionally, not by accident.
Authoring habit Use DS primitives first Avoid wrapper debt until real repetition appears.
Recommended sequence Install 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
Primitives 93 documented routes
Patterns 49 documented routes
Structures 24 documented routes
Surfaces 36 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers Current section
2 rounded top bar · solid dividers
Developers Developers Getting Started
Getting Started Active profile Platform Flagship
Runtime posture Rottay / modern
Install, import, and begin composing the design system in product code.
First successful render The baseline that proves the DS is mounted correctly If this level of composition renders cleanly, the next problems are classification and scale, not setup uncertainty.
Primary action
Default
Preflight checklist Know which workspace owns the app shell that should render the DS.
Pick the initial engine before polishing the first route.
Pick a tenantSlug or baseline brand for the first success state.
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 signal The app can import DS components without alias hacks or duplicate package copies.
Watch for Install once at the UI workspace instead of sprinkling local wrappers across packages.
Install Token-aware snippet from the active showroom runtime.
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.
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.
Copy
pnpm add @rottay/design-system
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 signal Tokens, engine styles, and tenant variables are available to every DS child below.
Watch for Do not mount the provider so low that neighboring route content uses different runtime assumptions.
Root layout Token-aware snippet from the active showroom runtime.
Consumption
Runtime-aware snippet
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>
);
}
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 signal The UI already looks like product software, not a starter template with tokens bolted on.
Watch for Reach for Box, Flex, Stack, Text, Card, Button, and Badge before raw DOM scaffolding.
First panel Token-aware snippet from the active showroom runtime.
Consumption
Runtime-aware snippet
Copy
Choose engine posture deliberately Classic, Modern, and Rustic preserve the same consuming API while changing tone, density, and framing underneath. Success signal The same markup can pivot tone without any API churn in the route code.
Watch for Engine choice is a product posture decision, not a styling afterthought.
Engine choice Token-aware snippet from the active showroom runtime.
Consumption
Runtime-aware snippet
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>
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 signal Brand identity moves through variables while the component tree remains stable and reusable.
Watch for Do not bury tenant-specific colors or spacing values inside route components.
Tenant identity Token-aware snippet from the active showroom runtime.
Consumption
Runtime-aware snippet
Copy <DesignSystemProvider tenantSlug="bithire" forceEngine="modern">
<App />
</DesignSystemProvider>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 choice TSX
Quick copy Tenant identity TSX
Quick copy