chorus-services/brand-assets/typography/chorus-typography-system.md

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

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

: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

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

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