The Foundry design system, rendered from shared packages
Everything on this page comes from @nextfoundry/tokens and @nextfoundry/ui — the same packages the storefront consumes. It is the honest current state of the template's design system, not the full product.
Color tokens
Swatches are painted with the CSS custom properties Tailwind exposes for each semantic token; labels show the canonical value from the typed token mirror. Every documented text/background pair is enforced at WCAG AA by a unit test.
canvas
#faf9f7
surface
#ffffff
ink
#211f1c
ink-muted
#5b5650
line
#e5e1da
brand
#155e56
brand-strong
#0d4740
brand-subtle
#e7efed
brand-foreground
#ffffff
focus
#155e56
success
#177245
success-subtle
#e4f2ea
warning
#7a5300
warning-subtle
#f7edd8
danger
#a52e21
danger-subtle
#f9e9e6
Typography
Editorial display — serif, for headlines
Interface sans — the system stack for body and interface text, kept fast by shipping no font files at all.
Muted small text — metadata and captions.
Shape, elevation, and motion
Radius
- control · 0.5rem
- surface · 0.75rem
- pill · 9999px
Elevation
Motion
quick 150ms · gentle 250ms · ease-standard cubic-bezier(0.2, 0, 0, 1). Animations respect prefers-reduced-motion.
Form controls
Specimens rendered for review — nothing on this page submits data.
aria-invalid drives the danger border.
Feedback
Data
The table lists this repository's actual quality gates; wide tables scroll inside their own region.
| Command | Purpose |
|---|---|
npm run lint | ESLint flat config, zero warnings |
npm test | Vitest unit tests (tokens, UI, boundary) |
npm run build | Production builds of both apps |
npm run validate:product | Customer product tree boundary scan |
npm run scan:secrets | Secretlint working-tree scan |
Pagination
Static specimen — the links return to this section rather than paging real data.
Loading
Skeletons are aria-hidden and stop pulsing under prefers-reduced-motion.
Dialog
The only client-rendered specimen — a modal is genuine interaction.