- Colors and icons,
- Primary color palette,
- Chart palette,
- Icons,
Search results
3.1 Primary color palette
- Avoid using hex codes in CSS; instead, refer to this page and use the SCSS variable referenced below.
Lumere blue
$brand-primary
Lumere dark blue
$state-primary-darker-bg-color
Lumere light blue
$state-info-bg-color
Lumere yellow
$state-warning-bg-color
Lumere green
$state-success-bg-color
Lumere red
$state-danger-bg-color
Default buttons
$state-default-bg-color
Body text
$text-base
Muted text
$text-muted
Links
$anchor-tag-color
Visited links
$visited-anchor-tag-color
Borders and lines
$default-border-color
Page background
$background-white
Lumere gray 1
$lighter-gray
Lumere gray 2
$light-gray
Lumere gray 3
$gray
Lumere gray 4
$dark-gray
Lumere gray 5
$darker-gray
3.2 Chart palette
- Use the
primaryPaletteandsecondaryPaletteJavaScript constants to reference these colors. - Charts should cycle through this palette before repeating.
- Visualizations that rely on more than 20 colors should generally be avoided — find another way to represent individual data points.
- If a chart allows the user to toggle between two representations of the same data (e.g. view by Type or Brand), the
secondaryPaletteshould be used on the non-default representation. - Don't use the
secondaryPalettefor other purposes.
3.3 Icons
Our icons come in two flavors: Glyphicons and Iconic icons. Glyphicons do most of the heavy UI lifting, and Iconic icons are used when a more illustrative approach is desired, when a multicolor icon is needed, or in a few other circumstances (like in the left nav and in empty states).
Glyphicons reference: http://glyphicons.com/
Glyphicons class name reference
Glyphicon color classes
glyphicons-info
glyphicons-danger
glyphicons-default
glyphicons-success
glyphicons-primary
glyphicons-warning
Iconic reference: https://useiconic.com/