Design System Reference

Color Palette

Primary Colors (Pink)

#d63384

Primary (Pink 500)

bg-pink-500

#fdf2f8

Pink 50

bg-pink-50

#fce7f3

Pink 100

bg-pink-100

#fbcfe8

Pink 200

bg-pink-200

#f9a8d4

Pink 300

bg-pink-300

#f472b6

Pink 400

bg-pink-400

#be185d

Pink 600

bg-pink-600

#9d174d

Pink 700

bg-pink-700

#831843

Pink 800

bg-pink-800

#6b0f36

Pink 900

bg-pink-900

#500724

Pink 950

bg-pink-950

Secondary Colors (Violet)

#5e548e

Secondary (Violet 500)

bg-violet-500

#f5f3fa

Violet 50

bg-violet-50

#ebe7f6

Violet 100

bg-violet-100

#d7d0ed

Violet 200

bg-violet-200

#b8acde

Violet 300

bg-violet-300

#9586cc

Violet 400

bg-violet-400

#5a4687

Violet 600

bg-violet-600

#4c3d72

Violet 700

bg-violet-700

#3e325d

Violet 800

bg-violet-800

#352c4e

Violet 900

bg-violet-900

#201a2f

Violet 950

bg-violet-950

Background & UI Colors

#f8f9fa

Background

bg-background

#1e293b

Foreground

bg-foreground

#ffffff

Card

bg-card

#f1f5f9

Muted

bg-muted

#64748b

Muted Foreground

bg-muted-foreground

#e2e8f0

Border

bg-border

#e2e8f0

Input

bg-input

#d63384

Ring

bg-ring

Typography

Font Families

Heading Font: Oswald

Used for headings, navigation, and buttons

Oswald Regular

Oswald Medium

Oswald Semibold

Oswald Bold

font-heading

Body Font: Lato

Used for body text, paragraphs, and general content

Lato Regular

Lato Medium

Lato Semibold

Lato Bold

Lato Italic

font-body

Typography Scale

Heading 1

text-4xl md:text-5xl lg:text-6xl font-heading font-bold

Heading 2

text-3xl md:text-4xl font-heading font-bold

Heading 3

text-2xl md:text-3xl font-heading font-bold

Heading 4

text-xl md:text-2xl font-heading font-bold

Heading 5

text-lg md:text-xl font-heading font-bold

Heading 6

text-base md:text-lg font-heading font-bold

Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

text-base font-body leading-relaxed

Small Text: Used for captions, footnotes, and secondary information.

text-sm font-body

Special Text Classes

Hero Text

hero-text

Section Title

section-title

Card Title

card-title

Navigation Link

nav-link

CSS Variables Reference

Variable	Light Mode Value	Dark Mode Value	Description
--background	210 17% 98%	222 47% 11%	Off-white background (light) / Dark background (dark)
--foreground	222 47% 11%	210 40% 98%	Main text color
--primary	328 68% 52%	328 68% 52%	Bright pink (main brand color)
--secondary	260 25% 44%	260 25% 44%	Violet (secondary brand color)
--accent	260 25% 44%	260 25% 44%	Violet as accent color
--muted	210 40% 96.1%	217.2 32.6% 17.5%	Muted background color
--ring	328 68% 52%	328 68% 52%	Bright pink for focus rings
--radius	0.5rem	0.5rem	Border radius for UI elements