Color System
Color distinguishes our brand and reinforces consistent experiences across UA websites.
Minerva's color system is based on a foundation of visual perception, inclusive design, and accessibility.
Color Semantics
Minerva assigns generic meanings to a subset of colors in order to set consistent expectations for users. These meanings are codified in design tokens and used throughout components.
Semantics can be used in a variety of ways to communicate meaning. Minerva's semantic meanings include informative, accent, negative, notice, and positive. Use semantic colors to clearly and predictably communicate with a component's appearance. When using color with semantic meaning, you must also display text or an icon in order to ensure the meaning is not lost for users who are unable to see or differentiate colors.
Contrast
Color contrast settings in Minerva allow sections of content stand out more from their surroundings.
Semantic color tokens change value depending on section based contrast. Select the contrast option below to see the changes in action. Generally speaking, you may only use colors of the same contrast setting together until you initiate a contrast change, such as a high contrast section, wherein all colors must be from that contrast family.
Accent colors do not change between contexts and are equal to the 500 index on their respective color scales.
Text colors
Background colors
Accent colors
--ua_color-accent--neutral
#757C88
--ua_color-accent--primary
#9E1B32
--ua_color-accent--info
#0070DD
--ua_color-accent--positive
#39A845
--ua_color-accent--negative
#DC8E0E
Full color system
This is a reference for the entire color system. Note that not every color is used in the Minerva CSS, for those see semantic colors above. It can still be useful to list the source color scales in case a developer needs access to a color outside of the semantic system.
Primary
The primary color palette is meant to be used as an accent to pull attention to specific elements.
Primary 50
#FCE4E9
Primary 100
#F8C2CD
Primary 200
#E87C90
Primary 300
#E5425E
Primary 400
#BE3047
Primary 500
#9E1B32
Primary 600
#821E2E
Primary 700
#70202C
Primary 800
#58232A
Primary 900
#421A20
Neutral
The neutral color palette is the primary source of backgrounds and text colors.
Neutral 50
#F2F3F4
Neutral 100
#DFE2E5
Neutral 200
#C6CBD0
Neutral 300
#ACB2BA
Neutral 400
#9097A0
Neutral 500
#757C88
Neutral 600
#5F646D
Neutral 700
#4A4C54
Neutral 800
#35363B
Neutral 900
#212124
Informative
The info color palette is reserved for bringing special attention to an element informative in nature. Meaning conveyed through color must also be accompanied by other visual indicators.
Info 50
#E8F2FC
Info 100
#CEE4F9
Info 200
#93C4F4
Info 300
#60AAF2
Info 400
#258BEF
Info 500
#0070DD
Info 600
#0058AC
Info 700
#003E78
Info 800
#012A4C
Info 900
#021B30
Positive
The positive color palette is reserved for bringing special attention to positive notices like a success indicator. Meaning conveyed through color must also be accompanied by other visual indicators.
Positive 50
#F0F5EF
Positive 100
#CDE9D3
Positive 200
#AADDB7
Positive 300
#87D09C
Positive 400
#64C480
Positive 500
#39A845
Positive 600
#308B3A
Positive 700
#23672B
Positive 800
#194B1F
Positive 900
#103514
Negative
The negative color palette is reserved for bringing special attention to negative notices and warnings. Meaning conveyed through color must also be accompanied by other visual indicators.
Negative 50
#FAF4E6
Negative 100
#F9E9C1
Negative 200
#F7D090
Negative 300
#F4B959
Negative 400
#ECA024
Negative 500
#DC8E0E
Negative 600
#C47511
Negative 700
#9C5506
Negative 800
#723900
Negative 900
#452000