# Brand Styling Integration Guide

This document outlines how to integrate the CHORUS brand guidelines once they are completed.

## Current State

The teaser website is implemented with basic HTML structure and minimal styling using:
- Simple inline styles for immediate functionality
- CSS variables for easy theme switching
- Basic form styling with accessibility focus
- No complex animations or brand-specific elements

## Brand Integration Tasks

### 1. Font Integration
**Files to Update:**
- `app/globals.css` - Update font imports
- `tailwind.config.js` - Configure font families

**Changes Needed:**
```css
/* Replace current font import with brand fonts */
@import url('path-to-exo-font');
@import url('path-to-inter-tight-font');
@import url('path-to-inconsolata-font');

/* Update font classes */
.font-logo { font-family: "Exo", sans-serif; }
.font-content { font-family: "Inter Tight", sans-serif; }
.font-technical { font-family: "Inconsolata", monospace; }
```

### 2. Color Palette Implementation
**Files to Update:**
- `app/globals.css` - CSS variables
- `tailwind.config.js` - Color configuration

**Brand Colors to Apply:**
- Dark Mulberry: #0b0213 (primary)
- Walnut Brown: #403730 (secondary)
- Natural Paper: #F5F5DC (backgrounds)
- Brushed Nickel: #c1bfb1 (accents)

### 3. Component Styling Updates

#### TeaserHero.tsx
- Replace simple logo placeholder with 3D Mobius ring
- Apply Exo Thin for CHORUS logotype
- Implement dark mode background
- Add subtle animations (respecting reduced motion preferences)

#### MissionStatement.tsx
- Apply Inter Tight typography hierarchy
- Implement brand color scheme
- Add proper spacing using 8px grid system

#### EarlyAccessForm.tsx
- Style modal with brand colors
- Apply form input styling per brand guidelines
- Implement proper button styling
- Add brand-compliant success states

### 4. Layout and Spacing
**Apply 8px Grid System:**
```css
/* Spacing scale */
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--spacing-xl: 64px;
--spacing-2xl: 128px;
```

### 5. Animation Guidelines
**Implement Brand-Compliant Motion:**
- 200ms ease-out transitions for interactions
- Accessibility-aware animations with `prefers-reduced-motion`
- Mobius ring rotation animation (20s linear infinite)
- Subtle fade-in animations for content sections

## Integration Process

### Step 1: Asset Preparation
1. Copy brand assets from `/brand-assets/` to `/public/`
2. Create symlinks for fonts and logos
3. Optimize images for web delivery

### Step 2: Styling Implementation
1. Update CSS variables in `globals.css`
2. Replace inline styles with brand-compliant CSS classes
3. Apply Tailwind configuration with brand colors
4. Implement responsive design breakpoints

### Step 3: Component Enhancement
1. Update each component file with brand styling
2. Replace placeholder elements with brand assets
3. Implement proper typography hierarchy
4. Add accessibility-compliant animations

### Step 4: Testing and Refinement
1. Test on multiple devices and screen sizes
2. Verify accessibility compliance (WCAG 2.1 AA)
3. Validate brand guideline adherence
4. Performance optimization

## Brand Asset Requirements

### Logos
- Mobius ring 3D model or high-quality SVG
- CHORUS wordmark in Exo Thin
- Favicon and app icons

### Color Specifications
- Full brand color palette with all variants
- Dark mode and light mode specifications
- Accessibility contrast ratios verified

### Typography Specifications
- Complete font weight ranges
- Line height specifications
- Letter spacing values
- Responsive typography scale

## Responsive Design Implementation

### Breakpoints
```css
/* Mobile First */
--mobile: 320px;
--tablet: 768px;
--desktop: 1024px;
--large: 1440px;
```

### Typography Scaling
```css
/* Responsive text sizes */
.text-logotype {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 100;
  letter-spacing: 0.2em;
}
```

## Performance Considerations

### Font Loading
- Implement `font-display: swap` for web fonts
- Preload critical brand fonts
- Use font subsetting for faster loading

### Image Optimization
- Optimize logo files for different screen densities
- Implement lazy loading for non-critical images
- Use modern image formats (WebP, AVIF) with fallbacks

### CSS Optimization
- Minimize CSS bundle size
- Use CSS custom properties for theme consistency
- Implement critical CSS inlining

## Accessibility Compliance

### Color Contrast
- Ensure minimum 4.5:1 contrast ratio for normal text
- Ensure minimum 3:1 contrast ratio for large text
- Test with color blindness simulation tools

### Motion Accessibility
- Respect `prefers-reduced-motion` user preference
- Provide reduced motion alternatives
- Ensure animations don't trigger vestibular disorders

### Keyboard Navigation
- Implement proper focus management
- Ensure all interactive elements are keyboard accessible
- Provide visible focus indicators

## File Structure After Integration

```
/modules/teaser/
├── app/
│   ├── globals.css          # ← Brand styles integrated
│   ├── layout.tsx           # ← Meta tags updated
│   └── page.tsx            # ← Styling classes applied
├── components/
│   ├── TeaserHero.tsx      # ← 3D logo, brand colors
│   ├── MissionStatement.tsx # ← Typography hierarchy
│   └── EarlyAccessForm.tsx # ← Brand form styling
├── public/
│   ├── fonts/              # ← Brand font files
│   ├── logos/              # ← Brand logo assets
│   └── images/             # ← Optimized brand images
└── styles/
    ├── brand.css           # ← Brand-specific styles
    └── components.css      # ← Component-specific styles
```

## Testing Checklist

- [ ] Visual comparison with brand style guide
- [ ] Typography rendering across browsers
- [ ] Color accuracy on different displays
- [ ] Animation performance on various devices
- [ ] Accessibility testing with screen readers
- [ ] Mobile responsiveness validation
- [ ] Performance benchmarking
- [ ] Cross-browser compatibility testing

## Notes

- Current implementation prioritizes functionality over aesthetics
- All components use semantic HTML for accessibility
- Form validation and API integration are fully functional
- Ready for immediate brand styling overlay
- No breaking changes required for styling integration

---

*This guide ensures smooth integration of brand guidelines while maintaining the functional foundation already established.*