Colors

#0B2447

Dark Blue — Headings, CTAs

#414448

Text Grey — Body text

#828282

Light Grey — Labels

#F3F3F3

Page Background (Homepage)

#FAFAFA

Dashboard Background

#F8F8F8

Cards Background

#EAE9E7

Card & Section Background

Gold Gradient

Secondary buttons

Typography

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@500;600&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">

Headings — Noto Serif Display

H1 — PAGE TITLES, HERO HEADLINES

Unlock Insider Deals

Font: Noto Serif Display | Weight: 500 | Size: 52px | Line: 66px | Spacing: -1px

H2 — SECTION TITLES

How it Works?

Font: Noto Serif Display | Weight: 500 | Size: 36px | Line: 42px | Spacing: -0.8px

H3 — CARD TITLES, SUBSECTIONS

New Deals

Font: Noto Serif Display | Weight: 500 | Size: 30px | Line: 40px | Spacing: -0.5px

H4 — PRODUCT NAMES, SMALL HEADINGS

Spa Day Experience

Font: Noto Serif Display | Weight: 500 | Size: 22px | Line: 30px | Spacing: 0px

Body Text — Plus Jakarta Sans

BODY TEXT — PARAGRAPHS, DESCRIPTIONS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Font: Plus Jakarta Sans | Weight: 400 | Size: 15px | Line: 26px

SMALL TEXT — CAPTIONS

Get up to 30% off exclusive deals

Font: Plus Jakarta Sans | Weight: 500 | Size: 14px | Line: 24px | Spacing: 0.2px

LABELS — META INFO

Valid for 7 days · Updated 2 hours ago

Font: Plus Jakarta Sans | Weight: 500 | Size: 12px | Line: 20px | Spacing: 0.2px

Mobile Adjustments:
• H1: 40px (from 52px)
• H2: 34px (from 36px)
• H3: 28px (from 30px)
• Body text stays same (15px)

Buttons & Hover States

Primary Button

Secondary Button

Outline Button

/* Primary */
.btn-primary {
  background: #0B2447;
  color: white;
  border: 1px solid #0B2447;
}
.btn-primary:hover {
  background: white;
  color: #0B2447;
}

/* Secondary */
.btn-secondary {
  background: linear-gradient(180deg, #C8A166 0%, #CFB283 100%);
  color: white;
}
.btn-secondary:hover {
  background: white;
  color: #C8A166;
  border: 1px solid #C8A166;
}

/* Outline */
.btn-outline {
  background: transparent;
  color: #0B2447;
  border: 1px solid #0B2447;
}
.btn-outline:hover {
  background: #0B2447;
  color: white;
}