chorus-services/modules/teaser/public/logos/component-logo-system.md

CHORUS Services Component Logo System

Modular Design Philosophy

The CHORUS component logo system creates visual harmony between the main brand and individual service components. Each component maintains its unique identity while clearly connecting to the CHORUS orchestration platform through:

• Consistent Visual Language: Shared design elements and proportions
• Hierarchical Relationship: Clear parent-child brand architecture
• Flexible Integration: Components work independently or combined with CHORUS
• Scalable Implementation: Logos work at various sizes and contexts

Component Brand Architecture

Primary Integration Pattern

Format: [Component Icon] + [Component Name] + "powered by CHORUS"

• Visual Connection: Component icons connect to CHORUS orchestration symbol
• Hierarchy: Component name primary, CHORUS attribution secondary
• Usage: Marketing materials, component-specific applications

Secondary Integration Pattern

Format: [Component Icon] + [CHORUS Icon] + [Combined Wordmark]

• Visual Connection: Icons placed side-by-side with connecting element
• Hierarchy: Equal visual weight, combined functionality message
• Usage: Technical documentation, integrated dashboards

Individual Component Logos

WHOOSH - Orchestration Engine

Visual Concept: "The Command Center"

• Icon Design: Stylized orchestration podium with flowing conductor lines
• Metaphor: Musical conductor's podium representing workflow orchestration
• Visual Elements:
  • Geometric podium base (stability, foundation)
  • Flowing curves emanating upward (orchestration, direction)
  • Node connection points (distributed coordination)
  • Subtle gradient suggesting depth and dimension

Color Specifications

