Patterns

2.6.15

Colors

 Anchor  

Color Combinations

Headings

light background Text
Hyperlinks

Headings

mid background Text
Hyperlinks

Headings

primary background Text
Hyperlinks

Headings

dark background Text
Hyperlinks

These utilities manage the color properties of various elements including text, background, hyperlinks, inputs, and checkboxes. The combinations are tested for adequate contrast following the distinguishably guideline of the Web Content Accessibility Guidelines (WCAG) AA standard. Hyperlinks are underlined to accommodate color blindness to avoid solely relying on color to distinguish them. WCAG AA compliance depends on the base text size. The examples may not be fully compliant because their font-size is set to a smaller size.

 Anchor  

Color Utilities

navy
Value
Background
Text
Border
navy 70t
Value
Background
Text
Border
navy 50t
Value
Background
Text
Border
navy 30t
Value
Background
Text
Border

blue

blue
Value
Background
Text
Border
blue 70t
Value
Background
Text
Border
blue 50t
Value
Background
Text
Border
blue 30t
Value
Background
Text
Border
blue 20t
Value
Background
Text
Border
blue 10t
Value
Background
Text
Border

red

red
Value
Background
Text
Border
red 70t
Value
Background
Text
Border
red 50t
Value
Background
Text
Border
red 30t
Value
Background
Text
Border

grey

grey
Value
Background
Text
Border
grey 70t
Value
Background
Text
Border
grey 50t
Value
Background
Text
Border
grey 30t
Value
Background
Text
Border
grey 20t
Value
Background
Text
Border

white

white
Value
Background
Text
Border
white 70t
Value
Background
Text
Border
white 50t
Value
Background
Text
Border
white 30t
Value
Background
Text
Border

marigold

marigold
Value
Background
Text
Border
marigold 70t
Value
Background
Text
Border
marigold 50t
Value
Background
Text
Border
marigold 30t
Value
Background
Text
Border

pink

pink
Value
Background
Text
Border
pink 70t
Value
Background
Text
Border
pink 50t
Value
Background
Text
Border
pink 30t
Value
Background
Text
Border

green

green
Value
Background
Text
Border
green 70t
Value
Background
Text
Border
green 50t
Value
Background
Text
Border
green 30t
Value
Background
Text
Border

base

base black
Value
Background
Text
Border
base white
Value
Background
Text
Border

transparent

transparent
Value
Background
Text
Border

Color Utilities are enabled through Tailwindcss. The background, text, and border color can be set for the static, hover, and responsive states of any element using the proper prefix below.

/* Background Color */
.bg-{{ color }}

/* Text Color */
.text-{{ color }}

/* Border Color */
.border-{{ color }}

/* Hover State (for the background property) */
.hover:bg-{{ color }}

/* Responsive State (for the background property) */
.{{ variant }}:bg-{{ color }}

More details about the configuration can be found in the Tailwindcss Utilities documentation.

 Anchor  

Figma Color Styles

The Figma file above contains color styles for use in UI designs and prototypes.