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>
This commit is contained in:
anthonyrawlins
2025-08-02 22:12:42 +10:00
parent c33c46f8ac
commit 7774d7ec98
27 changed files with 5433 additions and 763 deletions

View File

@@ -2,23 +2,205 @@
@tailwind components;
@tailwind utilities;
/* Import SF Pro Text font from Apple */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* =============================================================================
FONT LOADING - OPTIMIZED WEB FONTS
============================================================================= */
/* Self-hosted Exo fonts for display typography */
@font-face {
font-family: 'Exo';
src: url('/fonts/Exo-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Exo';
src: url('/fonts/Exo-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Exo';
src: url('/fonts/Exo-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Exo';
src: url('/fonts/Exo-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Import Google Fonts for fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
/* =============================================================================
DESIGN TOKENS - CSS CUSTOM PROPERTIES
============================================================================= */
/* CSS Variables for CHORUS theme */
:root {
--chorus-blue: #007aff;
--chorus-green: #30d158;
--chorus-charcoal: #1a1a1a;
--chorus-charcoal-light: #2a2a2a;
--chorus-charcoal-dark: #0f0f0f;
/* Core Brand Colors */
--chorus-carbon-black: #000000;
--chorus-carbon-dark: #0f0f0f;
--chorus-carbon-medium: #1a1a1a;
--chorus-carbon-light: #2a2a2a;
--text-primary: #ffffff;
--text-secondary: #a8a8a8;
--text-tertiary: #6d6d6d;
--chorus-walnut-deep: #8B4513;
--chorus-walnut-medium: #A0522D;
--chorus-walnut-warm: #D2691E;
--chorus-walnut-light: #DEB887;
--border-color: #2a2a2a;
--border-color-light: #3a3a3a;
--chorus-aluminum-metallic: #C0C0C0;
--chorus-aluminum-slate: #708090;
--chorus-aluminum-light: #E5E5E5;
--chorus-aluminum-subtle: #F8F9FA;
--chorus-paper-natural: #F5F5DC;
--chorus-paper-pure: #FFFEF7;
--chorus-paper-aged: #F0E68C;
--chorus-paper-cream: #FDF6E3;
/* System Colors */
--chorus-orchestration-blue: #007AFF;
--chorus-orchestration-deep: #0051D5;
--chorus-orchestration-light: #4A90E2;
--chorus-orchestration-pale: #E3F2FD;
--chorus-harmony-green: #30D158;
--chorus-harmony-forest: #228B22;
--chorus-harmony-sage: #9CAF88;
--chorus-harmony-mint: #F0FFF4;
--chorus-resonance-amber: #FF9F0A;
--chorus-resonance-golden: #FFD700;
--chorus-resonance-copper: #B87333;
--chorus-resonance-cream: #FFFAF0;
--chorus-alert-coral: #FF453A;
--chorus-alert-warm: #FF6B6B;
--chorus-alert-rose: #E55B5B;
--chorus-alert-blush: #FFF5F5;
/* Semantic Colors (Dark Mode Default) */
--color-primary: var(--chorus-orchestration-blue);
--color-secondary: var(--chorus-aluminum-slate);
--color-success: var(--chorus-harmony-green);
--color-warning: var(--chorus-resonance-amber);
--color-error: var(--chorus-alert-coral);
--color-info: var(--chorus-orchestration-light);
/* Background Hierarchy */
--bg-primary: var(--chorus-carbon-black);
--bg-secondary: var(--chorus-carbon-medium);
--bg-tertiary: var(--chorus-carbon-light);
--bg-elevated: var(--chorus-carbon-dark);
/* Text Hierarchy */
--text-primary: #F2F2F7;
--text-secondary: #A1A1A6;
--text-tertiary: #6D6D73;
--text-disabled: #48484A;
--text-inverse: var(--chorus-carbon-black);
/* Interactive Colors */
--interactive-primary: var(--chorus-orchestration-blue);
--interactive-primary-hover: var(--chorus-orchestration-deep);
--interactive-secondary: var(--chorus-aluminum-metallic);
--interactive-secondary-hover: var(--chorus-aluminum-slate);
/* Borders */
--border-primary: #48484A;
--border-secondary: #2a2a2a;
--border-accent: var(--chorus-orchestration-blue);
/* Typography Scale */
--font-display: 'Exo', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
--font-interface: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', 'Roboto', sans-serif;
--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
/* Responsive Font 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-interface: 16px;
--text-interface-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;
/* Spacing Scale */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-4xl: 64px;
--space-5xl: 96px;
--space-6xl: 128px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-button: 8px;
--radius-card: 12px;
--radius-input: 8px;
--radius-modal: 16px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.35);
--shadow-button: 0 2px 8px rgba(0, 122, 255, 0.2);
--shadow-button-hover: 0 4px 12px rgba(0, 122, 255, 0.3);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.35);
--shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.2);
/* Motion */
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;
--duration-slower: 500ms;
--easing-linear: linear;
--easing-ease: ease;
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
--easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Base styles */
@@ -34,10 +216,11 @@ html {
}
body {
font-family: 'SF Pro Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--chorus-charcoal);
font-family: var(--font-body);
font-size: var(--text-body);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
line-height: var(--leading-reading);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -84,26 +267,127 @@ select:focus {
color: var(--text-primary);
}
/* Typography enhancements */
/* =============================================================================
TYPOGRAPHY SYSTEM
============================================================================= */
/* Base typography settings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.025em;
line-height: var(--leading-normal);
letter-spacing: var(--tracking-snug);
margin: 0;
}
/* Hero Display Typography - Exo Thin for maximum impact */
.text-hero {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 100;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
/* Display Typography Hierarchy */
.text-display-1,
h1 {
font-size: 3rem;
font-weight: 700;
font-family: var(--font-display);
font-size: var(--text-display-1);
font-weight: 200;
line-height: var(--leading-snug);
letter-spacing: var(--tracking-snug);
}
.text-display-2,
h2 {
font-size: 2.25rem;
font-weight: 600;
font-family: var(--font-display);
font-size: var(--text-display-2);
font-weight: 300;
line-height: var(--leading-normal);
letter-spacing: var(--tracking-snug);
}
h3 {
font-size: 1.75rem;
/* Interface Typography - SF Pro for UI elements */
.text-interface {
font-family: var(--font-interface);
font-size: var(--text-interface);
font-weight: 500;
line-height: var(--leading-normal);
letter-spacing: var(--tracking-wide);
}
.text-interface-small {
font-family: var(--font-interface);
font-size: var(--text-interface-small);
font-weight: 500;
line-height: var(--leading-normal);
letter-spacing: var(--tracking-wider);
}
/* Body Typography - Roboto for readability */
.text-body-large {
font-family: var(--font-body);
font-size: var(--text-body-large);
font-weight: 400;
line-height: var(--leading-reading);
letter-spacing: var(--tracking-normal);
}
.text-body,
p {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: var(--leading-loose);
letter-spacing: var(--tracking-normal);
}
.text-body-small {
font-family: var(--font-body);
font-size: var(--text-body-small);
font-weight: 400;
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-wide);
}
/* Technical Typography - Monospace for code */
.text-code,
code,
pre {
font-family: var(--font-mono);
font-size: var(--text-code);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-normal);
}
/* Button Typography */
.text-button {
font-family: var(--font-body);
font-weight: 600;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
}
/* Semantic text colors */
.text-primary {
color: var(--text-primary);
}
.text-secondary {
color: var(--text-secondary);
}
.text-tertiary {
color: var(--text-tertiary);
}
.text-disabled {
color: var(--text-disabled);
}
.text-inverse {
color: var(--text-inverse);
}
/* Utility classes */
@@ -224,13 +508,121 @@ h3 {
}
}
/* Button enhancements */
/* =============================================================================
BUTTON SYSTEM
============================================================================= */
.btn-primary {
@apply bg-chorus-blue hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:ring-2 focus:ring-chorus-blue focus:ring-opacity-50;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-interface);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
background-color: var(--interactive-primary);
color: #ffffff;
border: none;
border-radius: var(--radius-button);
padding: var(--space-md) var(--space-xl);
box-shadow: var(--shadow-button);
transition: all var(--duration-normal) var(--easing-ease-out);
cursor: pointer;
}
.btn-primary:hover {
background-color: var(--interactive-primary-hover);
box-shadow: var(--shadow-button-hover);
transform: translateY(-2px);
}
.btn-primary:focus {
outline: none;
box-shadow: var(--shadow-focus);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-button);
}
.btn-secondary {
@apply bg-transparent border-2 border-chorus-blue text-chorus-blue hover:bg-chorus-blue hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-interface);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
background-color: transparent;
color: var(--interactive-primary);
border: 2px solid var(--interactive-primary);
border-radius: var(--radius-button);
padding: calc(var(--space-md) - 2px) calc(var(--space-xl) - 2px);
transition: all var(--duration-normal) var(--easing-ease-out);
cursor: pointer;
}
.btn-secondary:hover {
background-color: var(--interactive-primary);
color: #ffffff;
transform: translateY(-2px);
box-shadow: var(--shadow-button);
}
.btn-secondary:focus {
outline: none;
box-shadow: var(--shadow-focus);
}
.btn-secondary:active {
transform: translateY(0);
}
.btn-tertiary {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--text-interface);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
background-color: var(--interactive-secondary);
color: var(--text-inverse);
border: none;
border-radius: var(--radius-button);
padding: var(--space-md) var(--space-xl);
transition: all var(--duration-normal) var(--easing-ease-out);
cursor: pointer;
}
.btn-tertiary:hover {
background-color: var(--interactive-secondary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-ghost {
font-family: var(--font-interface);
font-weight: 500;
font-size: var(--text-interface);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-wider);
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-secondary);
border-radius: var(--radius-button);
padding: var(--space-md) var(--space-xl);
transition: all var(--duration-normal) var(--easing-ease-out);
cursor: pointer;
}
.btn-ghost:hover {
color: var(--text-primary);
border-color: var(--border-primary);
background-color: var(--bg-tertiary);
}
/* Loading states */

