Colors
#
Global system paletteAll text should be set either in Ink Black or Chalk White only. All of the text on color contrasts shown here have achieved the required AA accessibility rating. You should only use the combinations shown here when applying type to any composition.
#
Brand ColorsBlack Text
<p className="gr-brand-bg gr-white"> Black Text </p>
#
Neutral ColorsBlack Text
White Text
Black Text
White Text
<p class="gr-white-bg gr-black"> Black Text</p><p class="gr-black-bg gr-white"> White Text</p><p class="gr-light-grey-bg gr-black"> Black Text</p>
<p class="gr-dark-grey-bg gr-white"> White Text</p>
#
Accent Colors#
Light Accent ColorsBlack Text
Black Text
Black Text
<p class="gr-accent-one-light-bg"> Black Text </p> <p class="gr-accent-two-light-bg"> Black Text </p> <p class="gr-accent-three-light-bg"> Black Text </p>
#
Midtone Accent ColorsBlack Text
Black Text
Black Text
<p class="gr-accent-one-mid-bg"> Black Text </p>
<p class="gr-accent-two-mid-bg"> Black Text </p>
<p class="gr-accent-three-mid-bg"> Black Text </p>
#
Dark Accent ColorsWhite Text
White Text
White Text
<p class="gr-accent-one-dark-bg gr-white"> White Text</p>
<p class="gr-accent-two-dark-bg gr-white"> White Text</p>
<p class="gr-accent-three-dark-bg gr-white"> White Text</p>