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.
Foundations4 documented routes
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
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 · Tenant Showcase · 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
Platform

Platform

Active profilePlatform Flagship
Runtime postureRottay / modern
Operational admin patterns for the flagship platform experience.
Runtime controls
TenantRottay
Platform
Tenant showcase
Rottay / modern / Platform Flagship

Platform should sell governance-grade product confidence while still adapting cleanly to the active tenant runtime.

The workflow, hierarchy, and operational language stay platform-specific here. What should change is the rendering posture, not the control-plane logic: dense admin surfaces still need a visible split between command metrics, active risk, and deeper analysis when BitHire, Evnto, or dark-first Rottay is driving the DS.Active provider: Rottay, modern, Platform Flagship. The shell below should prove that structure and trust signals survive the switch.
Coverage
23 demosAcross 7 admin categories that need to feel like one control plane.
Priority
GovernancePermissions, identity, rollout risk, and tenant oversight stay above the fold.
Interaction bias
Compact confidenceFast command reads first, then deliberate drill-down into analysis.
Proof point

Command over clutter

Platform should separate alarms, rollout status, and deeper analysis immediately, even when the runtime flips to a darker or denser shell.
Proof point

Governance-first composition

Permissions, identity, and tenancy should feel auditable before they feel decorative, regardless of tenant chrome.

Live product moments

These frames are real DS surfaces and should read convincingly under every tenant runtime.
Live DS runtime below
2 supporting frames
7 categories
Primitives97 documented routes
Patterns48 documented routes
Structures21 documented routes
Surfaces36 documented routes
VerticalsCurrent section
3
Platform
Bit Hire
Evnto
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern
Proof point

Operator continuity

Dashboards, forms, and directories should read like one control plane under pressure instead of three unrelated demos.
Active runtime

Rottay is styling this platform scenario.

The workflow lens belongs to Platform. The surrounding chrome, contrast, chart emphasis, and surface temperature must all adapt to the active provider, including dark-first Rottay.
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Compact runtime evidence across 3+ token signals.
Audit strip
High information density
Visible system status
Governance-first polish
Dark-first safe surfaces
Live frame

Operations dashboard

The KPI-heavy view that establishes trust and keeps operators oriented across tenants, uptime, security posture, launch risk, and rollout readiness.
Command center
Live DS runtime
No local skin override
Rottay / modern / Platform Flagship
Control plane pulse
Rottay

Platform runtime dashboard

Governance, tenant launches, and admin risk posture rendered through the active DS runtime.
Runtime fitDark-first safe surfaces, governed contrast, and dense scanning are all active requirements here.
Launch queue6 tenantsThree awaiting security sign-off before go-live.
Escalation load1 P1 / 4 P2No unresolved incidents older than 24 hours.
Audit backlog23 tasks92% due this sprint already assigned to owners.
Headline metrics

First-pass command read

These are the numbers an operator should trust before opening tickets or drilling into tenant detail. They establish health, coverage, and drift in one scan.
Managed Tenants
0
since last month
Active Admins
3,842
this week
Policy Drift
14 flags
vs yesterday
Runtime Health
99.97%

What to inspect here

Whether headline metrics, risk, and analysis are visibly separated under dense chrome.
Whether supporting panels feel governed instead of ornamental.
Whether status language looks credible for enterprise admin workflows.
Coverage snapshotIdentity, tenancy, and permissions should still feel native to one admin shell when the runtime switches.
Read it like a product screenStart with the task, then validate whether runtime only changes mood, chrome, and emphasis instead of rewriting the workflow semantics.
Supporting product surfacesThese companion frames should reinforce the same product story instead of reading like isolated component snapshots.
Live frame

Identity directory

Dense user administration with search, status, access posture, and actionable context.
Identity
Live DS runtime
No local skin override
Rottay / modern / Platform Flagship
Identity directory
Rottay

Platform user access center

