Design Kernel
A design-system workbench for shaping coordinated light and dark themes, validating contrast, refining tokens, and exporting production-ready CSS.
Project overview
What I built
Design Kernel turns a small set of creative foundations into a complete, portable design system. Designers can explore distinct visual presets, tune color, typography, density, roundness, contrast, and elevation, inspect every generated token, preview both themes in a realistic product dashboard, save local snapshots, share versioned configurations, and export deterministic CSS with WCAG AA contrast enforcement.
- Live contrast enforcement
- AA
- Portable design-token exports
- CSS
Technology
Tools behind Design Kernel
9 tools
- Nuxt
- Vue
- TypeScript
- Pinia
- Vuestic UI
- SCSS
- LocalStorage
- WCAG
- Vitest
Product views
Inside the experience
4 views
