2e1bb2e55e
- Extensive updates to system configuration and deployment - Enhanced documentation and architecture improvements - Updated dependencies and build configurations - Improved service integrations and workflows 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2014 lines
128 KiB
HTML
2014 lines
128 KiB
HTML
|
|
|
|
|
|
|
|
|
|
<!-- Color Palette -->
|
|
<section id="colors" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold 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>
|
|
|
|
<!-- Themes -->
|
|
<div>
|
|
<h3 class="text-3xl 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-900 shadow-lg">
|
|
<h2 class="text-3xl font-black mb-chorus-sm text-white">Dark Mode</h2>
|
|
<h4 class="mb-chorus-sm text-white">(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 dark:border-nickel-900 bg-white shadow-lg">
|
|
<h2 class="text-3xl font-black mb-chorus-sm text-carbon-900">Light Mode</h2>
|
|
<h4 class="mb-chorus-sm text-sand-700">(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-5xl font-semibold 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-html"><code class="language-html"><!-- 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-html"><code class="language-html"><!-- 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-css"><code class="language-css">/* 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-5xl font-semibold 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>
|
|
|
|
<!-- CHORUS 8-Color Accessibility System -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">CHORUS 8-Color Accessibility System</h3>
|
|
<p class="mb-chorus-md">Our advanced accessibility system remaps the core CHORUS 8-color palette (carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral) to vision-deficiency appropriate alternatives while preserving the light/dark theme toggle functionality.</p>
|
|
|
|
<div class="grid gap-chorus-md md:grid-cols-2 lg:grid-cols-4 mt-chorus-lg">
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-blue-800 dark:text-blue-300">Protanopia (Red-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Danger: Ocean → Coral</div>
|
|
<div>• Success: Sand → Eucalyptus</div>
|
|
<div>• Warning: Nickel → Sand</div>
|
|
<div>• Preserves: Carbon, Mulberry, Walnut</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-purple-800 dark:text-purple-300">Deuteranopia (Green-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Success: Ocean → Eucalyptus</div>
|
|
<div>• Info: Sand → Ocean</div>
|
|
<div>• Accent: Coral → Walnut</div>
|
|
<div>• Enhances: Blue/yellow contrast</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-red-800 dark:text-red-300">Tritanopia (Blue-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Info: Coral → Ocean</div>
|
|
<div>• Warning: Eucalyptus → Sand</div>
|
|
<div>• Primary: Mulberry → Carbon</div>
|
|
<div>• Maintains: Red/green clarity</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-gray-800 dark:text-gray-300">Achromatopsia (Monochrome)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Pure grayscale system</div>
|
|
<div>• Brightness hierarchy preserved</div>
|
|
<div>• Contrast ratios maintained</div>
|
|
<div>• Texture-based differentiation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-chorus-lg p-chorus-md bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800">
|
|
<h4 class="font-medium mb-2">Technical Implementation</h4>
|
|
<div class="text-sm text-carbon-600 dark:text-purple-300">
|
|
<p class="mb-2">The system uses CSS semantic tokens with compound selectors that combine light/dark themes with accessibility modes:</p>
|
|
<code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1">.dark[data-accessibility="protanopia"] { --chorus-danger: var(--chorus-info); }</code>
|
|
<p class="mt-2">This preserves your existing theme toggle while providing vision-inclusive alternatives.</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>
|
|
|
|
<!-- Components Section -->
|
|
<section id="components" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold mb-chorus-lg">Component System</h2>
|
|
|
|
<div class="space-y-chorus-lg">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">UI Component Library</h3>
|
|
<p>The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.</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">Buttons & Actions</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Primary, secondary, and ghost button variants with accessibility-compliant focus states</p>
|
|
</div>
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm">Forms & Inputs</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Clean form elements with validation states and accessibility features</p>
|
|
</div>
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm">Navigation & Layout</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Header, sidebar, and breadcrumb components with responsive behavior</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Implementation Principles</h3>
|
|
<div class="grid gap-chorus-md md:grid-cols-2">
|
|
<div>
|
|
<h4 class="font-medium mb-chorus-sm">Ultra-Minimalist Design</h4>
|
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<li>• No border radius - pure geometric forms</li>
|
|
<li>• Generous spacing with 8px grid system</li>
|
|
<li>• Sophisticated restraint over decoration</li>
|
|
<li>• Dark mode as default preference</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium mb-chorus-sm">Accessibility Excellence</h4>
|
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<li>• WCAG 2.1 AA compliance standards</li>
|
|
<li>• 8-color vision inclusivity system</li>
|
|
<li>• Focus states and keyboard navigation</li>
|
|
<li>• Screen reader compatibility</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Implementation Section -->
|
|
<section id="implementation" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold mb-chorus-lg">Implementation</h2>
|
|
|
|
<div class="space-y-chorus-lg">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Technical Specifications</h3>
|
|
<p>Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Tailwind CSS Configuration</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code>// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
|
|
mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
|
|
walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
|
|
nickel: { 950: '#171717', 500: '#c1bfb1', /* ... */ },
|
|
ocean: { 950: '#2a3441', 600: '#3a4654', /* ... */ },
|
|
eucalyptus: { 950: '#2a3330', 600: '#3a4540', /* ... */ },
|
|
sand: { 950: '#473e2f', 600: '#6a5c46', /* ... */ },
|
|
coral: { 950: '#2e1d1c', 600: '#3e2d2c', /* ... */ }
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter Tight", "Inter", "system-ui", "sans-serif"],
|
|
mono: ["Inconsolata", "ui-monospace", "monospace"],
|
|
logo: ["Exo", "Inter Tight", "sans-serif"]
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Three.js Logo Integration</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code>// HTML Integration
|
|
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
|
|
|
// JavaScript Module
|
|
import './logo.js';
|
|
|
|
// Accessibility Integration
|
|
window.updateAllLogoMaterials(isDark);
|
|
window.updateLogoAccessibilityTheme(themeName);</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Development Environment</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code># Local Development Server
|
|
python3 -m http.server 3000
|
|
|
|
# Access brand guide
|
|
http://localhost:3000/chorus_brand_style_guide.html
|
|
|
|
# Test accessibility features
|
|
# Use Visual Aid button for color-blindness testing</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography Section -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Color Palette -->
|
|
<section id="colors" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold 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-3xl 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-900 shadow-lg">
|
|
<h2 class="text-3xl font-black mb-chorus-sm text-white">Dark Mode</h2>
|
|
<h4 class="mb-chorus-sm text-white">(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 dark:border-nickel-900 bg-white shadow-lg">
|
|
<h2 class="text-3xl font-black mb-chorus-sm text-carbon-900">Light Mode</h2>
|
|
<h4 class="mb-chorus-sm text-sand-700">(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-5xl font-semibold 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-html"><code class="language-html"><!-- 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-html"><code class="language-html"><!-- 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="overflow-hidden border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="language-css"><code class="language-css">/* 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-5xl font-semibold 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>
|
|
|
|
<!-- CHORUS 8-Color Accessibility System -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">CHORUS 8-Color Accessibility System</h3>
|
|
<p class="mb-chorus-md">Our advanced accessibility system remaps the core CHORUS 8-color palette (carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral) to vision-deficiency appropriate alternatives while preserving the light/dark theme toggle functionality.</p>
|
|
|
|
<div class="grid gap-chorus-md md:grid-cols-2 lg:grid-cols-4 mt-chorus-lg">
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-blue-800 dark:text-blue-300">Protanopia (Red-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Danger: Ocean → Coral</div>
|
|
<div>• Success: Sand → Eucalyptus</div>
|
|
<div>• Warning: Nickel → Sand</div>
|
|
<div>• Preserves: Carbon, Mulberry, Walnut</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-purple-800 dark:text-purple-300">Deuteranopia (Green-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Success: Ocean → Eucalyptus</div>
|
|
<div>• Info: Sand → Ocean</div>
|
|
<div>• Accent: Coral → Walnut</div>
|
|
<div>• Enhances: Blue/yellow contrast</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-red-800 dark:text-red-300">Tritanopia (Blue-blind)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Info: Coral → Ocean</div>
|
|
<div>• Warning: Eucalyptus → Sand</div>
|
|
<div>• Primary: Mulberry → Carbon</div>
|
|
<div>• Maintains: Red/green clarity</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm text-gray-800 dark:text-gray-300">Achromatopsia (Monochrome)</h4>
|
|
<div class="text-xs space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<div>• Pure grayscale system</div>
|
|
<div>• Brightness hierarchy preserved</div>
|
|
<div>• Contrast ratios maintained</div>
|
|
<div>• Texture-based differentiation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-chorus-lg p-chorus-md bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800">
|
|
<h4 class="font-medium mb-2">Technical Implementation</h4>
|
|
<div class="text-sm text-carbon-600 dark:text-purple-300">
|
|
<p class="mb-2">The system uses CSS semantic tokens with compound selectors that combine light/dark themes with accessibility modes:</p>
|
|
<code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1">.dark[data-accessibility="protanopia"] { --chorus-danger: var(--chorus-info); }</code>
|
|
<p class="mt-2">This preserves your existing theme toggle while providing vision-inclusive alternatives.</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>
|
|
|
|
<!-- Components Section -->
|
|
<section id="components" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold mb-chorus-lg">Component System</h2>
|
|
|
|
<div class="space-y-chorus-lg">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">UI Component Library</h3>
|
|
<p>The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.</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">Buttons & Actions</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Primary, secondary, and ghost button variants with accessibility-compliant focus states</p>
|
|
</div>
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm">Forms & Inputs</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Clean form elements with validation states and accessibility features</p>
|
|
</div>
|
|
<div class="border border-nickel-100 p-chorus-md dark:border-nickel-900">
|
|
<h4 class="font-medium mb-chorus-sm">Navigation & Layout</h4>
|
|
<p class="text-sm text-carbon-600 dark:text-purple-300">Header, sidebar, and breadcrumb components with responsive behavior</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Implementation Principles</h3>
|
|
<div class="grid gap-chorus-md md:grid-cols-2">
|
|
<div>
|
|
<h4 class="font-medium mb-chorus-sm">Ultra-Minimalist Design</h4>
|
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<li>• No border radius - pure geometric forms</li>
|
|
<li>• Generous spacing with 8px grid system</li>
|
|
<li>• Sophisticated restraint over decoration</li>
|
|
<li>• Dark mode as default preference</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium mb-chorus-sm">Accessibility Excellence</h4>
|
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<li>• WCAG 2.1 AA compliance standards</li>
|
|
<li>• 8-color vision inclusivity system</li>
|
|
<li>• Focus states and keyboard navigation</li>
|
|
<li>• Screen reader compatibility</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Implementation Section -->
|
|
<section id="implementation" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold mb-chorus-lg">Implementation</h2>
|
|
|
|
<div class="space-y-chorus-lg">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Technical Specifications</h3>
|
|
<p>Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Tailwind CSS Configuration</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code>// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
|
|
mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
|
|
walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
|
|
nickel: { 950: '#171717', 500: '#c1bfb1', /* ... */ },
|
|
ocean: { 950: '#2a3441', 600: '#3a4654', /* ... */ },
|
|
eucalyptus: { 950: '#2a3330', 600: '#3a4540', /* ... */ },
|
|
sand: { 950: '#473e2f', 600: '#6a5c46', /* ... */ },
|
|
coral: { 950: '#2e1d1c', 600: '#3e2d2c', /* ... */ }
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter Tight", "Inter", "system-ui", "sans-serif"],
|
|
mono: ["Inconsolata", "ui-monospace", "monospace"],
|
|
logo: ["Exo", "Inter Tight", "sans-serif"]
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Three.js Logo Integration</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code>// HTML Integration
|
|
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
|
|
|
// JavaScript Module
|
|
import './logo.js';
|
|
|
|
// Accessibility Integration
|
|
window.updateAllLogoMaterials(isDark);
|
|
window.updateLogoAccessibilityTheme(themeName);</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Development Environment</h3>
|
|
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-100 dark:border-nickel-900">
|
|
<pre class="text-sm text-carbon-950 dark:text-white overflow-x-auto"><code># Local Development Server
|
|
python3 -m http.server 3000
|
|
|
|
# Access brand guide
|
|
http://localhost:3000/chorus_brand_style_guide.html
|
|
|
|
# Test accessibility features
|
|
# Use Visual Aid button for color-blindness testing</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography Section -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Brand Guidelines: Usage -->
|
|
<section id="usage" class="mb-chorus-xxl">
|
|
<h2 class="text-5xl font-semibold mb-chorus-lg">How to use these Brand Guidelines</h2>
|
|
|
|
<div class="space-y-chorus-lg">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-chorus-md">Navigating the Guide</h3>
|
|
<p class="mb-chorus-md">This comprehensive brand guide is organized with logical navigation flow. Use the sidebar menu to jump between sections, each with semantic icons for easy identification.</p>
|
|
|
|
<div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
|
|
<h4 class="font-medium mb-2">Navigation Features</h4>
|
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-purple-300">
|
|
<li>• <strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
|
|
<li>• <strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
|
|
<li>• <strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
|
|
<li>• <strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section> |