Built with tokens
This is the home page's claim made concrete: a working dashboard whose every colour, spacing step, radius and shadow is an FDS token resolved through --fx-* custom properties. Type comes from FDS base typography. There is not one hand-picked hex or pixel gap.
Every colour, space, radius and shadow below is an FDS token — 29 distinct, 0 off-system.
$48,120
▲ 12.4%3,204
▲ 4.1%1.8%
▼ 0.3%$62.40
▲ 2.2%Recent orders
5| Customer | Status | Amount | When |
|---|---|---|---|
| Nadia Okafor | Paid | $180.00 | 2m ago |
| Liam Turner | Pending | $62.40 | 18m ago |
| Sofia Marín | Paid | $240.00 | 1h ago |
| Kenji Watanabe | Refunded | $54.00 | 3h ago |
| Amara Singh | Paid | $96.00 | 5h ago |
How this proves it
The dashboard's stylesheet is scanned at build time against the package registry — the same array of tokens the package exports. Every --fx-* reference is a real token; an off-system value would surface here as a failure, so this page cannot silently drift from the system.
Every token on this page
--fx-color-bg--fx-color-border--fx-color-danger--fx-color-info--fx-color-on-info--fx-color-on-primary--fx-color-on-success--fx-color-on-warning--fx-color-primary--fx-color-primary-hover--fx-color-success--fx-color-surface--fx-color-surface-alt--fx-color-text--fx-color-text-muted--fx-color-text-subtle--fx-color-warning--fx-font-family-base--fx-font-family-heading--fx-radius-full--fx-radius-lg--fx-radius-md--fx-radius-xl--fx-shadow-sm--fx-space-2--fx-space-3--fx-space-4--fx-space-5--fx-space-6