Live demo — the real Aperture UI Kit engine, running in your browser.
Aperture UI Kit
A 240-component dark-first design system for product teams who ship fast.
One-time payment · instant download · VAT handled at checkout.
What you get
- Figma file (.fig) with published library
- React component package (TypeScript)
- Svelte 5 component package (runes)
- Token JSON for Style Dictionary
Why it's worth it.
- 240 components across forms, navigation, data display, and overlays
- Figma library with variables, auto-layout, and light/dark modes wired
- Matching React + Svelte source, typed props, zero runtime dependencies
- Eight accent themes driven by CSS custom properties
- WCAG AA contrast checked on every interactive state
Aperture is the design system we wished we had on day one of every product. It is dark-first because that is where modern tools live, but every surface inverts cleanly to light with a single token swap.
What makes it different
Most kits give you a Figma file and leave the engineering as an exercise. Aperture ships the same components in code — typed React and Svelte 5 source that maps one-to-one to the Figma library. Designers and engineers point at the same names.
The whole system is driven by CSS custom properties, so rebranding is a matter of editing a token file rather than hunting down hard-coded hex values. Eight curated accent themes are included; rolling your own takes about five minutes.
Built to last
Components are accessible by construction: focus rings, reduced-motion fallbacks, and AA contrast are checked on every state, not bolted on later. There are no runtime dependencies — drop a component in and it works.
Buy once, use it on every project you build. The hero on this page is a live shader-gradient field; the kit pairs beautifully with the rest of the Caustics instruments.
Ready for Aperture UI Kit?
$89 · one-time