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.
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
10 stops
10 stops
10 stops
10 stops
10 stops
10 stops
10 stops
Theme comparison
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
TokensColors
Colors
Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.
Runtime controls
TenantRottay
EngineModern
Neutral
--ds-color-neutral-*
50
100
200
300
400
500
600
700
800
900
Primary
--ds-color-primary-*
50
100
200
300
400
500
600
700
800
900
Secondary
--ds-color-secondary-*
50
100
200
300
400
500
600
700
800
900
Success
--ds-color-success-*
50
100
200
300
400
500
600
700
800
900
Warning
--ds-color-warning-*
50
100
200
300
400
500
600
700
800
900
Error
--ds-color-error-*
50
100
200
300
400
500
600
700
800
900
Info
--ds-color-info-*
50
100
200
300
400
500
600
700
800
900
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)
Same token names, different brands
Primary scale stays portable because its meaning is stable, even when tenant personality changes.
Color authoringToken-aware snippet from the active showroom runtime.
tsx
13 lines
Consumption
Runtime-aware snippet
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>