Dense user management needs to stay crisp, safe, and scannable under the active DS runtime.
Runtime expectationRow density, badges, and table chrome should stay readable even when Rottay pushes a darker shell.
Managed accounts3,842Across 128 active tenant environments.
MFA coverage96%Only 41 privileged accounts still exempt.
Review queue7 accountsEscalated access or SSO drift needs follow-up.
Operator roster

Privilege and tenant access inventory

The table is the analysis layer. It should feel dense and actionable without stealing urgency from the review queue.
Live frame

Tenant configuration

Settings-heavy configuration flow with launch readiness, security guardrails, and brand governance.
Tenancy
Live DS runtime
No local skin override
Rottay / modern / Platform Flagship
Tenant launch
Rottay

Governance-safe tenant configuration

This form exists to prove the showroom is using the design system runtime, not a static mock. Security gates, brand controls, and release posture should all restyle with the active engine and tenant without breaking hierarchy.
Launch postureRequires audit trail + SSOThe panel should feel strict and production-grade, not decorative.
Launch ownerPlatform OpsSecurity and rollout sign-off happen in the same operating lane.
Policy setEnterprise strictSSO, audit export, and role review are required before publish.
Blocking issues1 review gateAudit destination approval is the only unresolved blocker.
Tenant name
Workspace tier
Primary region
Runtime notes
Category explorer

Category routes

Use these cards to open focused governance lanes with deeper scenario inventory and component proof.
4 demos

Identity

User directories, profiles, sessions, and account-state control.
Scenario lens
Lifecycle control and operator trust
Open focused appendixDive into 4 scenario rows with stable product framing./verticals/platform/identity
3 demos

Tenancy

Tenant setup, branding, billing, and lifecycle control.
Scenario lens
Multi-tenant governance and brand integrity
Open focused appendixDive into 3 scenario rows with stable product framing./verticals/platform/tenancy
3 demos

Permissions

Role models, permission matrices, and policy authoring.
Scenario lens
Auditability and access confidence
+9
+6
-3
Analysis

Tenant launch velocity

Launch cadence is useful only after compliance gates are understood. This panel intentionally reads as a second-pass analysis lane, not the main alarm surface.

Bar chart containing 12 data items. Vertical orientation.

Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.

Active data point: Label: Jan, Value: 8

  • Label: Jan, Value: 8
  • Label: Feb, Value: 11
  • Label: Mar, Value: 13
  • Label: Apr, Value: 9
  • Label: May, Value: 14
  • Label: Jun, Value: 15
  • Label: Jul, Value: 17
  • Label: Aug, Value: 18
  • Label: Sep, Value: 16
  • Label: Oct, Value: 22
  • Label: Nov, Value: 19
  • Label: Dec, Value: 24
Bar chart data summary
LabelValue
Jan8
Feb11
Mar13
Apr9
May14
Jun15
Jul17
Aug18
Sep16
Oct22
Nov19
Dec24
Bar chartBar chart containing 12 data items. Vertical orientation.
Risk + status

Governance watchlist

Urgent operator work belongs in its own tone. These flags should read as active governance pressure, not as just another analytics card.
Northstar HealthSAML metadata drift
Needs owner
Canopy LogisticsPending SCIM review
Monitor
Blue River CapitalRole escalation requested
Immediate review
Status execution

Rollout readiness

Ship posture sits between metrics and analysis. These programs tell the operator whether platform work is clearing policy and adoption gates.
SSO enforcement76%
97 / 128 tenants
Audit logging v261%
Launch ring 2 of 4
Session risk scoring88%
Pilot nearing GA
Analysis

Plan mix

Tenant composition explains why the shell leans enterprise-safe. Higher-tier usage keeps governance, rollout, and reliability at the center of the visual system.

Pie chart containing 3 data items. Rendered as a donut chart.

Use arrow keys to move through summary items, Home to jump to the first item, and End to jump to the last item.

Active data point: Label: Enterprise, Value: 58, Percentage: 45.3%

  • Label: Enterprise, Value: 58, Percentage: 45.3%
  • Label: Growth, Value: 42, Percentage: 32.8%
  • Label: Starter, Value: 28, Percentage: 21.9%
