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
Tokens/Elevation

Shadows define hierarchy, but the real work is separation and focus.

Premium documentation needs depth that clarifies layers instead of adding mud. Our engines keep the same elevation semantics, while each one interprets them differently.
Default activemdPanels, dropdowns, and card focus states.
Maximum liftxlUsed sparingly for high-attention overlays.
Engine-awareTone shiftedCorporate, bold, or whisper-light depth.
Elevation ladder
Use contrast in small doses; clarity comes from progression.
sm
smtokens.shadows.sm
Cards at rest, low-emphasis modules, and contained utility chrome.var(--ds-elevation-1)
md
mdtokens.shadows.md
Default elevation for active cards, menus, and common overlays.var(--ds-elevation-2)
lg
lgtokens.shadows.lg
Prominent lift for modals, drawers, and command surfaces.var(--ds-elevation-3)
xl
xltokens.shadows.xl
Maximum emphasis for spotlight or high-focus overlay layers.var(--ds-elevation-4)

Engine comparison

Same elevation semantics

Shadow heuristics

Prefer border + subtle shadow for dense admin tables.
Lift interactives from sm to md on hover instead of inventing custom values.
Use lg and xl for modal families, command palettes, and editorial spotlight modules.
Dark or colorful backgrounds may need stronger surface contrast before stronger shadows.
Shadow usagePaste-ready example that shows the base contract first.
tsx
9 lines
Consumption
Runtime-aware snippet
const tokens = useTokens();

<Card style={{ boxShadow: tokens.shadows.sm }} />

<Box
  style={{
    boxShadow: isActive ? tokens.shadows.lg : tokens.shadows.md,
  }}
/>
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
TokensShadows

Shadows

Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Runtime controls
TenantRottay
EngineModern
Shadow usageTSX
Quick copy