Anatomy of Color

Understanding color roles in a design system is essential for crafting interfaces that are not only aesthetically pleasing but also functionally intuitive. Colors in our design system do more than just decorate; they establish hierarchy, signal actions, and emphasize key information, guiding users through the interface with visual cues that are psychologically impactful and easily navigable. By carefully assigning specific colors to specific functions, we ensure a consistent and coherent brand experience that makes our platform both scalable and user-friendly.

Currently, this is section is exclusively for Board and not universally applicable across all Agora-based products.

Looking at the Design

Darker shades highlight dates, light grey backgrounds are for header or secondary items, black emphasizes titles, and dark grey is used for descriptions and inactive elements to create a clear visual hierarchy.

Primary elements feature a white background, with darker shades used to accentuate dates. Grey is employed to emphasize important elements.

Divider

To differentiate primary elements, we use the color grey as a divider between them.

Elements

For a list of static or informative elements, a grey background is utilized.

Do and Don't