Code reorg
This commit is contained in:
tony
File diff suppressed because it is too large
Load Diff
@@ -1,167 +0,0 @@
|
||||
/* Color System CHORUS.services */
|
||||
|
||||
/*
|
||||
- **Usage**: Primary backgrounds, high-contrast text, logo applications
|
||||
- **Psychology**: Authority, sophistication, premium quality
|
||||
- **Applications**: Website backgrounds, app interfaces, business cards
|
||||
*/
|
||||
|
||||
.carbon-black {
|
||||
color: #000000ff;
|
||||
}
|
||||
/*
|
||||
- **Usage**: hero backgrounds, dark accents, secondary elements, natural touches
|
||||
- **Psychology**: Richness, mystery, luxury, power, and depth. Calm Darkness: Unlike harsh black, it feels less aggressive and more contemplative.
|
||||
- **Applications**: Secondary text, accent elements, print materials
|
||||
*/
|
||||
.dark-mulberry{
|
||||
color: #0b0213ff;
|
||||
}
|
||||
|
||||
/*
|
||||
- **Usage**: Light backgrounds, high-contrast text, accessibility contrast
|
||||
- **Psychology**: Clarity, simplicity, natural intelligence
|
||||
- **Applications**: Print materials, light themes, text on dark backgrounds
|
||||
*/
|
||||
|
||||
.natural-paper{
|
||||
color: #f5f5dcff;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
- **Usage**: Warm accents, secondary elements, natural touches
|
||||
- **Psychology**: Reliability, craftsmanship, approachable intelligence
|
||||
- **Applications**: Secondary text, accent elements, print materials
|
||||
*/
|
||||
.walnut-brown {
|
||||
color: #403730ff;
|
||||
}
|
||||
|
||||
/*
|
||||
- **Usage**: UI elements, borders, technical precision
|
||||
- **Psychology**: Modern sophistication, precision, technology
|
||||
- **Applications**: Interface elements, technical diagrams, secondary text
|
||||
*/
|
||||
.brushed-nickel {
|
||||
color: #c1bfb1ff;
|
||||
}
|
||||
|
||||
|
||||
/* System Colors */
|
||||
|
||||
/*
|
||||
- **Usage**: Primary actions, interactive elements, system feedback
|
||||
- **Psychology**: Trust, reliability, technological precision
|
||||
- **Applications**: Buttons, links, primary CTAs, logo accents
|
||||
*/
|
||||
.orchestration-blue {
|
||||
color: #5a6c80ff;
|
||||
}
|
||||
|
||||
/*
|
||||
- **Usage**: Success states, positive feedback, growth indicators
|
||||
- **Applications**: Success messages, positive data visualization
|
||||
*/
|
||||
.harmony-green {
|
||||
color: #515d54ff;
|
||||
}
|
||||
|
||||
/*
|
||||
- **Usage**: Warning states, attention indicators, energy elements
|
||||
- **Applications**: Warnings, attention callouts, active processes
|
||||
*/
|
||||
.resonance-amber {
|
||||
color: #8e7b5eff;
|
||||
}
|
||||
|
||||
/*
|
||||
- **Usage**: Error states, critical alerts, problem indicators
|
||||
- **Applications**: Error messages, critical warnings, urgent notifications
|
||||
*/
|
||||
.alert-coral {
|
||||
color: #593735ff;
|
||||
}
|
||||
|
||||
/* Ultra-Minimalist UI Color System */
|
||||
|
||||
/* Background System for Subtle Depth */
|
||||
.pure-white {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.warm-white {
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
.paper-tint {
|
||||
background-color: #F7F7E2;
|
||||
}
|
||||
|
||||
/* Text Hierarchy System - Minimalist Approach */
|
||||
.primary-text {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.tertiary-text {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtle-text {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.ghost-text {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* Border System for Invisible Organization */
|
||||
.border-invisible {
|
||||
border: 1px solid #FAFAFA;
|
||||
}
|
||||
|
||||
.border-subtle {
|
||||
border: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.border-defined {
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.border-emphasis {
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
/* Interactive Element Variations */
|
||||
.dark-mulberry-subtle {
|
||||
color: rgba(11, 2, 19, 0.8); /* 80% opacity for hover states */
|
||||
}
|
||||
|
||||
.dark-mulberry-ghost {
|
||||
color: rgba(11, 2, 19, 0.4); /* 40% opacity for disabled states */
|
||||
}
|
||||
|
||||
.walnut-brown-subtle {
|
||||
color: rgba(64, 55, 48, 0.8); /* 80% opacity for secondary interactions */
|
||||
}
|
||||
|
||||
.walnut-brown-ghost {
|
||||
color: rgba(64, 55, 48, 0.4); /* 40% opacity for disabled secondary */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
### Dark Mode Implementation
|
||||
- **Background Hierarchy**: Pure Black → Carbon Gray → Cool Gray → Border Gray
|
||||
- **Text Hierarchy**: Natural Paper → Light Gray → Medium Gray → Orchestration Blue
|
||||
- **Contrast**: All combinations tested for WCAG 2.1 AA compliance
|
||||
|
||||
### Light Mode Implementation
|
||||
- **Background Hierarchy**: Pure White → Natural Paper → Light Gray → Border Light
|
||||
- **Text Hierarchy**: Carbon Black → Medium Gray → Light Gray → Orchestration Blue
|
||||
- **Contrast**: Optimized for readability on warm, natural backgrounds
|
||||
*/
|
||||
@@ -1,105 +0,0 @@
|
||||
# CHORUS Services Color System
|
||||
|
||||
## Brand Color Philosophy
|
||||
|
||||
The CHORUS Services color palette reflects sophisticated orchestration, enterprise reliability, and technological innovation. Drawing inspiration from natural materials (carbon black, walnut brown, brushed aluminum) and warmer accents, the system creates a premium, approachable aesthetic that works in both digital dark themes and print materials.
|
||||
|
||||
## Primary Color Palette
|
||||
|
||||
### Core Brand Colors
|
||||
|
||||
#### Carbon Black
|
||||
- **Primary**: #000000
|
||||
- **Usage**: Primary backgrounds, high-contrast text, logo applications
|
||||
- **Psychology**: Authority, sophistication, premium quality
|
||||
- **Print**: Rich black (C:91, M:79, Y:62, K:97)
|
||||
|
||||
#### Mulberry
|
||||
- **Primary**: #0b0213
|
||||
- **Usage**: Primary-adjacent backgrounds, hero sections, logo applications, promotions
|
||||
- **Psychology**: a color of mystery, sophistication, and subtle power. Unlike black, it retains a spiritual and emotional resonance from purple. It’s excellent for luxury, artistic, and technology branding, especially when balanced with lighter contrasts. Overuse can feel isolating, but in the right proportions, it commands authority and intrigue.
|
||||
- **Print**: Used sparingly except in glossy brochure covers or prospectus documents, business cards or pamphlets.
|
||||
|
||||
#### Walnut Brown
|
||||
- **Primary**: #1E1815 (Deep Walnut)
|
||||
- **Usage**: Accent elements, warm touches, secondary branding
|
||||
- **Psychology**: Reliability, craftsmanship, natural intelligence
|
||||
- **Print**: C:30, M:70, Y:100, K:20
|
||||
|
||||
#### Brushed Nickel Grey
|
||||
- **Primary**: #888681 (Brushed Nickel Grey)
|
||||
- **Usage**: UI elements, borders, technical diagrams
|
||||
- **Psychology**: Precision, technology, modern sophistication
|
||||
- **Print**: C:15, M:10, Y:12, K:0
|
||||
|
||||
#### Muted Slate Blue
|
||||
- **Primary**: #5E6367
|
||||
- **Usage**: secondary backgrounds, forms, panels, toolbars, dashboard elements.
|
||||
- **Psychology**: Neutral, lets content pop whether its either darker or lighter.
|
||||
- **Print**: TBA
|
||||
|
||||
#### Natural Fiber
|
||||
- **Primary**: #F5F5DC (Warm Cream)
|
||||
- **Usage**: Light backgrounds, print materials, accessibility contrast
|
||||
- **Psychology**: Clarity, simplicity, natural intelligence
|
||||
- **Print**: C:6, M:4, Y:15, K:0
|
||||
|
||||
## Secondary Palette (UI Accents)
|
||||
|
||||
### Orchestration Blue (Primary System Color)
|
||||
- **Electric Blue**: #626b74ff - Primary actions, links, system elements
|
||||
- **Deep Blue**: #7c838fff - Hover states, pressed elements
|
||||
- **Light Blue**: #91a1b2ff - Secondary actions, info states
|
||||
|
||||
### Harmony Green (Success/Growth)
|
||||
- **Emerald**: #78a082ff - Success states, positive feedback
|
||||
- **Forest**: #597259ff - Secondary success, stable states
|
||||
- **Sage**: #474c41ff - Subtle positive indicators
|
||||
|
||||
### Resonance Amber (Warning/Energy)
|
||||
- **Warm Amber**: #b9a586ff - Warnings, attention states
|
||||
- **Golden**: #7b7656ff - Premium features, highlights
|
||||
- **Copper**: #5b544dff - Secondary attention elements
|
||||
|
||||
### Alert Coral (Error/Critical)
|
||||
- **System Red**: #895956ff - Errors, critical states
|
||||
- **Warm Red**: #563838ff - Secondary errors, warnings
|
||||
- **Rose**: #522a2aff - Soft error states
|
||||
|
||||
## Dark Mode Implementation
|
||||
|
||||
### Background Hierarchy
|
||||
1. **Pure Black**: #000000 - App backgrounds, highest contrast
|
||||
2. **Carbon Gray**: #1A1A1A - Card backgrounds, elevated surfaces
|
||||
3. **Cool Gray**: #2D2D30 - Secondary surfaces, input fields
|
||||
4. **Border Gray**: #48484A - Dividers, subtle borders
|
||||
|
||||
### Text Colors (Dark Mode)
|
||||
1. **Primary Text**: #F2F2F7 - Headlines, primary content
|
||||
2. **Secondary Text**: #A1A1A6 - Descriptions, secondary content
|
||||
3. **Tertiary Text**: #6D6D73 - Captions, disabled text
|
||||
4. **Accent Text**: #496078ff - Links, interactive elements
|
||||
|
||||
## Light Mode Implementation
|
||||
|
||||
### Background Hierarchy
|
||||
1. **Pure White**: #FFFFFF - Clean backgrounds
|
||||
2. **Natural Paper**: #F5F5DC - Warm backgrounds, print materials
|
||||
3. **Light Gray**: #F2F2F2 - Secondary surfaces
|
||||
4. **Border Light**: #E5E5E5 - Dividers, subtle borders
|
||||
|
||||
### Text Colors (Light Mode)
|
||||
1. **Primary Text**: #1A1A1A - Headlines, primary content
|
||||
2. **Secondary Text**: #6D6D73 - Descriptions, secondary content
|
||||
3. **Tertiary Text**: #A1A1A6 - Captions, disabled text
|
||||
4. **Accent Text**: #463f4fff - Links, interactive elements
|
||||
|
||||
## Accessibility Standards
|
||||
|
||||
### WCAG 2.1 AA Compliance
|
||||
- **Normal Text**: Minimum 3.5:1 contrast ratio
|
||||
- **Large Text**: Minimum 2:1 contrast ratio
|
||||
- **Interactive Elements*
|
||||
|
||||
|
||||
This color system provides a sophisticated, accessible foundation for the CHORUS Services brand that works across all applications while maintaining the premium, technology-focused aesthetic required for enterprise clients.
|
||||
Reference in New Issue
Block a user