# Color

## Colors <a href="#colors" id="colors"></a>

These principles are the framework upon which we have built our system for how color is used in Aragon.

<figure><img src="/files/aHnTTQjoIdTycIQLXW8c" alt=""><figcaption></figcaption></figure>

* **Precision:** We defined a small number of primary colors for core interactions (and task-based contexts) and a sufficient number of secondary colors to create more ascetic / decorative illustrations, app icons and graphs.
* **Accessible:** We should never use color alone to convey information. Provide sufficient contrast between the elements and meet the minimum accessibility guidelines to better serve color blind or people with low vision.
* **Focus:** We should use color purposefully to help focus users’ attention with the task at hand. Colors convey meaning and complement the content hierarchy following a clear rationale.
* **Clarity:** Developers and designers should be able to easily refer to particular colors defined in the system. Color names are easily understood, memorable, and spark meaningful conversations between designers and developers (shades changes, contrast corrections, etc.).
* **Consistent:** Color should be applied throughout a UI consistently and celebrate the brand it represents.\\

## Color naming conventions <a href="#color-naming-conventions" id="color-naming-conventions"></a>

There are two common approaches when it comes to name color names: Declarative or natural color names and semantic or abstract color names. We’ve combined both approaches to create a more flexible and theme-able design system.

## Aragon Colors <a href="#aragon-colors" id="aragon-colors"></a>

<figure><img src="/files/rNyRf42COsy3bfO7kRG2" alt=""><figcaption></figcaption></figure>

**Grey scale**

<figure><img src="/files/TnFsxQRVnaGR8Zc6uvq6" alt=""><figcaption></figcaption></figure>

**Primary colors**

<figure><img src="/files/Y7sZEV2IBgGdBZayDwiq" alt=""><figcaption></figcaption></figure>

**Secondary colors**

<figure><img src="/files/E3tCvX2LJyozSxZThcrx" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Dh933038kxxphDJOly74" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/0JItQcwdCnhL2eXzAXu7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/sRL4mcDMYFyN9tlRj28N" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/tlGAGA6STT5WnklD2XlF" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wdGHvp3NZE2diEcFZ4JJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/vIp0SqEbegI6x27WcpDU" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Ob0kFmIiBODaRrD0YCHI" alt=""><figcaption></figcaption></figure>

**Functional colors**

<figure><img src="/files/qginiujAsHlFGk1Am1un" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/PFR4sUzCxLoe4RzvN4m9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1KDQPpq2garBakirU8UU" alt=""><figcaption></figcaption></figure>

## Usage <a href="#usage" id="usage"></a>

The Aragon Gradient (AragonBlue + AragonTurquoise) is used to convey the most relevant action on the page as well as statuses in Aragon UI. We use it for the primary buttons and selected and active states in various components.

## Branded <a href="#branded" id="branded"></a>

Primary colors are used to emphasize primary buttons, interactive areas, component states, and progress indicators.

<figure><img src="/files/FtgAjUC1sE1RIDS28iti" alt=""><figcaption></figcaption></figure>

## Interface <a href="#interface" id="interface"></a>

Base theme colors are used to visualize all UI objects: typography, backgrounds, iconography, etc.

<figure><img src="/files/0VgTWVwhF11vhuGahplL" alt=""><figcaption></figcaption></figure>

## Contextual <a href="#contextual" id="contextual"></a>

Functional colors are used to convey the current status of the interface: primary objects include contextual buttons, help and feedback objects, transient elements, etc.

<figure><img src="/files/r2SByzSRBzGFGW1Ax3vO" alt=""><figcaption></figcaption></figure>

## Aesthetics <a href="#aesthetics" id="aesthetics"></a>

Additional colors are used for data visualization, illustrations, and iconography.

<figure><img src="/files/TGszyo6OiM215NbM36zt" alt=""><figcaption></figcaption></figure>


---

# 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://legacy-docs.aragon.org/developers/tools/aragonds/guidelines/color.md?ask=<question>
```

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.