Style Guide
Design system for Med Spa Ranker
Colors
Primary Colors
Primary / Coral
#E56C70
Primary Dark
#D35D61
Blue Accent
#42B9F1
White
#FFFFFF
Background Colors
Dark (Main BG)
#00040a
Dark Lighter
#0a1014
Dark Card
#111820
Dark Nav
#00040a
Status Colors
Success
#29a844
Warning
#ffc20a
Danger
#DC3545
Text Colors
White
#FFFFFF
Gray 300
#D1D5DB
Gray 400
#9CA3AF
Gray 500
#6B7280
Typography
H1 - 4xl/5xl/6xl bold
Heading One
H2 - 3xl/4xl bold
Heading Two
H3 - xl/2xl semibold
Heading Three
Eyebrow - sm uppercase tracking-wider
Eyebrow Text
Body - base/lg
Body text paragraph example.
Small - sm
Small text for captions and labels.
Buttons
Primary (Coral CTA)
Secondary (Outline)
Cards
Standard Card
Card with dark background and subtle border.
Hover Card
Card with hover effect on border.
Feature Card
Centered card with icon.
“Testimonial card with quote styling.”
– Name
Section Layouts
Section Header Pattern
Eyebrow Text
Section Title
Description text for context.
Background Alternation
bg-dark (#00040a)
bg-dark-lighter (#0a1014)
bg-dark (#00040a)
bg-dark-lighter (#0a1014)
Icons
Heroicons with primary color backgrounds.
Spacing
| Use Case | Class | Value |
|---|---|---|
| Section padding | py-16 / py-20 | 64px / 80px |
| Card padding | p-6 / p-8 | 24px / 32px |
| Grid gap | gap-6 / gap-8 | 24px / 32px |
| Section header margin | mb-12 | 48px |
| Element spacing | mb-4 / mb-6 | 16px / 24px |