🎯 Agent Guide

Quick Start

        Goal: Create a new email case study that follows brand guidelines, accessibility standards, and consistent design patterns.
      

Step 1: Research the Brand

Check if brand kit exists:

ls /root/lare-labs/brand-kits/{brand-name}*

If no brand kit, research:
- Real brand colors from their website
- Typography they use
- Imagery style (lifestyle vs product vs abstract)
- Brand voice (professional, playful, luxury, edgy)

Step 2: Choose Template Type

Hero Focus — Big image, minimal text (product launches)
Editorial — Story-driven (welcome emails)
Promotional — Offer/CTA heavy (sales)
Minimal — Clean, luxury (retention)

Step 3: Image Requirements (MUST BE CONTEXTUAL)

Joy Organics: Wellness, CBD, natural, spa, calm
Glossier: Fresh faces, dewy skin, young women, minimal
Liquid Death: Mountains, skulls, energy, concerts, bold
Graza: Olive oil, cooking, food, Mediterranean
Away: Travel, airports, luggage, adventure

Never use: Generic placeholders, emojis as UI elements, off-brand imagery

Step 4: Accessibility Checklist

Before saving the email, verify:

☐ All text has 4.5:1 contrast ratio minimum
☐ Background colors don't make text invisible
☐ Buttons have clear hover/focus states
☐ Images have alt text
☐ Mobile responsive (test at 320px)

Step 5: File Structure

Save email to:

/root/lare-labs/website/public/case-studies/{brand-name}/{brand-name}-v{N}.html

Update index in /root/lare-labs/CASE_STUDY_INDEX.md

Step 6: Testing & Deploy

Build the project:

cd /root/lare-labs/website && npm run build

Check for errors

Deploy:

export VERCEL_TOKEN=$(cat /root/.env.master | grep VERCEL_TOKEN | cut -d'"' -f2)
npx vercel --token "$VERCEL_TOKEN" --prod --yes

Common Mistakes to Avoid

Dark mode CSS — Don't use prefers-color-scheme. It's broken in email.
Emojis as icons — Use actual images or Lucide icons.
Generic colors — Match the brand's actual palette.
No alt text — Always describe images.
Fixed widths — Use percentages for mobile.

Example Command Flow

# 1. Check brand kit
cat /root/lare-labs/brand-kits/joy-organics-draft.json

# 2. Copy template
cp /root/lare-labs/design-system/templates/editorial.html \
   /root/lare-labs/website/public/case-studies/joy-organics/joy-organics-v3.html

# 3. Edit with brand colors and imagery
# ... edit file ...

# 4. Test build
cd /root/lare-labs/website && npm run build

# 5. Deploy
export VERCEL_TOKEN=$(cat /root/.env.master | grep VERCEL_TOKEN | cut -d'"' -f2)
npx vercel --token "$VERCEL_TOKEN" --prod --yes