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>
3.3 KiB
🎨 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.
- Define 5 base shade palettes (
-
Theme Switching:
- Use
data-themeattributes (light,dark,protanopia,deuteranopia,tritanopia,achromatopsia). - JS toggles simply change the attribute on
<html>or<body>.
- Use
-
Testing: Validate palettes in Chrome DevTools “Emulate vision deficiencies” and ensure minimum contrast ratios.
Deliverables
-
Updated Brand Guidelines
- Extended color system with accessible variants.
- Documentation on maintaining brand feel across modes.
- Guidance on redundant visual cues.
-
Tailwind Implementation Guide
- Config example with tokens.
- Example
data-themeusage 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.