chorus-services-website/BRAND_SYSTEM_DEMO.md

CHORUS Services Brand System Implementation Demo

Overview

This document demonstrates practical implementation of the CHORUS Services brand system through code examples, component updates, and UX patterns that showcase the sophisticated design direction while maintaining excellent usability.

1. Enhanced Theme Configuration

1.1 Updated Ant Design Theme with Brand Tokens

// theme/chorusThemeEnhanced.ts
import { ThemeConfig, theme } from 'antd';

const { darkAlgorithm } = theme;

export const chorusThemeEnhanced: ThemeConfig = {
  algorithm: darkAlgorithm,
  token: {
    // Brand Color System
    colorPrimary: '#007AFF', // Orchestration Blue
    colorSuccess: '#34C759',
    colorWarning: '#FF9500', 
    colorError: '#FF3B30',
    colorInfo: '#007AFF',
    
    // Carbon Black Background Hierarchy
    colorBgContainer: '#0A0A0A',
    colorBgElevated: '#1A1A1A',
    colorBgLayout: '#000000',
    colorBgSpotlight: '#1F1F1F',
    colorBgMask: 'rgba(0, 0, 0, 0.8)',
    
    // Sophisticated Text Hierarchy
    colorText: '#FFFFFF',
    colorTextSecondary: '#E5E5E5',
    colorTextTertiary: '#A8A8A8',
    colorTextQuaternary: '#6D6D6D',
    colorTextDescription: '#A8A8A8',
    
    // Border System with Subtle Elegance
    colorBorder: 'rgba(255, 255, 255, 0.1)',
    colorBorderSecondary: 'rgba(255, 255, 255, 0.05)',
    
    // Typography System
    fontFamily: '"SF Pro Text", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif',
    fontFamilyCode: '"SF Mono", "Roboto Mono", Consolas, monospace',
    
    // Enhanced Typography Scale
    fontSize: 16,
    fontSizeHeading1: 48, // For Exo Thin hero text
    fontSizeHeading2: 36,
    fontSizeHeading3: 28,
    fontSizeHeading4: 24,
    fontSizeHeading5: 20,
    fontSizeLG: 18,
    fontSizeSM: 14,
    fontSizeXL: 20,
    
    // Refined Spacing System
    borderRadius: 8,
    borderRadiusLG: 12,
    borderRadiusOuter: 6,
    borderRadiusSM: 4,
    borderRadiusXS: 2,
    
    // Professional Layout Spacing
    padding: 16,
    paddingLG: 24,
    paddingSM: 12,
    paddingXL: 32,
    paddingXS: 8,
    paddingXXS: 4,
    
    // Sophisticated Shadows for Depth
    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
    boxShadowSecondary: '0 2px 8px rgba(0, 0, 0, 0.2)',
    boxShadowTertiary: '0 1px 4px rgba(0, 0, 0, 0.15)',
    
    // Motion System
    motionDurationFast: '0.15s',
    motionDurationMid: '0.25s',
    motionDurationSlow: '0.35s',
    motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
    motionEaseOut: 'cubic-bezier(0, 0, 0.2, 1)',
    
    // Control Heights for Accessibility
    controlHeight: 44, // Increased for better touch targets
    controlHeightLG: 52,
    controlHeightSM: 36,
    controlHeightXS: 28,
  },
  components: {
    // Button Component Enhancement
    Button: {
      borderRadius: 8,
      controlHeight: 44,
      fontWeight: 600,
      primaryShadow: '0 4px 12px rgba(0, 122, 255, 0.3)',
      defaultShadow: '0 2px 6px rgba(0, 0, 0, 0.15)',
      // Enhanced hover states
      colorPrimaryHover: '#0056D6',
      colorPrimaryActive: '#004BB5',
      // Walnut brown secondary buttons
      colorLink: '#8B4513',
      colorLinkHover: '#A0522D',
      colorLinkActive: '#654321',
    },
    
    // Typography Components
    Typography: {
      titleMarginBottom: '0.75em',
      titleMarginTop: '1.2em',
      // Exo font for hero titles
      fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
    },
    
    // Layout Enhancement
    Layout: {
      headerBg: '#000000',
      bodyBg: '#0A0A0A',
      footerBg: '#000000',
      siderBg: '#1A1A1A',
      lightSiderBg: '#1A1A1A',
      headerHeight: 64,
      headerPadding: '0 24px',
    },
    
    // Navigation Enhancement
    Menu: {
      itemBg: 'transparent',
      itemSelectedBg: 'rgba(0, 122, 255, 0.1)',
      itemHoverBg: 'rgba(255, 255, 255, 0.05)',
      itemActiveBg: 'rgba(0, 122, 255, 0.15)',
      itemColor: '#E5E5E5',
      itemSelectedColor: '#007AFF',
      itemHoverColor: '#FFFFFF',
      darkItemBg: 'transparent',
      darkItemColor: '#E5E5E5',
      darkItemSelectedBg: 'rgba(0, 122, 255, 0.1)',
      darkItemHoverBg: 'rgba(255, 255, 255, 0.05)',
    },
    
    // Card Enhancement
    Card: {
      borderRadius: 12,
      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.25)',
      headerBg: 'transparent',
      borderRadiusLG: 16,
      paddingLG: 24,
    },
    
    // Form Components
    Input: {
      borderRadius: 8,
      controlHeight: 44,
      paddingInline: 16,
      colorBgContainer: '#1A1A1A',
      colorBorder: 'rgba(255, 255, 255, 0.1)',
      colorBorderHover: 'rgba(255, 255, 255, 0.2)',
      activeBorderColor: '#007AFF',
      activeShadow: '0 0 0 3px rgba(0, 122, 255, 0.2)',
    },
    
    // Modal Enhancement
    Modal: {
      borderRadius: 16,
      contentBg: '#1A1A1A',
      headerBg: '#1A1A1A',
      maskBg: 'rgba(0, 0, 0, 0.8)',
      boxShadow: '0 16px 64px rgba(0, 0, 0, 0.5)',
    },
    
    // Table Enhancement
    Table: {
      borderRadius: 8,
      headerBg: '#2A2A2A',
      headerSortActiveBg: '#3A3A3A',
      rowHoverBg: 'rgba(255, 255, 255, 0.02)',
      borderColor: 'rgba(255, 255, 255, 0.1)',
    },
    
    // Tooltip Enhancement
    Tooltip: {
      borderRadius: 6,
      colorBgSpotlight: '#2A2A2A',
      boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
    },
    
    // Drawer Enhancement
    Drawer: {
      colorBgElevated: '#1A1A1A',
      colorBgMask: 'rgba(0, 0, 0, 0.8)',
    },
  },
};

