Description
Web app for building and previewing design systems in real time. It provides a split-view editor where users can tune color tokens, typography, radius, and visual effects, then immediately inspect the result inside a browser-frame preview. It also supports preset management, JSON import/export, and palette extraction from Coolors links.
Features
- Solid and gradient color editing with linear/radial controls and RGBA support
- 40+ theme tokens grouped into editor sections for base, theme, utility, chart, and sidebar colors
- Typography controls with Google Fonts, sizing scale, line height, and letter spacing
- Advanced effects editor for glassmorphism, blur, tint, saturation, opacity, and shadows
- Component-scoped styling targets for cards, popovers, dialogs, sheets, and tabs
- JSON import/export for themes and reusable preset management
- Coolors palette import and generated color preset support
- Live browser-frame preview powered by generated scoped CSS
- Background image and gradient support across the previewed system
Tech Stack
- Next.js, React, TypeScript
- Tailwind CSS, shadcn/ui, Radix UI
- Zustand (state management)
- styled-jsx, react-frame-component
- react-colorful, colord, Zod
- React Hook Form, react-resizable-panels