GlossGenius
A premium, editorial beauty-and-wellness SaaS interface built on a near-black warm ink (#17150e) and crisp white canvas, accented by a soft mint card surface (#f0f7f6). The system reads as confident and boutique — a large Basel Classic display serif-grotesk headline at 72px with tight negative tracking, flat shadow-free surfaces, generously rounded mint cards holding real product UI, and sparing rust / pink / navy accents. Brand voltage comes from the oversized display type and from product screenshots shown directly inside soft cards rather than from heavy color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 500 · 0.97
The quick brown fox jumps
title-lg
32px · 500 · 1.1
The quick brown fox jumps
title-sm
16px · 500 · 1.4
The quick brown fox jumps
label
16px · 500 · 1.2
The quick brown fox jumps
body
16px · 500 · 1.2
The quick brown fox jumps
button
16px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 30px | |
| xxl | 48px | |
| huge | 56px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| xs | 2px | |
| md | 8px | |
| lg | 16px | |
| xl | 20px | |
| xxl | 24px | |
| full | 1440px |
FAQ
- What colors does GlossGenius use?
- GlossGenius's core palette includes #17150e, #18160f, #17150e, #18160f, #060606. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the GlossGenius DESIGN.md.
- What font does GlossGenius use?
- GlossGenius's primary typeface is Basel Classic Book. 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 GlossGenius design system?
- A premium, editorial beauty-and-wellness SaaS interface built on a near-black warm ink (#17150e) and crisp white canvas, accented by a soft mint card surface (#f0f7f6). The system reads as confident…