// Enhanced color palette with design tokens
export const chorusColorsEnhanced = {
  // Primary Brand Colors
  carbonBlack: '#000000',
  walnutBrown: '#8B4513',
  brushedAluminum: '#C0C0C0',
  naturalPaper: '#F5F5DC',
  
  // System Colors
  orchestrationBlue: '#007AFF',
  successGreen: '#34C759',
  warningAmber: '#FF9500',
  errorRed: '#FF3B30',
  infoBlue: '#007AFF',
  
  // Background Hierarchy
  bgPrimary: '#000000',
  bgSecondary: '#0A0A0A',
  bgTertiary: '#1A1A1A',
  bgQuaternary: '#2A2A2A',
  bgElevated: '#1F1F1F',
  
  // Text Hierarchy
  textPrimary: '#FFFFFF',
  textSecondary: '#E5E5E5',
  textTertiary: '#A8A8A8',
  textQuaternary: '#6D6D6D',
  textDisabled: '#484848',
  
  // Interactive States
  interactivePrimary: '#007AFF',
  interactivePrimaryHover: '#0056D6',
  interactivePrimaryActive: '#004BB5',
  interactiveSecondary: '#8B4513',
  interactiveSecondaryHover: '#A0522D',
  
  // Status Colors with Alpha
  successAlpha: 'rgba(52, 199, 89, 0.1)',
  warningAlpha: 'rgba(255, 149, 0, 0.1)',
  errorAlpha: 'rgba(255, 59, 48, 0.1)',
  infoAlpha: 'rgba(0, 122, 255, 0.1)',
  
  // Border Colors
  borderPrimary: 'rgba(255, 255, 255, 0.1)',
  borderSecondary: 'rgba(255, 255, 255, 0.05)',
  borderFocus: '#007AFF',
  
  // Shadows
  shadowLight: 'rgba(0, 0, 0, 0.1)',
  shadowMedium: 'rgba(0, 0, 0, 0.2)',
  shadowHeavy: 'rgba(0, 0, 0, 0.4)',
} as const;

export type ChorusColorEnhanced = keyof typeof chorusColorsEnhanced;

2. Enhanced Hero Component with Exo Typography

// components/sections/BrandSystemHero.tsx
'use client';

