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
Spacing

Spacing

Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Runtime controls
Tokens
/
Rhythm scale
Quick jumps
0-12 scale
Density comparison
Layout recipes
Runtime editorial reference

Spacing

Spacing is infrastructure for dense UI. These steps control inline gaps, stack rhythm, panel padding, and page cadence without resorting to arbitrary pixel picks.
Featured read
What to validate
Default card padding, section cadence, and whether engine density still preserves semantic step meaning.
Steps
13
0 through 12
Default rhythm
16px
Common component padding
Section cadence
40px
Module separation
Density scale
1.000x
Resolved against 16px baseline
Authoring rule
Think in semantic steps and layout intent first, not one-off pixel tweaks.
Current baseline
spacing[4] resolves to 16px and spacing[8] resolves to 40px on this page.

Full scale

The base scale runs from 0 to 96px. Engines can resolve those steps slightly differently without breaking layout intent.
13 steps
Reset / collapse
Inline micro gap
Icon + label
Small stack rhythm
Default card padding
Panel separation
Generous content block
Section separation
Page sub-section
Hero breathing room
Page-level framing
Large module gap
Maximum roomy rhythm

Engine density comparison

Same semantic spacing keys, different tactile feel.
Classic vs Modern vs Rustic
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
00pxbase 0px
14pxbase 4px
28pxbase 8px
312pxbase 12px
416pxbase 16px
520pxbase 20px
624pxbase 24px
732pxbase 32px
840pxbase 40px
948pxbase 48px
1064pxbase 64px
1180pxbase 80px
1296pxbase 96px

Common layout recipes

Compact toolbargap 2 / padding 3Icons, labels, and filters stay tight without touching.
Standard cardpadding 4 / stack 3The default admin module baseline.
Feature sectionpadding 6 / gap 6Used where copy and examples need extra air.
Editorial heropadding 8-10Reserve the largest steps for framing moments.
Spacing usagePaste-ready example that shows the base contract first.
tsx
11 lines
Consumption
Runtime-aware snippet
Spacing usageTSX
Quick copy
const tokens = useTokens();

<Card style={{ padding: tokens.spacing[4] }}>
  <Stack spacing={tokens.spacing[3]}>
    <Text>Compact content rhythm</Text>
  </Stack>
</Card>

<Box style={{ marginTop: tokens.spacing[8] }}>
  <Section />
</Box>