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.
FoundationsCurrent section
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
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 · System Layer · 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
Tokens

Tokens

Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Runtime controls
Foundations
/
Token layer
Quick jumps
Colors
Spacing
Typography
Radius
Shadows
Motion
Runtime editorial reference

Tokens

Tokens are the runtime contract that every primitive, pattern, and surface resolves before it renders. They keep visual language portable across engines and tenants.
Featured read
Start here when
You need to trace why a screen feels inconsistent, too dense, too soft, or off-brand before changing components.
Detail pages
6
Each token family has its own route
Runtime model
CSS variables
No rebuild required
Engine-aware
3 personalities
Classic, Modern, Rustic
Brandable
Tenant chain
Base -> engine -> vertical -> tenant
What these pages show
Raw values, production-facing previews, and the authoring rules that keep tokens semantic instead of ad hoc.
Resolution pipeline
Base primitives -> engine accents -> tenant overrides.
Inline topic
No separate route

Glass and surface treatments live inside the token story

The previous page promised a dedicated Glass detail page that does not exist. Surface chemistry is documented here instead as part of theme and token composition: blur, translucency, gradients, hairline borders, and layered shadows.
Glass overlays
Gradient accents
Frosted chrome
Hairline borders
Best used for premium framing, not every default surface.
Keep dense data workflows crisp. Spend visual atmosphere on heroes, overlays, and story moments.
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
TenantRottay
EngineModern
Authoring baseline

Token system facts

A compact read on the runtime properties that make tokens portable across engines, tenants, and page types.
Runtime-ready
CSS variables
Tokens resolve without rebuilding bundles.
Engine-aware
Classic / Modern / Rustic
Radius, shadow, motion, and spacing can diverge safely.
Brandable
Tenant override chain
Base -> engine -> vertical -> tenant.
Token access
Live model

Read the token chain in runtime order

The fastest way to diagnose drift is to read tokens in the same order the UI resolves them: base primitives, engine accents, then tenant overrides.
Base primitivesCore scales and neutral defaults.
Engine accentsRadius, shadows, motion, density.
Tenant overridesBrand and vertical-specific values.
Token catalog
6 detail pages

Token families

Each detail page shows both raw values and how those tokens change the feel of production UI.

Colors

7 scales
Primary
Secondary
Semantic
Brand, neutral, and semantic scales that keep products recognizable while preserving legibility.
Read forFrom palette to semantic intent.

Spacing

13 steps
1
2
3
4
5
A rhythm scale that keeps lists, cards, forms, and dashboards aligned across densities.
Read forWhitespace behaves like infrastructure.

Typography

Hierarchy
Sizes, weights, line heights, and families for UI copy, headings, diagnostics, and data-heavy screens.
Read forReadable by default, expressive when needed.
Authoring rules
Authoring rules

Implementation contract

These are the habits that keep token docs useful in production instead of turning them into static palette references.
Read from context
Reach for useTokens() or CSS custom properties before inventing local values.
Stay semantic
Prefer semantic aliases for text, feedback, and state instead of raw palette picks.
Let engines differ
Radius, shadow, and motion should change per engine without forcing component API changes.
Brand at the edge
Tenant overrides should personalize the experience while preserving core accessibility and spacing logic.
Token accessToken-aware snippet from the active showroom runtime.
tsx
6 lines
Consumption
Runtime-aware snippet
Token accessTSX
Quick copy
const tokens = useTokens();

tokens.spacing[4];
tokens.colors.primaryScale[500];
tokens.borderRadius.md;
tokens.motion.hover;
DisplayProduct language with hierarchyBody copy, labels, helpers, and mono diagnostics.

Radius

6 levels
Corner language that shifts product tone across Classic, Modern, and Rustic without changing APIs.
Read forA fast way to feel the engine.

Shadows

4 elevations
Elevation tokens that separate layers, reinforce state, and keep dense admin surfaces scannable.
Read forDepth with intent, not decoration.

Motion

Timing profile
Hover, transform, spring, and duration scales that give each engine its interaction cadence.
Read forMotion is personality plus feedback.