feat: Add comprehensive brand system and website architecture documentation

This commit adds the complete CHORUS Services brand system and documentation: BRAND ASSETS: - Complete CHORUS brand guide with visual identity standards - Comprehensive typography system with Exo font family - Color system documentation (Carbon Black, Walnut Brown, Brushed Aluminum) - Brand usage guidelines and logo specifications - Website mockup concepts and design assets - Texture assets for brand consistency WEBSITE SUBMODULE UPDATE: - Update to latest commit (7774d7e) with full brand system implementation - Includes typography system, design tokens, and component updates - Production-ready brand application across all website components DOCUMENTATION: - Website Architecture Strategy: Next.js 13+ with Ant Design 5+ technical specs - UX Design Strategy: User experience and interface design principles - Website Functionality Audit: Feature requirements and technical specifications - Network Validation Report: Infrastructure and deployment validation ASSETS STRUCTURE: - /brand-assets/fonts/ - Complete Exo font family with licensing - /brand-assets/colors/ - Color system documentation - /brand-assets/typography/ - Typography hierarchy specifications - /brand-assets/guidelines/ - Brand usage and implementation guidelines - /brand-assets/mockups/ - Website design concepts and layouts - /brand-assets/textures/ - Visual texture assets for brand consistency This establishes the complete foundation for CHORUS Services brand identity and provides comprehensive documentation for consistent implementation across all marketing and product materials. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-02 22:13:32 +10:00
parent fccedf229a
commit b7553856f5
42 changed files with 4880 additions and 1 deletions
--- a/brand-assets/typography/chorus-typography-system.md
+++ b/brand-assets/typography/chorus-typography-system.md
@@ -0,0 +1,301 @@
+# CHORUS Services Typography System
+
+## Typography Philosophy
+
+The CHORUS Services typography system draws inspiration from Apple's refined approach to type, emphasizing clarity, hierarchy, and sophisticated simplicity. The system prioritizes:
+
+- **Legibility**: Optimized for technical content and enterprise applications
+- **Scalability**: Responsive typography that works across all devices and contexts
+- **Personality**: Balancing technical precision with human approachability
+- **Performance**: Web-optimized fonts with fallback strategies
+
+## Primary Typeface: SF Pro Display/Text
+
+### Rationale
+SF Pro (San Francisco) is Apple's system typeface, providing:
+- **Technical Precision**: Designed for user interfaces and technical content
+- **Global Readability**: Optimized for international audiences and accessibility
+- **Modern Aesthetic**: Clean, contemporary appearance suitable for enterprise
+- **Variable Font Technology**: Efficient loading and optical size optimization
+
+### Font Family Stack
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+```
+
+### Fallback Strategy
+1. **-apple-system**: Native system font on macOS/iOS
+2. **BlinkMacSystemFont**: Native system font on Chrome/macOS
+3. **SF Pro Display/Text**: Explicitly loaded Apple fonts
+4. **Inter**: High-quality open-source alternative
+5. **Segoe UI**: Windows system font
+6. **Roboto**: Android system font
+7. **Helvetica Neue**: Classic fallback
+8. **Arial**: Universal fallback
+
+## Typography Scale & Hierarchy
+
+### Display Typography (Large Headlines)
+Used for: Hero sections, major page titles, prominent callouts
+
+#### Hero Display
+- **Font**: Exo Thin (100)
+- **Size**: `clamp(48px, 8vw, 84px)` (responsive scaling)
+- **Line Height**: 1.0 (tight for impact)
+- **Letter Spacing**: -0.02em (optical correction for large sizes)
+- **Use Case**: Homepage hero, major section headers
+
+#### Section Display  
+- **Font**: Exo Thin (200)
+- **Size**: `clamp(32px, 5vw, 48px)`
+- **Line Height**: 1.1
+- **Letter Spacing**: -0.015em
+- **Use Case**: Section headers, page titles
+
+#### Subsection Display
+- **Font**: Roboto Flex (400)
+- **Size**: `clamp(24px, 4vw, 36px)`
+- **Line Height**: 1.2
+- **Letter Spacing**: -0.01em
+- **Use Case**: Component headers, card titles
+
+### Body Typography (Content Reading)
+Used for: Paragraphs, descriptions, documentation, UI text
+
+#### Body Large
+- **Font**: Roboto (400)
+- **Size**: 18px
+- **Line Height**: 1.6 (optimal for reading)
+- **Letter Spacing**: 0 (neutral)
+- **Use Case**: Important descriptions, feature explanations
+
+#### Body Regular
+- **Font**: Roboto Regular (400)  
+- **Size**: 16px
+- **Line Height**: 1.5
+- **Letter Spacing**: 0
+- **Use Case**: Standard body copy, most content
+
+#### Body Small
+- **Font**: Roboto Regular (400)
+- **Size**: 14px
+- **Line Height**: 1.4
+- **Letter Spacing**: 0.005em (slightly loose for small text)
+- **Use Case**: Captions, metadata, helper text
+
+### Interface Typography (UI Elements)
+Used for: Buttons, navigation, forms, labels
+
+#### Button Text
+- **Font**: Roboto Semibold (600)
+- **Size**: 16px (large buttons), 14px (regular buttons)
+- **Line Height**: 1.0 (tight for buttons)
+- **Letter Spacing**: 0.01em
+- **Transform**: None (sentence case preferred)
+
+#### Navigation
+- **Font**: Roboto Medium (500)
+- **Size**: 16px
+- **Line Height**: 1.0
+- **Letter Spacing**: 0.005em
+- **Use Case**: Header navigation, sidebar menus
+
+#### Labels
+- **Font**: Roboto Medium (500)
+- **Size**: 14px
+- **Line Height**: 1.2
+- **Letter Spacing**: 0.01em
+- **Transform**: None
+- **Use Case**: Form labels, section labels
+
+### Technical Typography (Code & Data)
+Used for: Code blocks, API documentation, technical specifications
+
+#### Code Primary
+- **Font**: SF Mono, 'Monaco', 'Inconsolata', 'Fira Code', monospace
+- **Size**: 14px
+- **Line Height**: 1.4
+- **Letter Spacing**: 0
+- **Use Case**: Code blocks, API examples
+
+#### Code Inline
+- **Font**: SF Mono, monospace
+- **Size**: 90% of parent text size
+- **Padding**: 2px 4px
+- **Background**: Subtle background color
+- **Border Radius**: 3px
+- **Use Case**: Inline code references
+
+## Color Applications
+
+### Dark Mode Typography
+Following the established color system:
+
+#### Primary Text
+- **Color**: `#F2F2F7` (Natural Paper)
+- **Usage**: Headlines, primary body copy
+- **Contrast Ratio**: 19.96:1 on black backgrounds
+
+#### Secondary Text  
+- **Color**: `#A1A1A6` (Light Gray)
+- **Usage**: Descriptions, supporting content
+- **Contrast Ratio**: 6.64:1 on black backgrounds
+
+#### Tertiary Text
+- **Color**: `#6D6D73` (Medium Gray)
+- **Usage**: Captions, metadata, disabled text
+- **Contrast Ratio**: 4.51:1 on black backgrounds
+
+#### Interactive Text
+- **Color**: `#007AFF` (Orchestration Blue)
+- **Usage**: Links, interactive elements
+- **Contrast Ratio**: 8.59:1 on black backgrounds
+
+### Light Mode Typography
+
+#### Primary Text
+- **Color**: `#1A1A1A` (Dark Charcoal)
+- **Usage**: Headlines, primary body copy
+- **Contrast Ratio**: 18.2:1 on Natural Paper background
+
+#### Secondary Text
+- **Color**: `#6D6D73` (Medium Gray)
+- **Usage**: Descriptions, supporting content
+- **Contrast Ratio**: 7.8:1 on Natural Paper background
+
+#### Tertiary Text
+- **Color**: `#A1A1A6` (Light Gray)
+- **Usage**: Captions, metadata
+- **Contrast Ratio**: 4.6:1 on Natural Paper background
+
+#### Interactive Text
+- **Color**: `#007AFF` (Orchestration Blue)
+- **Usage**: Links, interactive elements
+- **Contrast Ratio**: 4.5:1 on white backgrounds
+
+## Responsive Typography Implementation
+
+### CSS Custom Properties
+```css
+:root {
+  /* Font Families */
+  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
+  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
+  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+  
+  /* Responsive Sizes */
+  --text-hero: clamp(48px, 8vw, 84px);
+  --text-display-1: clamp(32px, 5vw, 48px);
+  --text-display-2: clamp(24px, 4vw, 36px);
+  --text-body-large: 18px;
+  --text-body: 16px;
+  --text-body-small: 14px;
+  --text-code: 14px;
+  
+  /* Line Heights */
+  --leading-tight: 1.0;
+  --leading-snug: 1.1;
+  --leading-normal: 1.2;
+  --leading-relaxed: 1.4;
+  --leading-loose: 1.5;
+  --leading-reading: 1.6;
+  
+  /* Letter Spacing */
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.015em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.005em;
+  --tracking-wider: 0.01em;
+}
+```
+
+### Utility Classes
+```css
+/* Display Typography */
+.text-hero {
+  font-family: var(--font-display);
+  font-size: var(--text-hero);
+  font-weight: 800;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+}
+
+.text-display-1 {
+  font-family: var(--font-display);
+  font-size: var(--text-display-1);
+  font-weight: 700;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-snug);
+}
+
+/* Body Typography */
+.text-body {
+  font-family: var(--font-text);
+  font-size: var(--text-body);
+  font-weight: 400;
+  line-height: var(--leading-loose);
+  letter-spacing: var(--tracking-normal);
+}
+
+/* Technical Typography */
+.text-code {
+  font-family: var(--font-mono);
+  font-size: var(--text-code);
+  line-height: var(--leading-relaxed);
+  letter-spacing: var(--tracking-normal);
+}
+```
+
+## Accessibility Guidelines
+
+### Contrast Requirements
+- **Normal Text**: Minimum 4.5:1 contrast ratio
+- **Large Text** (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
+- **Interactive Elements**: Clear focus indicators with proper contrast
+
+### Reading Considerations
+- **Line Length**: 45-75 characters for optimal readability
+- **Line Height**: Minimum 1.4 for body text, 1.5 preferred for long-form content
+- **Font Size**: Minimum 14px for body text, 16px preferred
+- **Responsive Scaling**: Text scales appropriately across all device sizes
+
+### Motion Sensitivity
+- **Reduced Motion**: Respect user preferences for reduced animations
+- **Font Loading**: Use font-display: swap for better performance
+- **Fallback Fonts**: Ensure similar metrics to prevent layout shift
+
+## Implementation Guidelines
+
+### Font Loading Strategy
+```css
+/* Optimal font loading */
+@font-face {
+  font-family: 'SF Pro Display';
+  src: url('fonts/sf-pro-display.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'SF Pro Text';
+  src: url('fonts/sf-pro-text.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+```
+
+### Performance Optimization
+- **Subsetting**: Include only required character sets
+- **Preloading**: Preload critical font files
+- **WOFF2 Format**: Use modern compression for smaller file sizes
+- **Variable Fonts**: Utilize variable font technology when available
+
+### Brand Consistency
+- **Logo Typography**: Custom modifications to SF Pro Display for logo lockup
+- **Hierarchy Consistency**: Maintain consistent size relationships across all applications
+- **Color Pairing**: Always pair typography colors with appropriate background colors
+- **Context Adaptation**: Adjust typography choices based on content context and user needs
+
+This typography system provides CHORUS Services with a professional, accessible, and scalable foundation that supports both technical content and marketing communications while maintaining the Apple-inspired aesthetic that aligns with the platform's premium positioning.