Now in public beta

Your AI design system, generated in minutes

Skip the weeks of manual work. Describe your brand or upload your assets — Kroma generates a complete design system with tokens, components, and guidelines.

No brand assets neededExport to Figma & codeFree tier available
kroma.design/generate
Brand Input
Brand name
|
Industry
Select industry...▼
Mood / Personality
Choose moods...
Primary color (optional)
#hex or click to pick
✨ Generate Design System
Your design system will appear here
Fill in your brand details and click generate
How it works

Three steps to a complete design system

1

Describe your brand

Enter your brand name, industry, and personality. Already have brand assets? Upload your logo, colors, or existing guidelines — Kroma adapts to what you have.

Brand nameIndustryMoodColorsLogo upload
Brand name
Kroma
Industry
AI / Design Technology
Mood / Personality
Bold, Creative, Modern
Primary color
✨ Generate Design System
⚡
AI is generating...
Colors → Typography → Spacing → Components
✓ Colors
✓ Typography
✓ Spacing
✓ Radius
✓ Shadows
✓ Tokens
✓ Components
✓ Semantic Colors
✓ Neutrals
✓ Guidelines
✓ PDF
✓ Figma File
2

AI generates your system

Kroma's AI creates a complete, cohesive design system in under 2 minutes. Color scales, typography, spacing, components, and documentation — all harmonized.

Color scalesTypographySpacing systemComponentsTokensGuidelines
3

Export everywhere

Download in every format your team needs. Figma files for designers, code tokens for engineers, and a brand guidelines PDF for everyone else.

FigmaCSSTailwindReactHTMLPDFJSONTypeScript
Figma File
.fig
CSS
CSS Variables
.css
Tailwind Config
.config.js
React
.tsx
HTML
HTML/CSS
.html
PDF
Guidelines
.pdf
JSON
Token Studio
.json
TS
TypeScript
.d.ts
What you get

Everything your team needs

Three outputs, one generation. Designers, engineers, and your whole team — all covered.

