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

48
brand-assets/README.md
View File

@@ -4,7 +4,7 @@ This directory contains the complete visual identity system for CHORUS Services,
## 📁 Directory Structure
```
brand-assets/
├── 📋 README.md # This overview file
├── 📘 CHORUS-BRAND-GUIDE.md # Complete brand guide
@@ -22,27 +22,27 @@ brand-assets/
│ └── website-mockup-concept.md # Implementation examples
└── 📄 templates/
└── [Future templates will be added here]
```
## 🎯 Quick Start Guide
### For Designers
1. **Start with**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) for complete overview
2. **Logo Usage**: [`logos/chorus-logo-concept.md`](./logos/chorus-logo-concept.md) for primary logo specifications
3. **Color System**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) for color palette
4. **Typography**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) for font system
1. **Start with**: [CHORUS-BRAND-GUIDE.md](./CHORUS-BRAND-GUIDE.md) for complete overview
2. **Logo Usage**: [logos/chorus-logo-concept.md](./logos/chorus-logo-concept.md) for primary logo specifications
3. **Color System**: [colors/chorus-color-system.md](./colors/chorus-color-system.md) for color palette
4. **Typography**: [typography/chorus-typography-system.md](./typography/chorus-typography-system.md) for font system
### For Developers
1. **Implementation Guide**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) (Implementation Examples section)
2. **Color Variables**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) (CSS Custom Properties)
3. **Typography CSS**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) (Utility Classes)
4. **Logo Integration**: [`logos/logo-variations-specifications.md`](./logos/logo-variations-specifications.md) (SVG & CSS)
1. **Implementation Guide**: [CHORUS-BRAND-GUIDE.md](./CHORUS-BRAND-GUIDE.md) (Implementation Examples section)
2. **Color Variables**: [colors/chorus-color-system.md](./colors/chorus-color-system.md) (CSS Custom Properties)
3. **Typography CSS**: [typography/chorus-typography-system.md](./typography/chorus-typography-system.md) (Utility Classes)
4. **Logo Integration**: [logos/logo-variations-specifications.md](./logos/logo-variations-specifications.md) (SVG & CSS)
### For Marketing Teams
1. **Usage Guidelines**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md)
2. **Component Branding**: [`logos/component-logo-system.md`](./logos/component-logo-system.md)
3. **Mockup Examples**: [`mockups/website-mockup-concept.md`](./mockups/website-mockup-concept.md)
4. **Brand Voice**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md) (Content Guidelines)
1. **Usage Guidelines**: [guidelines/brand-usage-guidelines.md](./guidelines/brand-usage-guidelines.md)
2. **Component Branding**: [logos/component-logo-system.md](./logos/component-logo-system.md)
3. **Mockup Examples**: [mockups/website-mockup-concept.md](./mockups/website-mockup-concept.md)
4. **Brand Voice**: [guidelines/brand-usage-guidelines.md](./guidelines/brand-usage-guidelines.md) (Content Guidelines)
## 🎨 Brand System Overview
@@ -78,21 +78,21 @@ brand-assets/
- **Icon Only**: 16px (favicon) to 512px (high-resolution)
### Color Values (Primary)
```css
css
--color-carbon-black: #000000;
--color-natural-paper: #F5F5DC;
--color-orchestration-blue: #007AFF;
--color-walnut-brown: #8B4513;
--color-brushed-aluminum: #C0C0C0;
```
### Typography Scale
```css
css
--text-hero: clamp(48px, 8vw, 84px); /* SF Pro Display Heavy */
--text-display-1: clamp(32px, 5vw, 48px); /* SF Pro Display Bold */
--text-body: 16px; /* SF Pro Text Regular */
--text-small: 14px; /* SF Pro Text Regular */
```
## 🛡️ Brand Protection
@@ -154,14 +154,14 @@ brand-assets/
## 📚 Related Documentation
### Project Documentation
- [`../../README.md`](../../README.md): Main project overview
- [`../../DESIGN.md`](../../DESIGN.md): Technical design implementation
- [`../../UX_DESIGN_STRATEGY.md`](../../UX_DESIGN_STRATEGY.md): User experience strategy
- [../../README.md](../../README.md): Main project overview
- [../../DESIGN.md](../../DESIGN.md): Technical design implementation
- [../../UX_DESIGN_STRATEGY.md](../../UX_DESIGN_STRATEGY.md): User experience strategy
### Technical Integration
- [`../../modules/whoosh/frontend/`](../../modules/whoosh/frontend/): Frontend implementation
- [`../../website/`](../../website/): Marketing website implementation
- [`../../docker-compose.yml`](../../docker-compose.yml): Service configuration
- [../../modules/whoosh/frontend/](../../modules/whoosh/frontend/): Frontend implementation
- [../../website/](../../website/): Marketing website implementation
- [../../docker-compose.yml](../../docker-compose.yml): Service configuration
## 💡 Implementation Tips