tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive brand system and website architecture documentation

Browse Source 
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>
This commit is contained in:
tony
2025-08-02 22:13:32 +10:00
parent fccedf229a
commit b7553856f5
42 changed files with 4880 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
brand-assets/guidelines/brand-usage-guidelines.md Normal file
View File

@@ -0,0 +1,365 @@
# CHORUS Services Brand Usage Guidelines
## Brand Overview
CHORUS Services represents enterprise-grade distributed AI orchestration through sophisticated, approachable visual identity. These guidelines ensure consistent, professional brand application across all touchpoints while maintaining the premium, technology-focused aesthetic that appeals to global enterprise clients.
## Brand Positioning Statement
**CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.**
The brand conveys:
- **Enterprise Reliability**: Professional, trustworthy, scalable solutions
- **Technical Innovation**: Cutting-edge AI orchestration capabilities
- **Global Accessibility**: International appeal with sophisticated simplicity
- **Approachable Expertise**: Technical depth presented clearly and confidently
## Logo Usage Standards
### Primary Logo Applications
#### Horizontal Layout (Preferred)
- **Use Cases**: Website headers, business cards, letterhead, digital signatures
- **Minimum Size**: 120px width (digital), 1.5" width (print)
- **Clear Space**: Height of "C" in CHORUS on all sides
- **Background**: Carbon Black (#000000) or Natural Paper (#F5F5DC)
#### Stacked Layout (Vertical Applications)
- **Use Cases**: Social media profiles, mobile applications, square formats
- **Minimum Size**: 80px width (digital), 1" width (print)
- **Proportion**: Maintains icon-to-text relationship from horizontal version
- **Background**: Solid color fields only, no complex backgrounds
#### Icon-Only Applications
- **Use Cases**: Favicons, app icons, navigation elements, tight spaces
- **Minimum Size**: 16px (favicon), 32px (standard icon), 512px (high-resolution)
- **Format**: Square aspect ratio with rounded corners for app icons
- **Background**: Transparent or solid brand colors only
### Logo Color Specifications
#### Primary Version (Dark Backgrounds)
```css
/* For use on Carbon Black (#000000) or dark backgrounds */
--logo-icon: #F5F5DC; /* Natural Paper */
--logo-accent: #007AFF; /* Orchestration Blue */
--logo-primary-text: #F5F5DC; /* Natural Paper */
--logo-secondary-text: #C0C0C0; /* Brushed Aluminum */
```
#### Reversed Version (Light Backgrounds)
```css
/* For use on Natural Paper (#F5F5DC) or white backgrounds */
--logo-icon: #000000; /* Carbon Black */
--logo-accent: #007AFF; /* Orchestration Blue */
--logo-primary-text: #000000; /* Carbon Black */
--logo-secondary-text: #8B4513; /* Walnut Brown */
```
#### Monochrome Applications
- **Black**: All elements in Carbon Black (#000000)
- **White**: All elements in Natural Paper (#F5F5DC)
- **Blue**: All elements in Orchestration Blue (#007AFF)
- **Usage**: Single-color printing, embossing, engraving, simple applications
### Logo Placement Guidelines
#### Digital Applications
- **Website Headers**: Top-left placement, links to homepage
- **Email Signatures**: Left-aligned, followed by contact information
- **Social Media**: Profile images (icon-only), cover images (horizontal)
- **Documents**: Top-left on first page, smaller versions on subsequent pages
#### Print Applications
- **Business Cards**: Primary position, typically top-left or center
- **Letterhead**: Header placement, consistent with corporate identity
- **Brochures**: Front cover prominent, inside pages smaller versions
- **Trade Show**: Large format applications with maximum visibility
## Typography Applications
### Headline Hierarchy
#### Hero Headlines (Marketing Focus)
```css
.hero-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(48px, 8vw, 84px);
font-weight: 800;
line-height: 1.0;
letter-spacing: -0.02em;
color: var(--text-primary);
}
```
- **Use Cases**: Homepage hero, major campaign headlines
- **Treatment**: Gradient text effects approved for digital applications
- **Length**: Maximum 6 words for impact and readability
#### Section Headlines (Content Organization)
```css
.section-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text-primary);
}
```
- **Use Cases**: Page sections, component features, major content divisions
- **Treatment**: Solid colors only, no effects
- **Length**: Maximum 8 words for clarity
#### Component Headlines (Technical Focus)
```css
.component-headline {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: clamp(24px, 4vw, 36px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-primary);
}
```
- **Use Cases**: WHOOSH, BZZZ, SLURP, COOEE component headers
- **Treatment**: May include component accent color
- **Length**: Component name + brief descriptor
### Body Text Standards
#### Feature Descriptions (Marketing Content)
```css
.feature-description {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);
max-width: 65ch; /* Optimal reading length */
}
```
- **Use Cases**: Feature explanations, value propositions, marketing copy
- **Tone**: Professional but approachable, benefit-focused
- **Length**: 2-3 sentences maximum per paragraph
#### Technical Descriptions (Documentation)
```css
.technical-description {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
max-width: 70ch;
}
```
- **Use Cases**: API documentation, integration guides, technical specifications
- **Tone**: Precise, clear, assumption-free
- **Format**: Numbered lists, bullet points, code examples
## Color Application Standards
### Primary Brand Colors Usage
#### Carbon Black (#000000)
- **Primary Applications**: Backgrounds, high-contrast text, logo elements
- **Digital**: Main website background, app interfaces, dark mode primary
- **Print**: Body text, headlines, premium finishing
- **Avoid**: Large solid areas in print (ink coverage issues)
#### Natural Paper (#F5F5DC)
- **Primary Applications**: Light backgrounds, high-contrast text, logo elements
- **Digital**: Light mode backgrounds, text on dark surfaces
- **Print**: Paper selection, background tints, accessibility contrast
- **Avoid**: Digital screens without proper calibration
#### Orchestration Blue (#007AFF)
- **Primary Applications**: Interactive elements, accent colors, system feedback
- **Digital**: Buttons, links, active states, progress indicators
- **Print**: Accent elements, callouts, technical diagrams
- **Avoid**: Large background areas (accessibility concerns)
#### Walnut Brown (#8B4513)
- **Primary Applications**: Warm accents, secondary text, natural elements
- **Digital**: Secondary buttons, icons, decorative elements
- **Print**: Text accents, border elements, warm contrast
- **Avoid**: Primary text (readability issues)
### System Color Applications
#### Success States (Harmony Green #30D158)
- **Usage**: Positive feedback, completed states, growth metrics
- **Examples**: "Success" messages, completed tasks, positive data visualization
- **Accessibility**: Always test contrast on intended backgrounds
#### Warning States (Resonance Amber #FF9F0A)
- **Usage**: Attention required, important information, energy indicators
- **Examples**: "Warning" messages, attention callouts, active processes
- **Accessibility**: Ensure sufficient contrast for text applications
#### Error States (Alert Coral #FF453A)
- **Usage**: Error messages, critical alerts, problem indicators
- **Examples**: Form validation errors, system alerts, critical warnings
- **Accessibility**: Must meet WCAG AA contrast requirements
## Content Tone & Voice Guidelines
### Brand Voice Characteristics
#### Professional Authority
- **Tone**: Confident, knowledgeable, trustworthy
- **Language**: Technical precision without jargon overuse
- **Examples**: "CHORUS Services eliminates context loss through intelligent orchestration"
- **Avoid**: Overly casual language, uncertain qualifiers ("maybe", "might")
#### Approachable Expertise
- **Tone**: Helpful, clear, solution-oriented
- **Language**: Plain English explanations of complex concepts
- **Examples**: "Distributed AI coordination made simple and reliable"
- **Avoid**: Condescending language, oversimplification of serious topics
#### Global Accessibility
- **Tone**: Inclusive, internationally appropriate, culturally neutral
- **Language**: Clear sentence structure, common terminology
- **Examples**: "Scalable multi-agent collaboration for enterprise teams worldwide"
- **Avoid**: Regional idioms, cultural assumptions, complex grammatical constructions
### Content Structure Guidelines
#### Headlines and Titles
- **Format**: Sentence case preferred over title case
- **Length**: 6-8 words maximum for headlines, 12 words maximum for page titles
- **Focus**: Benefit-driven for marketing, function-driven for technical content
- **Examples**:
- "Orchestrate AI agents without the hallucinations"
- "Enterprise-ready distributed reasoning platform"
#### Descriptions and Body Copy
- **Paragraph Length**: 2-3 sentences maximum
- **Sentence Length**: 15-20 words average, 25 words maximum
- **Structure**: Lead with benefit, follow with explanation, end with action
- **Examples**:
- "Context-aware AI coordination reduces hallucinations by 78%. CHORUS Services maintains intelligent context across distributed agents, ensuring consistent, reliable outputs for enterprise applications."
#### Technical Documentation
- **Structure**: Step-by-step procedures, numbered lists, clear headings
- **Language**: Active voice, imperative mood, specific instructions
- **Format**: Code examples, API references, integration guides
- **Examples**:
- "Initialize CHORUS orchestration: `./chorus.sh start`"
- "Configure agent endpoints in `config/whoosh.yaml`"
## Digital Brand Applications
### Website Design Standards
#### Header Treatment
- **Logo Placement**: Top-left, consistent size across pages
- **Navigation**: Horizontal, SF Pro Text Medium, 16px
- **CTA Buttons**: Orchestration Blue, SF Pro Text Semibold, prominent placement
- **Background**: Carbon Black (#000000) with Natural Paper (#F5F5DC) text
#### Hero Section Requirements
- **Background**: Dark gradient or solid Carbon Black
- **Typography**: Hero headline + supporting description + CTA
- **Layout**: Centered content, maximum 1200px width
- **Animation**: Subtle fade-in effects, respect reduced motion preferences
#### Component Sections
- **Background**: Alternating dark/light sections for visual rhythm
- **Icons**: Component-specific colors with CHORUS brand connection
- **Typography**: Section headline + feature grid + supporting details
- **CTA Integration**: Clear next steps for each component
### Social Media Brand Standards
#### Profile Applications
- **Profile Image**: Icon-only CHORUS logo, square format
- **Cover Image**: Horizontal logo with brand message
- **Bio Content**: Consistent brand voice, key platform benefits
- **Hashtags**: #CHORUSServices #DistributedAI #EnterpriseAI
#### Content Guidelines
- **Visual Style**: Dark backgrounds preferred, high contrast
- **Typography**: Brand fonts where supported, consistent hierarchy
- **Color Usage**: Primary brand colors, avoid off-brand combinations
- **Messaging**: Professional tone, benefit-focused content
### Email Communications
#### Signature Standards
```
[CHORUS Logo - Horizontal, 120px width]
Your Name
Title, CHORUS Services
email@chorus.services | +1 (555) 123-4567
https://www.chorus.services
Distributed AI Orchestration Without the Hallucinations
```
#### Newsletter Design
- **Header**: CHORUS logo + navigation links
- **Typography**: SF Pro Text hierarchy, readable sizes
- **Color Scheme**: Dark header/footer, light content areas
- **CTA Buttons**: Orchestration Blue, clear calls-to-action
## Print Brand Applications
### Business Collateral Standards
#### Business Cards
- **Size**: Standard 3.5" × 2" (89mm × 51mm)
- **Logo**: Horizontal layout, maximum 1.5" width
- **Typography**: SF Pro Text hierarchy, minimum 8pt size
- **Color**: Carbon Black text on Natural Paper background
- **Finish**: Matte coating preferred for premium feel
#### Letterhead Design
- **Logo**: Top-left placement, 1.75" width maximum
- **Contact Info**: Right-aligned header or footer placement
- **Typography**: SF Pro Text, professional hierarchy
- **Color**: Minimal color usage, focus on typography and layout
#### Brochure Standards
- **Cover**: Large logo, compelling headline, minimal text
- **Interior**: Component sections with icons and descriptions
- **Typography**: Clear hierarchy, generous white space
- **Color**: Full brand palette with accessibility considerations
### Large Format Applications
#### Trade Show Displays
- **Logo**: Maximum visibility, readable from 10+ feet
- **Typography**: Large headlines, minimal body text
- **Color**: High contrast combinations for visibility
- **Messaging**: Key benefits, clear contact information
#### Vehicle Graphics
- **Logo**: Simplified versions for vehicle applications
- **Contact**: Website URL prominently displayed
- **Color**: High contrast for visibility and safety
- **Placement**: Professional, non-intrusive positioning
## Brand Protection Guidelines
### Approved Usage
- Marketing materials by authorized CHORUS Services team members
- Partner materials with proper brand license and approval
- Media coverage with appropriate brand credit and context
- Educational content referencing CHORUS Services capabilities
### Prohibited Usage
- Competitor materials or comparative advertising without permission
- Modified logos, colors, or typography outside brand specifications
- Inappropriate contexts that could damage brand reputation
- Commercial usage without proper licensing agreements
### Quality Control Standards
- All brand applications must meet accessibility requirements
- Print applications require brand team approval before production
- Digital applications should follow responsive design principles
- International applications may require cultural sensitivity review
This comprehensive brand usage guide provides CHORUS Services with clear, actionable standards for maintaining consistent, professional brand presentation across all applications and audiences.