🎨 Design Tokens

Brand Color Palettes

Joy Organics (Wellness)

--jo-primary: #4a7c59;       /* Forest Green */
--jo-secondary: #f5ede8;     /* Warm Cream */
--jo-text: #1a2a1a;         /* Dark Green-Black */
--jo-muted: #3d4a3d;        /* Body Text */
--jo-accent: #8fbc8f;       /* Soft Sage */
--jo-hero-bg: #3d5a3d;      /* Hero Banner */

Glossier (Beauty)

--gl-primary: #ff6b9d;       /* Soft Pink */
--gl-secondary: #f8f8f8;    /* Light Gray */
--gl-text: #000000;         /* Black */
--gl-muted: #444444;        /* Body Text */
--gl-accent: #666666;       /* Subtle */
--gl-footer: #000000;       /* Black Footer */

Liquid Death (Cult Brand)

--ld-primary: #8a6d35;      /* Antique Gold */
--ld-secondary: #141414;    /* Dark Gray */
--ld-text: #ffffff;         /* White */
--ld-muted: #aaaaaa;        /* Light Gray */
--ld-accent: #c41e3a;       /* Blood Red (sparingly) */
--ld-bg: #0a0a0a;          /* Near Black */

Typography

Font Stacks

/* Headers - Elegant */
font-family: Georgia, serif;

/* Body - Clean */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Brand Headers - Bold */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Impact/Punk */
font-family: Impact, 'Arial Black', sans-serif;

/* Monospace - Technical */
font-family: 'Courier New', monospace;

Type Scale

Element	Size	Weight	Line Height
H1	28-32px	600	1.3
H2	24-26px	600	1.3
Body	14-16px	400	1.7
Caption	12-13px	400	1.5
Button	14-16px	600	1

Spacing

--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 40px;

Section Spacing:

• Header padding: 28-40px
• Content padding: 32-40px
• Between sections: 24-40px
• Card padding: 20-24px

Border Radius

--radius-sm: 8px;    /* Cards */
--radius-md: 12px;   /* Main container */
--radius-lg: 24px;   /* Buttons */
--radius-full: 50%;  /* Circles */

Shadows

/* Card shadow */
box-shadow: 0 4px 16px rgba(0,0,0,0.06);

/* Container shadow */
box-shadow: 0 4px 20px rgba(0,0,0,0.08);