tony/chorus-services-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
chorus-services-website/BRAND_SYSTEM_DEMO.md
anthonyrawlins 7774d7ec98 feat(brand-system): Implement comprehensive CHORUS brand system with typography and design tokens 
This commit implements a complete brand system overhaul including:

TYPOGRAPHY SYSTEM:
- Add Exo font family (Thin, Light, Regular, ExtraLight) as primary brand font
- Implement SF Pro Display/Text hierarchy for UI components
- Create comprehensive Typography component with all brand variants
- Update all components to use new typography tokens

DESIGN TOKEN SYSTEM:
- Create complete design token system in theme/designTokens.ts
- Define Carbon Black (#1a1a1a), Walnut Brown (#8B4513), Brushed Aluminum (#A8A8A8) palette
- Implement CSS custom properties for consistent theming
- Update Ant Design theme integration

COMPONENT UPDATES:
- Enhance Hero section with Exo Thin typography and improved layout
- Update navigation with SF Pro font hierarchy
- Redesign Button component with new variants and accessibility
- Apply brand colors and typography across all showcase sections
- Improve Footer with consistent brand application

PERFORMANCE & ACCESSIBILITY:
- Self-host Exo fonts for optimal loading performance
- Implement proper font-display strategies
- Add comprehensive accessibility audit documentation
- Include responsive testing verification

DOCUMENTATION:
- Add brand system demo and implementation guides
- Include QA testing reports and accessibility audits
- Document design token usage and component patterns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-02 22:12:42 +10:00

1237 lines
30 KiB
Markdown
Raw Permalink Blame History

# 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
```typescript
// 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
```tsx
// 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>
);
};
```
```css
/* 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
```tsx
// 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>
);
};
```
```css
/* 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
```tsx
// 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>
);
};
```
```css
/* 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
```tsx
// 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
```css
/* 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.
Reference in New Issue View Git Blame Copy Permalink