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.
Accesible: 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
Basic light theme
White
White
#000000
Baby Blue
Baby Blue
#F9FAFC
Grey scale
Grey
Grey Basic
Grey Basic
#DDE4E9
Grey Light
Grey Light
#C4CDD5
Grey
Grey
#C8D7EA
Grey Medium
Grey Medium
#637381
Grey Dark
Grey Dark
#212B36
Primary colors
Aragon Blue
Aragon Blue Light
Aragon Blue Light
#95ECFF
Aragon Blue
Aragon Blue
#08BEE5
Aragon Blue Dark
Aragon Blue Dark
#0792AF
Aragon Turquoise
Aragon Turquoise Light
Aragon Turquoise Light
#9CF7F3
Aragon Turquoise
Aragon Turquoise
#3FE8E0
Aragon Turquoise Dark
Aragon Turquoise Dark
#26B4AD
Secondary colors
Purple
Purple Light
Purple Light
#95ECFF
Purple
Purple
#08BEE5
Purple Dark
Purple Dark
#0792AF
Blue
Blue Light
Blue Light
#9CF7F3
Blue
Blue
#3FE8E0
Blue Dark
Blue Dark
#26B4AD
Green
Green Light
Green Light
#9CF7F3
Green
Green
#3FE8E0
Green Dark
Green Dark
#26B4AD
Yellow
Yellow Light
Yellow Light
#9CF7F3
Yellow
Yellow
#3FE8E0
Yellow Dark
Yellow Dark
#26B4AD
Coral
Coral Light
Coral Light
#9CF7F3
Coral
Coral
#3FE8E0
Coral Dark
Coral Dark
#26B4AD
Brown
Brown Light
Brown Light
#9CF7F3
Brown
Brown
#3FE8E0
Brown Dark
Brown Dark
#26B4AD
Pink
Pink Light
Pink Light
#9CF7F3
Pink
Pink
#3FE8E0
Pink Dark
Pink Dark
#26B4AD
Green Olive
Green Olive Light
Green Olive Light
#E4F577
Green Olive
Green Olive
#BDD237
Green Olive Dark
Green Olive Dark
#87981B
Functional colors
Mint Green
Mint Green Light
Mint Green Light
#87F1CB
Mint Green
Mint Green
#2CC68F
Mint Green Dark
Mint Green Dark
#1B8962
Orange
Orange Light
Orange Light
#FFD48C
Orange
Orange
#2CC68F
Orange Dark
Orange Dark
#C7871E
Red
Red Light
Red Light
#FFB1B1
Red
Red
#FF6969
Red Dark
Red Dark
#CA4141
Usage
The Aragon Gradient (AragonBlue + AragonTurquoise) is used to convey the most relevant action in 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.
