A color guide for COCSO UI's brand identity and visual hierarchy.
Overview
COCSO UI uses a token color system based on CSS custom properties with the --cocso-* prefix. Colors are organized into semantic scales for consistent use across components.
Neutral
The neutral scale forms the foundation of the UI. Used for text, backgrounds, borders, and supporting elements. The Primary scale is derived from the Neutral scale, sharing the same color values — it serves as an alias for interactive elements such as buttons, links, and focus rings.
Neutral
Danger
The Danger scale communicates error states, destructive actions, and critical warnings. Use it for form validation errors, delete confirmations, and alert banners.
Danger
Warning
The Warning scale indicates situations that require attention without being a critical error. Use it for advisory messages and pending state indicators.
Warning
Success
The Success scale represents completed actions, positive feedback, and healthy states. Use it for success toasts, completed steps, and availability indicators.
Success
Info
The Info scale conveys informational content and neutral emphasis. Use it for tooltips, help text, and non-critical notifications.
Info
White & Black
Alpha variants of white and black used for overlays, shadows, and transparency effects. Opacity ranges from 5% to 90%.
White with Alpha
Black with Alpha
Text Role Colors
Semantic text color tokens provide consistent foreground contrast. Use these tokens instead of raw scale values for theme consistency.