API and code
Import and usage contract Settings
Density normal Platform Flagship
Landing
Playground
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting. Runtime fingerprint Token readout from the active provider chain.
Live DS
Runtime
Rottay / Modern Platform Flagship
Primary
#0A0A0A Secondary #6B6B6B
Density
normal Border-light cards
Compact runtime evidence across 3+ token signals.
Composition
Recipe map and contract boundary 2 structures + 1 pattern
Surfaces are page recipes: structures hold the frame, patterns carry reusable tasks, and the app provides domain state, permissions, and routing. Boundary flow Route and permissions gate access before the surface renders.
Surface config defines layout, actions, and data hooks for the page recipe.
Structures establish the page chrome and stable navigation frame.
Patterns fill the work area while product-owned logic stays outside the DS contract.
Audit focus permission-aware actions
operational density
clear recovery paths
Layer fit Primitives
Patterns
Structures
Surfaces
Import Published package entrypoint, ready to copy.
Consumption
Runtime-aware snippet
Copy import { SettingsSurface } from '@rottay/design-system';
Usage contract Paste-ready example that shows the base contract first.
Consumption
Runtime-aware snippet
Copy Usage contract TSX
Quick copy import { SettingsSurface } from '@rottay/design-system';
<SettingsSurface
config={{
title: 'Your page title',
dataSource,
actions,
permissions,
routing,
}}
/>Primitives 97 documented routes
Patterns 48 documented routes
Structures 21 documented routes
Verticals 3 documented routes
Playground 1 documented routes
Developers 2 documented routes
rounded top bar ยท solid dividers
Rottay
Modern
Audit boundary Judge the DS-owned screen contract here; keep domain rules and orchestration outside.
Product wiring stays app-side
Review permission-aware actions
operational density
clear recovery paths
App still owns data adapters
permissions
audit rules