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
Colors
Colors
Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Color tokens carry both brand personality and interface meaning. This page shows the raw scale inventory, semantic pairings, and how the same token names adapt across tenants.
Featured read
What to inspect
Brand scales for recognition, neutrals for dense UI scaffolding, and semantic scales for reliable state feedback.
Scales
7
Neutral + brand + semantic families
Stops
10 each
50 through 900
Semantic pairs
4
Text and state references
Tenant previews
3
Same names, different identities
Interaction
Click any swatch below to copy its CSS custom property name.
Portable contract
Token names stay stable while theme values shift by tenant.
Full scale inventory
Explore the entire color contract, from soft surfaces at `50` to contrast-heavy accents at `900`.
Copyable CSS vars
Same token names, different brands
Primary scale stays portable because its meaning is stable, even when tenant personality changes.
Theme comparison
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
Neutral
--ds-color-neutral-*
10 stops
Primary
--ds-color-primary-*
10 stops
Secondary
--ds-color-secondary-*
10 stops
Success
--ds-color-success-*
10 stops
Warning
--ds-color-warning-*
10 stops
Error
--ds-color-error-*
10 stops
Info
--ds-color-info-*
10 stops
Semantic pairings
Usage guidance
Text primary
var(--ds-color-text-primary)
Text secondary
var(--ds-color-text-secondary)
Info state
var(--ds-color-info-500)
Error state
var(--ds-color-error-600)
Color authoringToken-aware snippet from the active showroom runtime.
tsx
13 lines
Consumption
Runtime-aware snippet
Color authoringTSX
Quick copy
const tokens = useTokens();
<Box
style={{
background: tokens.colors.primaryScale[50],
borderColor: tokens.colors.primaryScale[200],
color: 'var(--ds-color-text-primary)',
}}
/>;
<Text style={{ color: 'var(--ds-color-text-secondary)' }}>
Prefer semantic text aliases over raw palette picks.
</Text>