Tailwind CSS Theme Generator - Subframe UI
Theme
Components
Customize theme
Generate a stunning Tailwind CSS theme. Make your UI stand out with built-in dark mode and design tokens.
Colors
- Brand Primary:
#2563EB
- Default Font:
Neutral 900
- Subtext Color:
Neutral 500
- Neutral Border:
Neutral 200
- White:
Neutral 0
- Default Background:
Neutral 0
| Color Name |
Color Code |
| Brand 50 |
#EFF6FF |
| Brand 100 |
#DBEAFE |
| Neutral 0 |
#FFFFFF |
| Warning 500 |
#EAB308 |
| Success 500 |
#22C55E |
Typography
- Inter - 7 text tokens
- monospace - System - 1 text token
| Style |
Font |
Size |
Line Height |
| Heading 1 |
Inter 500 |
30px |
36px |
| Heading 2 |
Inter 600 |
20px |
24px |
| Body |
Inter 400 |
14px |
20px |
| Caption |
Inter 400 |
12px |
16px |
Borders
- Primary Border Style:
1px solid #2563EB
- Neutral Border Style:
1px solid #E5E5E5
Shadows
| Shadow Type |
Style |
| Shadow Small |
0px 1px 2px 0px rgb(0 0 0 / 0.05) |
| Shadow Medium |
0px 4px 16px -2px rgb(0 0 0 / 0.08) |
| Shadow Large |
0px 12px 32px -4px rgb(0 0 0 / 0.08) |