🎨 Color System
4 brand colors × 10 shades each, plus neutrals and semantic colors
Purple
50900
Pink
50900
Blue
50900
Green
50900
Neutrals (11 shades)
Semantic
Success
Warning
Error
Info
📝 Typography Scale
DM Sans for UI · JetBrains Mono for code
AaH160px
AaH248px
AaH336px
AaH424px
AaBody16px
AaSmall14px
AaXS12px
📐 Spacing · Radius · Shadows
4px base unit system
Spacing Scale
1
2
3
4
5
6
8
10
12
Border Radius
sm
md
lg
xl
2xl
full
Shadow Elevation
🧩 50+ Components
Ready-to-use Figma components with auto-layout, light & dark mode
Primary
Secondary
Button
Text...
Focus
Input
Type...
Textarea
Pick...▼
Select
✓
On
Off
Checkbox
On
Off
Radio
Switch
Slider
K
A
B
+
Avatar
TagTagTag
Badge
Card
Tab 1
Tab 2
Tab 3
Tabs
TagTagTag
Tag
Name
Val
Row 1
100
Row 2
200
Table
Tip
Tooltip
Content
Popover
✓ OK
✕ Err
Alert
Title
No
Yes
Dialog
Done ✕
Saved
Toast
75%
Progress
Skeleton
Spinner
1
2
3
...
→
Pagination
Home/Docs/Page
Breadcrumb
Item A
Item B
Item C
Dropdown
←☰✕
HomeAboutBlog
Nav Menu
Panel
Drawer
Separator
Section A−
Content...
Section B+
Accordion
Opt A
Opt B
Opt C
Toggle Group
Modal
★★★★★
Rating
✓
✓
3
Stepper
Start
Mid
End
Timeline
Feb 2026▼
10
11
12
13
14
15
16
Date Picker
S
M
T
W
T
F
S
1
2
3
4
5
6
7
Calendar
Carousel
3
4
·
·
OTP Input
#A855F7
Color Picker
↑
Drop file
Upload
🔍Search...
Action A
Action B
Command
Search...
React
Vue
Combobox
Copy
Paste
Delete
Context Menu
FileEditView
New
Open
Save
Menubar
−
12
+
Number Input
B
I
U
🔗
Toolbar
Details▾
Collapsible
2.4k
↑ 12.5%
Stat
💻 Export Formats
Every format your stack needs
CSSCSS Custom Properties.css
--purple-500: #A855F7; --radius-lg: 12px; --space-4: 16px;
Tailwind Config.config.js
colors: { purple: { 500: '#A855F7' } }
JSONToken Studio JSON.json
{ "color": { "purple": { "value": "#A855F7" } } }
React Components.tsx
<Button variant="primary"> Click me </Button>
TSTypeScript Definitions.d.ts
type Color = 'purple' | 'pink' | 'blue' | 'green'
HTMLHTML/CSS Snippets.html
<button class="btn-primary"> Click me </button>
📦 Complete Token Map
200+ tokens across all categories
/* ─── Brand Colors ─── */
--purple-50: #FAF5FF;
--purple-100: #F3E8FF;
--purple-200: #E9D5FF;
--purple-300: #D8B4FE;
--purple-400: #C084FC;
--purple-500: #A855F7;
--purple-600: #9333EA;
--purple-700: #7E22CE;
--purple-800: #6B21A8;
--purple-900: #581C87;
/* ─── Pink ─── */
--pink-50: #FFF1F2;
--pink-100: #FFE4E6;
--pink-200: #FECDD3;
--pink-300: #FDA4AF;
--pink-400: #FB7185;
... +5 more shades
/* ─── Typography ─── */
--font-sans: 'DM Sans';
--font-mono: 'JetBrains Mono';
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
--text-6xl: 60px;
/* ─── Spacing ─── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
/* ─── Radius ─── */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ─── Shadows ─── */
--shadow-xs: 0 1px 2px ...;
--shadow-sm: 0 1px 3px ...;
--shadow-md: 0 4px 6px ...;
--shadow-lg: 0 10px 15px ...;
--shadow-xl: 0 20px 25px ...;
--shadow-2xl: 0 25px 50px ...;
📖 What's in the PDF
A complete brand manual, auto-generated
Brand Overview
Mission statement
Brand values
Personality traits
Target audience
Brand story
Visual Identity
Logo usage & clear space
Color specifications & accessibility
Typography rules & pairing
Iconography style
Photography guidelines
Application
Do's and don'ts
Layout guidelines
Responsive behavior
Voice & tone
Social media templates
Email signature
📄 Preview
Downloadable PDF
Kroma
Brand Guidelines v1.0
TABLE OF CONTENTS
1. Brand Overview2
2. Logo & Usage3
3. Color System4
4. Typography5
5. Spacing & Layout6
6. Components7
7. Iconography8
8. Do's & Don'ts9
9. Voice & Tone10
10. Templates11
Templates

Start with an industry template

Five curated design systems. Customize to make them yours.

Finance
Banking & Fintech
Health
Health & Wellness
SaaS
SaaS & Tech
Commerce
E-commerce & Lifestyle
Crypto
Crypto & Fintech
Pricing

Simple, transparent pricing

Start free, upgrade when you're ready.

Free
$0
Get a real design system, no card needed
3 generations per month
Full color palette
Font pairing + type scale
Spacing / radius / shadows
CSS Variables
Tailwind Config
🔥 Early Bird — locked forever142/200 left
Pro33% off
$8/mo$12
Everything to ship a design system
Everything in Free, plus:
Unlimited generations
JSON / TypeScript tokens
React components
HTML components
Figma file (50+ components)
Brand Guidelines PDF
Industry templates

Ready to generate your design system?

Join the beta. Start for free, no credit card required.