styles

Color

Color tells people where they are, what they can do, and what needs their attention.

  • The palette has four groups: brand, surfaces, text and lines, and status.
  • w-primary is the one action color: links, primary buttons, selected states. Using it for decoration dilutes it.
  • Text and UI colors are used only in approved pairs, checked against WCAG AA. The pairs are listed under Applying.
  • Color never carries meaning alone: a status also has a word or an icon.

Groups

  • Brand: w-primary for actions, w-dark-primary for headings and dark sections, and the blues for illustrations, charts and accents.
  • Surfaces: page and container backgrounds, from white to w-lavender (selected or highlighted). w-platinum is for dividers.
  • Text and lines: w-black for body text, w-carbon and w-gray for secondary text, w-lightgray for decorative lines only.
  • Status: w-warning, w-danger and w-amaranth, for alerts, validation and badges.