import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Typography, Space, Button } from 'antd';
import { ArrowRightIcon, PlayIcon } from 'lucide-react';
import styles from './BrandSystemHero.module.css';

const { Title, Paragraph } = Typography;

interface BrandSystemHeroProps {
  title: string;
  subtitle: string;
  description: string;
  primaryAction: {
    text: string;
    href: string;
  };
  secondaryAction?: {
    text: string;
    href: string;
  };
}

export const BrandSystemHero: React.FC<BrandSystemHeroProps> = ({
  title,
  subtitle,
  description,
  primaryAction,
  secondaryAction,
}) => {
  const prefersReducedMotion = useReducedMotion();

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: prefersReducedMotion ? 0 : 0.2,
        delayChildren: prefersReducedMotion ? 0 : 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: prefersReducedMotion ? 0 : 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: prefersReducedMotion ? 0 : 0.8,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  };

  return (
    <section className={styles.heroSection} role="banner">
      <div className={styles.heroContainer}>
        <motion.div
          className={styles.heroContent}
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {/* Exo Thin Typography for Maximum Impact */}
          <motion.div variants={itemVariants}>
            <Title
              level={1}
              className={styles.heroTitle}
              style={{
                fontFamily: '"Exo", -apple-system, BlinkMacSystemFont, sans-serif',
                fontWeight: 100,
                fontSize: 'clamp(3rem, 6vw, 6rem)',
                lineHeight: 1.1,
                letterSpacing: '-0.025em',
                color: '#FFFFFF',
                marginBottom: '1rem',
                textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
              }}
            >
              {title}
            </Title>
          </motion.div>

          {/* SF Pro Display for Subtitle */}
          <motion.div variants={itemVariants}>
            <Title
              level={2}
              className={styles.heroSubtitle}
              style={{
                fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
                fontWeight: 600,
                fontSize: 'clamp(1.5rem, 3vw, 2.25rem)',
                lineHeight: 1.2,
                color: '#8B4513', // Walnut Brown accent
                marginBottom: '1.5rem',
              }}
            >
              {subtitle}
            </Title>
          </motion.div>

          {/* Roboto for Body Text */}
          <motion.div variants={itemVariants}>
            <Paragraph
              className={styles.heroDescription}
              style={{
                fontFamily: '"Roboto", -apple-system, BlinkMacSystemFont, sans-serif',
                fontSize: '1.125rem',
                lineHeight: 1.6,
                color: '#E5E5E5',
                maxWidth: '600px',
                marginBottom: '2.5rem',
              }}
            >
              {description}
            </Paragraph>
          </motion.div>

          {/* Enhanced CTA Buttons */}
          <motion.div variants={itemVariants}>
            <Space size="large" className={styles.heroActions}>
              <Button
                type="primary"
                size="large"
                className={styles.primaryCTA}
                href={primaryAction.href}
                icon={<ArrowRightIcon size={20} />}
                iconPosition="end"
                style={{
                  height: '52px',
                  padding: '0 32px',
                  fontSize: '1rem',
                  fontWeight: 600,
                  borderRadius: '8px',
                  background: '#007AFF',
                  border: 'none',
                  boxShadow: '0 4px 12px rgba(0, 122, 255, 0.3)',
                  transition: 'all 0.25s cubic-bezier(0, 0, 0.2, 1)',
                }}
              >
                {primaryAction.text}
              </Button>

              {secondaryAction && (
                <Button
                  size="large"
                  className={styles.secondaryCTA}
                  href={secondaryAction.href}
                  icon={<PlayIcon size={20} />}
                  style={{
                    height: '52px',
                    padding: '0 32px',
                    fontSize: '1rem',
                    fontWeight: 600,
                    borderRadius: '8px',
                    background: 'transparent',
                    border: '2px solid #8B4513',
                    color: '#8B4513',
                    transition: 'all 0.25s cubic-bezier(0, 0, 0.2, 1)',
                  }}
                >
                  {secondaryAction.text}
                </Button>
              )}
            </Space>
          </motion.div>
        </motion.div>

        {/* Sophisticated Background Elements */}
        <div className={styles.heroBackground}>
          <motion.div
            className={styles.gradientOrb}
            animate={prefersReducedMotion ? {} : {
              scale: [1, 1.1, 1],
              opacity: [0.1, 0.2, 0.1],
            }}
            transition={{
              duration: 8,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
        </div>
      </div>
    </section>
  );
};

/* components/sections/BrandSystemHero.module.css */
.heroSection {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
  overflow: hidden;
}

.heroContainer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  z-index: 1;
}

