CogniSync’s color system is built for clarity, consistency, and scalability across light and dark interfaces. Every color follows a structured scale from 50 to 950 and is grouped by role: brand, neutral, semantic, and accent.
Used for the most important actions in the interface: primary buttons, active tabs, selected states, key icons, and links. This color anchors CogniSync's brand in the product; lighter and darker steps support hover, disabled, and contrast needs.
Used for structure, layout, and content: backgrounds, borders, text, dividers, and disabled states. Lighter shades (50 to 200) suit surfaces and containers; darker shades (600 to 950) suit body copy and headings.
Communicates positive feedback and completed actions: success messages, “Approved” states, checkmarks, and confirmation banners so users know something went right.
Signals problems or failed actions: field errors, destructive actions, alert banners, and error icons. Strong enough to notice without overwhelming the layout.
For “pay attention” moments that are not quite errors: storage warnings, unsaved changes, and cautionary alerts. Sits between informational and error severity.
Neutral, helpful guidance: tooltips, inline hints, and “here's what changed” banners. Distinct from brand primary blue; meant for informative UI, not primary actions.
Adds emphasis and a premium feel: highlights, secondary CTAs, and notifications where brand blue should not compete with the main action.
CogniSync