tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive iconography system and enhance brand guidelines

Browse Source 
- Add complete Iconography section with Coolicons v4.1 integration
- Implement theme-adaptive icons (black for light mode, white for dark mode)
- Add Visual Aid modal dialog for accessibility settings
- Replace theme toggle with semantic moon/sun icons
- Add personality trait icons with appropriate semantic choices
- Fix code block theming to respect light/dark mode toggle
- Include comprehensive icon categories: Interface, File/Data, Communication, Navigation
- Add detailed implementation guides for HTML, SVG, and Tailwind
- Create accessibility-aware color system with vision deficiency support
- Add Inconsolata and Inter Tight fonts for complete typography system

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
2025-08-20 16:49:53 +10:00
parent 4511f4c801
commit ba0e8c84ae
3749 changed files with 24003 additions and 1760 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
brand-assets/vision-inclusivity-support/BRIEF.md Normal file
View File

@@ -0,0 +1,80 @@
# 🎨 Design Brief: Accessibility Extension of Brand Guidelines
## Project Objective
Expand the existing brand guidelines to support **accessible color-blind–friendly modes** alongside existing **light/dark themes**. The system should preserve the **core brand feel** — a metallic, shade-contrast–driven aesthetic with a dynamic ring logo — while ensuring legibility and usability for users with different forms of color blindness.
The final deliverable should be an **extended brand guideline document** and a **Tailwind implementation direction** that defines scalable, maintainable design tokens for multiple vision modes.
---
## Brand Context
* **Primary Identity**: Metallic ring logo, dynamically adapting between light and dark modes.
* **Style**: Minimalist, shade/contrast-based rather than hue-driven. Five primary color-ways, designed as **high/low contrast pairs** within a limited hue space.
* **Current UX**: Light/Dark toggle with Tailwind extension support.
---
## Accessibility Scope
The design system must extend to support users with the following visual deficiencies:
* **Protanopia** (red-blind)
* **Deuteranopia** (green-blind)
* **Tritanopia** (blue-blind)
* **Achromatopsia** (complete color blindness)
Goals:
* Maintain brand recognizability and aesthetic.
* Prioritize **contrast, brightness, and texture cues** over exact hue fidelity.
* Use **redundant cues** (shapes, icons, labels) for critical distinctions, not just color.
* Ensure **WCAG AA or better** contrast ratios across all themes.
---
## UX/UI Guidelines
* **Light/Dark toggle** remains the primary visible control in the header.
* **Accessibility themes** (vision deficiency modes) are discoverable in a **preferences/settings panel**, not exposed as clutter in the main UI.
* Maintain **consistent interactions, spacing, and typography** across all modes.
* Accent hues should shift per mode as needed to preserve differentiation (e.g., avoid red/green conflicts for Deuteranopia, adjust blue/yellow for Tritanopia).
---
## Tailwind Implementation Direction
* **Approach**: Implement all palettes via **CSS variables** mapped to Tailwind design tokens.
* **Structure**:
* Define 5 base shade palettes (`brand-1` → `brand-5`).
* Define **semantic tokens** (`--color-bg`, `--color-fg`, `--color-accent`, `--color-ring`) applied via `[data-theme="..."]`.
* Extend Tailwind config to map these tokens into utility classes.
* **Theme Switching**:
* Use `data-theme` attributes (`light`, `dark`, `protanopia`, `deuteranopia`, `tritanopia`, `achromatopsia`).
* JS toggles simply change the attribute on `<html>` or `<body>`.
* **Testing**: Validate palettes in Chrome DevTools “Emulate vision deficiencies” and ensure minimum contrast ratios.
---
## Deliverables
1. **Updated Brand Guidelines**
* Extended color system with accessible variants.
* Documentation on maintaining brand feel across modes.
* Guidance on redundant visual cues.
2. **Tailwind Implementation Guide**
* Config example with tokens.
* Example `data-theme` usage and switching mechanism.
* Sample component styles demonstrating accessible variants.
---
⚡ **Key Success Metric**:
The metallic brand identity remains intact and aesthetically pleasing while **8%+ of male users with color blindness** experience equal legibility, usability, and emotional resonance with the brand.
---