Color Guidelines
BodyText Colors
Default BodyText
Neutral400#141414
Subdued BodyText
Neutral90#737475
Link
Blue400#2270ee
Layout Colors
Page Background
Neutral0#ffffff
Alt Background
Neutral10#fcfcfc
Accent
Neutral40#f5f5f5
Border
Neutral60#dfe0e1
Global Header
Neutral300#2d2e31
Action Colors
Primary Action
Blue400#2270ee
Neutral Action
Neutral50#eeeeee
Negative Action
Red500#e63717
Status Colors
Critical
Red400#f94d32
Warning
Yellow400#ffc902
Success
Green500#18a761
Info
Blue400#2270ee
Contrast
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
Icon Exception
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.
Interactive States
Hover
Hover states are typically one shade lighter on dark background colors, and one shade darker on light background colors.
Active and Focus
A blue border is typically used to indicate both focus and active states.
Disabled
In general, the disabled state is denoted with a 60% opacity applied to the element. It is also common for elements to be greyscaled.
Primary Color Palette
Blue
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
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
System Colors
Red
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
Yellow
Yellow is used to indicate warnings that users should be aware of, but do not require immediate action.
Yellow100#fff9e2
Yellow200#fff0b1
Yellow300#ffe278
Yellow400#ffc902
Yellow500#ffbe00
Yellow600#de9500
Green
Green is used to indicate positive trends, success, and on states.
Green100#e1fdef
Green200#90efc0
Green300#60dfa6
Green400#1fbc70
Green500#18a761
Green600#10864b
Extended Colors
Extended colors give designers additional options in novel UI situations and visual design. These colors can be used to describe UI elements with many potential options (such as Avatars and Tags), in data visualizations, illustrations, and user generated content.
Blue Grey
Blue Grey can be used to give subtle distinction from neutrals and blues. It should not be used to indicate disabled states.
Blue-grey100#eaeff2
Blue-grey200#d0d8dd
Blue-grey300#b4c1c8
Blue-grey400#8c9ca5
Blue-grey500#6a7a85
Blue-grey600#576671
Orange
Orange100#fff2dc
Orange200#ffcc80
Orange300#ffa23a
Orange400#ff9116
Orange500#ee8400
Orange600#df7600
Cyan
Cyan can be used as an accent color in data visualizations and illustrations.
Cyan100#e3fcff
Cyan200#b1f3fa
Cyan300#13ceea
Cyan400#08bfdf
Cyan500#0ca5c0
Cyan600#038299
Purple
Purple can be used to denote info, particularly on non-interactive elements.
Purple100#f1edff
Purple200#c1b6f2
Purple300#8772e5
Purple400#6954c0
Purple500#4f3a9e
Purple600#422799
Magenta
Magenta can be used as an accent color in data visualizations and illustrations.
Magenta100#fbeaf5
Magenta200#faafe2