Neutral400#141414
Neutral90#737475
Blue400#2270ee
Neutral0#ffffff
Neutral10#fcfcfc
Neutral40#f5f5f5
Neutral60#dfe0e1
Neutral300#2d2e31
Blue400#2270ee
Neutral50#eeeeee
Red500#e63717
Red400#f94d32
Yellow400#ffc902
Green500#18a761
Blue400#2270ee
When using color, it is strongly encouraged to meet minimum contrast ratios with text and background colors. At minimum, text contrast should meet the WCAG 2.0 AA Large guidelines.
Black on White
Neutral90 on White
White on Blue400
Neutral90 on Neutral40
Neutral80 on White
White on Yellow
Black on Red400
Black on Blue400
Icons are able to be one color shade below the WCAG AA guidelines. This means that icons can be Neutral 80 on a white background. This should be avoided with icon-only interfaces and with small icons.
Hover states are typically one shade lighter on dark background colors, and one shade darker on light background colors.
A blue border is typically used to indicate both focus and active states.
In general, the disabled state is denoted with a 60% opacity applied to the element. It is also common for elements to be greyscaled.
Blue is used to denote primary and most interactive elements on the page.
Blue100#ecf4fd
Blue200#a9d1ff
Blue300#56a4ff
Blue400#2270ee
Blue500#1360d9
Blue600#004cc3
Neutral shades represent the foundation of interfaces. They are used to represent most a page's layout, information, and non-interactive elements.
Neutral0#ffffff
Neutral10#fcfcfc
Neutral20#fafafa
Neutral30#f7f7f7
Neutral40#f5f5f5
Neutral50#eeeeee
Neutral60#dfe0e1
Neutral70#bcbcbd
Neutral80#949596
Neutral90#737475
Neutral100#606162
Neutral200#444445
Neutral300#2d2e31
Neutral400#141414
Neutral500#040404
Red is used to indicate negative trends, critical/error messages, and destructive events. It should be used sparingly on high priority situations. Lower priority warnings should utilize yellow.
Red100#ffece9
Red200#ffb2a0
Red300#ff745f
Red400#f94d32
Red500#e63717
Red600#bf2a00