.heroContent {
  max-width: 800px;
}

.heroTitle {
  /* Enhanced readability for thin typography */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  will-change: transform;
}

.heroSubtitle {
  /* Subtle glow effect for accent color */
  text-shadow: 0 0 20px rgba(139, 69, 19, 0.3);
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.primaryCTA:hover {
  background: #0056d6 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4) !important;
}

.secondaryCTA:hover {
  background: #8b4513 !important;
  color: #ffffff !important;
  border-color: #8b4513 !important;
  transform: translateY(-2px);
}

.heroBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gradientOrb {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.15) 0%, transparent 70%);
  filter: blur(40px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .heroSection {
    min-height: 80vh;
    padding: 2rem 0;
  }
  
  .heroTitle {
    text-align: center;
  }
  
  .heroSubtitle {
    text-align: center;
  }
  
  .heroActions {
    justify-content: center;
  }
  
  .gradientOrb {
    width: 250px;
    height: 250px;
    top: 10%;
    right: -50px;
  }
}

@media (max-width: 480px) {
  .heroActions {
    flex-direction: column;
    align-items: center;
  }
  
  .primaryCTA,
  .secondaryCTA {
    width: 100%;
    max-width: 280px;
  }
}

3. Enhanced Card Component with New Design System

// components/ui/BrandCard.tsx
'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Card, Typography, Space } from 'antd';
import { LucideIcon } from 'lucide-react';
import styles from './BrandCard.module.css';

const { Title, Paragraph } = Typography;

interface BrandCardProps {
  title: string;
  description: string;
  icon?: LucideIcon;
  accent?: 'primary' | 'secondary' | 'walnut';
  elevated?: boolean;
  interactive?: boolean;
  children?: React.ReactNode;
}

export const BrandCard: React.FC<BrandCardProps> = ({
  title,
  description,
  icon: Icon,
  accent = 'primary',
  elevated = false,
  interactive = false,
  children,
}) => {
  const cardClass = [
    styles.brandCard,
    elevated && styles.elevated,
    interactive && styles.interactive,
    styles[accent],
  ].filter(Boolean).join(' ');

  return (
    <motion.div
      className={styles.cardWrapper}
      whileHover={interactive ? { y: -4 } : {}}
      transition={{ duration: 0.25, ease: [0, 0, 0.2, 1] }}
    >
      <Card
        className={cardClass}
        bodyStyle={{
          padding: '24px',
        }}
        bordered={false}
      >
        <Space direction="vertical" size="medium" style={{ width: '100%' }}>
          {Icon && (
            <div className={styles.iconContainer}>
              <Icon size={32} className={styles.cardIcon} />
            </div>
          )}
          
          <Title
            level={3}
            className={styles.cardTitle}
            style={{
              fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
              fontWeight: 600,
              fontSize: '1.25rem',
              lineHeight: 1.3,
              color: '#FFFFFF',
              marginBottom: '0.5rem',
            }}
          >
            {title}
          </Title>
          
          <Paragraph
            className={styles.cardDescription}
            style={{
              fontFamily: '"Roboto", -apple-system, BlinkMacSystemFont, sans-serif',
              fontSize: '1rem',
              lineHeight: 1.5,
              color: '#A8A8A8',
              marginBottom: 0,
            }}
          >
            {description}
          </Paragraph>
          
          {children && (
            <div className={styles.cardContent}>
              {children}
            </div>
          )}
        </Space>
      </Card>
    </motion.div>
  );
};

/* components/ui/BrandCard.module.css */
.cardWrapper {
  height: 100%;
}

.brandCard {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) !important;
  height: 100%;
}

.brandCard.elevated {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.brandCard.interactive:hover {
  border-color: rgba(0, 122, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 122, 255, 0.2) !important;
}

.brandCard.primary .iconContainer {
  color: #007aff;
}

.brandCard.secondary .iconContainer {
  color: #8b4513;
}

.brandCard.walnut .iconContainer {
  color: #8b4513;
}

.iconContainer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}

.cardIcon {
  transition: transform 0.25s ease;
}

.brandCard.interactive:hover .cardIcon {
  transform: scale(1.1);
}

.cardTitle {
  margin: 0 !important;
}

.cardDescription {
  margin: 0 !important;
}

.cardContent {
  margin-top: 1rem;
}

/* Accent border variations */
.brandCard.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #007aff, #0056d6);
  border-radius: 12px 12px 0 0;
}

