chorus-services/modules/teaser/BRAND_STYLING_INTEGRATION.md

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:

/* 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:

/* 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

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

Typography Scaling

/* 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.