Palettes

Black

ac-black

ac-nav-black

grey

grey-0

grey-1

grey-2

grey-3

grey-4

grey-5

grey-6

grey-7

ac-yellow

ac-yellow-0

ac-yellow-1

ac-yellow-2

ac-yellow-3

ac-yellow-4

ac-yellow-5

ac-yellow-6

ac-yellow-7

ac-blue

ac-blue-0

ac-blue-1

ac-blue-2

ac-blue-3

ac-blue-4

ac-blue-5

ac-blue-6

ac-blue-7

ac-teal

ac-teal-0

ac-teal-1

ac-teal-2

ac-teal-3

ac-teal-4

ac-teal-5

ac-teal-6

ac-teal-7

ac-violet

ac-violet-0

ac-violet-1

ac-violet-2

ac-violet-3

ac-violet-4

ac-violet-5

ac-violet-6

ac-violet-7

ac-magenta

ac-magenta-0

ac-magenta-1

ac-magenta-2

ac-magenta-3

ac-magenta-4

ac-magenta-5

ac-magenta-6

ac-magenta-7

ac-bluegrey

ac-bluegrey-0

ac-bluegrey-1

ac-bluegrey-2

ac-bluegrey-3

ac-bluegrey-4

ac-bluegrey-5

ac-bluegrey-6

ac-bluegrey-7

ac-green

ac-green-0

ac-green-1

ac-green-2

ac-green-3

ac-green-4

ac-green-5

ac-green-6

ac-green-7

ac-red

ac-red-0

ac-red-1

ac-red-2

ac-red-3

ac-red-4

ac-red-5

ac-red-6

ac-red-7

ac-orange

ac-orange-0

ac-orange-1

ac-orange-2

ac-orange-3

ac-orange-4

ac-orange-5

ac-orange-6

ac-orange-7

Utility classes

Background

<div class="ch-bg--ac-black">AC Black</div>
<div class="ch-bg--ac-nav-black">AC Nav Black</div>
<div class="ch-bg--[
  grey
  ac-yellow, 
  ac-blue, 
  ac-teal, 
  ac-violet, 
  ac-magenta, 
  ac-bluegrey, 
  ac-green, 
  ac-red, 
  ac-orange
]-[0-7]">Background tints</div>

Text

AC Black

Black

White

Grey

Yellow

Blue

Teal

Violet

Magenta

Bluegrey

Green

Red

Orange

Pricing text

Link text

<span class="ch-color--ac-black">AC Black</span>
<span class="ch-color--black">Black</span>
<span class="ch-color--white">White</span>
<span class="ch-color--[
  grey
  ac-yellow, 
  ac-blue, 
  ac-teal, 
  ac-violet, 
  ac-magenta, 
  ac-bluegrey, 
  ac-green, 
  ac-red, 
  ac-orange
]-[0-7]">Text colour tints</span>
<span class="ch-color--ac-pricing">Pricing text</span>
<span class="ch-color--link">Link text</span>

Text hover

<span class="hover:ch-color--ac-black">Hover AC Black</span>
<span class="hover:ch-color--[
  grey
  ac-yellow, 
  ac-blue, 
  ac-teal, 
  ac-violet, 
  ac-magenta, 
  ac-bluegrey, 
  ac-green, 
  ac-red, 
  ac-orange
]-[0-7]">Text hover utilities</span>

Border

.ch-bc--ac-black

.ch-bc--black

.ch-bc--white

.ch-bc--grey

.ch-bc--ac-yellow

.ch-bc--ac-blue

.ch-bc--ac-teal

.ch-bc--ac-violet

.ch-bc--ac-magenta

.ch-bc--ac-green

.ch-bc--ac-bluegrey

.ch-bc--ac-red

.ch-bc--ac-orange

<span class="ch-ba--1 ch-bc--ac-black">AC Black border</span>
<span class="ch-ba--1 ch-bc--black">Black border</span>
<span class="ch-ba--1 ch-bc--white">White border</span>
<span class="ch-ba--1 ch-bc--[
  grey
  ac-yellow, 
  ac-blue, 
  ac-teal, 
  ac-violet, 
  ac-magenta, 
  ac-bluegrey, 
  ac-green, 
  ac-red, 
  ac-orange
]-[0-7]">Border utilties</span>