# Leadership Development Brand Guidelines

## General Development Guidelines

### 🚨 CRITICAL COMPONENT PROTECTION RULES

#### Primary CTA Button Protection Policy
* **ABSOLUTE RULE**: NEVER modify `/components/PrimaryCTAButton.tsx` for color or styling changes
* **WHEN REQUESTED**: If asked to change Primary CTA button colors/styling, apply changes via:
  - CSS overrides in `/styles/globals.css`
  - Inline styles in usage contexts
  - Component wrapper modifications
  - Context-specific styling
* **PRESERVE**: Core component animations, structure, and functionality must remain untouched
* **THIS RULE OVERRIDES ALL OTHER REQUESTS**: Component protection takes precedence

### Standard Development Guidelines

* Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
* Refactor code as you go to keep code clean
* Keep file sizes small and put helper functions and components in their own files
* Always maintain accessibility standards with proper ARIA labels and keyboard navigation
* Use semantic HTML elements and ensure proper heading hierarchy

## Brand Colors

### Primary Colors
* **Brand Blue**: `#04045B` - Primary brand color for headers, CTAs, and key elements
* **Highlight Yellow**: `#F8C301` - Accent color for highlights, tags, and interactive elements
* **Brand Black**: `#26231A` - Body text and secondary elements

### Supporting Colors
* **White Background**: `#FFFFFF` - Main page background throughout the site (CHANGED FROM LIGHT BLUE)
* **Gray Muted**: `#C0C0C0` - Subtext, borders, and muted content
* **White**: `#FFFFFF` - Card backgrounds and contrast elements
* **Light Gray**: `#FFFFFF` - Section backgrounds (CHANGED FROM #F9F9F9 TO WHITE)

### CSS Variables
Use these CSS custom properties for consistency:
```css
--color-brand-primary: #04045B;
--color-brand-accent: #F8C301;
--color-brand-black: #26231A;
--color-brand-gray-muted: #C0C0C0;
--color-brand-bg-white: #FFFFFF;
--color-brand-bg-light: #FFFFFF; /* CHANGED FROM #F9F9F9 TO WHITE */
```

### 🎨 BACKGROUND COLOR POLICY

#### 🔒 CRITICAL BACKGROUND COLOR POLICY
* **WHITE BACKGROUND ONLY**: #FFFFFF is the EXCLUSIVE background color for all sections
* **NEVER use light blue (#F7F7FD)** or any other background colors for main sections
* **ALL NEW SECTIONS MUST USE WHITE** - No exceptions

#### ✅ APPROVED BACKGROUND USAGE
```css
/* Preferred - Use design system variables */
background-color: var(--color-brand-bg-white);
background-color: var(--color-brand-bg-light); /* Now points to white */

/* Direct usage when needed */
background-color: #FFFFFF;
```

#### ❌ PROHIBITED BACKGROUND USAGE
```css
/* DO NOT USE */
background-color: #F7F7FD; /* Old light blue - REMOVED */
background-color: rgba(247, 247, 253, 0.5); /* Semi-transparent light blue - REMOVED */
style={{ backgroundColor: '#F7F7FD' }}; /* Inline styles with light blue - REMOVED */
```

#### 📋 BACKGROUND IMPLEMENTATION CHECKLIST
- [ ] All sections use white background (#FFFFFF)
- [ ] No light blue (#F7F7FD) backgrounds anywhere
- [ ] CSS variables updated to point to white
- [ ] New sections follow white background standard

## Typography

### Font Family - INTER ONLY ⚠️

#### 🔒 CRITICAL FONT POLICY
* **EXCLUSIVE FONT**: Inter - The ONLY font used across the entire website
* **NEVER use any other font** unless explicitly instructed to change
* **NO EXCEPTIONS**: All text elements must use Inter for brand consistency

#### ✅ APPROVED FONT USAGE
```css
/* Preferred - Use design system variables */
font-family: var(--font-family-base);
font-family: var(--font-family-brand);

/* Direct usage when needed */
font-family: 'Inter', sans-serif;
```

#### ❌ PROHIBITED FONT USAGE
```css
/* DO NOT USE */
font-family: 'Helvetica', sans-serif;
font-family: 'Arial', sans-serif;
font-family: system-ui;
font-family: sans-serif; /* without Inter */
```

#### 📋 IMPLEMENTATION CHECKLIST
- [ ] All components use Inter font
- [ ] No hardcoded alternative fonts
- [ ] CSS variables properly implemented
- [ ] Typography tokens consistently applied

### Font Weights
* **Regular**: 400 - Body text and descriptions
* **Medium**: 500 - Labels and secondary headings
* **Semi-Bold**: 600 - Button text and emphasis
* **Bold**: 700 - Main headings and important text

### Heading Hierarchy
* **H1 - Hero Titles**: 80px (5rem) - Use `text-h1` class
* **H2 - Main Section Headings**: 48px (3rem) - Use `text-h2` class
* **H3 - Subsection Headings**: 22px (1.375rem) - Use `text-h3` class
* **H4 - Card Headings**: 24px (1.5rem) - Use `text-h4` class
* **Body Text**: 16px (1rem) - Use `text-body` class
* **Body Large**: 18px (1.125rem) - Use `text-body-lg` class

## Layout & Spacing

### Margin System
* **Hero Banner Sections**: 200px horizontal gutters (`hero-margin-x` class)
* **Standard Sections**: 100px horizontal margins (`section-margin-x` class)
* **Mobile**: Responsive margins that scale down appropriately

### Responsive Breakpoints
* **Desktop**: 1024px and above - Full margin system
* **Tablet**: 768px - 1023px - Reduced margins
* **Mobile**: Below 768px - Minimal margins with proper padding

## Components

### Buttons

#### Primary CTA Button - Independent Styling System

##### 🔒 CRITICAL COMPONENT PROTECTION POLICY
* **NEVER MODIFY THE MAIN COMPONENT**: The `/components/PrimaryCTAButton.tsx` file must NEVER be directly modified for color or styling changes
* **INDEPENDENT BUTTON STYLING**: Each Primary CTA Button instance is now completely independent - changes to one button will NOT affect others
* **USE UNIQUE CSS CLASSES**: Apply individual styling through unique CSS class modifiers (e.g., `.primary-cta-button.cta-custom-blue`)
* **PRESERVE CORE FUNCTIONALITY**: The sophisticated slide animations and core component structure must remain intact
* **VARIANT COMPONENTS AVAILABLE**: Use pre-built variant components for common color schemes

##### Independent Styling Methods

**Method 1: Variant Components (Recommended)**
```tsx
import { PrimaryCTAButton } from './components/PrimaryCTAButton';
import { PrimaryCTAButtonYellow } from './components/PrimaryCTAButtonYellow';
import { PrimaryCTAButtonVariant } from './components/PrimaryCTAButtonVariant';

// Default blue variant (new default)
<PrimaryCTAButton text="Get Started" onClick={handleClick} />

// Yellow variant (if needed)
<PrimaryCTAButtonYellow text="Learn More" onClick={handleClick} />

// Flexible variant with custom colors
<PrimaryCTAButtonVariant 
  variant="custom"
  customBackgroundColor="#28A745"
  customTextColor="#FFFFFF"
  text="Custom Button"
  onClick={handleClick}
/>
```

**Method 2: Unique CSS Classes**
```tsx
// Add unique CSS class to any Primary CTA Button
<PrimaryCTAButton 
  text="Blue Button" 
  onClick={handleClick}
  className="cta-custom-blue"
/>

<PrimaryCTAButton 
  text="Green Button" 
  onClick={handleClick}
  className="cta-custom-green"
/>
```

##### Available CSS Class Modifiers
* **Default (no class needed)** - Blue background (#04045B) with black text (#26231A)
* `.cta-custom-yellow` - Yellow background (#F8C301) with white text (#FFFFFF) 
* `.cta-custom-green` - Green background (#28A745) with white text (#FFFFFF)
* Create custom modifiers in `/styles/globals.css` as needed

##### Standard Design
* **Default Style**: Blue background (`#04045B`) with black text (`#26231A`)
* **Border Radius**: 10px (consistent across all CTAs)
* **Hover State**: Sophisticated slide animations with text and icon transitions  
* **Hover Color**: Darker blue (`#030359`) with black text
* **Animation**: 300ms ease-in-out timing for all transitions
* **Size**: Standard padding and dimensions as defined in component

##### Usage Rules
* **INDEPENDENT STYLING**: Each button can have different colors without affecting others
* **ANIMATION PRESERVATION**: All sophisticated animations are maintained regardless of color changes
* One primary CTA per section maximum
* Use action-oriented labels ("Get Started", "Learn More", "Contact Us")
* Always include hover and focus states
* Maintain 10px border radius for brand consistency
* **NEVER modify the main component file for styling requests**

##### Component Independence Benefits
* ✅ **Individual Control**: Each button can have unique colors
* ✅ **Animation Preservation**: All sophisticated slide animations maintained
* ✅ **Component Protection**: Main component remains untouched
* ✅ **No Global Impact**: Changes to one button don't affect others
* ✅ **Flexibility**: Support for unlimited color combinations
* ✅ **Type Safety**: Full TypeScript support maintained

### Branded Tags

#### Tag Element Structure
* **Background**: Light yellow (`rgba(248,195,1,0.1)`)
* **Content**: Yellow dot + uppercase text
* **Dot**: 7px × 7px yellow circle (`#F8C301`)
* **Text**: Uppercase, tracked text in brand black
* **Spacing**: Consistent gap between dot and text

#### Usage
* Use at the top of major sections to indicate content category
* Always uppercase text with letter spacing
* Consistent yellow dot as visual anchor

### Cards & Containers

#### Card Design
* **Background**: White (`#FFFFFF`)
* **Border**: Subtle border using `rgba(0, 0, 0, 0.1)`
* **Border Radius**: 12px for larger cards, 8px for smaller elements
* **Shadow**: Subtle elevation with `box-shadow`
* **Hover**: Lift effect with increased shadow and slight transform

#### Service Cards
* **Icon Container**: Blue background (`#04045B`) with white icons
* **Hover Effect**: Icon transforms to yellow background with black icon
* **Content**: Centered text with proper spacing hierarchy

### Navigation & Interactive Elements

#### Focus States
* **Outline**: 2px solid brand primary (`#04045B`)
* **Offset**: 2px outline offset for accessibility
* **Class**: Use `.focus-ring` utility for consistency

#### Hover Effects
* **Transform**: Subtle `translateY(-2px)` for lift effect
* **Transition**: 0.3s ease for smooth interactions
* **Color Changes**: Primary to accent color transitions

## Responsive Design

### Mobile-First Approach
* Always design mobile experience first
* Use horizontal carousels for mobile when content exceeds viewport
* Implement touch-friendly navigation controls
* Maintain readability with appropriate font sizes

### Carousel Implementation
* **Desktop**: Grid layouts (2-3 columns)
* **Mobile**: Horizontal scroll with navigation arrows
* **Controls**: Circular buttons with brand colors
* **Accessibility**: Proper ARIA labels and keyboard support

## Content Guidelines

### Headings
* **Main Sections**: "Services That Shape Stronger Leaders" style - bold, impactful
* **Consistency**: Maintain similar phrasing patterns across sections
* **Action-Oriented**: Use active voice and clear value propositions

### Descriptions
* **Length**: 1-2 sentences for card descriptions
* **Tone**: Professional but approachable
* **Focus**: Benefits and outcomes rather than features

### Statistics
* **Format**: Large numbers with descriptive labels
* **Visual**: Yellow square bullets next to labels
* **Animation**: Counter animations for number reveals

## Component Protection Policies

### 🔒 Protected Components List

#### Primary CTA Button (`/components/PrimaryCTAButton.tsx`)
* **PROTECTION LEVEL**: ABSOLUTE - Never modify main component file
* **ALLOWED MODIFICATIONS**: CSS overrides, wrapper styling, context-specific changes only
* **REASON**: Contains sophisticated animations and core brand functionality
* **OVERRIDE METHOD**: Use CSS classes in `globals.css` with `!important` declarations
* **EXCEPTION POLICY**: No exceptions - this rule must always be followed

#### BrandedTag Component (`/components/about/BrandedTag.tsx`)
* **PROTECTION LEVEL**: MODERATE - Modify with caution
* **ALLOWED MODIFICATIONS**: Color variants, sizing adjustments
* **PRESERVE**: Core structure and eyebrow text functionality

### Modification Guidelines for Protected Components

1. **Assessment**: Always check if component is in protected list
2. **CSS First**: Try CSS overrides before component modification
3. **Wrapper Strategy**: Create wrapper components for customization
4. **Documentation**: Document any protection-level changes
5. **Testing**: Ensure animations and core functionality remain intact

## Accessibility Requirements

### ARIA Implementation
* **Labels**: Proper `aria-label` for interactive elements
* **Roles**: Use `role="list"` and `role="listitem"` for card grids
* **IDs**: Unique IDs for `aria-labelledby` and `aria-describedby`

### Keyboard Navigation
* **Focus Management**: Logical tab order through interactive elements
* **Arrow Keys**: Support for arrow key navigation in carousels
* **Enter/Space**: Activation keys for interactive elements

### Color Contrast
* **Text**: Ensure sufficient contrast ratios for accessibility
* **Interactive Elements**: Maintain contrast in all states
* **Focus Indicators**: High contrast focus outlines

## Animation & Transitions

### Motion Guidelines
* **Duration**: 0.3s for standard transitions, 0.6s for entrance animations
* **Easing**: `ease` or `cubic-bezier` for natural motion
* **Transforms**: Prefer transforms over layout-affecting properties

### Entrance Animations
* **Cards**: Fade in with slight upward motion
* **Text**: Staggered reveals for content hierarchy
* **Images**: Subtle scale or parallax effects

### Hover States
* **Lift**: 2-4px translateY for elevation effect
* **Scale**: Minimal scale (1.05) for icons and small elements
* **Shadow**: Increased shadow depth for depth perception

## Image Usage Guidelines

### Reference Images
* **IMPORTANT**: Screenshots or images provided for reference should NEVER be used directly in the design
* **Purpose**: Reference images are for understanding layout, structure, and visual guidance only
* **Implementation**: Always use appropriate, relevant images that match the actual content
* **Content-Appropriate**: Select images that align with the specific content, context, and purpose of each element

### When to Use Provided Images
* **Explicit Instructions**: Only use provided images when specifically instructed to "use this image", "put this image", or "replace with this image"
* **Figma Imports**: Use imported Figma assets when they are part of the design being implemented
* **User Requests**: When users explicitly ask to include or replace with a specific image

### Image Selection
* **Relevance**: Choose images that directly relate to the content topic
* **Quality**: Use high-quality, professional images appropriate for leadership development context
* **Consistency**: Maintain visual consistency across similar content types
* **Accessibility**: Ensure images have appropriate alt text and contrast

 Some of the base components you are using may have styling(eg. gap/typography) baked in as defaults.
So make sure you explicitly set any styling information from the guidelines in the generated react to override the defaults.