Pie chart data summary
LabelValuePercentage
Enterprise5845.3%
Growth4232.8%
Starter2821.9%
Pie chartPie chart containing 3 data items. Rendered as a donut chart.
Enterprise
Growth
Starter
Operator framing

Why this demo reads like a control plane

Platform only feels premium when the dashboard separates alarms from throughput and analytics. Otherwise dense admin work collapses into undifferentiated cards.
Identity riskPrivilege exceptions, dormant admins, and MFA gaps stay above the fold.
Tenant rolloutLaunch velocity only matters when policy gates and migration rings are green.
Plan pressureEnterprise-heavy mix should steer the shell toward trust, not marketing gloss.
Showing 6 high-signal operators across live tenant accounts
UserTenantRoleAccess postureLast loginActions
DA
Daniel Aviladaniel@rottay.com
Rottay HQSuper Admin
healthy
2 min ago
SM
Sofia Martinezsofia@northstarhealth.com
Northstar HealthTenant Admin
review
18 min ago
JC
James Chenjames@canopylogistics.io
Canopy LogisticsSupport Admin
healthy
46 min ago
MG
Maria Garciamaria@blueriver.capital
Blue River CapitalBilling Admin
critical
4 hours ago
AJ
Alex Johnsonalex@atlasretail.co
Atlas RetailOperations Admin
healthy
6 hours ago
ED
Emily Davisemily@greenline.energy
Greenline EnergySecurity Admin
review
9 hours ago
Risk + status

Access review queue

This rail owns urgency. Escalations and posture drift should visually separate from the broader operator inventory.
Blue River CapitalRole escalation exceeds policy baseline
error
Northstar HealthExpired SAML certificate pending renewal
warning
Greenline EnergySSO fallback disabled during onboarding
secondary
Policy guardrails

What keeps this screen governance-safe

Runtime switching is only valid if operator scanning, escalations, and row actions still feel trustworthy under every tenant and engine.
Privileged access reviewsAll super admins require weekly attestation and named ownership.
Dormant operator sweepAccounts inactive for 14 days are queued for deprovisioning review.
Cross-tenant driftBadge, table density, and row actions must stay readable under every runtime.
Tenant identity

Core workspace definition

This is the operator form layer. It should stay highly structured and low-drama while still reflecting the active runtime.
Policy controls

Guardrails before publish

Security and brand settings belong to a stricter section so the operator immediately understands which controls are gating launch.
Security guardrailsAuthentication, auditability, and admin trust.
Enforce SSO at launchBlocks password-only access after onboarding.
Brand governanceTenant overrides should still inherit DS rules.
Allow local brand overridesLets the tenant diverge without forking structure.
Primary domain
Support contact
Last reviewed by Platform Ops · 18 minutes ago
Approval ladderThis rail owns readiness, not the form body.
Design tokens inherit tenant runtime
Ready
Security policy aligned with launch tier
In review
Operational runbook attached
Ready
Runtime framingRottay · modern · Platform Flagship
This panel explains the runtime contract: structure stays stable, while density, accent posture, and border rhythm visibly respond to the active engine and tenant without making governance work feel less serious.
Open focused appendixDive into 3 scenario rows with stable product framing./verticals/platform/permissions
4 demos

Auth

Sign-in, MFA, session posture, recovery, and API credentials.
Scenario lens
Entry trust and credential hygiene
Open focused appendixDive into 4 scenario rows with stable product framing./verticals/platform/auth
3 demos

Features

Flags, rollouts, experiments, and release governance.
Scenario lens
Controlled release tooling
Open focused appendixDive into 3 scenario rows with stable product framing./verticals/platform/features
3 demos

Navigation

Admin shells, breadcrumbs, search, and fast module switching.
Scenario lens
Orientation inside dense SaaS work
Open focused appendixDive into 3 scenario rows with stable product framing./verticals/platform/navigation
3 demos

Notifications

Alert centers, toasts, banners, and admin messaging.
Scenario lens
Operational awareness and follow-up state
Open focused appendixDive into 3 scenario rows with stable product framing./verticals/platform/notifications