Staze Beauty
Beauty and cosmetics visual design system characterized by vibrant plum and purple brand tones, elegant product swatches, clean white surface cards, soft rose highlights, and modern geometric typography.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
heading-xl
32px · 700 · 1.2
The quick brown fox jumps
heading-lg
26px · 600 · 1.0
The quick brown fox jumps
heading-md
22px · 700 · 1.6
The quick brown fox jumps
heading-sm
18px · 600 · 1.25
The quick brown fox jumps
body-base
16px · 400 · 1.6
The quick brown fox jumps
body-sm
13px · 400 · 1.6
The quick brown fox jumps
caption
12px · 600 · 1.6
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 12px | |
| lg | 16px | |
| xl | 24px | |
| 2xl | 32px | |
| 3xl | 48px | |
| section | 80px | |
| container | 1400px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| xs | 4px | |
| sm | 8px | |
| md | 12px | |
| lg | 16px | |
| pill | 24px | |
| full | 50% |
FAQ
- What colors does Staze Beauty use?
- Staze Beauty's core palette includes #9b59b6, #5b2f66, #ffffff, #1d1d1d, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Staze Beauty DESIGN.md.
- What font does Staze Beauty use?
- Staze Beauty's primary typeface is Poppins. 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 Staze Beauty design system?
- Beauty and cosmetics visual design system characterized by vibrant plum and purple brand tones, elegant product swatches, clean white surface cards, soft rose highlights, and modern geometric typogra…