AI Brand Kits
Instantly generate font pairs and color palettes. Preview live, customize, and export a rich DESIGN.md for any AI coding agent.
Generate Brand Kit
Randomize fonts and colors, customize, then export DESIGN.md for AI agents.
Color Palette
Click swatches or use color pickers to customize.
Background
#0f172a
Text
#f8fafc
Surface
#1e293b
Primary
#3b82f6
Primary Text
#ffffff
Accent
#06b6d4
Accent Text
#0f172a
Muted
#334155
Border
#334155
AI Prompt
Copy this prompt into Cursor, Claude Code, v0, or Lovable.
Live Preview
See your brand kit in action.
Professional modern tech
Design with confidence.
Ship with style.
A complete brand system with typography, colors, and tokens ready for any AI coding agent.
Typography
Space Grotesk + DM Sans
Colors
Space Grotesk + DM Sans
Tokens
Space Grotesk + DM Sans
Export
Download or export for free. Save to My Kits for your private dashboard ($9 lifetime).
Everything you need to define a brand system
AI Brand Kits isn't just a color picker. It's a complete workflow from inspiration to implementation — typography, tokens, previews, exports, and a community gallery.
Generate in seconds
Randomize curated font pairs and color palettes like Coolors and Fontpair — then fine-tune every token until it feels right.
Live brand preview
See typography, buttons, cards, and surfaces update in real time as you edit. No guessing how your kit will look in a real UI.
DESIGN.md export
Download a rich markdown file with CSS variables, Tailwind config, spacing scales, and JSON tokens — ready for any AI coding agent.
Full kit bundle
Export a zip with DESIGN.md, tokens.json, and css-variables.css. Drop it into Cursor, Claude Code, v0, or Lovable and build on-brand immediately.
AI-ready prompts
Auto-generated prompts tell agents exactly which fonts, colors, and tokens to use — so generated UIs stay consistent with your brand.
Community gallery
Browse, upvote, and export kits shared by others. Every download saves to the gallery so the community grows organically.
One DESIGN.md, consistent output everywhere
AI agents hallucinate colors and fonts unless you give them a strict design system. Our DESIGN.md includes semantic tokens, usage rules, Tailwind snippets, and machine-parseable JSON — so Cursor, Claude Code, v0, and Lovable produce interfaces that actually match your brand.
How it works
Three steps from blank canvas to a production-ready design system your team and AI agents can follow.
Generate or customize
Hit Randomize or pick font pairs and palettes. Adjust name, vibe, fonts, and all nine color tokens.
Preview & playground
Use the live preview on this page or open the full-screen playground to stress-test every UI element.
Export & build
Download DESIGN.md or the full zip. Paste the prompt into your agent and ship on-brand interfaces fast.
Test every component before you ship
Open the playground to see your kit applied across typography scales, buttons, form fields, cards, navigation, dashboards, and data tables — all on a full screen canvas so you can really see what's happening.
- Headings, body text, and font weight samples
- Primary, accent, muted, and surface colors
- Buttons, badges, and interactive states
- Inputs, selects, and form layouts
- Cards, stats, and dashboard widgets
- Nav bars and data table previews
Simple pricing
Download and export as much as you want — always free. Upgrade only if you want a private library to save kits and pick them up later.
Free forever
Everything you need to generate, preview, and ship brand kits today.
$0
Save for later
Private dashboard to store kits you love and come back to them anytime.
$9one-time
Ready to build your brand system?
Scroll up to generate a kit, explore the gallery for inspiration, or jump straight into the playground.