Color System
Strictly follow the 3 roles defined in Corporate Brand Guideline.
Color Roles
| Role | Purpose | Examples | Scope |
|---|
| Corporate Color | UI foundation, Acua consistency | Backgrounds, borders, primary buttons | All screens |
| Semantic Colors | State meaning (safe operations) | Success/Warning/Error/Info | Status display only |
| Product Color | Area identification (wayfinding) | Sidebar icons, product chips | Max 3 locations |
Neutral Colors (Grayscale)
Neutral colors form the UI foundation for text, backgrounds, and borders.
| Token | HEX | Usage | Contrast Ratio |
|---|
| --white | #FFFFFF | Background | - |
| --gray-50 | #FAFAFA | Light background | 1.03:1 on white |
| --gray-100 | #F5F5F5 | Section background | 1.08:1 on white |
| --gray-200 | #E5E5E5 | Border | 1.22:1 on white |
| --gray-400 | #A3A3A3 | Placeholder | 2.68:1 on white |
| --gray-500 | #737373 | Helper text | 4.59:1 on white ✓ |
| --gray-600 | #525252 | Secondary text | 7.14:1 on white ✓ |
| --gray-700 | #404040 | Text | 9.52:1 on white ✓ |
| --gray-900 | #171717 | Heading | 16.1:1 on white ✓ |
✓ = WCAG AA compliant (4.5:1 or higher)
Primary Colors (Blue)
Blue palette used as Acua's brand color.
| Token | HEX | Usage |
|---|
| --blue-50 | #EFF6FF | Info background (light) |
| --blue-100 | #DBEAFE | Info background |
| --blue-500 | #3B82F6 | Focus ring |
| --blue-600 | #2563EB | Link |
| --blue-900 | #1E3A8A | Corporate Primary (P7) |
| --blue-950 | #172554 | Primary hover/pressed |
Semantic Colors (Status Colors)
Status colors ensuring safe business operations.
Info
| Role | Token | HEX |
|---|
| Text | --info-foreground | #1D4ED8 |
| Background | --info-background | #DBEAFE |
| Border | --info-border | #93C5FD |
Success
| Role | Token | HEX |
|---|
| Text | --success-foreground | #166534 |
| Background | --success-background | #DCFCE7 |
| Border | --success-border | #86EFAC |
Warning
| Role | Token | HEX |
|---|
| Text | --warning-foreground | #92400E |
| Background | --warning-background | #FEF9C3 |
| Border | --warning-border | #FACC15 |
Error
| Role | Token | HEX |
|---|
| Text | --error-foreground | #DC2626 |
| Background | --error-background | #FEE2E2 |
| Border | --error-border | #FCA5A5 |
Usage Rules
Do
- Use Semantic Colors only to convey state meaning
- Express with 3-piece set: color + icon + text
- When using background color, display text with foreground color
- Ensure contrast ratio (WCAG AA: 4.5:1 or higher)
Don't
- Use for decoration ("green looks nice" is not a reason)
- Convey information with color alone (consider color blindness)
- Use Success green or Warning yellow directly on white (low contrast)
- Use Product Color for status display
Accessibility Considerations
WCAG 2.1 AA compliance is required.
| Text Size | Required Contrast | Acua Implementation |
|---|
| Normal text (under 14px) | 4.5:1 or higher | Use --foreground (18.9:1) |
| Large text (18px+ or 14px bold) | 3:1 or higher | Use --foreground (18.9:1) |
| UI elements (icons, borders) | 3:1 or higher | Use --gray-500 or darker |