Color Utilities

Table of contents

  1. Leitmotiv Brand Colors
  2. Light Greys
  3. Dark Greys
  4. Purples
  5. Blues
  6. Greens
  7. Yellows
  8. Reds

All the colors used in this website have been systematized into a series of variables that have been extended to both font color and background color utility classes.

Leitmotiv Brand Colors

Color valueFont color utilityBackground color utility
leitmotiv-dark.text-leitmotiv-dark.bg-leitmotiv-dark
leitmotiv-light.text-leitmotiv-light.bg-leitmotiv-light

Light Greys

Color valueFont color utilityBackground color utility
grey-lt-000.text-grey-lt-000.bg-grey-lt-000
grey-lt-100.text-grey-lt-100.bg-grey-lt-100
grey-lt-200.text-grey-lt-200.bg-grey-lt-200
grey-lt-300.text-grey-lt-300.bg-grey-lt-300

Dark Greys

Color valueFont color utilityBackground color utility
grey-dk-000.text-grey-dk-000.bg-grey-dk-000
grey-dk-100.text-grey-dk-100.bg-grey-dk-100
grey-dk-200.text-grey-dk-200.bg-grey-dk-200
grey-dk-250.text-grey-dk-250.bg-grey-dk-250
grey-dk-300.text-grey-dk-300.bg-grey-dk-300

Purples

Color valueFont color utilityBackground color utility
purple-000.text-purple-000.bg-purple-000
purple-100.text-purple-100.bg-purple-100
purple-200.text-purple-200.bg-purple-200
purple-300.text-purple-300.bg-purple-300

Blues

Color valueFont color utilityBackground color utility
blue-000.text-blue-000.bg-blue-000
blue-100.text-blue-100.bg-blue-100
blue-200.text-blue-200.bg-blue-200
blue-300.text-blue-300.bg-blue-300

Greens

Color valueFont color utilityBackground color utility
green-000.text-green-000.bg-green-000
green-100.text-green-100.bg-green-100
green-200.text-green-200.bg-green-200
green-300.text-green-300.bg-green-300

Yellows

Color valueFont color utilityBackground color utility
yellow-000.text-yellow-000.bg-yellow-000
yellow-100.text-yellow-100.bg-yellow-100
yellow-200.text-yellow-200.bg-yellow-200
yellow-300.text-yellow-300.bg-yellow-300

Reds

Color valueFont color utilityBackground color utility
red-000.text-red-000.bg-red-000
red-100.text-red-100.bg-red-100
red-200.text-red-200.bg-red-200
red-300.text-red-300.bg-red-300