.brandCard.walnut::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b4513, #a0522d);
  border-radius: 12px 12px 0 0;
}

.brandCard {
  position: relative;
}

4. Enhanced Navigation Component

// components/layout/BrandNavigation.tsx
'use client';

import React, { useState } from 'react';
import { Layout, Menu, Button, Drawer } from 'antd';
import { MenuIcon, XIcon } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import styles from './BrandNavigation.module.css';

const { Header } = Layout;

interface NavigationItem {
  key: string;
  label: string;
  href: string;
}

const navigationItems: NavigationItem[] = [
  { key: 'platform', label: 'Platform', href: '/platform' },
  { key: 'components', label: 'Components', href: '/components' },
  { key: 'technical-specs', label: 'Technical Specs', href: '/technical-specs' },
  { key: 'documentation', label: 'Documentation', href: '/docs' },
  { key: 'enterprise', label: 'Enterprise', href: '/enterprise' },
];

export const BrandNavigation: React.FC = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const router = useRouter();

  const handleMenuClick = (href: string) => {
    router.push(href);
    setMobileMenuOpen(false);
  };

  return (
    <Header className={styles.navigation}>
      <div className={styles.navContainer}>
        {/* Logo with Exo Typography */}
        <Link href="/" className={styles.logo}>
          <span
            style={{
              fontFamily: '"Exo", -apple-system, BlinkMacSystemFont, sans-serif',
              fontWeight: 100,
              fontSize: '1.5rem',
              color: '#FFFFFF',
              letterSpacing: '-0.01em',
            }}
          >
            CHORUS
          </span>
          <span
            style={{
              fontFamily: '"SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif',
              fontWeight: 500,
              fontSize: '0.875rem',
              color: '#8B4513',
              marginLeft: '0.5rem',
            }}
          >
            Services
          </span>
        </Link>

        {/* Desktop Navigation */}
        <nav className={styles.desktopNav}>
          <Menu
            mode="horizontal"
            className={styles.navMenu}
            items={navigationItems.map(item => ({
              key: item.key,
              label: (
                <Link
                  href={item.href}
                  className={styles.navLink}
                  style={{
                    fontFamily: '"SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif',
                    fontWeight: 500,
                    fontSize: '0.95rem',
                    color: '#E5E5E5',
                    textDecoration: 'none',
                    transition: 'color 0.2s ease',
                  }}
                >
                  {item.label}
                </Link>
              ),
            }))}
          />
        </nav>

        {/* CTA Button */}
        <div className={styles.navActions}>
          <Button
            type="primary"
            className={styles.ctaButton}
            href="/get-started"
            style={{
              height: '40px',
              padding: '0 20px',
              fontSize: '0.9rem',
              fontWeight: 600,
              borderRadius: '6px',
              background: '#007AFF',
              border: 'none',
              fontFamily: '"SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif',
            }}
          >
            Get Started
          </Button>

          {/* Mobile Menu Toggle */}
          <Button
            type="text"
            className={styles.mobileMenuToggle}
            icon={mobileMenuOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            style={{
              color: '#FFFFFF',
              width: '44px',
              height: '44px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          />
        </div>

        {/* Mobile Drawer */}
        <Drawer
          title={null}
          placement="right"
          onClose={() => setMobileMenuOpen(false)}
          open={mobileMenuOpen}
          className={styles.mobileDrawer}
          width={280}
          styles={{
            body: { padding: 0, background: '#1A1A1A' },
            header: { display: 'none' },
          }}
        >
          <div className={styles.mobileNavContent}>
            {navigationItems.map(item => (
              <button
                key={item.key}
                className={styles.mobileNavItem}
                onClick={() => handleMenuClick(item.href)}
                style={{
                  fontFamily: '"SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif',
                  fontWeight: 500,
                  fontSize: '1rem',
                  color: '#E5E5E5',
                }}
              >
                {item.label}
              </button>
            ))}
            
            <Button
              type="primary"
              size="large"
              block
              className={styles.mobileCTA}
              href="/get-started"
              style={{
                marginTop: '2rem',
                height: '48px',
                fontSize: '1rem',
                fontWeight: 600,
                background: '#007AFF',
                border: 'none',
              }}
            >
              Get Started
            </Button>
          </div>
        </Drawer>
      </div>
    </Header>
  );
};

/* components/layout/BrandNavigation.module.css */
.navigation {
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 64px;
  line-height: 64px;
  padding: 0;
}

.navContainer {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo:hover {
  opacity: 0.8;
}

.desktopNav {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 2rem;
}

.navMenu {
  background: transparent !important;
  border: none !important;
  line-height: 64px;
}

.navMenu .ant-menu-item {
  padding: 0 1.5rem !important;
  margin: 0 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.navMenu .ant-menu-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.navMenu .ant-menu-item-selected {
  background: rgba(0, 122, 255, 0.1) !important;
}

.navLink {
  color: #e5e5e5 !important;
  text-decoration: none;
}

.navLink:hover {
  color: #ffffff !important;
}

.navActions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ctaButton:hover {
  background: #0056d6 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.mobileMenuToggle {
  display: none !important;
}

.mobileNavContent {
  padding: 2rem 1.5rem;
}

.mobileNavItem {
  width: 100%;
  text-align: left;
  padding: 1rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobileNavItem:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.02);
}

.mobileNavItem:last-child {
  border-bottom: none;
}

.mobileCTA:hover {
  background: #0056d6 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .desktopNav {
    display: none;
  }
  
  .mobileMenuToggle {
    display: flex !important;
  }
  
  .navContainer {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .navContainer {
    padding: 0 0.75rem;
  }
  
  .logo span:first-child {
    font-size: 1.25rem !important;
  }
  
  .logo span:last-child {
    font-size: 0.75rem !important;
  }
}

5. Performance and Accessibility Integration

// hooks/useBrandPerformance.ts
import { useEffect, useState } from 'react';

interface PerformanceMetrics {
  LCP: number;
  FID: number;
  CLS: number;
  fontLoadTime: number;
}

export const useBrandPerformance = () => {
  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
  const [isOptimized, setIsOptimized] = useState(false);

  useEffect(() => {
    // Monitor Core Web Vitals
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'largest-contentful-paint') {
          setMetrics(prev => ({ ...prev!, LCP: entry.startTime }));
        }
      }
    });

    observer.observe({ entryTypes: ['largest-contentful-paint'] });

    // Font loading optimization
    const optimizeFonts = async () => {
      if ('fonts' in document) {
        try {
          // Preload critical fonts
          await Promise.all([
            document.fonts.load('100 48px Exo'),
            document.fonts.load('600 24px "SF Pro Display"'),
            document.fonts.load('400 16px Roboto'),
          ]);
          setIsOptimized(true);
        } catch (error) {
          console.warn('Font loading optimization failed:', error);
        }
      }
    };

    optimizeFonts();

    return () => observer.disconnect();
  }, []);

  return { metrics, isOptimized };
};

