Introduction | TrueUI

Atoms | Global

Colors

Primary

  • #3D464D
  • .charcoal
  • #0074D9
  • .blue
  • #50BE4C
  • .green
  • #FCDC7C
  • .yellow
  • #FF851B
  • .orange
  • #49C5CE
  • .teal
  • #FF4136
  • .red
  • #9C78B6
  • .purple

Variations

  • #262c31
  • .charcoal-dark
  • #f7f8f8
  • .charcoal-light
  • #0059A6
  • .blue-dark
  • #f2f9ff
  • .blue-light
  • #2e782c
  • .green-dark
  • #f5fbf4
  • .green-light
  • ##8f6c03
  • .yellow-dark
  • #fffdf9
  • .yellow-light
  • #b45400
  • .orange-dark
  • #fff2e7
  • .orange-light
  • #207177
  • .teal-dark
  • #eaf8f9
  • .teal-light
  • #cf0b00
  • .red-dark
  • #ffeae8
  • .red-light
  • #694682
  • .purple-dark
  • #f1ecf5
  • .purple-light

CSS

  • .charcoal
  • .charcoal-dark
  • .charcoal-light
  • .bg-charcoal
  • .bg-charcoal-dark
  • .bg-charcoal-light
  • .blue
  • .blue-dark
  • .blue-light
  • .bg-blue
  • .bg-blue-dark
  • .bg-blue-light
  • .green
  • .green-dark
  • .green-light
  • .bg-green
  • .bg-green-dark
  • .bg-green-light
  • .yellow
  • .yellow-dark
  • .yellow-light
  • .bg-yellow
  • .bg-yellow-dark
  • .bg-yellow-light
  • .orange
  • .orange-dark
  • .orange-light
  • .bg-orange
  • .bg-orange-dark
  • .bg-orange-light
  • .teal
  • .teal-dark
  • .teal-light
  • .bg-teal
  • .bg-teal-dark
  • .bg-teal-light
  • .red
  • .red-dark
  • .red-light
  • .bg-red
  • .bg-red-dark
  • .bg-red-light
  • .purple
  • .purple-dark
  • .purple-light
  • .bg-purple
  • .bg-purple-dark
  • .bg-purple-light

Usage Guidelines

Color

Typographic

Headlines, Paragraphs, etc.

User Interface

Buttons, headers, etc.

User Interface

Buttons, headers, etc.

Color Contrast

To follow Web Content Accessibility Guidelines and to make our product as readable as possible we should always try and to find the maximum amount of contrast in our color combinations. Use common sense. If you suspect the color contrast is too low it probably is. Some examples below:

Pictures In The Sky

Do

Pictures In The Sky

Don't

For more information: https://www.w3.org/TR/WCAG20/