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.
FoundationsCurrent section
4
Tokens
Themes
109
93
49
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 · System Layer · 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
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 overlaysGradient accentsFrosted chromeHairline borders
Engines
Icons
Primitives93 documented routes
Display
Inputs
Feedback
Layout
Navigation
Overlay
Patterns49 documented routes
Data
Forms
Visualization
Communication
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell
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
Tokens

Tokens

Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Runtime controls
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.
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
PrimarySecondarySemantic
Brand, neutral, and semantic scales that keep products recognizable while preserving legibility.
Read forFrom palette to semantic intent.

Spacing

13 steps
1
2
Best used for premium framing, not every default surface.
Keep dense data workflows crisp. Spend visual atmosphere on heroes, overlays, and story moments.
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.
Engine accentsRadius, shadows, motion, density.
Tenant overridesBrand and vertical-specific values.
Token accessToken-aware snippet from the active showroom runtime.
tsx
6 lines
Consumption
Runtime-aware snippet
const tokens = useTokens();

tokens.spacing[4];
tokens.colors.primaryScale[500];
tokens.borderRadius.md;
tokens.motion.hover;
3
4
5
A rhythm scale that keeps lists, cards, forms, and dashboards aligned across densities.
Read forWhitespace behaves like infrastructure.

Typography

Hierarchy
DisplayProduct language with hierarchyBody copy, labels, helpers, and mono diagnostics.
Sizes, weights, line heights, and families for UI copy, headings, diagnostics, and data-heavy screens.
Read forReadable by default, expressive when needed.

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.
Token accessTSX
Quick copy