Aureform UI · Appearance Studio
Build your signature.
Shape the color, depth, and energy of your interface. See every detail come to life.
Live appearanceYour changes follow you across the kit.
Aurora
The details
Your look, liveYour colors
Pick a color or enter a hex value. Tap any shade to copy it.
Gradient composition
Live canvas
Ready for launchYour next big thing.
A clear vision. A signature look. Everything you need to make your next move.
Growth at a glance
A good week for a great idea.
Weekly growth comparison| Weekly growth comparison | This week | Last week |
|---|
| Mon | 32 | 24 |
|---|
| Tue | 45 | 31 |
|---|
| Wed | 41 | 37 |
|---|
| Thu | 68 | 40 |
|---|
| Fri | 61 | 51 |
|---|
| Sat | 82 | 58 |
|---|
| Sun | 96 | 67 |
|---|
Elevated · 16 px · ComfortableReal components. Your settings.
Keep a good look.
Save a signature. Make a copy. Come back to it anytime.
Your collection starts with one great look.
Take your look with you.
Settings, styles, or a complete React example. Ready to use.
{
"version": 1,
"theme": "dark",
"palette": "aurora",
"colors": {
"primary": "#8B5CF6",
"secondary": "#22D3EE",
"tertiary": "#34D399"
},
"material": "elevated",
"radius": 16,
"density": "comfortable",
"typography": "modern",
"motion": "expressive",
"hover": "glow",
"shadow": 0.65,
"border": 0.55,
"gradient": {
"kind": "mesh",
"angle": 125,
"intensity": 0.65,
"stops": [
{
"color": "#8B5CF6",
"position": 0
},
{
"color": "#22D3EE",
"position": 0.5
},
{
"color": "#34D399",
"position": 1
}
]
},
"shader": {
"kind": "aurora",
"speed": 0.2,
"scale": 1,
"intensity": 0.55,
"paused": false
}
}