CHORUS
A distributed, semantic and temporal knowledge fabric
for humans and AI agents alike
to share reasoning, context, and intent,
not just files.
Brand Guide
version 1.0
This living document is your comprehensive visual identity system
for our brand of distributed AI orchestration.
Brand Overview
Mission
CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.
Promise
Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.
Position
CHORUS Services positions itself as the premium, enterprise-grade solution for distributed AI orchestration, combining technical sophistication with approachable design to serve global enterprise customers seeking reliable, scalable AI coordination.
Audience
Technical Decision Makers
CTOs, VP Engineering
- ROI justification
- Technical depth
- Security assurance
AI Research Leads
Principal Engineers
- Technical specifications
- API documentation
- Research validation
Business Stakeholders
Executives
- Business outcomes
- Competitive positioning
- Implementation support
Brand Identity Concept
Design Philosophy
The CHORUS brand identity embodies sophisticated orchestration through an ultra-minimalist aesthetic that connects technological precision with elegant simplicity. The system reflects:
- Minimalist Precision: Clean, uncluttered design with purposeful use of white space
- Subtle Sophistication: Understated elegance through refined typography and gentle color gradients
- Mobius Continuity: The infinite loop of the Mobius ring representing seamless, continuous processes
- Sophisticated Simplicity: Premium quality through restraint and intentional design choices
- Global Accessibility: Internationally appropriate and inclusive design principles
Brand Personality
CHORUS represents enthusiastic wonder, respect for nature, an analytical view of the natural world. We seek to better understand cognition, expand our minds through education and experimentation, and work with like-minded people and AIs.
We understand that working together produces a better outcome for all, and that only through a safe and equal experience can we accomplish great things.
Minimalist
Clean, uncluttered aesthetic that eliminates visual noise
Sophisticated
Premium quality through purposeful restraint and elegant simplicity
Seamless
Like the Mobius ring, every element flows naturally into the next
Reliable
Consistent, trustworthy visual language that builds confidence through clarity
Accessible
Ultra-simple design making complex technology feel globally approachable
Timeless
Classic, enduring aesthetic that transcends trends
Secure
Best efforts and best practice
Private
Self-control of your data - it's none of our business
How to use these Brand Guidelines
Navigating the Guide
This comprehensive brand guide is organized with logical navigation flow. Use the sidebar menu to jump between sections, each with semantic icons for easy identification.
Navigation Features
Click on any section in the sidebar to jump directly to that section
Use the back arrow in the top left to return to the previous section
Scroll down to explore each section in detail
Use the up arrow to quickly return to the top of the page
Access settings for theme toggle and visual aids in the bottom toolbar
Breadcrumb trails at the top of each section for easy navigation
Use the search bar to quickly find specific topics or keywords
Get AI-assisted answers to questions about the brand guidelines
- Theme Toggle: Switch between dark/light modes (dark is default)
- Visual Aid: Access color-blindness accommodations via bottom toolbar
- Semantic Icons: Each section has corresponding Coolicons for visual clarity
- Accessibility First: All navigation supports keyboard and screen readers
CHORUS
Logo System
Primary Logo: "The Möbius Ring"
Visual Description
The CHORUS logo is a 3D Möbius Ring with a triangular cross-section, symbolizing the core principles of the brand: continuous context, seamless collaboration, and multi-faceted intelligence. The single, continuous surface of the ring represents the unbroken flow of information and context within the CHORUS ecosystem, while the three faces of its triangular profile allude to the key pillars of the product: security, self-determinance, resiliance.
Core Elements
- 3D Mobius Ring: The primary visual element featuring elegant metallic rendering with sophisticated lighting and materials, representing infinite collaboration and seamless process flow.
- 2D Minimalist Icon: An ultra-clean, geometric abstraction of the Mobius ring for UI applications and small-scale use.
- Clean Wordmark: "CHORUS" in refined typography with generous spacing, accompanied by "services" in subtle, lighter weight for hierarchy.
- Subtle Gradient System: Gentle color transitions derived from the ring's metallic surface for UI depth without complexity.
Logo Usage Guidelines
- Always maintain clear space around the logo equal to the height of the "C" in "CHORUS".
- Do not alter the proportions or colors of the logo.
- Use the 3D version for high-impact applications; use the 2D version for smaller formats.
- Ensure sufficient contrast with background colors for legibility.
Logo Orientation
Horizontal 2D Layout
When used inline, left-aligned, or with other elements or logos.
Stacked 2D Layout / Icon
When used center-aligned, or in a vertical stack of logos.
Download our Logo Packs
The full logo package including vector files, PNGs, Blender file, Three.js Implementation, and full motion and usage guidelines:
Typography
The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.
✓ Complete System Scaling
All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.
Font Families
Inter Tight
The primary typeface for CHORUS is Inter Tight, a modern sans-serif font designed for high legibility and versatility.
Fallback fonts include Arial, Helvetica, sans-serif.
Inter is available for free under the SIL Open Font License and can be downloaded from rsms.me/inter.
Exo
The logo typeface for CHORUS is Exo, a modern sans-serif font designed for high legibility and versatility.
Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.
Inter is available for free under the SIL Open Font License and can be downloaded from rsms.me/inter.
Inconsolata
The code typeface for CHORUS is Inconsolata, a modern mono-spaced font designed for high legibility at small sizes.
Fallback fonts include Fira Sans, Noto, sans-serif.
Inter is available for free under the SIL Open Font License and can be downloaded from rsms.me/inter.
DO
DO
This column represents to correct typographic approach to font selection, weight, scaling, coloration.
Headings
Masthead
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Adjust Weight for Contrast
Thin (100)
Extra Light (200)
Light (300)
Normal (400)
Medium (500)
Semi Bold (600)
Bold (700)
Extra Bold (800)
Black (900)
Weight for emphasis
This body text has been set for particular emphasis of a single paragraph.
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.
This is smaller body text for secondary information.
Typeset Paragraphs
This body text has been set for particular emphasis of a single paragrpah.
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.
This is smaller body text for secondary information.
DON'T
DON'T
This column represents the incorrect typographic approach to font selection, weight, scaling, coloration.
Adjust Weights or Sizes
Masthead
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Set weights arbitrarily
Thin (100)
Extra Light (200)
Light (300)
Normal (400)
Medium (500)
Semi Bold (600)
Bold (700)
Extra Bold (800)
Black (900)
Color for emphasis
Body text should not be colored to emphasise a paragrpah.
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.
This is smaller body text for secondary information.
Set text 'solid'
This body text has been set with insufficient leading for the paragrpah.
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. Set for maximum legibility and aesthetics.
This is smaller body text for secondary information.
Overset Leading
This text has been set with excessive leading for the paragrpah and its associated heading.
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. Set for maximum legibility and aesthetics.
This smaller body text for secondary information appears orphaned.
Heading Weights
Heading weights have an inverse relationship to size.
Proportional Font Scale
Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability
Implementation Guide
The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.
Implementation Steps
Configure your build system to use the proportional typography scale with 18px base:
1. Set Root Font Size (CSS)
/* Set 18px as the root font size for complete system scaling */
html {
font-size: 18px; /* Base size: 18px instead of browser default 16px */
}2. Configure Tailwind Typography (JavaScript)
// tailwind.config.js - Proportional Typography Override
module.exports = {
theme: {
extend: {
fontSize: {
'xs': ['0.64rem', { lineHeight: '0.9rem', fontWeight: '400' }], // 11.52px @ 18px base
'sm': ['0.8rem', { lineHeight: '1.125rem', fontWeight: '400' }], // 14.4px @ 18px base
'base': ['1rem', { lineHeight: '1.5rem', fontWeight: '400' }], // 18px @ 18px base
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }], // 22.5px @ 18px base
'xl': ['1.563rem', { lineHeight: '2.125rem', fontWeight: '400' }], // 28.1px @ 18px base
'2xl': ['1.953rem', { lineHeight: '2.375rem', fontWeight: '400' }], // 35.2px @ 18px base
'3xl': ['2.441rem', { lineHeight: '2.75rem', fontWeight: '400' }], // 43.9px @ 18px base
'4xl': ['3.052rem', { lineHeight: '3.25rem', fontWeight: '400' }], // 55.0px @ 18px base
'5xl': ['3.815rem', { lineHeight: '4rem', fontWeight: '400' }], // 68.7px @ 18px base
'6xl': ['4.768rem', { lineHeight: '4.75rem', fontWeight: '400' }], // 85.8px @ 18px base
}
}
}
}3. Usage Examples (HTML)
<h1 class="text-4xl font-bold">Main Heading (55px)</h1>
<h2 class="text-2xl font-semibold">Section Heading (35.2px)</h2>
<p class="text-base">Body text (18px)</p>
<small class="text-sm text-gray-600">Caption text (14.4px)</small>
<!-- Spacing also scales proportionally with rem units -->
<div class="p-4 mb-6">Padding and margins scale with base font</div>Color Palette
Brand Color Philosophy
The CHORUS color palette draws inspiration from premium natural materials in the Australian Landscape, and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.
Theme Implementation of Color Palettes
Dark Mode
(Default/Preferred)
Dark mode is the preferred default for all CHORUS Services applications
- Background Hierarchy: Carbon Black → Mulberry Variants → Cool Gray → Border Gray
- Text Hierarchy: Clean White → Light Gray → Purple Accents → Brand Colors
- Aesthetic: Ultra-minimalist with sophisticated mulberry accents
- Contrast: All combinations tested for WCAG 2.1 AA compliance
Light Mode
(Alternative)
Available as alternative but dark mode is strongly preferred
- Background Hierarchy: Pure White → Sand Variants → Eucalyptus
- Text Hierarchy: Carbon Black → Medium Gray → Light Gray
- Usage: Available as alternative but dark mode is strongly preferred
- Contrast: Optimized for readability on warm, natural backgrounds
Ocean
#5a6c80
Usage: Primary actions, interactive elements, system feedback. Psychology: Trust, reliability, technological precision.
Eucalyptus
#515d54
Usage: Success states, positive feedback, growth indicators. Applications: Success messages, positive data visualization.
Nickel
#c1bfb1
Usage: UI elements, borders, technical precision. Psychology: Modern sophistication, precision, technology.
Mulberry
#0b0213
Usage: Hero backgrounds, dark accents, secondary elements. Psychology: Richness, mystery, luxury, power, and depth.
Sand
#8e7b5e
Usage: Warning states, attention indicators, energy elements. Applications: Warnings, attention callouts, active processes.
Coral
#593735
Usage: Error states, critical alerts, problem indicators. Applications: Error messages, critical warnings, urgent notifications.
Carbon
#000000
Usage: Primary backgrounds, high-contrast text, logo applications. Psychology: Authority, sophistication, premium quality.
Walnut
#403730
Usage: Warm accents, secondary elements, natural touches. Psychology: Reliability, craftsmanship, approachable intelligence.
Iconography System
Philosophy
The CHORUS iconography system uses the Coolicons v4.1 library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
Clarity & Recognition
Icons communicate instantly without language barriers
Theme Adaptive
Black and white variants ensure perfect contrast in all modes
Consistent Scale
Standardized sizing maintains visual harmony
Icon Categories
The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.
Interface & Navigation
Core UI elements for user interaction and navigation
Search
Settings
Filter
Check
Link
Security
Favorite
Delete
File & Data Management
Document, folder, and cloud storage representations
Document
Folder
Cloud
Download
Upload
Archive
Code
Search
Communication & Notifications
Message, alert, and social interaction indicators
Mail
Chat
Alerts
Call
Share
Send
Notice
Typing
Navigation & Direction
Directional indicators and navigation controls
Back
Forward
Up
Down
Expand
Next
Refresh
Fullscreen
Icon Sizing & Usage
Standard Sizes
16px (w-4 h-4): Inline text, small buttons
20px (w-5 h-5): Standard UI elements
24px (w-6 h-6): Primary actions, headers
32px (w-8 h-8): Feature highlights, cards
Usage Guidelines
- Consistency: Use same size for similar functions
- Alignment: Center icons within their containers
- Spacing: Minimum 8px padding around clickable icons
- Context: Choose appropriate semantic meaning
- Contrast: Black icons for light themes, white for dark
- Accessibility: Always include alt text descriptions
Implementation Examples
HTML Implementation
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png"
alt="Search"
class="w-5 h-5 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png"
alt="Search"
class="w-5 h-5 hidden dark:block">
<button class="flex items-center gap-2 px-4 py-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png"
alt="Download"
class="w-4 h-4 dark:hidden">
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png"
alt="Download"
class="w-4 h-4 hidden dark:block">
Download File
</button>SVG Implementation (Preferred)
<svg class="w-5 h-5 text-carbon-950 dark:text-white">
<use href="icons/coolicons.v4.1/coolicons SVG/Interface/Search_Magnifying_Glass.svg#icon"></use>
</svg>
<svg class="w-5 h-5 fill-current text-carbon-950 dark:text-white" viewBox="0 0 24 24">
<path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z"/>
</svg>Tailwind Utility Classes
/* Icon sizing utilities */
.icon-xs { @apply w-3 h-3; } /* 12px - minimal inline */
.icon-sm { @apply w-4 h-4; } /* 16px - small buttons */
.icon-md { @apply w-5 h-5; } /* 20px - standard UI */
.icon-lg { @apply w-6 h-6; } /* 24px - primary actions */
.icon-xl { @apply w-8 h-8; } /* 32px - feature highlights */
/* Theme-adaptive coloring */
.icon-adaptive { @apply text-carbon-950 dark:text-white; }
.icon-accent { @apply text-mulberry-950 dark:text-paper-200; }
.icon-muted { @apply text-carbon-600 dark:text-mulberry-300; }Icon Library Access
The complete Coolicons v4.1 library is available in the brand assets directory with both PNG and SVG formats.
Example Dialogs
The following classes are available to style messages to the user in various scenarios.
These examples demonstrate how to use icons effectively in different dialog contexts.
Information
Use the info icon to indicate general information.
Please Note
Use the note icon for additional context or tips.
Caution
Use the caution icon to alert users to potential issues.
Security Alert
Use the warning icon to indicate critical issues that require attention.
Error
Use the error icon to indicate a problem that needs resolution.
Critical Error
Use the critical icon for severe issues that require immediate action.
Accessibility & Vision Inclusivity
Inclusive Design Philosophy
The CHORUS brand system extends beyond standard accessibility to provide vision-inclusive design that supports users with different forms of vision differences while maintaining our sophisticated metallic aesthetic. Our approach prioritizes contrast, brightness, and texture cues over exact hue fidelity.
Universal Access
8%+ of users experience color blindness
Brand Integrity
Metallic identity remains intact and aesthetically pleasing across all vision modes
Technical Excellence
All combinations exceed WCAG 2.1 AA standards with strategic texture and brightness
Vision Types & Support
Deuteranopia (Green-Blind) - 75% of Color Blind Users
Our metallic palette works exceptionally well for deuteranopia - carbon, nickel, and mulberry maintain distinct contrast.
Carbon
Excellent contrast, appears as expected
Mulberry
Maintains dark richness, slight blue shift
Nickel
Perfect metallic appearance maintained
Ocean
Appears more blue-gray, excellent contrast
Protanopia (Red-Blind) - 20% of Color Blind Users
Our strategic use of brightness differences ensures full accessibility for protanopia users.
Carbon
Perfect contrast, no color dependency
Coral
Appears dark brown, maintains warning context
Eucalyptus
Appears yellow-brown, retains positive association
Sand
Enhanced yellow appearance, excellent for warnings
Tritanopia (Blue-Blind) - 5% of Color Blind Users
Our earth-tone palette performs excellently for tritanopia, with warm tones remaining distinct.
Walnut
Enhanced warmth, excellent contrast
Ocean
Appears green-gray, maintains cool contrast
Sand
Bright, warm appearance maintained
Mulberry
Appears more red, luxury feel preserved
Accessibility Features
Built-in Support
- High Contrast: All color combinations exceed WCAG 2.1 AA (4.5:1 ratio)
- Brightness Hierarchy: Distinct luminance levels for non-color differentiation
- Texture Cues: Borders, gradients, and patterns support color-blind users
- Semantic Meaning: Context never relies solely on color
- Focus States: High-contrast borders and backgrounds for navigation
- Error Indication: Icons and text accompany color-coded feedback
Implementation Guidelines
- Test Early: Use simulators during design phase
- Multiple Cues: Combine color with icons, text, and spacing
- Consistent Patterns: Establish reliable visual hierarchies
- User Controls: Provide theme and contrast options
- Documentation: Include alt text and aria labels
- Real Testing: Validate with users who have color vision differences
Interactive Accessibility Tool
Experience our brand palette through different vision types using the built-in accessibility simulator.
Component System
UI Component Library
The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.
Buttons & Actions
Primary, secondary, and ghost button variants with accessibility-compliant focus states
Forms & Inputs
Clean form elements with validation states and accessibility features
Navigation & Layout
Header, sidebar, and breadcrumb components with responsive behavior
Component Standards
Design Principles
- Ultra-Minimalist: Every element serves a clear functional purpose
- Accessible First: WCAG 2.1 AA compliance built into every component
- Theme Adaptive: Seamless dark/light mode transitions
- Vision Inclusive: Support for all forms of color blindness
- Responsive Design: Mobile-first approach with progressive enhancement
- Performance Optimized: Lightweight CSS and minimal DOM impact
- Keyboard Navigation: Full keyboard accessibility for all interactive elements
- Focus Management: Clear focus indicators and logical tab order
- Screen Reader Support: Proper ARIA labels and semantic markup
- Touch Friendly: Minimum 44px touch targets for mobile interfaces
Component Library Access
Full component specifications and code examples are available in the technical implementation section.
Motion Design System
Motion Philosophy
The CHORUS motion system embodies the continuous flow of the Möbius ring, creating sophisticated orchestration through purposeful, elegant animations. Every movement serves a functional purpose while maintaining the ultra-minimalist aesthetic.
Seamless Flow
Like the Möbius ring, animations flow naturally without jarring interruptions
Purposeful Motion
Every animation guides attention and enhances understanding
Performance First
Optimized animations that respect user preferences and device capabilities
Animation Principles
Easing & Timing
Sophisticated easing creates natural, comfortable motion that feels organic and polished.
Primary Easing
cubic-bezier(0.4, 0.0, 0.2, 1)
Standard Material Design easing for most interactions
Chorus Signature
cubic-bezier(0.25, 0.46, 0.45, 0.94)
Custom easing for signature CHORUS animations
Duration Guidelines
Implementation Standards
CSS Implementation
/* CHORUS Motion System Variables */
:root {
--chorus-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
--chorus-ease-signature: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--chorus-duration-micro: 150ms;
--chorus-duration-ui: 300ms;
--chorus-duration-page: 500ms;
--chorus-duration-attention: 800ms;
}
/* Standard Transition Classes */
.transition-chorus-micro {
transition: all var(--chorus-duration-micro) var(--chorus-ease-standard);
}
.transition-chorus-ui {
transition: all var(--chorus-duration-ui) var(--chorus-ease-standard);
}
.transition-chorus-signature {
transition: all var(--chorus-duration-ui) var(--chorus-ease-signature);
}Accessibility & Performance
- Reduced Motion: Respect prefers-reduced-motion user preferences
- Performance Budget: Limit concurrent animations to maintain 60fps
- Progressive Enhancement: Ensure functionality without animation
- Focus Management: Preserve focus during animated transitions
- Content Priority: Never let animation delay critical content
Motion Design Resources
Complete motion specifications, example animations, and implementation guides are available in the technical section.
Implementation
Technical Specifications
Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.
Tailwind CSS Configuration
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
nickel: { 950: '#2a2823', 900: '#5a5750', /* ... */ },
ocean: { 950: '#0f1419', 900: '#1e2832', /* ... */ },
eucalyptus: { 950: '#141a16', 900: '#2b3f30', /* ... */ },
sand: { 950: '#1a1612', 900: '#3d3322', /* ... */ },
coral: { 950: '#1a1413', 900: '#593735', /* ... */ }
},
spacing: {
'chorus-xs': '0.25rem',
'chorus-sm': '0.5rem',
'chorus-md': '1rem',
'chorus-lg': '1.5rem',
'chorus-xl': '2rem',
'chorus-xxl': '3rem'
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
'display': ['Inter Display', 'Inter', 'sans-serif'],
'mono': ['JetBrains Mono', 'Consolas', 'monospace']
}
}
}
}CSS Implementation
/* CHORUS Brand CSS Variables */
:root {
--chorus-primary: #000000; /* carbon-950 */
--chorus-secondary: #0b0213; /* mulberry-950 */
--chorus-accent: #403730; /* walnut-900 */
--chorus-neutral: #c1bfb1; /* nickel-500 */
}
.chorus-button {
background: var(--chorus-primary);
color: var(--chorus-neutral);
padding: 1rem 2rem;
border: none;
transition: all 0.3s ease;
}
.chorus-button:hover {
background: var(--chorus-accent);
transform: translateY(-1px);
}HTML Structure
<!-- CHORUS Brand Component -->
<div class="chorus-hero">
<canvas class="chorus-logo" width="200" height="200"></canvas>
<h1 class="font-logo text-5xl font-thin">
CHORUS Services
</h1>
<p class="text-carbon-600 dark:text-mulberry-300">
Enterprise AI Orchestration Platform
</p>
</div>Download Complete Implementation
Full technical specifications, code examples, and implementation guides with syntax highlighting support.
Layout - Responsive Design
Responsive Design Principles
The CHORUS brand system is built with responsive design principles to ensure a
Responsive design principles ensure the CHORUS brand system adapts seamlessly across devices, maintaining visual integrity and usability.
By utilizing fluid layouts, flexible typography, and responsive images, the system provides an optimal user experience on any screen size.
Key Features
- Fluid grid layouts that adapt to screen size
- Flexible typography that scales with viewport
- Responsive images and media queries for optimal performance
- Mobile-first design approach for progressive enhancement
Fluid Layouts
Fluid layouts use relative units like percentages and viewport units to ensure content scales smoothly across devices.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}Flexible Typography
Typography scales fluidly using responsive units like 'rem' and 'vw', ensuring readability on all devices.
body {
font-size: 1rem; /* Base size */
}
h1 {
font-size: 2.5rem; /* Scales with viewport */
}
p {
font-size: 1rem; /* Responsive text */
}Responsive Images
Images adapt to screen size using CSS properties like 'max-width' and 'height: auto', ensuring they maintain aspect ratio and do not overflow their containers.
img {
max-width: 100%;
height: auto; /* Maintains aspect ratio */
}Media Queries
Media queries allow for specific styles to be applied based on device characteristics, such as screen width, ensuring optimal layout and usability.
@media (max-width: 768px) {
body {
font-size: 0.875rem; /* Smaller text on mobile */
}
.container {
padding: 0 0.5rem; /* Reduced padding on smaller screens */
}
}Communication - Language Support
The CHORUS brand system is designed to support multiple languages, ensuring that our communication is accessible and inclusive for a global audience.
Language Support Overview
The CHORUS brand system supports multiple languages to ensure global accessibility and inclusivity. This includes:
- Multilingual content management
- Right-to-left (RTL) language support
- Language-specific typography adjustments
- Localization of UI components
Implementation Guidelines
To implement language support in the CHORUS brand system, follow these guidelines:
- Use Unicode (UTF-8) encoding for all text content
- Implement language selection options in the UI
- Ensure all text elements are translatable
- Use CSS for language-specific styles, such as font families and sizes
- Test for proper rendering of different scripts and characters
- Provide clear instructions for users to switch languages
Communication - Public Relations
The CHORUS brand system provides guidelines for effective public relations communication, ensuring consistency and clarity across all channels.
Public Relations Overview
The CHORUS brand system supports public relations efforts by providing a consistent framework for communication. This includes:
- Clear messaging guidelines
- Brand voice and tone specifications
- Visual identity standards for press materials
- Templates for press releases and media kits
Implementation Guidelines
To implement public relations communication effectively, follow these guidelines:
- Use the CHORUS brand voice consistently across all PR materials
- Ensure all press releases follow the established templates
- Maintain visual consistency with the brand's color palette and typography
- Provide clear contact information for media inquiries
- Regularly update media kits with the latest company information
- Monitor and respond to media coverage in a timely manner
Communication - Investor Relations
The CHORUS brand system provides guidelines for investor relations communication, ensuring transparency and consistency in all financial disclosures.
Investor Relations Overview
The CHORUS brand system supports investor relations by providing a consistent framework for financial communication. This includes:
- Clear financial reporting guidelines
- Brand voice and tone specifications for investor communications
- Visual identity standards for investor presentations
- Templates for earnings releases and investor updates
Implementation Guidelines
To implement investor relations communication effectively, follow these guidelines:
- Use the CHORUS brand voice consistently in all investor materials
- Ensure all financial reports follow the established templates
- Maintain visual consistency with the brand's color palette and typography
- Provide clear and transparent financial information
- Regularly update investor presentations with the latest company performance data
- Facilitate open communication channels for investor inquiries
Communication - Collaborators
The CHORUS brand system provides guidelines for effective communication with collaborators, ensuring clarity and consistency in all partnership interactions.
Collaborator Communication Overview
The CHORUS brand system supports collaboration by providing a consistent framework for communication. This includes:
- Clear messaging guidelines for partner interactions
- Brand voice and tone specifications for collaborative communications
- Visual identity standards for joint marketing materials
- Templates for partnership agreements and collaboration proposals
Implementation Guidelines
To implement effective communication with collaborators, follow these guidelines:
- Use the CHORUS brand voice consistently in all collaborative materials
- Ensure all partnership documents follow the established templates
- Maintain visual consistency with the brand's color palette and typography
- Provide clear and transparent information about collaboration goals
- Regularly update partners with the latest project developments
- Facilitate open communication channels for feedback and inquiries
Collaboration Tools
Utilize collaboration tools to enhance communication and project management with partners:
- Project management platforms (e.g., Asana, Trello)
- Communication tools (e.g., Slack, Microsoft Teams)
- Document sharing and collaboration (e.g., Google Workspace, Microsoft 365)
- Video conferencing tools for remote meetings (e.g., Zoom, Google Meet)
Social Media - Visual Identity
The CHORUS brand system provides visual identity guidelines for social media, ensuring a cohesive and recognizable presence across platforms.
Visual Identity Overview
The CHORUS brand system supports social media visual identity by providing a consistent framework for graphics and imagery. This includes:
- Brand color palette for social media graphics
- Typography guidelines for social media posts
- Logo usage specifications for profile pictures and banners
- Image style guidelines for consistency across platforms
Implementation Guidelines
To implement effective social media visual identity, follow these guidelines:
- Use the CHORUS brand color palette consistently in all graphics
- Ensure typography is legible and aligns with brand standards
- Use the CHORUS logo appropriately in profile pictures and banners
- Maintain a consistent image style that reflects the brand's identity
- Regularly update social media graphics to reflect current campaigns
- Test graphics on different devices to ensure proper display
Visual Identity Tools
Utilize design tools to create and manage social media graphics:
- Graphic design software (e.g., Adobe Photoshop, Illustrator)
- Online design tools (e.g., Canva, Figma)
- Social media image size guides for optimal display
- Asset libraries for storing and sharing brand graphics
Clothing / Corporate Wear
The CHORUS brand system includes guidelines for corporate wear to ensure a professional and cohesive appearance for employees and representatives:
- Use of brand colors in corporate apparel
- Logo placement on clothing items
- Guidelines for professional attire that reflects the brand's identity
- Recommendations for fabric and material choices that align with brand values
Presentations and Decks
The CHORUS brand system provides guidelines for creating effective presentations and decks, ensuring a professional and cohesive visual identity.
Presentation Overview
The CHORUS brand system supports presentations by providing a consistent framework for visual communication. This includes:
- Brand color palette for slides
- Typography guidelines for headings and body text
- Logo usage specifications for slide headers and footers
- Image style guidelines for consistency across slides
Implementation Guidelines
To implement effective presentations, follow these guidelines:
- Use the CHORUS brand color palette consistently in all slides
- Ensure typography is legible and aligns with brand standards
- Use the CHORUS logo appropriately in slide headers and footers
- Maintain a consistent image style that reflects the brand's identity
- Limit text on slides to key points for clarity
- Use high-quality images and graphics to enhance visual appeal
Presentation Tools
Utilize presentation tools to create and manage slides:
- Presentation software (e.g., Microsoft PowerPoint, Google Slides)
- Online design tools (e.g., Canva, Prezi)
- Slide templates for consistent formatting
- Asset libraries for storing and sharing brand graphics
Example Presentation Template
Download the example presentation template to get started with creating your own CHORUS presentations:
Download Presentation TemplateCulture
Video Capture Standards
The CHORUS brand system provides guidelines for video capture, ensuring high-quality and consistent visual content across all media.
Video Capture Overview
The CHORUS brand system supports video capture by providing a consistent framework for visual content. This includes:
- Camera settings and equipment recommendations
- Lighting and sound guidelines for optimal quality
- Framing and composition standards for shots
- Post-production editing guidelines for consistency
Implementation Guidelines
To implement effective video capture, follow these guidelines:
- Use high-quality cameras and lenses for clear visuals
- Ensure proper lighting to avoid shadows and glare
- Use external microphones for clear audio capture
- Frame shots according to the rule of thirds for balanced composition
- Maintain consistent branding elements in all video content
- Follow post-production editing guidelines to enhance video quality
Video Capture Tools
Utilize video capture tools to create and manage high-quality content:
- Camera equipment (e.g., DSLR, mirrorless cameras)
- Lighting kits for controlled illumination
- External microphones for improved audio quality
- Video editing software (e.g., Adobe Premiere Pro, Final Cut Pro)
- Asset libraries for storing and sharing video content
Example Video Capture Checklist
Download the example video capture checklist to ensure all aspects of video production are covered:
Download Video Capture ChecklistStill Photography Capture Standards
AI Generated Imagery Standards
The CHORUS brand system provides guidelines for AI-generated imagery, ensuring high-quality and consistent visual content across all media.
AI Imagery Overview
The CHORUS brand system supports AI-generated imagery by providing a consistent framework for visual content. This includes:
- AI model selection and training guidelines
- Image quality standards for AI-generated content
- Ethical considerations for AI-generated imagery
- Post-processing guidelines for enhancing AI-generated images
Implementation Guidelines
To implement effective AI-generated imagery, follow these guidelines:
- Select appropriate AI models based on project requirements
- Ensure high-resolution output for all AI-generated images
- Maintain ethical standards in AI-generated content creation
- Use post-processing techniques to enhance image quality
- Incorporate brand elements consistently in AI-generated imagery
- Regularly review and update AI models to improve output quality
Do not generate imagery of humans, be it a likeness or representation of a living person or not.
This cheapens the brand and goes against the CHORUS ethos of utilising human talents.
We already use AI to its best abilities to generate our customers products and our own, assigning human likeness is misguided.
Generated imagery of systems or diagrams is an acceptable use provided results are checked
Use AI to the best of its talents and sometimes that means creating imagery beyond human capability or budgets.
Print Media Standards
The CHORUS brand system provides guidelines for print media, ensuring high-quality and consistent visual content across all printed materials.
Print Media Overview
The CHORUS brand system supports print media by providing a consistent framework for visual content. This includes:
- Brand color palette for printed materials
- Typography guidelines for headings and body text
- Logo usage specifications for print media
- Image style guidelines for consistency across printed content
- Ethical use and sourcing of paper stocks
- Eco-friendly publishers
Implementation Guidelines
To implement effective print media, follow these guidelines:
- Use the CHORUS brand color palette consistently in all printed materials
- Ensure typography is legible and aligns with brand standards
- Use the CHORUS logo appropriately in print media
- Maintain a consistent image style that reflects the brand's identity
- Use high-quality recycled and recyclable paper stocks that align with brand values
- Work with eco-friendly publishers to minimize environmental impact
Advertising Standards
The CHORUS brand system provides guidelines for advertising, ensuring high-quality and consistent visual content across all advertising channels.
Advertising Overview
The CHORUS brand system supports advertising by providing a consistent framework for visual content. This includes:
- Brand color palette for advertising materials
- Typography guidelines for headlines and body text
- Logo usage specifications for advertisements
- Image style guidelines for consistency across ads
- Ethical advertising practices
- Transparency in advertising claims
- Pricing transparency and responsibilities
- Warranties and claims
- Promotions an sales
Implementation Guidelines
To implement effective advertising, follow these guidelines:
- Use the CHORUS brand color palette consistently in all advertising materials
- Ensure typography is legible and aligns with brand standards
- Use the CHORUS logo appropriately in advertisements
- Maintain a consistent image style that reflects the brand's identity
- Follow ethical advertising practices to build trust with customers
- Be transparent in advertising claims and avoid misleading information
- Clearly and truthfully communicate pricing, warranties, and claims to customers
- Ensure promotions and sales have clearly defined and communicated scopes, end dates, and waivers
Advertising Tools
Utilize advertising tools to create and manage campaigns:
- Advertising platforms (e.g., Google Ads, Facebook Ads)
- Graphic design software for ad creation (e.g., Adobe Photoshop, Illustrator)
- Online design tools (e.g., Canva, Figma)
- Analytics tools to measure ad performance and ROI
- Asset libraries for storing and sharing ad graphics
Example Advertising Campaign Template
Download the example advertising campaign template to get started with creating your own CHORUS advertising campaigns:
Download Advertising Campaign TemplateEnterprise AI Orchestration
Sophisticated distributed reasoning without hallucinations. Built for global teams building the future of intelligent software.
Social Media - Lanuage and Tone
The CHORUS brand system provides guidelines for social media communication, ensuring a consistent and engaging presence across platforms.
Social Media Overview
The CHORUS brand system supports social media communication by providing a consistent framework for engagement. This includes:
Implementation Guidelines
To implement effective social media communication, follow these guidelines:
Social Media Analytics Tools
Utilize analytics tools to measure the effectiveness of social media campaigns: