Landing hero
A hero with headline, sub, two calls to action and a feature row — the page a first-time visitor lands on.
Every colour, space, radius and shadow below is an FDS token — 22 distinct, 0 off-system.
Ship a consistent brand across every screen
One tiny brand derives a complete, contrast-checked theme. No utility classes to memorise, no component source to keep in sync — just tokens your whole stack can read.
Derived, not configured
Pick a brand colour; hover, active and on-colours derive automatically — always AA-safe.
One dependency
Zero runtime deps. A token registry, pure functions and CSS variables — nothing to bundle.
Framework-free
The output is --fx-* custom properties. Use them from React, Vue, WordPress or plain CSS.
Every example is scanned
Like the dashboard, each screen's stylesheet is checked against the package registry at build time — the same array of tokens the package exports. An off-system value would surface as a failure on the page rather than drift silently, so the gallery cannot fall out of sync with the system it advertises.
Tokens on this screen
--fx-color-border--fx-color-on-primary--fx-color-on-secondary--fx-color-primary--fx-color-primary-hover--fx-color-secondary--fx-color-surface--fx-color-surface-alt--fx-color-text--fx-color-text-muted--fx-radius-2xl--fx-radius-lg--fx-radius-md--fx-shadow-md--fx-space-10--fx-space-12--fx-space-2--fx-space-3--fx-space-4--fx-space-5--fx-space-6--fx-space-8