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/Interaction cadence

Motion is where a neutral component API starts to feel product-specific.

Hover timing, lift transforms, spring easing, and duration scaling give each engine a different sense of confidence. Motion should clarify interaction, not perform for its own sake.
Hover200ms cubic-bezier(0.16, 1, 0.3, 1)Applied to most micro-interactions.
TransformtranslateY(-1px)Lift or scale personality on hover.
Duration scale1xControls overall motion pacing.
Active motion profile
Same component, different choreography depending on engine.

Engine motion profiles

Three personalities

Transition presets

Micro-interactions
fast100ms ease
Useful for toggles, checks, and icon state changes.
normal200ms ease
The everyday hover and focus baseline.
slow300ms ease
Panel open states and deliberate layout shifts.
slower500ms ease
Use sparingly for narrative transitions and dramatic reveals.

Hover behavior

Hover is where engines advertise their personality. Try the cards below to feel lift, scale, and combined movement.
Hover
Lift
Hover
Scale
Hover
Combined

Entrance choreography

Useful presets for modules entering premium documentation and workspace UI.
fadeIn
slideUp
scaleIn
Motion usagePaste-ready example that shows the base contract first.
tsx
10 lines
Consumption
Runtime-aware snippet
const tokens = useTokens();

<Box
  style={{
    transition: `all ${tokens.motion.hover}`,
    transform: isHovered ? tokens.motion.transform : 'none',
  }}
/>

transition: var(--ds-transition-normal);
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
TokensMotion

Motion

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