GenieStudio
A light, playful AI-design-tool landing surface built on a white-to-sky-tint canvas, floating cloud and 3D sticker illustrations, and a near-black pill CTA. The system reads as friendly, airy SaaS — Aeonik display headlines set large with tight tracking, Geist body copy, generous rounded geometry (16–32px cards, pill nav), and soft blue-tinted shadows that make hero artifacts feel like they float. Brand voltage comes from the pastel-and-sky illustration set and the single dark Sign-up button rather than from saturated UI color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 500 · 1.111
The quick brown fox jumps
display-lg
48px · 500 · 1.167
The quick brown fox jumps
body
18px · 500 · 1.333
The quick brown fox jumps
button
14px · 600 · 1.143
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| ml | 20px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px | |
| huge | 48px | |
| section | 56px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| pill | 90px |
FAQ
- What colors does GenieStudio use?
- GenieStudio's core palette includes #181d27, #0a0d12, #535862, #93979f, #ffffff. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the GenieStudio DESIGN.md.
- What font does GenieStudio use?
- GenieStudio's primary typeface is Aeonik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the GenieStudio design system?
- A light, playful AI-design-tool landing surface built on a white-to-sky-tint canvas, floating cloud and 3D sticker illustrations, and a near-black pill CTA. The system reads as friendly, airy SaaS —…