Specimen.ui
Drop a moodboard. Get a design system — palette, type pairings, and components, styled live.
What it is
Specimen.ui turns visual references into a working design system. Upload up to six images and it extracts a five-role colour palette, recommends typography pairings measured for contrast, derives spacing and radius tokens, and renders live-themed UI components. Everything is copy- and export-ready, and it runs entirely in the browser with no backend.
Why I built it
Every branding job I take on starts the same way. A client sends over references, and I work out a palette from them and find type that fits. I was doing that by hand on every project. Specimen.ui is that process turned into a tool. You drop the moodboard in and it gives you the palette, a type pairing, and real components styled live, all ready to copy out. It runs entirely in the browser, so the images never leave it.
Features
- Moodboard fusion into a five-role colour system with live HEX/RGB
- Typography pairing engine with WCAG contrast measurement
- Derived spacing and radius tokens for cohesive component styling
- Component Bay with 40+ themeable UI components
- Compose Component — request a custom component in plain language
- Export to HEX/RGB, JSON, CSS variables, Tailwind v4 @theme blocks, or a ZIP
Stack
Install & use
Prerequisites: Node 18+, npm or bun
- git clone https://github.com/luminawebsitedesign-max/specimen-ui.git
- cd specimen-ui
- npm install
- npm run dev
New to running a project locally? Step-by-step guide.