Guidelines
Overview
DesignOS is the single source of truth for the enterprise experience
Every app inherits its visual language, interaction behaviour, accessibility, tokens, components, UX patterns and design governance from DesignOS. Products express their own brand through supported themes โ they never build an independent design system.
How it fits together
- Tokens โ one source of truth (colours, type, spacing, radius, shadow, motion) exposed as CSS variables + a Tailwind preset. Apps consume tokens; they never hardcode values.
- Components โ
@designos/ui: accessible, dark-mode React components styled only by tokens, so they adopt each product's brand automatically. - Patterns & templates โ composed flows (auth, CRUD, wizard) and app shells built once, reused everywhere.
- Governance โ every UI change is reviewed against the PR checklist; the design-intelligence agent flags drift and duplication.
Before you build any UI
First ask whether the capability belongs in DesignOS. If it is reusable across two or more products, build it once here and expose it โ never duplicate it inside a product.