Corporate Color Palette
Color is a design element that carries meaning (entity, domain, state), not decoration.
Primary Colors
Core colors representing Acua's brand identity. P7 is used as the primary color.
| ID | HEX | Usage |
|---|---|---|
| P1 | #E8EBF3 | Lightest background, hover state |
| P2 | #C7CEE2 | Light background, selected state |
| P3 | #A5B0D0 | Border, divider lines |
| P4 | #8393BF | Inactive elements |
| P5 | #6275AD | Secondary text |
| P6 | #40589C | Hover state (dark) |
| P7 | #1E3A8A | Primary color (main brand color) |
| P8 | #1A3175 | Pressed state |
| P9 | #152961 | Deep accent |
| P10 | #10204C | Darkest background, dark mode base |
Usage Guidelines
- P7 (#1E3A8A) is used for logos, primary buttons, and important headings
- In light mode, use P1-P3 for backgrounds
- In dark mode, use P9-P10 for backgrounds
Accent Colors
Royal Blue Scale (CTA)
| ID | HEX | Usage |
|---|---|---|
| RB1 | #EBF0FF | Light background |
| RB2 | #D6E0FF | Hover background |
| RB3 | #ADC2FF | Selected state |
| RB4 | #85A3FF | Hover state |
| RB5 | #4169E1 | Accent color (CTA) - Royal Blue |
| RB6 | #3457CD | Pressed state |
| RB7 | #2845B9 | Deep accent |
| RB8 | #1C33A5 | Darkest |
Teal Scale (AI/Automation)
| ID | HEX | Usage |
|---|---|---|
| T1 | #CCFBF1 | Light background |
| T2 | #99F6E4 | Hover background |
| T3 | #5EEAD4 | Selected state |
| T4 | #2DD4BF | Hover state |
| T5 | #14B8A6 | Accent color (AI / Automation) |
| T6 | #0D9488 | Pressed state |
| T7 | #0F766E | Deep accent |
| T8 | #115E59 | Darkest |
Semantic Colors
Colors with meaning for conveying states.
| State | Foreground | Background | Usage |
|---|---|---|---|
| Info | #1552FB | #D6E6FD | Information, hints, supplementary explanations |
| Success | #16A34A | #D6FBE3 | Success, completion, normal state |
| Warning | #B45309 | #FEF3C7 | Warnings, conditions requiring attention |
| Error | #DC2626 | #FEDDDD | Errors, failures, dangerous operations |
Usage Guidelines
- Semantic colors are used only to convey state meanings
- Decorative use is prohibited
- Convey meaning using not just color, but also icons and text (accessibility consideration)
Product Color Policy
Product Color in multi-product contexts is treated as a sign for identification, not a "theme."
Application Scope (Max 3 locations)
- Global Nav / App Switcher: Product icon (colored)
- Sidebar / Menu: Menu icons (colored)
- Page Header: Product chip (small badge)
Prohibited Uses
- Don't use as state colors (Success / Warning / Error / Info)
- Don't use for primary action elements (Primary CTA, link colors)
- Don't expand as background themes
- Don't use in ways that reduce readability