Workspace
Design system
The packages under design-system/ — tokens, icons, Opal UI, and Tangible UI.
The design system is split into four workspace packages under design-system/.
| Package | Path | Role |
|---|---|---|
@todayai-labs/opal-tokens | design-system/opal-tokens | Design tokens (colors, spacing, typography) + theme CSS exports |
@todayai-labs/opal-icons | design-system/opal-icons | Shared Opal icon components and generation scripts |
@todayai-labs/opal-ui | design-system/opal-ui | Product flow primitives, Radix UI wrappers, and Opal brand components |
@todayai-labs/tangible-ui | design-system/tangible-ui | Tangible product primitives and composed surfaces |
Layering
apps/* (product surfaces)
└─ consume @todayai-labs/opal-ui
├─ consume @todayai-labs/opal-icons
└─ consume @todayai-labs/opal-tokensStorybook topology
There are four Storybook installations in the repo:
| Storybook | What it shows |
|---|---|
apps/web | App-level integration stories (composed flows) |
design-system/opal-ui | Opal product primitives and onboarding components |
design-system/opal-icons | Icon library previews |
design-system/tangible-ui | Tangible product primitives and composed surfaces |
Visual regression (pnpm test:visual → web:test-visual Moon task) runs
against the web Storybook only. See
Toolchain → Testing → Storybook for the
full topology and the visual-regression CI gating.
Where component / token reference docs live
This site covers how the design system fits into the workspace and how its build / publish pipeline works. See Toolchain → Storybook topology for runtime structure and Workflow → Deployment for how the docs sites ship.