Neutral400#141414
Neutral90#737475
Blue500#0265dc
Neutral0#ffffff
Neutral10#fcfcfc
Neutral40#f5f5f5
Neutral60#dfe0e1
Neutral300#2d2e31
Blue500#0265dc
Neutral50#eeeeee
Red500#e13212
Red500#e13212
Yellow500#ffbe00
Green500#007a4d
Blue500#0265dc
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 Blue500
Neutral90 on Neutral40
Neutral80 on White
White on Yellow
Black on Red500
Black on Blue500
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#e0f2ff
Blue200#b5deff
Blue300#78bbfa
Blue400#3892f3
Blue500#0265dc
Blue600#004491
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