Showcase
The Example dashboard proves you can build a working app screen from tokens alone. This gallery widens the claim to the surfaces people judge a design system by first: a complete, pixel-faithful marketing homepage; a pricing table; a landing hero; an auth card. Each screen's stylesheet is scanned at build time, so every colour, space, radius and shadow is a real --fx-* token — none off-system.
Travel landing page
A complete tour-booking homepage — hero, search, destinations, deals, packages, reviews, footer — rebuilt pixel-for-pixel from tokens. Recolour the whole site live from three brand inputs.
Restaurant landing page
A full restaurant homepage — hero, menu, chef, gallery, reservation, reviews, footer — built entirely from tokens. Reskin the whole brand live from three inputs.
Real estate landing page
A complete property portal — search hero, featured listings, agents, neighbourhoods, CTA, footer — every card and filter drawn from tokens. Recolour the whole brand live.
SaaS landing page
A modern product homepage — hero, logos, features, workflow, pricing, testimonials, footer — token-built end to end. Change the brand and the whole page re-themes instantly.
Spa & beauty landing page
A warm spa homepage — hero, services, treatments, team, booking, testimonials, footer — proving FDS handles soft, elegant brands too. Live recolour from three inputs.
Pricing
Three tiers, one highlighted — the highest-intent marketing surface, built from token fills, borders and radii.
Simple, transparent pricing
Every plan includes the full token system. Upgrade for scale.
Starter
$0
/mo- 1 project
- Community support
- Core token set
- MIT license
Team
$29
/mo- Unlimited projects
- Brand derivation
- Contrast gates in CI
- Priority support
Enterprise
Custom
- SSO & audit log
- Private registry
- Dedicated support
- SLA
Landing hero
A hero with headline, sub, two calls to action and a feature row — the page a first-time visitor lands on.
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.
Sign-in
A centered auth card with real inputs, a focus ring and primary/secondary actions — the app's front door.
More
The Example dashboard is the first screen of this set — a working analytics view built the same way. Or open the Playground to reskin every screen live by changing the brand.