/Labs/

Color Cards

Color Card Treatments

Different styles for displaying color swatches on the palette detail page.

Selected: Quarters

Top half color, bottom split for role & hex

primary
#4A90B8
secondary-1
#6BB8C7
secondary-2
#8FC4A8
neutral-1
#E8F1F5
neutral-2
#7A8B94

All Treatments

Quarters

Top half color, bottom split for role & hex
primary
#4A90B8
secondary-1
#6BB8C7
secondary-2
#8FC4A8
neutral-1
#E8F1F5
neutral-2
#7A8B94

Quarters Equal

Fixed height with equal quarters
primary
#4A90B8
secondary-1
#6BB8C7
secondary-2
#8FC4A8
neutral-1
#E8F1F5
neutral-2
#7A8B94

Thirds

Color 2/3, info inline 1/3
primary#4A90B8
secondary-1#6BB8C7
secondary-2#8FC4A8
neutral-1#E8F1F5
neutral-2#7A8B94

Overlay

Text overlaid on color
primary
#4A90B8
secondary-1
#6BB8C7
secondary-2
#8FC4A8
neutral-1
#E8F1F5
neutral-2
#7A8B94

Compact

Horizontal layout
primary#4A90B8
secondary-1#6BB8C7
secondary-2#8FC4A8
neutral-1#E8F1F5
neutral-2#7A8B94

Minimal

Clean with glass info bar
primary#4A90B8
secondary-1#6BB8C7
secondary-2#8FC4A8
neutral-1#E8F1F5
neutral-2#7A8B94

Pill

Rounded with badge
primary
#4A90B8
secondary-1
#6BB8C7
secondary-2
#8FC4A8
neutral-1
#E8F1F5
neutral-2
#7A8B94

Stacked

Labeled sections
Role
primary
Hex#4A90B8
Role
secondary-1
Hex#6BB8C7
Role
secondary-2
Hex#8FC4A8
Role
neutral-1
Hex#E8F1F5
Role
neutral-2
Hex#7A8B94