Everything a designer needs. Open source.
Stop opening 15 design websites. Open one. Typography, color, icons and design tokens - no login, no backend, works offline.
- studios
- 15
- open source icons
- 200k+
- accounts required
- 0
- runs in your browser
- 100%
15 studios
One workspace. Every design decision.
Brand Studio
The hub of your identity: name, logo, colors, type, radius, spacing and shadows, synced everywhere.
Brand DNA
Extract a palette, mood and type pairing from any image and apply it to your brand. Runs on your device.
Logo Studio
Edit your SVG logo, check construction and clear space, generate variants and export a logo pack.
Mockup Studio
Business cards, stationery, posters, websites, dashboards and apps, drawn live from your brand.
Social Media Studio
Banners, covers, OG images and thumbnails for every platform, generated from your brand.
Brand Guidelines
A complete brand book, from logo usage to design tokens, generated from your brand and exported as PDF.
Brand Projects
Keep several brands side by side. Everything saves locally in your browser; import and export as JSON.
- Aa
- Space Grotesk
- Inter
- Fraunces
- JetBrains Mono
Typography Studio
Browse Google Fonts, pair typefaces and generate fluid type scales.
- Google Fonts
- Pairing
- Fluid scale
- OpenType
Color Studio
Generate palettes, shades and gradients. Check contrast in OKLCH.
- OKLCH
- Harmonies
- Shades 50–950
- WCAG
Icon Studio
Search 200,000+ open source icons. Restyle and export to SVG, React, PNG or ICO.
- Iconify
- Restyle
- SVG · React · PNG
- Favicons
Background Studio
Procedural waves, blobs, mesh gradients, aurora, noise and patterns. Export SVG, PNG or CSS.
- 8 generators
- Seeded
- SVG · PNG · CSS
- Palette aware
Effects Lab
Glass, neumorphism, layered shadows, glows, gradient borders and grain - as CSS and Tailwind.
- Glass
- Neumorphism
- Shadows
- CSS · Tailwind
<svg viewBox="0 0 24 24"> <path d="M4 12l5 5L20 6" /> </svg> −62% · optimizedSVG Playground
Inspect, edit and optimize SVG. Convert to JSX, React, React Native or a sprite sheet.
- Optimize
- Inspect
- JSX · React Native
- Sprites
- Contrast 7.1:1AAALine height 1.5PassTarget 32×32Too small
Accessibility Lab
WCAG contrast, color vision simulation, readability, dyslexia preview and touch-target checks.
- WCAG
- Color vision
- Readability
- Touch targets
:root { --color-primary: oklch(0.62 0.19 275); --font-heading: "Space Grotesk"; --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }Export Engine
Turn your choices into design tokens for CSS, SCSS, Tailwind, React and JSON.
- CSS
- SCSS
- Tailwind
- JSON tokens
Principles
Built like the tools you already love.
Fast, quiet and respectful of your data - inspired by Linear, Raycast and Vercel.
Open source
MIT licensed. Fork it, extend it, self-host it.
Local first
Favorites, palettes and tokens live in IndexedDB on your device.
No login
No accounts, no email, no paywall. Open the tab and work.
No backend
Nothing you make leaves your browser. There is no server to leak it.
Offline first
Color, type scale and export tools work without a connection.
Keyboard first
⌘K for everything, G-shortcuts to jump, space to shuffle palettes.
Production ready
Exports drop straight into CSS, SCSS, Tailwind v4 and React.
Dark & light
Carefully tuned themes that respect your system preference.
Built in the open. Shaped by designers.
DesignHub is community driven. Star the repo, open an issue, or ship the next studio on the roadmap.