Strata
Runtime-powered design system infrastructure. Strata allows UI components to update across all connected apps instantly (~3 seconds) without requiring engineers to redeploy code, open PRs, or version-bump packages. It replaces static UI packages with a live, remote-controlled UI system.
Architecture
| Layer | Technology |
|---|---|
| Frontend | React, Next.js |
| Token pipeline | Style Dictionary, Figma Sync |
| Component delivery | Remote component registry (CDN) |
| Runtime hook | <StrataProvider>, useComponents() |
Constraints
| Rule | |
|---|---|
| ✅ DO | Enforce graceful degradation. If the runtime CDN fails, automatically fall back to build-time tokens. |
| ✅ DO | Ensure the source of truth is always pulled from Figma or the Style Dictionary. |
| ❌ DON'T | Hardcode custom hex colors, paddings, or font sizes outside of the <StrataProvider> environment. |
| ❌ DON'T | Introduce heavy client-side processing that slows down the ~3-second sync latency. |
Core Business Rules
- All client applications must wrap their root application in
<StrataProvider syncUrl="..."> - Components must be dynamically invoked via
useComponents()rather than standard local imports - Sync latency must be continuously monitored — any delay exceeding 5 seconds must trigger an automated regression alert
Strata's runtime integrity is client-facing. A broken sync means broken UIs in production apps you do not own. Monitor aggressively.
User Journey (Dev Experience)
Design Update
Designer updates a component in Figma.
Token Conversion
Strata converts the design into design tokens and component structures via the Style Dictionary pipeline.
Installation
Developer installs @strata-ds/core and wraps their app with <StrataProvider syncUrl="...">.
Dynamic Invocation
Developer pulls components into their UI via useComponents() rather than static imports.
Live Propagation
Future design changes propagate instantly to the live app via runtime injection — no redeploy needed.