Patterns

Skip to main content
1.7.0

Colors

Color Combinations 

.color-light-background
.color-mid-background
.color-dark-background
primary button Text
.color-primary-button
secondary button Text
.color-secondary-button

Color Utilities

You can use every color as a utility class for static and hover states. These are the prefixes that are available;

bg-{ color } = Background color

text-{ color } = Text color

border-{ color } = Border color

Refer to Tailwind CSS docs for full details on using color utilities and hover: states.

primary-navy
primary-navy-70t
primary-navy-50t
primary-navy-30t
primary-blue
primary-blue-70t
primary-blue-50t
primary-blue-30t
primary-red
primary-red-70t
primary-red-50t
primary-red-30t
secondary-grey
secondary-grey-70t
secondary-grey-50t
secondary-grey-30t
secondary-white
secondary-white-70t
secondary-white-50t
secondary-white-30t
secondary-orange
secondary-orange-70t
secondary-orange-50t
secondary-orange-30t
secondary-pink
secondary-pink-70t
secondary-pink-50t
secondary-pink-30t
base-black
base-white