Page cover image

Color

Colors

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

  • 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

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

Grey scale

Primary colors

Secondary colors

Functional colors

Usage

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

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

Interface

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

Contextual

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

Aesthetics

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

Last updated