▲
# 🔥 REDEFINE WEBSITE — PAGE STRUCTURE BREAKDOWN
## Visual Layout
```
┌────────────────────────────────────────────┐
│ HERO SECTION │
│ (Black → Teal Gradient) │
│ │
│ 🔥 REDEFINE 🔥 │
│ Transform How You Think │
│ Who You Are • What's Possible │
│ │
│ [LEARN MORE BUTTON - YELLOW] │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ WHAT IS REDEFINE? (White background) │
│ │
│ Left Column │ Right Column │
│ The Problem │ The REDEFINE │
│ We Solve │ Solution │
│ │ │
│ Belief boxes: │ Belief boxes: │
│ • I'm not smart │ • I can change │
│ • I'm stuck │ • I can set goals │
│ • System is rigged │ • I have power │
│ │ │
│ Evidence section: │
│ CBT • Critical Consciousness │
│ Motivation • Lived Experience │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ THEORY OF CHANGE (Light Gray background) │
│ │
│ Problem → Intervention → Transformation │
│ ↓ ↓ ↓ │
│ [Box 1] [Box 2] [Box 3] │
│ │
│ Detailed Explanation Section │
│ 8 Modules described │
│ │
│ Ripple Effect: │
│ Individual → Family → Community → System │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ THE 8 MODULES (Black → Teal Gradient) │
│ │
│ [Module 1] [Module 2] [Module 3] [Mod 4] │
│ Recognize Examine Distort? Empower │
│ │
│ [Module 5] [Module 6] [Module 7] [Mod 8] │
│ Frame Integrate Navigate Emerge │
│ │
│ Flow Visual: │
│ RECOGNIZE → EXAMINE → DISTORT? → EMPOWER │
│ → FRAME → INTEGRATE → NAVIGATE → EMERGE │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ 7 WAYS TO REDEFINE (White background) │
│ │
│ [Little BRO] [BRO Project] [Behind Bars] │
│ Ages 7-12 Ages 13-21 Ages 14-30 │
│ │
│ [Daddy & Me] [BRO Space] [Retreats] │
│ Families All Ages Grades 6-8 │
│ │
│ [CBT in Classroom] │
│ Teachers │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ CORE VALUES (Light Gray background) │
│ │
│ [Safety] [Authenticity] [See Systems] │
│ │
│ [Agency] [Culture] [Belief] │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ CALL TO ACTION (Teal → Black Gradient) │
│ │
│ Ready to REDEFINE? │
│ │
│ [GET STARTED BUTTON - YELLOW] │
│ │
└────────────────────────────────────────────┘
```
---
## Color Scheme Reference
### Primary Colors (Used Throughout)
```
TEAL (#0DAFA8)
████████████████████████ Used for:
• Section titles
• Card borders
• Accents
• Hover states
YELLOW (#FFEB00)
████████████████████████ Used for:
• Buttons
• Dividers
• Emphasis
• Highlights
• Module card hover
BLACK (#000000)
████████████████████████ Used for:
• Text
• Dark backgrounds
• Gradients
• Borders
LIGHT GRAY (#F5F5F5)
████████████████████████ Used for:
• Section backgrounds
• Card backgrounds
• Subtle contrast
```
---
## Section-by-Section Breakdown
### **1. HERO SECTION**
```
Height: 600px (desktop), 400px (mobile)
Background: Linear gradient (Black 0% → Teal 100%)
Text Color: White
Content:
- h1: "REDEFINE"
- Tagline: "Transform How You Think • Who You Are • What's Possible"
- Subtitle: "An 8-Module Framework..."
- CTA Button: Yellow background, black text
```
**Purpose:** Immediate visual impact. Communicate value proposition. Encourage action.
---
### **2. WHAT IS REDEFINE SECTION**
```
Background: White
Layout: Two columns (desktop), One column (mobile)
Left Column:
- h3: "The Problem We Solve"
- Paragraph describing young people's situation
- Yellow-bordered box with belief statement:
"I'm not smart. I'm stuck. The system is rigged."
Right Column:
- h3: "The REDEFINE Solution"
- Paragraph describing REDEFINE approach
- Yellow-bordered box with belief statement:
"I can change. I can set goals. I have power."
Below:
- h3: "Grounded in Evidence"
- Four boxes with evidence base:
✓ CBT
✓ Critical Consciousness
✓ Motivational Psychology
✓ Lived Experience
```
**Purpose:** Show the problem-solution fit. Position REDEFINE as the answer.
---
### **3. THEORY OF CHANGE SECTION**
```
Background: Light Gray
Content:
A. Five-column flow visual:
[Problem] → [Intervention] → [Transformation]
B. Detailed explanation:
- h4: "How It Works"
- 8 paragraphs explaining each module
- Focus on: Recognize → Examine → Distort? → Empower
- Then: Frame → Integrate → Navigate → Emerge
C. Ripple effect section:
- Individual transformation
- Family impact
- Community change
- Systemic shift
```
**Purpose:** Show the logic model. Prove it works. Convince funders.
**For:** Researchers, educators, funders, partners
---
### **4. THE 8 MODULES SECTION**
```
Background: Gradient (Black 0% → Teal 100%)
Text: White
Layout: 4-column grid (repeating twice for 8 modules)
Each Module Card:
- Number (large, teal)
- Name (white, uppercase)
- Description (light gray)
- Border: 2px yellow
- Hover: Background turns yellow, text turns black
Below Cards:
- Flow visual showing complete journey
- Background: White
- Border: Dashed yellow
- All 8 modules in sequence with arrows
```
**Purpose:** Teach the methodology. Show the complete journey. Make it visual.
**Key:** Hover effect shows interactivity. Shows this is the core framework.
---
### **5. PROGRAMS SECTION**
```
Background: White
Layout: 7-column grid (responsive: 2-3 columns on tablet, 1 on mobile)
Each Program Card:
- Icon (emoji)
- Name (program name, yellow text)
- Focus (ages/type, teal text, uppercase)
- Description (program details)
- Borders: Yellow top (4px), Teal bottom (4px)
- Background: Black to teal gradient
- Hover: Card rises up
Programs Listed:
1. 🧒 Little BRO (Ages 7-12 • Foundation)
2. 👨 The BRO Project (Ages 13-21 • Core)
3. 🎤 Behind the Bars (Ages 14-30 • Creative)
4. 👨👧 Daddy & Me (Families • Healing)
5. 🏥 BRO Space (All Ages • Clinical)
6. 🎯 Middle School Retreats (Grades 6-8 • Intensive)
7. 🎓 CBT in Classroom (Teachers • Training)
```
**Purpose:** Show program diversity. Emphasize framework unity ("Same framework, different entry points").
---
### **6. CORE VALUES SECTION**
```
Background: Light Gray
Layout: 6-column grid (3 columns on tablet, 1 on mobile)
Each Value Card:
- Icon (emoji)
- Title (teal, uppercase, bold)
- Description (gray text)
- Border: 3px teal
- Hover: Background turns yellow, text turns black, card rotates
Values Listed:
1. 🔒 Safety First
2. ✨ Authenticity
3. 👁️ Critical Consciousness
4. ⚡ Agency & Ownership
5. 🤝 Cultural Humility
6. ❤️ Belief in Your Power
```
**Purpose:** Communicate organizational culture. Show "why" not just "what."
---
### **7. CALL TO ACTION SECTION**
```
Background: Gradient (Teal 0% → Black 100%)
Text: White
Height: Medium (4rem padding)
Alignment: Center
Content:
- h2: "Ready to REDEFINE?"
- p: "Whether you're a young person, parent, educator..."
- p: "Let's transform together."
- CTA Button: Yellow background, black text, uppercase
Button:
- Text: "Get Started"
- Destination: #contact or application page
- Hover: Color change
```
**Purpose:** Conversion point. Get people to take next action.
---
## Responsive Behavior
### **Desktop (1200px+)**
- All multi-column layouts visible
- Full-size fonts
- Hover effects active
- All animations visible
### **Tablet (768px - 1199px)**
- 2-column layouts become 2-column or stacked
- Module grid: 2 columns per row
- Program grid: 2-3 columns
- Values grid: 2 columns
- Slightly smaller fonts
### **Mobile (below 768px)**
- All layouts stack to 1 column
- Smaller fonts
- Reduced padding
- Touch-friendly button sizes
- No hover effects (use active/focus instead)
---
## Spacing & Sizing
### **Typography**
```
h1 (Hero): 5rem desktop, 2.5rem mobile
h2 (Section Title): 3rem desktop, 2rem mobile
h3: 1.8rem
h4: 1.2rem - 1.4rem
p (Body): 1rem desktop, 0.95rem mobile
p (Small): 0.95rem - 0.9rem
```
### **Spacing**
```
Section padding: 5rem (5 × 16px = 80px) top/bottom
Column gaps: 3rem (48px)
Card padding: 2rem (32px)
Small spacing: 1rem (16px)
```
### **Buttons**
```
Padding: 1rem 2.5rem (16px top/bottom, 40px left/right)
Font size: 1rem (16px)
Font weight: 700 (bold)
Text transform: uppercase
Letter spacing: 1-2px
```
---
## Interactive Elements
### **Hover States**
**Module Cards:**
- Background: Changes from transparent to yellow
- Text color: White → Black
- Animation: Smooth 0.3s transition
**Program Cards:**
- Transform: translateY(-10px) — rises up
- Box shadow: Added for depth
- Animation: 0.3s ease
**Value Cards:**
- Background: White → Yellow
- Text color: Gray → Black
- Transform: rotate(-1deg) — subtle tilt
- Animation: 0.3s ease
**CTA Buttons:**
- Background: Yellow → Teal
- Text color: Black → White
- Transform: translateY(-3px) — rises slightly
- Animation: 0.3s ease
---
## Content Calendar for Updates
**Monthly Updates:**
- [ ] Update program capacities/dates
- [ ] Add testimonials/impact stories
- [ ] Refresh photos
- [ ] Update success statistics
**Quarterly Updates:**
- [ ] Review and update copy
- [ ] Check all links work
- [ ] Verify programs are accurate
- [ ] Gather and add new testimonials
**Annually:**
- [ ] Refresh color scheme if needed
- [ ] Update core values if evolved
- [ ] Add new programs
- [ ] Comprehensive redesign assessment
---
## Integration Points with Rest of Site
This page should link to/from:
**Outbound Links From This Page:**
- Program names → Individual program detail pages
- "Get Started" button → Application form or contact page
- Values section → About page or team page
- Each module → Curriculum page (optional)
**Inbound Links To This Page:**
- Main navigation: "About" or "Programs"
- Sidebar/mega menu
- Footer links
- Social media
- Email campaigns
---
## Print vs. Web
### **Web Version (This File)**
- Responsive design
- Interactive hover states
- Smooth animations
- Color gradients
- Optimized for screen reading
### **Print Version (PDF)**
- Readable in grayscale
- Optimized margins
- High contrast for printing
- Static (no animation)
- Professional, formal tone
---
## Accessibility Features
**Included:**
- Semantic HTML (h1, h2, h3, p, etc.)
- Color contrast ratios meet WCAG AA standards
- Responsive text sizing
- Touch targets large enough (44px minimum)
- Clear call-to-action buttons
**Recommendations:**
- Add alt text to all images
- Use Squarespace's accessibility checker
- Test with screen readers (NVDA, JAWS)
- Ensure keyboard navigation works
- Add ARIA labels if needed
---
## Performance Metrics
**Target Performance:**
- Page load: < 3 seconds
- Largest contentful paint: < 2.5 seconds
- Cumulative layout shift: < 0.1
- First input delay: < 100ms
**Optimization Tips:**
- Compress all images (WebP format)
- Minimize CSS/JavaScript
- Enable caching
- Use Squarespace's CDN
- Lazy load images
- Remove unused CSS
---
## File Size Reference
```
HTML: ~30 KB (all code)
CSS: ~15 KB (styling)
Images: ~1+ MB (depends on photos added)
Total optimal: < 5 MB with optimized images
```
---
## Quick Reference: What Goes Where
| Element | Location | Color |
|---------|----------|-------|
| Main headline | Hero | Yellow (#FFEB00) |
| Section titles | Each section | Black (#000000) |
| Accents | Various | Teal (#0DAFA8) |
| Buttons | CTAs | Yellow (#FFEB00) |
| Borders | Cards | Yellow or Teal |
| Background | Alternate sections | White or Light Gray |
| Gradients | Hero & Modules | Black to Teal |
| Text | Body | Dark gray (#333) |
---
**This is your complete visual reference guide. Use it to:**
- Understand the design
- Customize colors
- Modify layouts
- Train others
- Troubleshoot issues
---
**Keep this handy! 🔥**# 🔥 REDEFINE WEBSITE — PAGE STRUCTURE BREAKDOWN
## Visual Layout
```
┌────────────────────────────────────────────┐
│ HERO SECTION │
│ (Black → Teal Gradient) │
│ │
│ 🔥 REDEFINE 🔥 │
│ Transform How You Think │
│ Who You Are • What's Possible │
│ │
│ [LEARN MORE BUTTON - YELLOW] │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ WHAT IS REDEFINE? (White background) │
│ │
│ Left Column │ Right Column │
│ The Problem │ The REDEFINE │
│ We Solve │ Solution │
│ │ │
│ Belief boxes: │ Belief boxes: │
│ • I'm not smart │ • I can change │
│ • I'm stuck │ • I can set goals │
│ • System is rigged │ • I have power │
│ │ │
│ Evidence section: │
│ CBT • Critical Consciousness │
│ Motivation • Lived Experience │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ THEORY OF CHANGE (Light Gray background) │
│ │
│ Problem → Intervention → Transformation │
│ ↓ ↓ ↓ │
│ [Box 1] [Box 2] [Box 3] │
│ │
│ Detailed Explanation Section │
│ 8 Modules described │
│ │
│ Ripple Effect: │
│ Individual → Family → Community → System │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ THE 8 MODULES (Black → Teal Gradient) │
│ │
│ [Module 1] [Module 2] [Module 3] [Mod 4] │
│ Recognize Examine Distort? Empower │
│ │
│ [Module 5] [Module 6] [Module 7] [Mod 8] │
│ Frame Integrate Navigate Emerge │
│ │
│ Flow Visual: │
│ RECOGNIZE → EXAMINE → DISTORT? → EMPOWER │
│ → FRAME → INTEGRATE → NAVIGATE → EMERGE │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ 7 WAYS TO REDEFINE (White background) │
│ │
│ [Little BRO] [BRO Project] [Behind Bars] │
│ Ages 7-12 Ages 13-21 Ages 14-30 │
│ │
│ [Daddy & Me] [BRO Space] [Retreats] │
│ Families All Ages Grades 6-8 │
│ │
│ [CBT in Classroom] │
│ Teachers │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ CORE VALUES (Light Gray background) │
│ │
│ [Safety] [Authenticity] [See Systems] │
│ │
│ [Agency] [Culture] [Belief] │
│ │
└────────────────────────────────────────────┘
┌────────────────────────────────────────────┐
│ CALL TO ACTION (Teal → Black Gradient) │
│ │
│ Ready to REDEFINE? │
│ │
│ [GET STARTED BUTTON - YELLOW] │
│ │
└────────────────────────────────────────────┘
```
---
## Color Scheme Reference
### Primary Colors (Used Throughout)
```
TEAL (#0DAFA8)
████████████████████████ Used for:
• Section titles
• Card borders
• Accents
• Hover states
YELLOW (#FFEB00)
████████████████████████ Used for:
• Buttons
• Dividers
• Emphasis
• Highlights
• Module card hover
BLACK (#000000)
████████████████████████ Used for:
• Text
• Dark backgrounds
• Gradients
• Borders
LIGHT GRAY (#F5F5F5)
████████████████████████ Used for:
• Section backgrounds
• Card backgrounds
• Subtle contrast
```
---
## Section-by-Section Breakdown
### **1. HERO SECTION**
```
Height: 600px (desktop), 400px (mobile)
Background: Linear gradient (Black 0% → Teal 100%)
Text Color: White
Content:
- h1: "REDEFINE"
- Tagline: "Transform How You Think • Who You Are • What's Possible"
- Subtitle: "An 8-Module Framework..."
- CTA Button: Yellow background, black text
```
**Purpose:** Immediate visual impact. Communicate value proposition. Encourage action.
---
### **2. WHAT IS REDEFINE SECTION**
```
Background: White
Layout: Two columns (desktop), One column (mobile)
Left Column:
- h3: "The Problem We Solve"
- Paragraph describing young people's situation
- Yellow-bordered box with belief statement:
"I'm not smart. I'm stuck. The system is rigged."
Right Column:
- h3: "The REDEFINE Solution"
- Paragraph describing REDEFINE approach
- Yellow-bordered box with belief statement:
"I can change. I can set goals. I have power."
Below:
- h3: "Grounded in Evidence"
- Four boxes with evidence base:
✓ CBT
✓ Critical Consciousness
✓ Motivational Psychology
✓ Lived Experience
```
**Purpose:** Show the problem-solution fit. Position REDEFINE as the answer.
---
### **3. THEORY OF CHANGE SECTION**
```
Background: Light Gray
Content:
A. Five-column flow visual:
[Problem] → [Intervention] → [Transformation]
B. Detailed explanation:
- h4: "How It Works"
- 8 paragraphs explaining each module
- Focus on: Recognize → Examine → Distort? → Empower
- Then: Frame → Integrate → Navigate → Emerge
C. Ripple effect section:
- Individual transformation
- Family impact
- Community change
- Systemic shift
```
**Purpose:** Show the logic model. Prove it works. Convince funders.
**For:** Researchers, educators, funders, partners
---
### **4. THE 8 MODULES SECTION**
```
Background: Gradient (Black 0% → Teal 100%)
Text: White
Layout: 4-column grid (repeating twice for 8 modules)
Each Module Card:
- Number (large, teal)
- Name (white, uppercase)
- Description (light gray)
- Border: 2px yellow
- Hover: Background turns yellow, text turns black
Below Cards:
- Flow visual showing complete journey
- Background: White
- Border: Dashed yellow
- All 8 modules in sequence with arrows
```
**Purpose:** Teach the methodology. Show the complete journey. Make it visual.
**Key:** Hover effect shows interactivity. Shows this is the core framework.
---
### **5. PROGRAMS SECTION**
```
Background: White
Layout: 7-column grid (responsive: 2-3 columns on tablet, 1 on mobile)
Each Program Card:
- Icon (emoji)
- Name (program name, yellow text)
- Focus (ages/type, teal text, uppercase)
- Description (program details)
- Borders: Yellow top (4px), Teal bottom (4px)
- Background: Black to teal gradient
- Hover: Card rises up
Programs Listed:
1. 🧒 Little BRO (Ages 7-12 • Foundation)
2. 👨 The BRO Project (Ages 13-21 • Core)
3. 🎤 Behind the Bars (Ages 14-30 • Creative)
4. 👨👧 Daddy & Me (Families • Healing)
5. 🏥 BRO Space (All Ages • Clinical)
6. 🎯 Middle School Retreats (Grades 6-8 • Intensive)
7. 🎓 CBT in Classroom (Teachers • Training)
```
**Purpose:** Show program diversity. Emphasize framework unity ("Same framework, different entry points").
---
### **6. CORE VALUES SECTION**
```
Background: Light Gray
Layout: 6-column grid (3 columns on tablet, 1 on mobile)
Each Value Card:
- Icon (emoji)
- Title (teal, uppercase, bold)
- Description (gray text)
- Border: 3px teal
- Hover: Background turns yellow, text turns black, card rotates
Values Listed:
1. 🔒 Safety First
2. ✨ Authenticity
3. 👁️ Critical Consciousness
4. ⚡ Agency & Ownership
5. 🤝 Cultural Humility
6. ❤️ Belief in Your Power
```
**Purpose:** Communicate organizational culture. Show "why" not just "what."
---
### **7. CALL TO ACTION SECTION**
```
Background: Gradient (Teal 0% → Black 100%)
Text: White
Height: Medium (4rem padding)
Alignment: Center
Content:
- h2: "Ready to REDEFINE?"
- p: "Whether you're a young person, parent, educator..."
- p: "Let's transform together."
- CTA Button: Yellow background, black text, uppercase
Button:
- Text: "Get Started"
- Destination: #contact or application page
- Hover: Color change
```
**Purpose:** Conversion point. Get people to take next action.
---
## Responsive Behavior
### **Desktop (1200px+)**
- All multi-column layouts visible
- Full-size fonts
- Hover effects active
- All animations visible
### **Tablet (768px - 1199px)**
- 2-column layouts become 2-column or stacked
- Module grid: 2 columns per row
- Program grid: 2-3 columns
- Values grid: 2 columns
- Slightly smaller fonts
### **Mobile (below 768px)**
- All layouts stack to 1 column
- Smaller fonts
- Reduced padding
- Touch-friendly button sizes
- No hover effects (use active/focus instead)
---
## Spacing & Sizing
### **Typography**
```
h1 (Hero): 5rem desktop, 2.5rem mobile
h2 (Section Title): 3rem desktop, 2rem mobile
h3: 1.8rem
h4: 1.2rem - 1.4rem
p (Body): 1rem desktop, 0.95rem mobile
p (Small): 0.95rem - 0.9rem
```
### **Spacing**
```
Section padding: 5rem (5 × 16px = 80px) top/bottom
Column gaps: 3rem (48px)
Card padding: 2rem (32px)
Small spacing: 1rem (16px)
```
### **Buttons**
```
Padding: 1rem 2.5rem (16px top/bottom, 40px left/right)
Font size: 1rem (16px)
Font weight: 700 (bold)
Text transform: uppercase
Letter spacing: 1-2px
```
---
## Interactive Elements
### **Hover States**
**Module Cards:**
- Background: Changes from transparent to yellow
- Text color: White → Black
- Animation: Smooth 0.3s transition
**Program Cards:**
- Transform: translateY(-10px) — rises up
- Box shadow: Added for depth
- Animation: 0.3s ease
**Value Cards:**
- Background: White → Yellow
- Text color: Gray → Black
- Transform: rotate(-1deg) — subtle tilt
- Animation: 0.3s ease
**CTA Buttons:**
- Background: Yellow → Teal
- Text color: Black → White
- Transform: translateY(-3px) — rises slightly
- Animation: 0.3s ease
---
## Content Calendar for Updates
**Monthly Updates:**
- [ ] Update program capacities/dates
- [ ] Add testimonials/impact stories
- [ ] Refresh photos
- [ ] Update success statistics
**Quarterly Updates:**
- [ ] Review and update copy
- [ ] Check all links work
- [ ] Verify programs are accurate
- [ ] Gather and add new testimonials
**Annually:**
- [ ] Refresh color scheme if needed
- [ ] Update core values if evolved
- [ ] Add new programs
- [ ] Comprehensive redesign assessment
---
## Integration Points with Rest of Site
This page should link to/from:
**Outbound Links From This Page:**
- Program names → Individual program detail pages
- "Get Started" button → Application form or contact page
- Values section → About page or team page
- Each module → Curriculum page (optional)
**Inbound Links To This Page:**
- Main navigation: "About" or "Programs"
- Sidebar/mega menu
- Footer links
- Social media
- Email campaigns
---
## Print vs. Web
### **Web Version (This File)**
- Responsive design
- Interactive hover states
- Smooth animations
- Color gradients
- Optimized for screen reading
### **Print Version (PDF)**
- Readable in grayscale
- Optimized margins
- High contrast for printing
- Static (no animation)
- Professional, formal tone
---
## Accessibility Features
**Included:**
- Semantic HTML (h1, h2, h3, p, etc.)
- Color contrast ratios meet WCAG AA standards
- Responsive text sizing
- Touch targets large enough (44px minimum)
- Clear call-to-action buttons
**Recommendations:**
- Add alt text to all images
- Use Squarespace's accessibility checker
- Test with screen readers (NVDA, JAWS)
- Ensure keyboard navigation works
- Add ARIA labels if needed
---
## Performance Metrics
**Target Performance:**
- Page load: < 3 seconds
- Largest contentful paint: < 2.5 seconds
- Cumulative layout shift: < 0.1
- First input delay: < 100ms
**Optimization Tips:**
- Compress all images (WebP format)
- Minimize CSS/JavaScript
- Enable caching
- Use Squarespace's CDN
- Lazy load images
- Remove unused CSS
---
## File Size Reference
```
HTML: ~30 KB (all code)
CSS: ~15 KB (styling)
Images: ~1+ MB (depends on photos added)
Total optimal: < 5 MB with optimized images
```
---
## Quick Reference: What Goes Where
| Element | Location | Color |
|---------|----------|-------|
| Main headline | Hero | Yellow (#FFEB00) |
| Section titles | Each section | Black (#000000) |
| Accents | Various | Teal (#0DAFA8) |
| Buttons | CTAs | Yellow (#FFEB00) |
| Borders | Cards | Yellow or Teal |
| Background | Alternate sections | White or Light Gray |
| Gradients | Hero & Modules | Black to Teal |
| Text | Body | Dark gray (#333) |
---
**This is your complete visual reference guide. Use it to:**
- Understand the design
- Customize colors
- Modify layouts
- Train others
- Troubleshoot issues
---
**Keep this handy! 🔥**
