ba0e8c84ae
- Add complete Iconography section with Coolicons v4.1 integration - Implement theme-adaptive icons (black for light mode, white for dark mode) - Add Visual Aid modal dialog for accessibility settings - Replace theme toggle with semantic moon/sun icons - Add personality trait icons with appropriate semantic choices - Fix code block theming to respect light/dark mode toggle - Include comprehensive icon categories: Interface, File/Data, Communication, Navigation - Add detailed implementation guides for HTML, SVG, and Tailwind - Create accessibility-aware color system with vision deficiency support - Add Inconsolata and Inter Tight fonts for complete typography system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2186 lines
115 KiB
HTML
2186 lines
115 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="dark h-full">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>CHORUS Services Brand Style Guide</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
// Core Brand Colors
|
||
'carbon': {
|
||
950: '#000000',
|
||
900: '#0a0a0a',
|
||
800: '#1a1a1a',
|
||
700: '#2a2a2a',
|
||
600: '#666666',
|
||
500: '#808080',
|
||
400: '#a0a0a0',
|
||
300: '#c0c0c0',
|
||
200: '#e0e0e0',
|
||
100: '#f0f0f0',
|
||
50: '#f8f8f8'
|
||
},
|
||
'mulberry': {
|
||
950: '#0b0213',
|
||
900: '#1a1426',
|
||
800: '#2a2639',
|
||
700: '#3a384c',
|
||
600: '#4a4a5f',
|
||
500: '#5a5c72',
|
||
400: '#7a7e95',
|
||
300: '#9aa0b8',
|
||
200: '#bac2db',
|
||
100: '#dae4fe',
|
||
50: '#f0f4ff'
|
||
},
|
||
'walnut': {
|
||
950: '#1E1815',
|
||
900: '#403730',
|
||
800: '#504743',
|
||
700: '#605756',
|
||
600: '#706769',
|
||
500: '#80777c',
|
||
400: '#90878f',
|
||
300: '#a09aa2',
|
||
200: '#b0adb5',
|
||
100: '#c0c0c8',
|
||
50: '#d0d3db',
|
||
25: '#e0e6ee'
|
||
},
|
||
'paper': {
|
||
950: '#F5F5DC',
|
||
900: '#f7f7e2',
|
||
800: '#f9f9e8',
|
||
700: '#fbfbee',
|
||
600: '#fdfdf4',
|
||
500: '#fffffa',
|
||
400: '#ffffff',
|
||
300: '#ffffff',
|
||
200: '#ffffff',
|
||
100: '#ffffff',
|
||
50: '#ffffff'
|
||
},
|
||
'nickel': {
|
||
950: '#171717',
|
||
900: '#2a2a2a',
|
||
800: '#3d3d3d',
|
||
700: '#505050',
|
||
600: '#636363',
|
||
500: '#767676',
|
||
400: '#c1bfb1',
|
||
300: '#d4d2c6',
|
||
200: '#e7e5db',
|
||
100: '#faf8f0',
|
||
50: '#fdfcf8'
|
||
},
|
||
// System Colors
|
||
'ocean': {
|
||
950: '#2a3441',
|
||
900: '#3a4654',
|
||
800: '#4a5867',
|
||
700: '#5a6c80',
|
||
600: '#6a7e99',
|
||
500: '#7a90b2',
|
||
400: '#8ba3c4',
|
||
300: '#9bb6d6',
|
||
200: '#abc9e8',
|
||
100: '#bbdcfa',
|
||
50: '#cbefff'
|
||
},
|
||
'eucalyptus': {
|
||
950: '#2a3330',
|
||
900: '#3a4540',
|
||
800: '#4a5750',
|
||
700: '#515d54',
|
||
600: '#5a6964',
|
||
500: '#6a7974',
|
||
400: '#7a8a7f',
|
||
300: '#8a9b8f',
|
||
200: '#9aac9f',
|
||
100: '#aabdaf',
|
||
50: '#bacfbf'
|
||
},
|
||
'sand': {
|
||
950: '#473e2f',
|
||
900: '#6a5c46',
|
||
800: '#655d4e',
|
||
700: '#8e7b5e',
|
||
600: '#a19179',
|
||
500: '#b4a794',
|
||
400: '#c6bdae',
|
||
300: '#d9d3c9',
|
||
200: '#ece9e4',
|
||
100: '#bed1ae',
|
||
50: '#cee1be'
|
||
},
|
||
'coral': {
|
||
950: '#2e1d1c',
|
||
900: '#3e2d2c',
|
||
800: '#4e3d3c',
|
||
700: '#593735',
|
||
600: '#5e474c',
|
||
500: '#6e575c',
|
||
400: '#7e676c',
|
||
300: '#8b5a57',
|
||
200: '#8e878c',
|
||
100: '#9e979c',
|
||
50: '#aea7ac'
|
||
}
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
|
||
mono: ['Inconsolata', 'ui-monospace', 'monospace'],
|
||
logo: ['Exo', 'Inter Tight', 'sans-serif']
|
||
},
|
||
spacing: {
|
||
'chorus-sm': '8px',
|
||
'chorus-md': '16px',
|
||
'chorus-lg': '32px',
|
||
'chorus-xl': '64px',
|
||
'chorus-xxl': '128px',
|
||
}
|
||
}
|
||
},
|
||
plugins: [function({ addUtilities }){
|
||
addUtilities({
|
||
'.h7': { fontSize: '0.7rem', lineHeight: '1rem', fontWeight: '700', letterSpacing: '0.05em', textTransform: 'uppercase' }
|
||
})
|
||
}]
|
||
};
|
||
</script>
|
||
<style>
|
||
/* CHORUS Brand CSS Variables - Ultra-Minimalist Implementation */
|
||
:root {
|
||
/* Core Brand Colors */
|
||
--color-carbon-black: #000000;
|
||
--color-dark-mulberry: #0b0213;
|
||
--color-walnut-brown: #403730;
|
||
--color-natural-paper: #F5F5DC;
|
||
--color-brushed-nickel: #c1bfb1;
|
||
|
||
/* Light Theme Variables */
|
||
--bg-primary: #FFFFFF;
|
||
--bg-secondary: #FEFEFE;
|
||
--bg-tertiary: #F5F5DC; /* Natural Paper */
|
||
--bg-accent: #F7F7E2;
|
||
|
||
--text-primary: #000000;
|
||
--text-secondary: #1A1A1A;
|
||
--text-tertiary: #333333;
|
||
--text-subtle: #666666;
|
||
--text-ghost: #999999;
|
||
|
||
--border-invisible: #FAFAFA;
|
||
--border-subtle: #F0F0F0;
|
||
--border-defined: #E5E5E5;
|
||
--border-emphasis: #CCCCCC;
|
||
|
||
--accent-primary: #0b0213; /* Dark Mulberry */
|
||
--accent-secondary: #403730; /* Walnut Brown */
|
||
--accent-system: #5a6c80; /* Ocean Blue */
|
||
|
||
/* Spacing System */
|
||
--space-micro: 4px;
|
||
--space-sm: 8px;
|
||
--space-md: 16px;
|
||
--space-lg: 32px;
|
||
--space-xl: 64px;
|
||
--space-xxl: 128px;
|
||
}
|
||
|
||
/* Dark Theme Variables */
|
||
.dark {
|
||
--bg-primary: #000000;
|
||
--bg-secondary: #0a0a0a;
|
||
--bg-tertiary: #0b0213; /* Dark Mulberry */
|
||
--bg-accent: #1a1426;
|
||
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #E0E0E0;
|
||
--text-tertiary: #C0C0C0;
|
||
--text-subtle: #A0A0A0;
|
||
--text-ghost: #808080;
|
||
|
||
--border-invisible: #1a1a1a;
|
||
--border-subtle: #2a2a2a;
|
||
--border-defined: #3a3a3a;
|
||
--border-emphasis: #4a4a4a;
|
||
|
||
--accent-primary: #F5F5DC; /* Natural Paper */
|
||
--accent-secondary: #c1bfb1; /* Brushed Nickel */
|
||
}
|
||
|
||
/* Accessibility theme overrides - non-conflicting */
|
||
[data-theme="protanopia"] {
|
||
--color-ring-primary: #1e40af; /* Blue-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="deuteranopia"] {
|
||
--color-ring-primary: #6b21a8; /* Purple-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="tritanopia"] {
|
||
--color-ring-primary: #991b1b; /* Red-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="achromatopsia"] {
|
||
--color-ring-primary: #374151; /* Gray-700 for logo materials only */
|
||
}
|
||
|
||
/* Typography optimizations for brand guide */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
p {
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
ul, ol {
|
||
padding-left: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Inconsolata', monospace;
|
||
background: var(--border-subtle);
|
||
padding: 0.125rem 0.25rem;
|
||
font-size: 0.875em;
|
||
}
|
||
|
||
.dark code {
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
/* Ultra-clean transitions following brand guide */
|
||
* {
|
||
transition: opacity 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
|
||
}
|
||
|
||
/* Motion System CSS - Documentation Only */
|
||
/* Implementation to be done separately */
|
||
|
||
/* Custom progress bars with full browser compatibility */
|
||
progress {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 8px;
|
||
background-color: #E5E5E5;
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.dark progress {
|
||
background-color: #374151;
|
||
}
|
||
|
||
/* WebKit Progress Bar */
|
||
progress::-webkit-progress-bar {
|
||
background-color: #E5E5E5;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.dark progress::-webkit-progress-bar {
|
||
background-color: #374151;
|
||
}
|
||
|
||
/* Harmony Green Progress */
|
||
.progress-harmony::-webkit-progress-value {
|
||
background-color: #515d54;
|
||
border-radius: 0;
|
||
}
|
||
.dark .progress-harmony::-webkit-progress-value {
|
||
background-color: #7a8a7f;
|
||
}
|
||
.progress-harmony::-moz-progress-bar {
|
||
background-color: #515d54;
|
||
border-radius: 0;
|
||
}
|
||
.dark .progress-harmony::-moz-progress-bar {
|
||
background-color: #7a8a7f;
|
||
}
|
||
|
||
.full-width {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.hero {
|
||
margin-bottom: var(--space-md);
|
||
padding-bottom: var(--space-lg);
|
||
}
|
||
.logo-hero.border,
|
||
#logo-hero.border {
|
||
border: none;
|
||
}
|
||
|
||
/* Canvas sizing for Three.js logos */
|
||
.chorus-logo {
|
||
display: block;
|
||
aspect-ratio: 1 / 1; /* Force square aspect ratio */
|
||
}
|
||
|
||
.chorus-logo.w32.h32 {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
}
|
||
|
||
/* Ensure all chorus-logo canvases are square regardless of class */
|
||
canvas.chorus-logo {
|
||
aspect-ratio: 1 / 1 !important;
|
||
}
|
||
|
||
</style>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inconsolata:wght@200..900&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="h-full bg-white text-carbon-950 antialiased dark:bg-carbon-950 dark:text-white">
|
||
<!-- Docked panels -->
|
||
|
||
|
||
<aside class="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-100 bg-white/95 p-chorus-lg backdrop-blur md:block dark:border-mulberry-800 dark:bg-mulberry-950/95">
|
||
|
||
<div class="mb-chorus-xl flex items-center gap-chorus-sm">
|
||
<span class="text-2xl font-black text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</span>
|
||
</div>
|
||
<nav class="space-y-micro text-sm">
|
||
<a href="#overview" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Brand Overview</a>
|
||
<a href="#identity" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Brand Identity</a>
|
||
<a href="#logo" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Logo System</a>
|
||
<a href="#colors" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Color Palette</a>
|
||
<a href="#iconography" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Iconography</a>
|
||
<a href="#accessibility" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Accessibility</a>
|
||
<a href="#typography" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Typography</a>
|
||
<a href="#components" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Component System</a>
|
||
<a href="#motion" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Motion System</a>
|
||
<a href="#usage" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Usage Guidelines</a>
|
||
<a href="#implementation" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Implementation</a>
|
||
<a href="#web-design" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Web Design</a>
|
||
</nav>
|
||
|
||
|
||
</aside>
|
||
|
||
<div class="md:pl-64">
|
||
<!-- Header -->
|
||
<header class="md:block inset-y-0 left-0 border-b border-nickel-100 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-chorus-lg">
|
||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo font-medium">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="dark:bg-mulberry-950 light:bg-white min-h-screen">
|
||
|
||
<!-- Hero Section -->
|
||
<section class="mb-chorus-xxl hero full-width py-chorus-xxl text-center bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 from-sand-300 to-white p-chorus-lg">
|
||
<div class="text-center">
|
||
<h1 class="font-logo text-6xl font-regular tracking-wide text-mulberry-950 dark:text-white mb-chorus-md">CHORUS</h1>
|
||
<h3 class="text-2xl font-medium mb-chorus-xl">A distributed, semantic and temporal knowledge fabric<br/>for humans and AI agents alike<br/>to share reasoning, context, and intent,<br/>not just files.</h3>
|
||
|
||
|
||
<h2 class="text-2xl font-black text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide v1.0</h2>
|
||
<p class="text-lg text-carbon-500 dark:text-gray-400 max-w-2xl mx-auto">This living document is your comprehensive visual identity system<br/>for our brand of distributed AI orchestration.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="px-chorus-lg">
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
|
||
<!-- Brand Overview -->
|
||
<section id="overview" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Brand Overview</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Mission Statement</h3>
|
||
<p>CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Brand Promise</h3>
|
||
<p>Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Brand Positioning</h3>
|
||
<p>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.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Target Audiences</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Technical Decision Makers</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-sm">CTOs, VP Engineering</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• ROI justification</li>
|
||
<li>• Technical depth</li>
|
||
<li>• Security assurance</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">AI Research Leads</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-sm">Principal Engineers</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• Technical specifications</li>
|
||
<li>• API documentation</li>
|
||
<li>• Research validation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Business Stakeholders</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-sm">Executives</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>• Business outcomes</li>
|
||
<li>• Competitive positioning</li>
|
||
<li>• Implementation support</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Brand Identity -->
|
||
<section id="identity" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Brand Identity Concept</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Design Philosophy</h3>
|
||
<p>The CHORUS brand identity embodies <strong>sophisticated orchestration</strong> through an <strong>ultra-minimalist aesthetic</strong> that connects technological precision with elegant simplicity. The system reflects:</p>
|
||
|
||
<ul class="mt-chorus-md space-y-2">
|
||
<li><strong>Minimalist Precision:</strong> Clean, uncluttered design with purposeful use of white space</li>
|
||
<li><strong>Subtle Sophistication:</strong> Understated elegance through refined typography and gentle color gradients</li>
|
||
<li><strong>Mobius Continuity:</strong> The infinite loop of the Mobius ring representing seamless, continuous processes</li>
|
||
<li><strong>Sophisticated Simplicity:</strong> Premium quality through restraint and intentional design choices</li>
|
||
<li><strong>Global Accessibility:</strong> Internationally appropriate and inclusive design principles</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Brand Personality</h3>
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Remove_Minus.png" alt="Minimalist" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Remove_Minus.png" alt="Minimalist" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Minimalist</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Clean, uncluttered aesthetic that eliminates visual noise</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Sophisticated" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Sophisticated" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Sophisticated</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Premium quality through purposeful restraint and elegant simplicity</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="Seamless" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="Seamless" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Seamless</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Like the Mobius ring, every element flows naturally into the next</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check_Big.png" alt="Reliable" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check_Big.png" alt="Reliable" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Reliable</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Consistent, trustworthy visual language that builds confidence through clarity</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Accessible" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Accessible" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Accessible</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Ultra-simple design making complex technology feel approachable</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Calendar/Clock.png" alt="Timeless" class="w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Calendar/Clock.png" alt="Timeless" class="w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="font-medium mb-1">Timeless</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Classic, enduring aesthetic that transcends trends</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<section id="logo-hero" class="py-chorus-xl bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400 backdrop-blur">
|
||
<!-- 3D Möbius Ring Display -->
|
||
<div class="max-w-4xl mx-auto mb-chorus-lg flex items-center">
|
||
<div class="mx-auto item h-100 overflow-hidden" id="logo-container">
|
||
<canvas class="chorus-logo"></canvas>
|
||
<!-- <div class="absolute bottom-4 left-4 text-white">
|
||
<p class="text-sm opacity-80">Interactive 3D Möbius Ring</p>
|
||
</div> -->
|
||
<h2 style="text-align: center;" class="item text-6xl logo-font font-logo text-carbon-950 dark:text-white">CHORUS</h2>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="px-chorus-lg">
|
||
<div class="max-w-4xl mx-auto py-chorus-xl">
|
||
<!-- Logo System -->
|
||
<section id="logo" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Logo System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Primary Logo: "The Möbius Ring"</h3>
|
||
|
||
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Visual Description</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">The CHORUS logo is a 3D Möebius 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.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Core Elements</h3>
|
||
<ol class="space-y-chorus-sm">
|
||
<li><strong>3D Mobius Ring:</strong> The primary visual element featuring elegant metallic rendering with sophisticated lighting and materials, representing infinite collaboration and seamless process flow.</li>
|
||
<li><strong>2D Minimalist Icon:</strong> An ultra-clean, geometric abstraction of the Mobius ring for UI applications and small-scale use.</li>
|
||
<li><strong>Clean Wordmark:</strong> "CHORUS" in refined typography with generous spacing, accompanied by "services" in subtle, lighter weight for hierarchy.</li>
|
||
<li><strong>Subtle Gradient System:</strong> Gentle color transitions derived from the ring's metallic surface for UI depth without complexity.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Logo Configurations</h3>
|
||
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-300 shadow-lg p-chorus-lg dark:border-nickel-900 dark:bg-mulberry-800 bg-white">
|
||
<h4 class="font-medium mb-chorus-md light:text-carbon-950 dark:text-white">Horizontal 2D Layout</h4>
|
||
|
||
<div class="flex mx-auto items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-mulberry-900 bg-mulberry-200 dark:text-white">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mx-auto items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-sand-900 bg-sand-200 dark:text-white">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mx-auto items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-eucalyptus-900 bg-eucalyptus-200 dark:text-white">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex mx-auto items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-ocean-900 bg-ocean-200 dark:text-white">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="border border-nickel-300 shadow-lg p-chorus-lg dark:border-nickel-900 dark:bg-mulberry-800 bg-white">
|
||
<h4 class="font-medium mb-chorus-md light:text-carbon-950 dark:text-white">Stacked 2D Layout / Icon</h4>
|
||
<div class="items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-mulberry-900 bg-mulberry-200 dark:text-white">
|
||
<canvas class="mx-auto chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo" style="text-align: center;">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-sand-900 bg-sand-200 dark:text-white">
|
||
<canvas class="mx-auto chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo" style="text-align: center;">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-eucalyptus-900 bg-eucalyptus-200 dark:text-white">
|
||
<canvas class="mx-auto chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo" style="text-align: center;">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<div class="items-center gap-chorus-sm px-chorus-md py-chorus-md dark:bg-ocean-900 bg-ocean-200 dark:text-white">
|
||
<canvas class="mx-auto chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo" style="text-align: center;">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="usage" class="mb-chorus-xxl">
|
||
<div class="space-y-chorus-lg">
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Logo Usage Guidelines</h3>
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li>Always maintain clear space around the logo equal to the height of the "C" in "CHORUS".</li>
|
||
<li>Do not alter the proportions or colors of the logo.</li>
|
||
<li>Use the 3D version for high-impact applications; use the 2D version for smaller formats.</li>
|
||
<li>Ensure sufficient contrast with background colors for legibility.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Download our Logo Package</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-purple-300">The full logo package including vector files, PNGs, Blender file, Three.js Implementation, and full motion and usage guidelines:</p>
|
||
<p class="py-2"><a href="logos/chorus-logo-package-web.zip" class="inline-block bg-sand-700 text-white px-4 py-2 rounded hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">Download Logo Package (Web)</a></p>
|
||
<p class="py-2"><a href="logos/chorus-logo-package-print.zip" class="inline-block bg-sand-700 text-white px-4 py-2 rounded hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">Download Logo Package (Print)</a></p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Motion System -->
|
||
<section id="motion" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Motion Design System</h2>
|
||
|
||
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Motion Philosophy</h3>
|
||
<p>The CHORUS motion system embodies the continuous flow of the Möbius ring, creating <strong>sophisticated orchestration</strong> through purposeful, elegant animations. Every movement serves a functional purpose while maintaining the ultra-minimalist aesthetic.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Seamless Flow</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Like the Möbius ring, animations flow naturally without jarring interruptions</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Purposeful Motion</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Every animation guides attention and enhances understanding</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Premium Restraint</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Sophisticated subtlety over flashy effects</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Animation Principles</h3>
|
||
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li><strong>Fluidity:</strong> Animations should feel like a natural extension of the user interface, enhancing usability without distraction.</li>
|
||
<li><strong>Consistency:</strong> Use a unified set of easing functions and durations to create a cohesive experience across all interactions.</li>
|
||
<li><strong>Accessibility:</strong> Provide reduced motion alternatives for users with motion sensitivity.</li>
|
||
<li><strong>Performance:</strong> Optimize animations for smooth performance on all devices, avoiding excessive resource usage.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Insert after the Motion Philosophy section -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Motion Design Guidelines</h3>
|
||
<p class="mb-chorus-lg">Motion in CHORUS's visual language is not decoration; it is a tool for clarity, hierarchy, and emotional resonance. It should reinforce meaning, never distract. All animations must feel purposeful, precise, and aligned with the brand's tone: confident, intelligent, and fluid.</p>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h4 class="font-medium mb-chorus-sm">1. Principles of Motion</h4>
|
||
<div class="space-y-chorus-md">
|
||
<div>
|
||
<h5 class="font-medium text-sm mb-2">Purposeful, not ornamental</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Every animation must serve a communicative role: guiding attention, reinforcing hierarchy, providing context, or reducing cognitive friction.</li>
|
||
<li>• Avoid gratuitous "flare" effects—motion is not fireworks, it's scaffolding.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 class="font-medium text-sm mb-2">Clarity through continuity</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Motion should explain where elements come from and where they go.</li>
|
||
<li>• Avoid abrupt "teleporting" of UI states unless conveying instantaneous change is itself the message.</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 class="font-medium text-sm mb-2">Sophisticated restraint</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Use easing curves and timing to convey elegance.</li>
|
||
<li>• CHORUS favors smooth acceleration/deceleration over linear motion.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-medium mb-chorus-sm">2. Timing & Easing</h4>
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h5 class="font-medium text-sm mb-2">Durations</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Micro-interactions: 150–250ms</li>
|
||
<li>• Element transitions: 300–450ms</li>
|
||
<li>• Page-level transitions: 600–900ms</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h5 class="font-medium text-sm mb-2">Easing curves</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Ease-out for entrance</li>
|
||
<li>• Ease-in for exit</li>
|
||
<li>• Ease-in-out for organic feel</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-medium mb-chorus-sm">3. Appear / Disappear Behaviors</h4>
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<div class="space-y-chorus-md">
|
||
<div>
|
||
<h5 class="font-medium text-sm mb-2">Appearing elements</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Fade + subtle transform (5–10px upward shift)</li>
|
||
<li>• Should feel like they "emerge into place"</li>
|
||
<li>• Avoid scaling unless reinforcing metaphor</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5 class="font-medium text-sm mb-2">Disappearing elements</h5>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
||
<li>• Reverse the entrance animation</li>
|
||
<li>• Use fade-out with directionality</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Technical Implementation</h3>
|
||
|
||
<div class="space-y-chorus-md">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">CSS Animation System</h4>
|
||
<pre class="text-xs bg-carbon-100 p-chorus-md overflow-x-auto dark:bg-carbon-800"><code>/* CHORUS Motion System CSS */
|
||
@keyframes chorus-fade-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(32px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes chorus-stagger-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-16px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* Core Animation Classes */
|
||
.chorus-animate {
|
||
opacity: 0;
|
||
transform: translateY(32px);
|
||
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.chorus-animate.in-view {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.chorus-parallax {
|
||
transform: translateZ(0);
|
||
transition: transform 0.1s linear;
|
||
}
|
||
|
||
/* Reduced motion support */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.chorus-animate {
|
||
transition: none;
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">JavaScript Scroll Observer</h4>
|
||
<pre class="text-xs bg-carbon-100 p-chorus-md overflow-x-auto dark:bg-carbon-800">
|
||
<code>// CHORUS Motion System JavaScript
|
||
class ChorusMotion {
|
||
constructor() {
|
||
this.initScrollObserver();
|
||
this.initParallax();
|
||
}
|
||
|
||
initScrollObserver() {
|
||
const options = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('in-view');
|
||
|
||
// Stagger child elements
|
||
const children = entry.target.querySelectorAll('.stagger-child');
|
||
children.forEach((child, index) => {
|
||
setTimeout(() => {
|
||
child.classList.add('in-view');
|
||
}, index * 100);
|
||
});
|
||
}
|
||
});
|
||
}, options);
|
||
|
||
// Observe all elements with chorus-animate class
|
||
document.querySelectorAll('.chorus-animate').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
}
|
||
|
||
initParallax() {
|
||
const parallaxElements = document.querySelectorAll('.chorus-parallax');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const scrolled = window.pageYOffset;
|
||
|
||
parallaxElements.forEach(element => {
|
||
const speed = element.dataset.speed || 0.5;
|
||
const transform = `translateY(${scrolled * speed}px)`;
|
||
element.style.transform = transform;
|
||
});
|
||
}, { passive: true });
|
||
}
|
||
}
|
||
|
||
// Initialize on DOM load
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
new ChorusMotion();
|
||
});</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Live Animation Demo</h3>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-lg">Scroll down to see this element animate into view:</p>
|
||
|
||
<div class="motion-demo-element bg-gradient-to-r from-ocean-100 to-eucalyptus-100 p-chorus-xl text-center dark:from-ocean-900 dark:to-eucalyptus-900 mb-chorus-lg">
|
||
<h4 class="font-logo text-2xl font-thin mb-chorus-sm">Scroll Reveal Animation</h4>
|
||
<p class="text-carbon-600 dark:text-purple-300">This element demonstrates the CHORUS motion system in action</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Easing & Timing</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3">
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Standard Ease</h4>
|
||
<p class="text-xs text-carbon-600 dark:text-purple-300 mb-2">cubic-bezier(0.25, 0.46, 0.45, 0.94)</p>
|
||
<p class="text-xs">Most scroll reveals and content animations</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Bounce Ease</h4>
|
||
<p class="text-xs text-carbon-600 dark:text-purple-300 mb-2">cubic-bezier(0.68, -0.55, 0.265, 1.55)</p>
|
||
<p class="text-xs">Button hovers and interactive feedback</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Sharp Ease</h4>
|
||
<p class="text-xs text-carbon-600 dark:text-purple-300 mb-2">cubic-bezier(0.4, 0, 0.2, 1)</p>
|
||
<p class="text-xs">Quick state changes and micro-interactions</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-chorus-lg border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Duration Guidelines</h4>
|
||
<ul class="space-y-1 text-sm">
|
||
<li><strong>Micro-interactions:</strong> 200ms (button hovers, focus states)</li>
|
||
<li><strong>Component reveals:</strong> 600-800ms (cards, sections entering)</li>
|
||
<li><strong>Page transitions:</strong> 400ms (navigation, state changes)</li>
|
||
<li><strong>Parallax scroll:</strong> 100ms linear (smooth continuous motion)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section id="colors" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Color Palette</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Brand Color Philosophy</h3>
|
||
<p>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.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Core Brand Colors</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="bg-carbon-950 border border-carbon-800 p-chorus-lg text-white">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="font-black text-white">Carbon Black</h4>
|
||
<code class="bg-carbon-800 px-2 py-1 text-sm text-gray-300">#000000</code>
|
||
<p class="text-sm text-gray-300">Usage: Primary backgrounds, high-contrast text, logo applications. Psychology: Authority, sophistication, premium quality.</p>
|
||
</div>
|
||
<!-- Carbon Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-carbon-950 text-carbon-300 dark:text-carbon-300">bg-carbon-950</div>
|
||
<div class="p-2 bg-carbon-900 text-carbon-200 dark:text-carbon-200">bg-carbon-900</div>
|
||
<div class="p-2 bg-carbon-800 text-carbon-100 dark:text-carbon-100">bg-carbon-800</div>
|
||
<div class="p-2 bg-carbon-700 text-carbon-100 dark:text-white">bg-carbon-700</div>
|
||
<div class="p-2 bg-carbon-600 text-carbon-900 dark:text-carbon-800">bg-carbon-600</div>
|
||
<div class="p-2 bg-carbon-500 text-carbon-800 dark:text-carbon-900">bg-carbon-500</div>
|
||
<div class="p-2 bg-carbon-400 text-carbon-700 dark:text-carbon-800">bg-carbon-400</div>
|
||
<div class="p-2 bg-carbon-300 text-carbon-600 dark:text-carbon-700">bg-carbon-300</div>
|
||
<div class="p-2 bg-carbon-200 text-carbon-500 dark:text-carbon-600">bg-carbon-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-mulberry-950 border border-mulberry-800 p-chorus-lg text-white">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="font-black text-white">Dark Mulberry</h4>
|
||
<code class="bg-mulberry-800 px-2 py-1 text-sm text-purple-200">#0b0213</code>
|
||
<p class="text-sm text-purple-200">Usage: Hero backgrounds, dark accents, secondary elements. Psychology: Richness, mystery, luxury, power, and depth.</p>
|
||
</div>
|
||
<!-- Mulberry Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-mulberry-950 text-mulberry-300 dark:text-mulberry-300">bg-mulberry-950</div>
|
||
<div class="p-2 bg-mulberry-900 text-mulberry-200 dark:text-mulberry-200">bg-mulberry-900</div>
|
||
<div class="p-2 bg-mulberry-800 text-mulberry-100 dark:text-mulberry-100">bg-mulberry-800</div>
|
||
<div class="p-2 bg-mulberry-700 text-mulberry-100 dark:text-white">bg-mulberry-700</div>
|
||
<div class="p-2 bg-mulberry-600 text-mulberry-900 dark:text-mulberry-900">bg-mulberry-600</div>
|
||
<div class="p-2 bg-mulberry-500 text-mulberry-800 dark:text-mulberry-900">bg-mulberry-500</div>
|
||
<div class="p-2 bg-mulberry-400 text-mulberry-700 dark:text-mulberry-800">bg-mulberry-400</div>
|
||
<div class="p-2 bg-mulberry-300 text-mulberry-600 dark:text-mulberry-700">bg-mulberry-300</div>
|
||
<div class="p-2 bg-mulberry-200 text-mulberry-500 dark:text-mulberry-600">bg-mulberry-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-walnut-950 border border-walnut-800 p-chorus-lg text-white">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="font-black text-white">Walnut Brown</h4>
|
||
<code class="bg-walnut-800 px-2 py-1 text-sm text-paper-200">#403730</code>
|
||
<p class="text-sm text-paper-200">Usage: Warm accents, secondary elements, natural touches. Psychology: Reliability, craftsmanship, approachable intelligence.</p>
|
||
</div>
|
||
<!-- Walnut Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-walnut-950 text-walnut-300 dark:text-walnut-300">bg-walnut-950</div>
|
||
<div class="p-2 bg-walnut-900 text-walnut-200 dark:text-walnut-200">bg-walnut-900</div>
|
||
<div class="p-2 bg-walnut-800 text-walnut-100 dark:text-walnut-100">bg-walnut-800</div>
|
||
<div class="p-2 bg-walnut-700 text-walnut-100 dark:text-white">bg-walnut-700</div>
|
||
<div class="p-2 bg-walnut-600 text-walnut-900 dark:text-walnut-900">bg-walnut-600</div>
|
||
<div class="p-2 bg-walnut-500 text-walnut-800 dark:text-walnut-800">bg-walnut-500</div>
|
||
<div class="p-2 bg-walnut-400 text-walnut-700 dark:text-walnut-800">bg-walnut-400</div>
|
||
<div class="p-2 bg-walnut-300 text-walnut-600 dark:text-walnut-700">bg-walnut-300</div>
|
||
<div class="p-2 bg-walnut-200 text-walnut-500 dark:text-walnut-600">bg-walnut-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-nickel-400 border border-nickel-300 p-chorus-lg text-carbon-950">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="font-black text-carbon-950">Brushed Nickel</h4>
|
||
<code class="bg-nickel-300 px-2 py-1 text-sm text-paper-700">#c1bfb1</code>
|
||
<p class="text-sm text-carbon-700">Usage: UI elements, borders, technical precision. Psychology: Modern sophistication, precision, technology.</p>
|
||
</div>
|
||
<!-- Nickel Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-nickel-950 text-nickel-300 dark:text-nickel-300">bg-nickel-950</div>
|
||
<div class="p-2 bg-nickel-900 text-nickel-200 dark:text-nickel-200">bg-nickel-900</div>
|
||
<div class="p-2 bg-nickel-800 text-nickel-100 dark:text-nickel-100">bg-nickel-800</div>
|
||
<div class="p-2 bg-nickel-700 text-nickel-100 dark:text-white">bg-nickel-700</div>
|
||
<div class="p-2 bg-nickel-600 text-nickel-900 dark:text-nickel-900">bg-nickel-600</div>
|
||
<div class="p-2 bg-nickel-500 text-nickel-800 dark:text-nickel-900">bg-nickel-500</div>
|
||
<div class="p-2 bg-nickel-400 text-nickel-700 dark:text-nickel-800">bg-nickel-400</div>
|
||
<div class="p-2 bg-nickel-300 text-nickel-600 dark:text-nickel-700">bg-nickel-300</div>
|
||
<div class="p-2 bg-nickel-200 text-nickel-500 dark:text-nickel-600">bg-nickel-200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">System Colors</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900 bg-ocean-700">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm ">
|
||
<div>
|
||
<h4 class="font-medium">Ocean</h4>
|
||
<code class="text-sm">#5a6c80</code>
|
||
<p class="text-sm dark:text-carbon-900 text-white">Usage: Primary actions, interactive elements, system feedback. Psychology: Trust, reliability, technological precision.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Ocean Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-ocean-950 text-ocean-300 dark:text-ocean-300">bg-ocean-950</div>
|
||
<div class="p-2 bg-ocean-900 text-ocean-200 dark:text-ocean-200">bg-ocean-900</div>
|
||
<div class="p-2 bg-ocean-800 text-ocean-100 dark:text-ocean-100">bg-ocean-800</div>
|
||
<div class="p-2 bg-ocean-700 text-ocean-100 dark:text-white">bg-ocean-700</div>
|
||
<div class="p-2 bg-ocean-600 text-ocean-900 dark:text-ocean-900">bg-ocean-600</div>
|
||
<div class="p-2 bg-ocean-500 text-ocean-800 dark:text-ocean-900">bg-ocean-500</div>
|
||
<div class="p-2 bg-ocean-400 text-ocean-700 dark:text-ocean-800">bg-ocean-400</div>
|
||
<div class="p-2 bg-ocean-300 text-ocean-600 dark:text-ocean-700">bg-ocean-300</div>
|
||
<div class="p-2 bg-ocean-200 text-ocean-500 dark:text-ocean-600">bg-ocean-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900 bg-eucalyptus-700">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="font-black">Eucalyptus</h4>
|
||
<code class="text-sm">#515d54</code>
|
||
<p class="text-sm dark:text-carbon-900 text-white">Usage: Success states, positive feedback, growth indicators. Applications: Success messages, positive data visualization.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- Eucalyptus Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-eucalyptus-950 text-eucalyptus-300 dark:text-eucalyptus-300">bg-eucalyptus-950</div>
|
||
<div class="p-2 bg-eucalyptus-900 text-eucalyptus-200 dark:text-eucalyptus-200">bg-eucalyptus-900</div>
|
||
<div class="p-2 bg-eucalyptus-800 text-eucalyptus-100 dark:text-eucalyptus-100">bg-eucalyptus-800</div>
|
||
<div class="p-2 bg-eucalyptus-700 text-eucalyptus-100 dark:text-white">bg-eucalyptus-700</div>
|
||
<div class="p-2 bg-eucalyptus-600 text-eucalyptus-900 dark:text-eucalyptus-900">bg-eucalyptus-600</div>
|
||
<div class="p-2 bg-eucalyptus-500 text-eucalyptus-800 dark:text-eucalyptus-900">bg-eucalyptus-500</div>
|
||
<div class="p-2 bg-eucalyptus-400 text-eucalyptus-700 dark:text-eucalyptus-800">bg-eucalyptus-400</div>
|
||
<div class="p-2 bg-eucalyptus-300 text-eucalyptus-600 dark:text-eucalyptus-700">bg-eucalyptus-300</div>
|
||
<div class="p-2 bg-eucalyptus-200 text-eucalyptus-500 dark:text-eucalyptus-600">bg-eucalyptus-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900 bg-sand-700">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="font-black">Sand</h4>
|
||
<code class="text-sm">#8e7b5e</code>
|
||
<p class="text-sm dark:text-carbon-900 text-white">Usage: Warning states, attention indicators, energy elements. Applications: Warnings, attention callouts, active processes.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- Sand Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-sand-950 text-sand-300 dark:text-sand-300">bg-sand-950</div>
|
||
<div class="p-2 bg-sand-900 text-sand-200 dark:text-sand-200">bg-sand-900</div>
|
||
<div class="p-2 bg-sand-800 text-sand-100 dark:text-sand-100">bg-sand-800</div>
|
||
<div class="p-2 bg-sand-700 text-sand-100 dark:text-white">bg-sand-700</div>
|
||
<div class="p-2 bg-sand-600 text-sand-900 dark:text-sand-900">bg-sand-600</div>
|
||
<div class="p-2 bg-sand-500 text-sand-800 dark:text-sand-900">bg-sand-500</div>
|
||
<div class="p-2 bg-sand-400 text-sand-700 dark:text-sand-800">bg-sand-400</div>
|
||
<div class="p-2 bg-sand-300 text-sand-600 dark:text-sand-700">bg-sand-300</div>
|
||
<div class="p-2 bg-sand-200 text-sand-500 dark:text-sand-600">bg-sand-200</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900 bg-coral-700">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="font-black">Coral</h4>
|
||
<code class="text-sm">#593735</code>
|
||
<p class="text-sm text-white">Usage: Error states, critical alerts, problem indicators. Applications: Error messages, critical warnings, urgent notifications.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- Coral Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-xs">
|
||
<div class="p-2 bg-coral-950 text-coral-300 dark:text-coral-300">bg-coral-950</div>
|
||
<div class="p-2 bg-coral-900 text-coral-200 dark:text-coral-200">bg-coral-900</div>
|
||
<div class="p-2 bg-coral-800 text-coral-100 dark:text-coral-100">bg-coral-800</div>
|
||
<div class="p-2 bg-coral-700 text-coral-100 dark:text-white">bg-coral-700</div>
|
||
<div class="p-2 bg-coral-600 text-coral-900 dark:text-coral-900">bg-coral-600</div>
|
||
<div class="p-2 bg-coral-500 text-coral-800 dark:text-coral-900">bg-coral-500</div>
|
||
<div class="p-2 bg-coral-400 text-coral-700 dark:text-coral-800">bg-coral-400</div>
|
||
<div class="p-2 bg-coral-300 text-coral-600 dark:text-coral-700">bg-coral-300</div>
|
||
<div class="p-2 bg-coral-200 text-coral-500 dark:text-coral-600">bg-coral-200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Theme Implementation</h3>
|
||
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border p-chorus-lg border-nickel-900 bg-mulberry-800">
|
||
<h4 class="font-black mb-chorus-sm text-white">Dark Mode (Default/Preferred)</h4>
|
||
<p class="text-sm text-white dark:text-purple-300 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
|
||
<ul class="text-sm space-y-1 text-mulberry-100">
|
||
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray → Border Gray</li>
|
||
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents → Brand Colors</li>
|
||
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
|
||
<li><strong>Contrast:</strong> All combinations tested for WCAG 2.1 AA compliance</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg border-nickel-900 bg-white">
|
||
<h4 class="font-black mb-chorus-sm text-carbon-900">Light Mode (Alternative)</h4>
|
||
<p class="text-sm text-carbon-600 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
|
||
<ul class="text-sm space-y-1 text-carbon-800">
|
||
<li><strong>Background Hierarchy:</strong> Pure White → Natural Paper → Light Gray → Border Light</li>
|
||
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray → Orchestration Blue</li>
|
||
<li><strong>Usage:</strong> Available as alternative but dark mode is strongly preferred</li>
|
||
<li><strong>Contrast:</strong> Optimized for readability on warm, natural backgrounds</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Iconography System -->
|
||
<section id="iconography" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Iconography System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Icon Philosophy</h3>
|
||
<p>The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> 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.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Clarity & Recognition</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Icons communicate instantly without language barriers</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Theme Adaptive</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Black and white variants ensure perfect contrast in all modes</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Consistent Scale</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Standardized sizing maintains visual harmony</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Icon Categories</h3>
|
||
<p class="mb-chorus-md">The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.</p>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- Interface Icons -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Interface & Navigation</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Search</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Settings</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Filter</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Check</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Link</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Lock" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Lock" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Security</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Favorite</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Empty.png" alt="Delete" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Empty.png" alt="Delete" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Delete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- File & Data Icons -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">File & Data Management</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Document, folder, and cloud storage representations</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Document</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Folder</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud.png" alt="Cloud" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud.png" alt="Cloud" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Cloud</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png" alt="Download" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png" alt="Download" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Download</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Upload.png" alt="Upload" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Upload.png" alt="Upload" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Upload</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Archive</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Code</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Search.png" alt="Search Files" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Search.png" alt="Search Files" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Search</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Communication Icons -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Communication & Notifications</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Message, alert, and social interaction indicators</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Mail</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Chat</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notifications" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notifications" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Alerts</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Call</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_Android.png" alt="Share" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_Android.png" alt="Share" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Share</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Send</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell_Notification.png" alt="Notification" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell_Notification.png" alt="Notification" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Notice</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Dots.png" alt="Chat Dots" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Dots.png" alt="Chat Dots" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Typing</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Arrow & Navigation Icons -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Navigation & Direction</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Back</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Forward</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Up</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Down</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Chevron_Down.png" alt="Chevron Down" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Chevron_Down.png" alt="Chevron Down" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Expand</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Chevron_Right.png" alt="Chevron Right" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Chevron_Right.png" alt="Chevron Right" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Next</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrows_Reload_01.png" alt="Reload" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrows_Reload_01.png" alt="Reload" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Refresh</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Expand.png" alt="Expand" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Expand.png" alt="Expand" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-xs">Fullscreen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Icon Sizing & Usage</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Standard Sizes</h4>
|
||
<div class="space-y-chorus-sm">
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Small Icon" class="w-4 h-4 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Small Icon" class="w-4 h-4 hidden dark:block">
|
||
<span class="text-sm"><strong>16px (w-4 h-4):</strong> Inline text, small buttons</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Medium Icon" class="w-5 h-5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Medium Icon" class="w-5 h-5 hidden dark:block">
|
||
<span class="text-sm"><strong>20px (w-5 h-5):</strong> Standard UI elements</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Large Icon" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Large Icon" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm"><strong>24px (w-6 h-6):</strong> Primary actions, headers</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="XL Icon" class="w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="XL Icon" class="w-8 h-8 hidden dark:block">
|
||
<span class="text-sm"><strong>32px (w-8 h-8):</strong> Feature highlights, cards</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Usage Guidelines</h4>
|
||
<ul class="text-sm space-y-2 text-carbon-600 dark:text-purple-300">
|
||
<li><strong>Consistency:</strong> Use same size for similar functions</li>
|
||
<li><strong>Alignment:</strong> Center icons within their containers</li>
|
||
<li><strong>Spacing:</strong> Minimum 8px padding around clickable icons</li>
|
||
<li><strong>Context:</strong> Choose appropriate semantic meaning</li>
|
||
<li><strong>Contrast:</strong> Black icons for light themes, white for dark</li>
|
||
<li><strong>Accessibility:</strong> Always include alt text descriptions</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Implementation Examples</h3>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- HTML Implementation -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">HTML Implementation</h4>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-lg text-carbon-950 dark:text-white font-mono text-sm overflow-x-auto">
|
||
<pre><code><!-- Theme-adaptive icon with dark/light variants -->
|
||
<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 with icon -->
|
||
<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></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SVG Implementation -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">SVG Implementation (Preferred)</h4>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-lg text-carbon-950 dark:text-white font-mono text-sm overflow-x-auto">
|
||
<pre><code><!-- SVG with CSS theme adaptation -->
|
||
<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>
|
||
|
||
<!-- Inline SVG with CSS fill -->
|
||
<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></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tailwind Utility Classes -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Tailwind Utility Classes</h4>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-lg text-carbon-950 dark:text-white font-mono text-sm overflow-x-auto">
|
||
<pre><code>/* 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-purple-300; }</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Icon Library Access</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-purple-300">The complete Coolicons v4.1 library is available in the brand assets directory with both PNG and SVG formats.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Accessibility & Vision Inclusivity -->
|
||
<section id="accessibility" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Accessibility & Vision Inclusivity</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Inclusive Design Philosophy</h3>
|
||
<p>The CHORUS brand system extends beyond standard accessibility to provide <strong>vision-inclusive design</strong> that supports users with different forms of color blindness while maintaining our sophisticated metallic aesthetic. Our approach prioritizes contrast, brightness, and texture cues over exact hue fidelity.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Universal Access</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">8%+ of male users with color blindness experience equal legibility and brand resonance</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Brand Integrity</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Metallic identity remains intact and aesthetically pleasing across all vision modes</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Redundant Cues</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Critical distinctions use shapes, icons, and labels - not just color</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Supported Vision Conditions</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Common Color Blindness</h4>
|
||
<ul class="text-sm space-y-2 text-carbon-600 dark:text-purple-300">
|
||
<li><strong>Protanopia:</strong> Red-blind (1% of males) - Custom red/green differentiation</li>
|
||
<li><strong>Deuteranopia:</strong> Green-blind (1% of males) - Enhanced contrast patterns</li>
|
||
<li><strong>Tritanopia:</strong> Blue-blind (0.1% of population) - Yellow/blue alternatives</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Complete Color Blindness</h4>
|
||
<ul class="text-sm space-y-2 text-carbon-600 dark:text-purple-300">
|
||
<li><strong>Achromatopsia:</strong> Complete color blindness - High-contrast monochrome</li>
|
||
<li><strong>Enhanced Patterns:</strong> Texture and shape differentiation</li>
|
||
<li><strong>Brightness Coding:</strong> Luminance-based visual hierarchy</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Accessible Color Palettes</h3>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- Protanopia Palette -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Protanopia (Red-Blind) Palette</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Enhanced blue/yellow contrast with metallic neutrals</p>
|
||
<div class="grid grid-cols-5 gap-2 mb-chorus-md">
|
||
<div class="h-16 bg-blue-800 flex items-end p-2">
|
||
<span class="text-xs text-white">Primary</span>
|
||
</div>
|
||
<div class="h-16 bg-yellow-600 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Accent</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-700 flex items-end p-2">
|
||
<span class="text-xs text-white">Neutral</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-300 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Light</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-900 flex items-end p-2">
|
||
<span class="text-xs text-white">Dark</span>
|
||
</div>
|
||
</div>
|
||
<code class="text-xs bg-carbon-100 px-2 py-1 dark:bg-carbon-800">data-theme="protanopia"</code>
|
||
</div>
|
||
|
||
<!-- Deuteranopia Palette -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Deuteranopia (Green-Blind) Palette</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Blue/purple dominance with high-contrast patterns</p>
|
||
<div class="grid grid-cols-5 gap-2 mb-chorus-md">
|
||
<div class="h-16 bg-purple-800 flex items-end p-2">
|
||
<span class="text-xs text-white">Primary</span>
|
||
</div>
|
||
<div class="h-16 bg-blue-500 flex items-end p-2">
|
||
<span class="text-xs text-white">Accent</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-600 flex items-end p-2">
|
||
<span class="text-xs text-white">Neutral</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-200 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Light</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-900 flex items-end p-2">
|
||
<span class="text-xs text-white">Dark</span>
|
||
</div>
|
||
</div>
|
||
<code class="text-xs bg-carbon-100 px-2 py-1 dark:bg-carbon-800">data-theme="deuteranopia"</code>
|
||
</div>
|
||
|
||
<!-- Tritanopia Palette -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Tritanopia (Blue-Blind) Palette</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">Red/green clarity with warm metallic tones</p>
|
||
<div class="grid grid-cols-5 gap-2 mb-chorus-md">
|
||
<div class="h-16 bg-red-800 flex items-end p-2">
|
||
<span class="text-xs text-white">Primary</span>
|
||
</div>
|
||
<div class="h-16 bg-green-600 flex items-end p-2">
|
||
<span class="text-xs text-white">Accent</span>
|
||
</div>
|
||
<div class="h-16 bg-amber-700 flex items-end p-2">
|
||
<span class="text-xs text-white">Warm</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-300 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Light</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-900 flex items-end p-2">
|
||
<span class="text-xs text-white">Dark</span>
|
||
</div>
|
||
</div>
|
||
<code class="text-xs bg-carbon-100 px-2 py-1 dark:bg-carbon-800">data-theme="tritanopia"</code>
|
||
</div>
|
||
|
||
<!-- Achromatopsia Palette -->
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-md">Achromatopsia (Complete Color Blindness) Palette</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300 mb-chorus-md">High-contrast monochrome with texture patterns</p>
|
||
<div class="grid grid-cols-5 gap-2 mb-chorus-md">
|
||
<div class="h-16 bg-black flex items-end p-2">
|
||
<span class="text-xs text-white">Darkest</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-700 flex items-end p-2">
|
||
<span class="text-xs text-white">Dark</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-500 flex items-end p-2">
|
||
<span class="text-xs text-white">Medium</span>
|
||
</div>
|
||
<div class="h-16 bg-gray-300 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Light</span>
|
||
</div>
|
||
<div class="h-16 bg-white border border-gray-300 flex items-end p-2">
|
||
<span class="text-xs text-carbon-950">Lightest</span>
|
||
</div>
|
||
</div>
|
||
<code class="text-xs bg-carbon-100 px-2 py-1 dark:bg-carbon-800">data-theme="achromatopsia"</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Logo Accessibility Implementation</h3>
|
||
<p class="mb-chorus-md">The Three.js Möbius ring logo automatically adapts its metallic materials for different vision conditions while preserving the sophisticated aesthetic.</p>
|
||
|
||
<div class="bg-carbon-100 p-chorus-md text-sm dark:bg-carbon-800">
|
||
<pre><code>/* Logo Material Accessibility CSS */
|
||
[data-theme="protanopia"] {
|
||
--color-ring-primary: #1e40af; /* Blue-800 for logo materials */
|
||
}
|
||
|
||
[data-theme="deuteranopia"] {
|
||
--color-ring-primary: #6b21a8; /* Purple-800 for logo materials */
|
||
}
|
||
|
||
[data-theme="tritanopia"] {
|
||
--color-ring-primary: #991b1b; /* Red-800 for logo materials */
|
||
}
|
||
|
||
[data-theme="achromatopsia"] {
|
||
--color-ring-primary: #374151; /* Gray-700 for logo materials */
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Implementation Guide</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Theme Switching</h4>
|
||
<div class="bg-carbon-100 p-chorus-md text-sm dark:bg-carbon-800">
|
||
<code>// Set accessibility theme
|
||
document.documentElement.setAttribute('data-theme', 'protanopia');
|
||
|
||
// Theme preference storage
|
||
localStorage.setItem('chorus-accessibility-theme', 'deuteranopia');
|
||
|
||
// Logo material updates
|
||
if (window.updateAllLogoMaterials) {
|
||
window.updateAllLogoMaterials(isDark);
|
||
}</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Logo Integration</h4>
|
||
<div class="bg-carbon-100 p-chorus-md text-sm dark:bg-carbon-800">
|
||
<code>// Logo materials automatically adapt
|
||
<canvas class="chorus-logo"></canvas>
|
||
|
||
// JavaScript theme switching
|
||
setAccessibilityTheme('protanopia');</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Testing & Validation</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3">
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Browser Testing</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Use Chrome DevTools "Emulate vision deficiencies" to validate all palettes</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">Contrast Ratios</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Maintain minimum 4.5:1 contrast ratios for WCAG AA compliance</p>
|
||
</div>
|
||
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="font-medium mb-chorus-sm">User Testing</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">Validate with actual users who have different vision conditions</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-mulberry-950 border border-mulberry-800 p-chorus-lg text-white">
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Visual Aid Interface</h3>
|
||
<p class="text-sm text-purple-200 mb-chorus-md">Accessibility themes are accessible through the "Visual Aid" button in the bottom toolbar alongside the theme toggle. This keeps the main interface clean while providing discoverable accessibility options.</p>
|
||
<div class="flex items-center gap-chorus-sm p-chorus-sm bg-mulberry-900 border border-mulberry-700">
|
||
<svg class="h-5 w-5 text-purple-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
<span class="text-sm font-medium text-purple-200">Click "Visual Aid" in the bottom toolbar to access vision-inclusive settings</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Include the web design section from the playground -->
|
||
<section id="web-design" class="mb-chorus-xxl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Web Design System</h2>
|
||
<p class="text-carbon-600 dark:text-purple-300 mb-chorus-xl">Interactive demonstration of the CHORUS web design system, including typography, components, forms, and styling patterns.</p>
|
||
|
||
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
|
||
<p class="text-sm text-carbon-500 dark:text-gray-400">The web design components and interactive examples have been preserved in the original playground file for full testing and evaluation.</p>
|
||
<div class="mt-chorus-md">
|
||
<a href="tailwind_theme_evaluation_playground.html" class="bg-mulberry-950 px-chorus-lg py-chorus-sm text-white hover:opacity-90 dark:bg-white dark:text-carbon-950">View Interactive Design System</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography Section -->
|
||
<section id="typography" class="mb-chorus-xl">
|
||
<h2 class="text-3xl font-bold mb-chorus-lg">Typography</h2>
|
||
<p class="text-carbon-600 dark:text-purple-300 mb-chorus-xl">The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.</p>
|
||
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<!-- Headings -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Headings</h3>
|
||
<div class="space-y-chorus-sm">
|
||
<h1 class="text-4xl font-bold">Heading 1</h1>
|
||
<h2 class="text-3xl font-semibold">Heading 2</h2>
|
||
<h3 class="text-2xl font-medium">Heading 3</h3>
|
||
<h4 class="text-xl font-normal">Heading 4</h4>
|
||
<h5 class="text-lg font-light">Heading 5</h5>
|
||
<h6 class="text-base font-thin">Heading 6</h6>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body Text -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Body Text</h3>
|
||
<p class="text-base text-carbon-600 dark:text-purple-100 mb-chorus-sm">This is the standard body text used throughout the CHORUS design system. It is designed for readability and accessibility.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-purple-300">This is smaller body text for secondary information.</p>
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-chorus-md">Links</h3>
|
||
|
||
<!-- Full Width Hero with Three.js Scene -->
|
||
<p class="text-base text-carbon-600 dark:text-purple-300 mb-chorus-sm">Links are styled to be clear and accessible:</p>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><a href="#" class="text-mulberry-950 hover:text-mulberry-700 dark:text-paper-200 dark:hover:text-paper-100">Primary Link</a></li>
|
||
<li><a href="#" class="text-carbon-600 hover:text-carbon-800 dark:text-purple-300 dark:hover:text-purple-200">Secondary Link</a></li>
|
||
<li><a href="#" class="text-gray-500 hover:text-gray-700 dark:text-purple-400 dark:hover:text-purple-300">Muted Link</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<section class="bg-gradient-to-b dark:from-eucalyptus-900 from-eucalyptus-400 dark:to-eucalyptus-700 to-eucalyptus-100">
|
||
<div class="mx-auto min-h-[60vh] overflow-hidden">
|
||
|
||
|
||
|
||
<!-- Three.js Canvas Container -->
|
||
<div id="hero-scene-container">
|
||
|
||
<canvas id="hero-canvas" class="w-full h-full"></canvas>
|
||
|
||
</div>
|
||
|
||
<div class="relative z-10 flex items-center justify-center h-full min-h-[60vh] px-chorus-lg">
|
||
<div class="text-center text-white max-w-4xl">
|
||
<h2 class="font-logo text-5xl font-thin tracking-wide mb-chorus-lg">Enterprise AI Orchestration</h2>
|
||
<p class="text-xl text-gray-300 mb-chorus-xl max-w-2xl mx-auto leading-relaxed">Sophisticated distributed reasoning without hallucinations. Built for global teams building the future of intelligent software.</p>
|
||
<div class="flex flex-col sm:flex-row gap-chorus-md justify-center">
|
||
<button class="bg-paper-950 text-carbon-950 px-chorus-xl py-chorus-md font-medium hover:bg-paper-900 transition-colors">
|
||
Explore Platform
|
||
</button>
|
||
<button class="border border-paper-300 text-paper-100 px-chorus-xl py-chorus-md font-medium hover:bg-white/10 transition-colors">
|
||
View Documentation
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto py-14">
|
||
<h1 class="mx-auto text-6xl font-logo text-white font-thin" style="text-align: center;">Call to Action</h1>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- CHORUS Footer -->
|
||
<footer id="footer" class="border-t border-nickel-200 bg-ocean-100 py-chorus-xxl dark:border-carbon-800 dark:bg-carbon-950">
|
||
<div class="mx-auto max-w-7xl px-chorus-lg">
|
||
<div class="grid gap-chorus-xl md:grid-cols-3">
|
||
<div>
|
||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-medium font-logo font-medium">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-carbon-600 dark:text-paper-400">Enterprise-grade distributed AI orchestration without hallucinations.</p>
|
||
</div>
|
||
<nav class="text-sm">
|
||
<div class="mb-chorus-md font-medium">Navigation</div>
|
||
<ul class="space-y-1">
|
||
<li><a href="#typography" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Typography</a></li>
|
||
<li><a href="#forms" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Forms</a></li>
|
||
<li><a href="#tables" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Tables</a></li>
|
||
<li><a href="#media" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Media</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="text-sm">
|
||
<div class="mb-chorus-md font-medium">Stay Connected</div>
|
||
<form class="flex gap-chorus-sm">
|
||
<input type="email" placeholder="your@email.com" class="w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950" />
|
||
<button class="bg-mulberry-950 px-chorus-md py-chorus-sm text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Join</button>
|
||
</form>
|
||
<p class="mt-chorus-sm text-xs text-carbon-500 dark:text-purple-300">Updates on CHORUS Services and AI orchestration.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- CHORUS Bottom Dock -->
|
||
<div class="fixed inset-x-0 bottom-0 z-40 hidden items-center justify-between gap-chorus-md border-t border-nickel-100 bg-white/90 p-chorus-md backdrop-blur md:flex dark:border-mulberry-800 dark:bg-mulberry-950/90">
|
||
<div class="flex items-center gap-chorus-sm">
|
||
<!-- Theme Toggle -->
|
||
<button id="toggleTheme" class="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-paper-300 dark:hover:text-white border border-nickel-100 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||
<!-- Moon icon for light mode (click to go dark) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png" alt="Switch to Dark Mode" class="w-4 h-4 dark:hidden">
|
||
<!-- Sun icon for dark mode (click to go light) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png" alt="Switch to Light Mode" class="w-4 h-4 hidden dark:block">
|
||
<span class="text-sm">Toggle Theme</span>
|
||
</button>
|
||
|
||
<!-- Visual Aid Button -->
|
||
<button id="openVisualAid" class="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-paper-300 dark:hover:text-white border border-nickel-100 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
<span class="text-sm">Visual Aid</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-sm text-sm"><p class="text-center text-xs text-carbon-500 dark:text-gray-400">© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Visual Aid Modal Dialog -->
|
||
<div id="visualAidModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
|
||
<div class="relative bg-white dark:bg-mulberry-950 border border-nickel-100 dark:border-mulberry-800 max-w-lg w-full mx-4 p-chorus-lg shadow-xl">
|
||
<!-- Modal Header -->
|
||
<div class="flex items-center justify-between mb-chorus-md">
|
||
<h3 class="text-xl font-semibold text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
||
<button id="closeVisualAid" class="text-carbon-600 hover:text-carbon-950 dark:text-gray-400 dark:hover:text-white">
|
||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 6L6 18M6 6L18 18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Modal Content -->
|
||
<div class="space-y-chorus-md">
|
||
<p class="text-sm text-carbon-600 dark:text-purple-300">
|
||
Adjust the visual appearance for different color vision conditions. These settings affect the Möbius ring logo materials while preserving the overall design integrity.
|
||
</p>
|
||
|
||
<!-- Vision Condition Buttons -->
|
||
<div class="space-y-chorus-sm">
|
||
<h4 class="font-medium text-carbon-950 dark:text-white">Color Vision Support</h4>
|
||
<div class="grid grid-cols-1 gap-2">
|
||
<button data-accessibility-theme="standard" class="modal-vision-btn bg-white text-carbon-950 border border-gray-300 px-4 py-2 text-sm hover:bg-gray-50 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Standard Vision</div>
|
||
<div class="text-xs text-gray-600">Default metallic appearance</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="protanopia" class="modal-vision-btn bg-blue-800 text-white px-4 py-2 text-sm hover:bg-blue-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Protanopia (Red-blind)</div>
|
||
<div class="text-xs text-blue-200">Enhanced blue/yellow contrast</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="deuteranopia" class="modal-vision-btn bg-purple-800 text-white px-4 py-2 text-sm hover:bg-purple-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Deuteranopia (Green-blind)</div>
|
||
<div class="text-xs text-purple-200">Blue/purple dominance patterns</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="tritanopia" class="modal-vision-btn bg-red-800 text-white px-4 py-2 text-sm hover:bg-red-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Tritanopia (Blue-blind)</div>
|
||
<div class="text-xs text-red-200">Red/green clarity focus</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="achromatopsia" class="modal-vision-btn bg-gray-700 text-white px-4 py-2 text-sm hover:bg-gray-600 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Achromatopsia (Complete color blindness)</div>
|
||
<div class="text-xs text-gray-300">High-contrast monochrome</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information -->
|
||
<div class="text-xs text-carbon-500 dark:text-gray-400 p-chorus-sm bg-gray-50 dark:bg-mulberry-900 border-l-4 border-mulberry-600">
|
||
<p><strong>Note:</strong> These settings only affect logo materials. Your selection is automatically saved for future visits.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
<script src="logo.js" type="module"></script>
|
||
<script type="module">
|
||
|
||
|
||
|
||
// Function to update ring material based on theme
|
||
function updateRingMaterial(isDark) {
|
||
if (mobius) {
|
||
const targetMaterial = isDark ? darkMaterial : lightMaterial;
|
||
mobius.traverse((child) => {
|
||
if (child.isMesh) {
|
||
child.material = targetMaterial;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Theme toggle (defaults to dark mode)
|
||
const toggle = document.getElementById('toggleTheme');
|
||
toggle?.addEventListener('click', () => {
|
||
const root = document.documentElement;
|
||
const isDark = root.classList.toggle('dark');
|
||
root.setAttribute('data-theme', isDark ? 'dark' : 'light');
|
||
updateRingMaterial(isDark);
|
||
|
||
console.log('Theme toggled to:', isDark ? 'dark' : 'light');
|
||
console.log('updateAllLogoMaterials function available:', typeof window.updateAllLogoMaterials);
|
||
|
||
// Update all logo materials from the external module
|
||
if (window.updateAllLogoMaterials) {
|
||
console.log('Calling updateAllLogoMaterials with isDark:', isDark);
|
||
try {
|
||
window.updateAllLogoMaterials(isDark);
|
||
console.log('updateAllLogoMaterials completed successfully');
|
||
} catch (error) {
|
||
console.error('Error calling updateAllLogoMaterials:', error);
|
||
}
|
||
} else {
|
||
console.warn('updateAllLogoMaterials not available - logo.js may not be loaded yet');
|
||
}
|
||
});
|
||
|
||
// Motion System JavaScript - Documentation Only
|
||
// Implementation to be done separately
|
||
|
||
// Accessibility Theme Switching
|
||
function setAccessibilityTheme(themeName) {
|
||
console.log(`Setting accessibility theme: ${themeName}`);
|
||
|
||
// Remove any existing data-theme attribute
|
||
document.documentElement.removeAttribute('data-theme');
|
||
|
||
// Set new theme if not standard vision
|
||
if (themeName !== 'standard') {
|
||
document.documentElement.setAttribute('data-theme', themeName);
|
||
}
|
||
|
||
// Store preference
|
||
localStorage.setItem('chorus-accessibility-theme', themeName);
|
||
|
||
// Update logo materials if available
|
||
if (window.updateLogoAccessibilityTheme) {
|
||
try {
|
||
window.updateLogoAccessibilityTheme(themeName);
|
||
console.log('updateLogoAccessibilityTheme completed successfully');
|
||
} catch (error) {
|
||
console.error('Error calling updateLogoAccessibilityTheme:', error);
|
||
}
|
||
} else {
|
||
console.warn('updateLogoAccessibilityTheme not available - logo.js may not be loaded yet');
|
||
}
|
||
|
||
// Update button states
|
||
updateAccessibilityButtonStates(themeName);
|
||
}
|
||
|
||
function updateAccessibilityButtonStates(activeTheme) {
|
||
const buttons = document.querySelectorAll('[data-accessibility-theme]');
|
||
buttons.forEach(button => {
|
||
const buttonTheme = button.getAttribute('data-accessibility-theme');
|
||
if (buttonTheme === activeTheme) {
|
||
// For modal buttons, add different styling
|
||
if (button.classList.contains('modal-vision-btn')) {
|
||
button.classList.add('ring-2', 'ring-offset-2');
|
||
if (buttonTheme === 'standard') {
|
||
button.classList.add('ring-mulberry-600');
|
||
} else {
|
||
button.classList.add('ring-white');
|
||
}
|
||
} else {
|
||
button.classList.add('ring-2', 'ring-white', 'ring-offset-2');
|
||
}
|
||
} else {
|
||
button.classList.remove('ring-2', 'ring-white', 'ring-offset-2', 'ring-mulberry-600');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Modal functionality
|
||
function openVisualAidModal() {
|
||
const modal = document.getElementById('visualAidModal');
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeVisualAidModal() {
|
||
const modal = document.getElementById('visualAidModal');
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// Initialize accessibility theme from localStorage
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const savedTheme = localStorage.getItem('chorus-accessibility-theme') || 'standard';
|
||
setAccessibilityTheme(savedTheme);
|
||
});
|
||
|
||
// Add event listeners when page loads
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Accessibility theme buttons
|
||
const accessibilityButtons = document.querySelectorAll('[data-accessibility-theme]');
|
||
accessibilityButtons.forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
const theme = button.getAttribute('data-accessibility-theme');
|
||
setAccessibilityTheme(theme);
|
||
|
||
// If this is a modal button, close the modal after selection
|
||
if (button.classList.contains('modal-vision-btn')) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Modal control buttons
|
||
const openModalBtn = document.getElementById('openVisualAid');
|
||
const closeModalBtn = document.getElementById('closeVisualAid');
|
||
const modal = document.getElementById('visualAidModal');
|
||
|
||
if (openModalBtn) {
|
||
openModalBtn.addEventListener('click', openVisualAidModal);
|
||
}
|
||
|
||
if (closeModalBtn) {
|
||
closeModalBtn.addEventListener('click', closeVisualAidModal);
|
||
}
|
||
|
||
// Close modal when clicking outside
|
||
if (modal) {
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close modal with Escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |