ba0e8c84ae
- Add complete Iconography section with Coolicons v4.1 integration - Implement theme-adaptive icons (black for light mode, white for dark mode) - Add Visual Aid modal dialog for accessibility settings - Replace theme toggle with semantic moon/sun icons - Add personality trait icons with appropriate semantic choices - Fix code block theming to respect light/dark mode toggle - Include comprehensive icon categories: Interface, File/Data, Communication, Navigation - Add detailed implementation guides for HTML, SVG, and Tailwind - Create accessibility-aware color system with vision deficiency support - Add Inconsolata and Inter Tight fonts for complete typography system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
3.3 KiB
Markdown
81 lines
3.3 KiB
Markdown
# 🎨 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.
|
||
|
||
---
|