Foundations
Core design foundations that form the building blocks of Acua's product UI.
Design Tokens
Design Tokens are design values (colors, sizes, spacing) defined as variables. By referencing token names (--color-primary) instead of raw values (#1E40AF), we ensure consistency and maintainability.
Color System
Strictly follow the 3 roles defined in Corporate Brand Guideline:
- Corporate Color: UI foundation, Acua consistency
- Semantic Colors: State meaning (safe operations)
- Product Color: Area identification (wayfinding)
Typography
System font stack prioritized for optimal rendering. Includes Thai language support.
Spacing
8px grid system with 4px as the base unit.
Iconography
Lucide React icons with consistent sizing and usage.
Elevation & Shadow
Shadow scale for visual hierarchy and z-index management.
Border Radius
Consistent border radius scale for modern, soft appearance.