tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c8fb816775328d7d32a5387e2368332804b243eb
chorus-services/modules/teaser/public/logos/logo-variations-specifications.md
tony c8fb816775 feat: Add CHORUS teaser website with mobile-responsive design 
- Created complete Next.js 15 teaser website with CHORUS brand styling
- Implemented mobile-responsive 3D logo (128px mobile, 512px desktop)
- Added proper Exo font loading via Next.js Google Fonts for iOS/Chrome compatibility
- Built comprehensive early access form with GDPR compliance and rate limiting
- Integrated PostgreSQL database with complete schema for lead capture
- Added scroll indicators that auto-hide when scrolling begins
- Optimized mobile modal forms with proper scrolling and submit button access
- Deployed via Docker Swarm with Traefik SSL termination at chorus.services
- Includes database migrations, consent tracking, and email notifications

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-26 13:57:30 +10:00

9.1 KiB
Raw Blame History

CHORUS Services Logo Variations & Specifications

Overview

This document provides comprehensive specifications for all CHORUS Services logo variations, ensuring consistent brand presentation across every possible application context. Each variation is optimized for specific use cases while maintaining brand integrity and recognition.

Primary Logo Variations

1. Horizontal Layout (Primary)

Full Color Version

  • Usage: Primary logo for most applications
  • Background: Carbon Black (#000000) or dark backgrounds
  • Icon Color: Natural Paper (#F5F5DC) with Orchestration Blue (#007AFF) accent
  • Text Color: Natural Paper (#F5F5DC) primary, Brushed Aluminum (#C0C0C0) secondary
  • Minimum Size: 120px width (digital), 1.5" width (print)
  • File Formats: SVG (preferred), PNG (2x retina), PDF (print)

Reversed Version

  • Usage: Light backgrounds, print applications, high-contrast needs
  • Background: Natural Paper (#F5F5DC), White (#FFFFFF), or light backgrounds
  • Icon Color: Carbon Black (#000000) with Orchestration Blue (#007AFF) accent
  • Text Color: Carbon Black (#000000) primary, Walnut Brown (#8B4513) secondary
  • Applications: Business cards, letterhead, light-theme websites

2. Stacked Layout (Vertical)

Full Color Stacked

  • Usage: Square formats, mobile applications, social media
  • Proportions: Icon above text, centered alignment
  • Sizing: Icon 60% of total height, text 40% of total height
  • Minimum Size: 80px width (digital), 1" width (print)
  • Aspect Ratio: Approximately 1:1.2 (width:height)

Reversed Stacked

  • Usage: Light backgrounds in vertical format
  • Color Treatment: Same as reversed horizontal
  • Applications: Light-theme mobile apps, print materials with vertical layout

3. Icon-Only Variations

Primary Icon

  • Usage: Favicons, app icons, navigation elements, profile images
  • Design: Orchestration symbol only, no text
  • Size Range: 16px to 512px (digital), 0.25" to 4" (print)
  • Aspect Ratio: 1:1 (perfect square)
  • Background Treatment: Transparent or solid brand colors

App Icon Treatment

  • iOS Specifications: Rounded corners with 20% corner radius
  • Android Specifications: Rounded corners with 15% corner radius
  • Background: Solid Carbon Black (#000000) with centered icon
  • Icon Color: Natural Paper (#F5F5DC) with Orchestration Blue accent
  • Required Sizes: 16, 32, 48, 64, 128, 256, 512px

Favicon Specifications

  • Size: 16x16px, 32x32px, 48x48px
  • Format: ICO file with multiple resolutions
  • Design: Simplified orchestration symbol
  • Color: High contrast version optimized for small display
  • Background: Transparent

Monochrome Variations

1. Black Version

  • Color: All elements in Carbon Black (#000000)
  • Usage: Single-color printing, embossing, engraving
  • Background: White or Natural Paper only
  • Applications: Letterhead, business cards, cost-effective printing

2. White Version

  • Color: All elements in Natural Paper (#F5F5DC) or White (#FFFFFF)
  • Usage: Dark backgrounds, reversed applications
  • Applications: Dark websites, presentations, merchandise

3. Single Brand Color

  • Orchestration Blue: All elements in #007AFF
  • Usage: Branded merchandise, promotional materials
  • Background: White, Natural Paper, or transparent
  • Applications: T-shirts, promotional items, digital watermarks

Specialized Context Variations

1. Watermark Version

  • Opacity: 15-25% transparency
  • Usage: Document backgrounds, presentation slides
  • Size: Large format, subtle presence
  • Color: Single color with reduced opacity
  • Placement: Off-center, non-interfering with content

2. Print Newspaper/Magazine

  • Design: High contrast, simplified details
  • Color: Black only for newspaper, spot color for magazines
  • Size: Minimum legible size for publication standards
  • Format: Vector format with outlined fonts

3. Embroidery Specifications

  • Design: Simplified orchestration symbol
  • Stitch Count: Optimized for production efficiency
  • Size Range: 0.75" to 4" width
  • Colors: Maximum 3 thread colors
  • Background: None (direct on fabric)

4. Engraving/Etching

  • Design: Line art version of orchestration symbol
  • Detail Level: Simplified for engraving depth limitations
  • Applications: Awards, plaques, metal products
  • File Format: Vector outlines, no fills

Digital-Specific Variations

1. Animated Logo (Digital Only)

  • Animation: Subtle orchestration symbol rotation or pulse
  • Duration: 2-3 seconds, smooth loop
  • Usage: Website loading, video intros
  • Format: SVG animation, GIF fallback
  • File Size: Optimized for web performance

2. Social Media Profile Variations

LinkedIn Profile

  • Size: 300x300px minimum
  • Format: PNG with transparent background
  • Version: Icon-only with high contrast

Twitter/X Profile

  • Size: 400x400px recommended
  • Format: PNG or JPG
  • Version: Icon-only, optimized for small display

Facebook Profile

  • Size: 180x180px minimum
  • Format: PNG recommended
  • Version: Icon-only or simplified horizontal

Instagram Profile

  • Size: 320x320px minimum
  • Format: PNG recommended
  • Version: Icon-only with brand colors

3. Email Signature Specifications

  • Size: 120px width maximum
  • Format: PNG (Retina 2x resolution)
  • Version: Horizontal layout preferred
  • Linking: Clickable link to website homepage
  • Alt Text: "CHORUS Services - Distributed AI Orchestration"

Technical Implementation Specifications

SVG Code Structure

svg

CHORUS Services

CSS Implementation

css .chorus-logo { display: inline-block; max-width: 100%; height: auto; }

.chorus-logo--horizontal { aspect-ratio: 4/1; min-width: 120px; }

.chorus-logo--stacked { aspect-ratio: 1/1.2; min-width: 80px; }

.chorus-logo--icon-only { aspect-ratio: 1/1; min-width: 32px; }

/* Responsive sizing */ @media (max-width: 768px) { .chorus-logo--horizontal { min-width: 100px; } }

File Naming Convention

chorus-logo-horizontal-color.svg chorus-logo-horizontal-reversed.svg chorus-logo-stacked-color.png chorus-logo-icon-only-white.svg chorus-logo-monochrome-black.pdf

Quality Assurance Checklist

Before Production

  • Logo meets minimum size requirements for intended application
  • Color contrast tested for accessibility compliance (WCAG 2.1 AA)
  • File format appropriate for intended use (vector vs. raster)
  • Resolution sufficient for intended output (72 DPI web, 300 DPI print)
  • Colors match brand specifications exactly
  • Typography rendering correctly at all sizes
  • Clear space maintained around logo
  • Alternative text or descriptions provided for accessibility

After Production

  • Logo displays correctly across different devices and browsers
  • Print test completed for physical applications
  • File sizes optimized for web performance
  • Backup formats available for compatibility
  • Usage rights and approvals documented
  • Brand guidelines compliance verified

Approval Process

Internal Review

  1. Brand Manager: Visual consistency and brand compliance
  2. Design Lead: Technical quality and implementation feasibility
  3. Marketing Director: Strategic alignment and marketing effectiveness
  4. Legal Review: Trademark compliance and usage rights

External Applications

  1. Partner Usage: Requires brand license agreement and approval
  2. Media Usage: Provide official logo package with usage guidelines
  3. Vendor Applications: Review and approve before production
  4. International Usage: Cultural sensitivity review when applicable

Logo Package Contents

Standard Logo Package

  • Horizontal color version (SVG, PNG 2x, PDF)
  • Horizontal reversed version (SVG, PNG 2x, PDF)
  • Stacked color version (SVG, PNG 2x)
  • Icon-only versions (SVG, PNG 2x, ICO)
  • Monochrome versions (SVG, PNG, PDF)
  • Usage guidelines summary (PDF)

Extended Logo Package

  • All standard package contents
  • Animated versions (SVG, GIF)
  • Social media optimized versions
  • Print-specific versions (high-resolution)
  • Component integration examples
  • Brand color swatches (ASE, ACO, CSS)
  • Typography files and licenses

This comprehensive logo variation system ensures CHORUS Services maintains consistent, professional brand presentation across every possible application while providing the flexibility needed for diverse marketing and communication contexts.