6. CSS Custom Properties Implementation

/* globals.css - Enhanced with brand tokens */
:root {
  /* CHORUS Brand Color System */
  --color-carbon-black: #000000;
  --color-walnut-brown: #8b4513;
  --color-brushed-aluminum: #c0c0c0;
  --color-natural-paper: #f5f5dc;
  --color-orchestration-blue: #007aff;
  
  /* Background Hierarchy */
  --bg-primary: var(--color-carbon-black);
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #1a1a1a;
  --bg-quaternary: #2a2a2a;
  --bg-elevated: #1f1f1f;
  
  /* Typography System */
  --font-hero: 'Exo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Roboto Mono', Consolas, monospace;
  
  /* Interactive States */
  --interactive-primary: var(--color-orchestration-blue);
  --interactive-primary-hover: #0056d6;
  --interactive-secondary: var(--color-walnut-brown);
  --interactive-secondary-hover: #a0522d;
  
  /* Shadows for Depth */
  --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.4);
  
  /* Motion System */
  --motion-duration-fast: 0.15s;
  --motion-duration-normal: 0.25s;
  --motion-duration-slow: 0.35s;
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Global Typography Classes */
.text-hero {
  font-family: var(--font-hero);
  font-weight: 100;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.text-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Utility Classes */
.bg-carbon { background-color: var(--color-carbon-black); }
.bg-elevated { background-color: var(--bg-elevated); }
.text-walnut { color: var(--color-walnut-brown); }
.text-primary { color: #ffffff; }
.text-secondary { color: #e5e5e5; }

/* Enhanced focus states for accessibility */
.focus-ring:focus {
  outline: 2px solid var(--color-orchestration-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --text-primary: #ffffff;
    --border-primary: #ffffff;
  }
}

This implementation demo showcases how the sophisticated CHORUS Services brand system can be implemented while maintaining excellent user experience, accessibility, and performance standards. The examples demonstrate the practical application of design tokens, enhanced typography hierarchy, and professional component design that aligns with the platform's technical excellence.