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.
Typography gives the system its voice before color or motion ever shows up.
The showroom needs more than a ramp of font sizes. It needs a hierarchy model: headline, supporting copy, diagnostics, dense tables, and callouts that remain readable across tenants, engines, and screen densities.
Primary familyGeist SansBody and interface text.
Diagnostic familyGeist MonoCode, tokens, and measurements.
Scale shape7 sizes / 4 weightsEnough range without noise.
SpecimenClear hierarchy makes premium docs feel trustworthy.Use bold contrast for headlines, comfortable body rhythm for explanation, and mono only where measurement matters.tokens.typography.fontSize + fontWeight + lineHeight
Font families and roles
Sans + mono
UI / editorialThe quick brown fox jumps over the lazy dogHeadings, body, lists, metrics, labels, and narrative content.
Measurement / codeThe quick brown fox jumps over the lazy dogToken values, snippets, diagnostics, data labels, and compact technical readouts.
Size ramp
7 sizes
xs0.75rem
Meta, captions, helper text
The quick brown fox jumps over the lazy dog
sm0.875rem
Dense body copy, tables
The quick brown fox jumps over the lazy dog
md1rem
Default application body
The quick brown fox jumps over the lazy dog
lg1.125rem
Section intros, stat labels
The quick brown fox jumps over the lazy dog
xl1.25rem
Module headings
The quick brown fox jumps over the lazy dog
2xl1.5rem
Page headings
The quick brown fox jumps over the lazy dog
3xl1.875rem
Editorial feature headlines
The quick brown fox jumps over the lazy dog
Weight ladder
4 weights
normalThe quick brown fox jumps over the lazy dog400
mediumThe quick brown fox jumps over the lazy dog500
semiboldThe quick brown fox jumps over the lazy dog600
boldThe quick brown fox jumps over the lazy dog700
Line-height behavior
Reading rhythm
Tight1.25
Premium documentation depends on stable reading rhythm, not just bigger headings.
Normal1.5
Premium documentation depends on stable reading rhythm, not just bigger headings.
Relaxed1.75
Premium documentation depends on stable reading rhythm, not just bigger headings.
Size / weight matrix
400
500
600
700
xs
Aa
Aa
Aa
Aa
sm
Aa
Aa
Aa
Aa
md
Aa
Aa
Aa
Aa
lg
Typography usagePaste-ready example that shows the base contract first.
tsx
14 lines
Consumption
Runtime-aware snippet
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
TokensTypography
Typography
Active profilePlatform Flagship
Runtime postureRottay / modern
Color, spacing, radius, motion, shadow, and typography foundations.