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

97

48

21

36

3

1

2

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

Foundations

Foundations

Foundations

Active profilePlatform Flagship

Runtime postureRottay / modern

Explore tokens, themes, engines, and icon assets behind the system.

Runtime controls

System layer

Quick jumps

Runtime editorial reference

Foundations

The runtime layer behind every showroom preview: tokens, tenant themes, rendering engines, and shared iconography.

Featured read

When to open this

Open foundations when a screen looks wrong everywhere, diverges by tenant, or shifts across engines.

Tracks

4

Tokens, themes, engines, icons

Runtime vars

~140

Themeable at runtime

Renderers

3

Classic, Modern, Rustic

Icons

109

Shared visual vocabulary

Reading path

Tokens, then Themes, then Engines covers most diagnosis. Use Icons when the question is vocabulary or affordance.

Choose a foundation track

Each track is framed as a quick diagnostic path, not a passive chapter.

4 live tracks

Tokens

~140 runtime variables

6 live chapters

Color, type, spacing, radius, shadow, and motion define the values every component resolves before it renders.

A UI feels inconsistent and you need to trace the value that is driving it.

colors

spacing

typography

motion

Themes

brand resolution chain

3 tenant previews

Themes layer tenant branding on top of engine and vertical defaults without forking the component set.

You need to explain how one system becomes Platform, BitHire, or Evnto at runtime.

rottay

bithire

evnto

brand themes

Engines

same API, different personality

Classic, Modern, and Rustic keep the same API while changing silhouette, depth, and motion.

Teams want to compare rendering direction without rewriting application code.

classic

modern

rustic

runtime switching

Icons

10 semantic buckets

109 curated assets

The icon catalog provides a shared visual vocabulary for navigation, actions, status, data, and system chrome.

You need recognisable affordances without drifting into custom SVG sets.

navigation

status

data

currentColor

Quick routes

Fast entry points for branding, engine comparison, and consistency checks.

Practical entry points

Themes

Brand a tenant

Check theme merging first, validate the token palette, then confirm the icon vocabulary.

ThemesTokensIcons

Engines

Choose a rendering direction

Compare Classic, Modern, and Rustic, then inspect live primitives with the same switch applied.

EnginesPlaygroundPrimitives

Tokens

Audit visual consistency

Start with tokens and themes, then confirm full-page surfaces still stay aligned.

TokensThemesSurfaces

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