# Colors
### **The Harmony of Colors in Agora’s Design** Imagine a canvas where every stroke is intentional, every hue a testament to the diversity of local communities. Our primary colors are like the bold strokes of a brush—reds and blues echoing the energy of street murals and the tranquility of waterfronts. Complementing them are our secondary colors, softer shades inspired by the cozy ambience of local cafes and the lushness of community gardens. Accent colors add a final touch, like a dash of sunrise yellow or the serene green of a park, bringing our designs to life. ### **Colors at Work in Agora’s Digital Interface** In the digital realm, color transcends beauty. It becomes a guide, a way to navigate and interact. Our primary colors are not just vibrant; they lead the way in our navigation elements, making user journeys intuitive and effortless. Our calls-to-action don’t just stand out; they engage and inspire with their contrasting hues. And when it comes to presenting information, our mix of primary and secondary colors ensures that data is not just visible but meaningful and accessible. *** ### **Building a Consistent Experience with Color Tokens** Consistency is key in our design system, and color tokens are the cornerstone. They are more than just color codes; they are the vocabulary of our design language. Our role-based tokens ensure that colors maintain their purpose, whether for text, background, or borders. Dynamic tokens allow our designs to adapt seamlessly, reflecting the ever-changing moods and themes of our digital landscape. ### **Engaging Interaction States Through Color** Interaction states are where color becomes dynamic. A hover isn’t just a change; it’s a conversation, a subtle invitation to explore. Active states are bold declarations, marking selections with clarity and confidence. And in our commitment to inclusivity, disabled states use muted tones, ensuring that our designs are comprehensible and accessible to all. ### **A Commitment to Accessibility in Color Choices** Accessibility is at the heart of our color choices. We meticulously craft our palettes to meet WCAG standards, ensuring that our contrasts are not just visually appealing but also legible. Our commitment extends to those with color vision deficiencies, for whom we select color combinations that are distinct and clear. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.agora.foundation/guidelines/colors.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.