View File

@@ -34,9 +34,9 @@ export const metadata: Metadata = {
description: 'Harness the power of distributed AI with CHORUS Services. Orchestrate intelligent components for scalable automation.',
images: [
{
url: '/og-image.png',
width: 1200,
height: 630,
url: '/favicon.ico',
width: 64,
height: 64,
alt: 'CHORUS Services Platform',
},
],
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
card: 'summary_large_image',
title: 'CHORUS Services - Distributed AI Orchestration',
description: 'Harness the power of distributed AI with CHORUS Services.',
images: ['/og-image.png'],
images: ['/favicon.ico'],
},
robots: {
index: true,
@@ -64,8 +64,6 @@ export const metadata: Metadata = {
},
icons: {
icon: '/favicon.ico',
shortcut: '/favicon-16x16.png',
apple: '/apple-touch-icon.png',
},
manifest: '/manifest.json',
viewport: {
@@ -74,7 +72,7 @@ export const metadata: Metadata = {
maximumScale: 5,
},
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#007aff' },
{ media: '(prefers-color-scheme: light)', color: '#4A90E2' },
{ media: '(prefers-color-scheme: dark)', color: '#1a1a1a' },
],
};
@@ -91,6 +89,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
{/* Google Fonts - Exo Thin for logotype */}
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@100&display=swap" rel="stylesheet" />
{/* DNS prefetch for better performance */}
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
@@ -113,14 +114,13 @@ export default function RootLayout({ children }: RootLayoutProps) {
name: 'CHORUS Services',
description: 'Distributed AI Orchestration Platform',
url: 'https://chorus.services',
logo: 'https://chorus.services/logo.png',
sameAs: [
// Add social media links when available
],
contactPoint: {
'@type': 'ContactPoint',
contactType: 'Customer Service',
url: 'https://chorus.services/contact',
url: 'https://chorus.services',
},
}),
}}