• Primary: Orchestration Blue (#007AFF) with Natural Paper (#F5F5DC) accents
• Secondary: Brushed Aluminum (#C0C0C0) for technical elements
• Monochrome: Single color applications in brand palette

Typography Integration

• WHOOSH: SF Pro Display Bold, same treatment as CHORUS
• Orchestration Engine: SF Pro Text Medium, 40% size of WHOOSH
• Brand Connection: "powered by CHORUS" in SF Pro Text Regular, 30% size

BZZZ - P2P Agent Coordination

Visual Concept: "The Network Mesh"

• Icon Design: Hexagonal mesh network pattern inspired by honeycomb structure
• Metaphor: Bee hive organization representing peer-to-peer coordination
• Visual Elements:
  • Interconnected hexagonal cells (network nodes)
  • Dynamic connection lines (peer communication)
  • Central hub with radiating connections (distributed coordination)
  • Slight organic curvature (natural intelligence, swarm behavior)

Color Specifications

• Primary: Harmony Green (#30D158) representing growth and coordination
• Secondary: Carbon Black (#000000) for connection lines
• Accent: Orchestration Blue (#007AFF) for central hub highlighting

Typography Integration

• BZZZ: SF Pro Display Heavy with slight letter-spacing increase for buzz effect
• P2P Agent Coordination: SF Pro Text Medium, descriptive subtitle
• Visual Treatment: Subtle vibration effect on hover (digital applications)

SLURP - Context Curator Service

Visual Concept: "The Information Layers"

• Icon Design: Stacked information layers with intelligent filtering
• Metaphor: Geological strata representing hierarchical context storage
• Visual Elements:
  • Multiple horizontal layers with varying opacity
  • Curved flow lines showing context curation
  • Magnifying glass element suggesting intelligent search
  • Gradient transitions between layers (context relevance)

Color Specifications

• Primary: Walnut Brown gradient (#8B4513 to #A0522D) for warmth and intelligence
• Secondary: Natural Paper (#F5F5DC) for information layers
• Accent: Orchestration Blue (#007AFF) for search and discovery elements

Typography Integration

• SLURP: SF Pro Display Semibold with subtle condensed treatment
• Context Curator Service: SF Pro Text Regular, professional positioning
• Visual Effect: Subtle layer animation revealing depth (digital applications)

COOEE - Feedback & Learning System

Visual Concept: "The Learning Loop"

• Icon Design: Circular feedback loop with learning arrows and adaptation nodes
• Metaphor: Australian "cooee" call representing communication and response
• Visual Elements:
  • Circular arrow path suggesting continuous learning
  • Node points representing feedback collection
  • Gradient progression showing improvement over time
  • Sound wave elements referencing the "cooee" call

Color Specifications

• Primary: Resonance Amber (#FF9F0A) representing energy and learning
• Secondary: Harmony Green (#30D158) for positive feedback loops
• Accent: Carbon Black (#000000) for contrast and professional grounding

Typography Integration

• COOEE: SF Pro Display Bold with slight wave distortion (friendly, approachable)
• Feedback & Learning System: SF Pro Text Medium, descriptive and professional
• Audio Reference: Subtle sound wave graphic element in extended logo

Monitoring & Analytics

Visual Concept: "The Insight Dashboard"

• Icon Design: Modern dashboard with real-time metrics visualization
• Metaphor: Mission control dashboard representing oversight and intelligence
• Visual Elements:
  • Grid-based layout suggesting organized data
  • Rising chart lines indicating performance metrics
  • Circular progress indicators for health monitoring
  • Subtle glow effects suggesting live data streams

Color Specifications

• Primary: Brushed Aluminum (#C0C0C0) for precision and technology
• Secondary: Orchestration Blue (#007AFF) for data visualization elements
• Accent: Multiple system colors for different metric types

Typography Integration

• Monitoring: SF Pro Display Medium, technical and precise
• Analytics: SF Pro Text Regular, secondary positioning
• Data Emphasis: Monospace font (SF Mono) for numeric displays

Integration Guidelines

Combined Logo Layouts

Horizontal Integration

[Component Icon] COMPONENT NAME → [CHORUS Icon] CHORUS powered by

• Use Case: Marketing materials, business cards, letterhead
• Spacing: Component and CHORUS sections separated by 2x the x-height
• Hierarchy: Component name 100%, CHORUS name 70%, "powered by" 40%

Vertical Integration

[Component Icon] COMPONENT NAME ↓ [CHORUS Icon] CHORUS Services

• Use Case: Vertical layouts, mobile applications, square formats
• Spacing: Consistent vertical rhythm based on typography line-height
• Connection: Subtle arrow or connection line between icons

Compact Integration

[Component Icon][CHORUS Icon] COMPONENT × CHORUS

• Use Case: Favicons, app icons, tight space applications
• Treatment: Icons side-by-side with minimal separation
• Typography: Single line with multiplication symbol (×) or plus (+)

Color Coordination Rules

Complementary Pairing

• WHOOSH + CHORUS: Blue orchestration with natural paper
• BZZZ + CHORUS: Green coordination with blue orchestration
• SLURP + CHORUS: Walnut brown intelligence with blue precision
• COOEE + CHORUS: Amber learning with blue stability

Monochrome Applications

• All components can be rendered in single color from brand palette
• Maintain contrast relationships between icon and text elements
• Use opacity variations to create hierarchy in single-color applications

Usage Applications

Digital Applications

• Website Headers: Horizontal integration with component focus
• App Icons: Compact integration or component-only versions
• Dashboard UI: Icon-only versions for navigation and identification
• API Documentation: Component + CHORUS technical integration

Print Applications

• Component Brochures: Vertical integration with detailed explanations
• Technical Specifications: Monochrome versions with clear hierarchy
• Business Materials: Horizontal integration maintaining brand connection
• Trade Show Materials: Large format applications with full integration

Marketing Applications

• Social Media: Component-focused posts with CHORUS attribution
• Advertisements: Component benefits highlighted with platform connection
• Case Studies: Component success stories within CHORUS ecosystem
• Email Signatures: Compact integration for professional communication

Technical Implementation

SVG Structure Template

svg

COMPONENT CHORUS

CSS Integration Classes

css .component-logo { display: inline-flex; align-items: center; gap: var(--logo-spacing, 16px); }

.component-icon { width: var(--icon-size, 32px); height: var(--icon-size, 32px); fill: var(--component-color); }

.chorus-icon { width: calc(var(--icon-size, 32px) * 0.8); height: calc(var(--icon-size, 32px) * 0.8); fill: var(--chorus-color, #007AFF); }

.component-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-size, 18px); color: var(--text-color); }

Brand Protection Guidelines

Approved Combinations

• Any CHORUS component may be combined with the main CHORUS brand
• Component logos may appear independently in component-specific contexts
• Combined logos must maintain proper spacing and hierarchy relationships

Prohibited Combinations

• Components cannot be combined with competitor brands
• Third-party logos cannot be integrated into the CHORUS component system
• Component icons cannot be modified or recolored outside brand palette
• Typography treatments must remain consistent with brand specifications

This component logo system provides CHORUS Services with a cohesive, flexible brand architecture that supports individual component marketing while reinforcing the unified platform message.