Brand Guidelines
Design system & visual identity reference
Typography
Display Font
Playfair Display
Used for headings, editorial titles, and display text.
Aa Bb Cc Dd Ee Ff Gg
1234567890 !@#$%
Body Font
Inter
Used for body text, UI elements, and captions.
Aa Bb Cc Dd Ee Ff Gg
1234567890 !@#$%
Letter spacing: Body: -0.011em · Display: -0.02em
Colour Palette: Light Mode
Primary Pink
#EE65A3
HSL: 328 80% 66%
Buttons, links, accents, brand identity
Accent Cyan
#5DC5CE
HSL: 185 55% 59%
Secondary accents, gradients, highlights
Foreground
#1A1D23
HSL: 220 15% 12%
Body text, headings
Background
#FFFFFF
HSL: 0 0% 100%
Page backgrounds
Muted
#F5F5F7
HSL: 220 10% 97%
Section backgrounds, subtle fills
Muted Foreground
#5C5F66
HSL: 220 10% 40%
Secondary text, captions
Border
#E8E9EB
HSL: 220 10% 92%
Dividers, card borders
Destructive
#D33E3E
HSL: 0 65% 51%
Errors, destructive actions
Colour Palette: Dark Mode
Background
#121A24
HSL: 215 28% 9%
Foreground
#EDF1F5
HSL: 210 20% 95%
Card
#16202C
HSL: 215 25% 11%
Primary Pink
#E35A96
HSL: 328 75% 62%
Accent Cyan
#4AB8C1
HSL: 185 50% 54%
Muted
#1A2636
HSL: 215 25% 15%
Muted Foreground
#8E9BAD
HSL: 210 15% 65%
Gradients
Brand Gradient
linear-gradient(135deg, #EE65A3, #5DC5CE)
Hero sections, CTAs, brand moments
Pastel Gradient
linear-gradient(135deg, #f4a5c4, #a0dde3)
Popups, email headers, soft accents
UI Tokens
| Token | Value | Usage |
|---|---|---|
| --radius | 0.75rem (12px) | Default border radius |
| border-radius-lg | var(--radius) | Cards, containers |
| border-radius-md | calc(var(--radius) - 2px) | Buttons, inputs |
| border-radius-sm | calc(var(--radius) - 4px) | Badges, tags |
| font-family-body | Inter, system-ui | All body and UI text |
| font-family-serif | Playfair Display, serif | Display headings |
Logo
Logo files: socialday-logo.webp, socialday-logo.png
SocialDay Brand Guidelines · Generated September 2026