Digital Design System

Color: Digital Only

Color provides visual hierarchy and brings attention to certain pieces of information. The digital color palette is derived from the WTW Primary Brand and is used with specific intent. Ultraviolet is the primary brand color and should be used as such.

All colors have been validated as to whether they pass WCAG 2.1 Level AA accessibility compliance and have been rated on White (#FFFFFF), Onyx (#2F2C31) and Ultraviolet (#7F35B2) to follow brand guideline styles.

Any deviation of color usage may result in inaccessible, illegible or unusable interfaces (and will be considered off-brand).

Color Palette Hierarchy

Jump to:


Primary Color Palette

Primary colors are used intentionally to relate the product to the WTW Primary Brand. The primary palette is found within main branding assets, such as the WTW logo, functional icons, and many other places through the site. WTW Ultraviolet is used to convey primary interactions and navigation active elements in a primary but limited way. Too much violet can overpower an interface and distract the user.

Primary Color Palette


Digital-Only Color Palette

These colors are specific to digital usage - they are not used in any non-digital assets.

In the digital space, we use Onyx as the main typographic color. Violet Mist is used as a line stroke or divider. Violet Mist Light is used in color blocks and card styles.

Digital-only Color Palette


Semantic Color Palette

These colors are only used as backgrounds for style elements or as decorative ornaments (e.g. within the Featured Callout module). They should never be used for text.

Semantic Color Palette

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #D124B8; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Fireworks Digital</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#D124B8</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">209, 36, 184</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-fireworks-digital </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #bc20a6; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Fireworks Digital-10</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#bc20a6</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">188, 32, 166</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-fireworks-digital </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #a71d93; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Fireworks Digital-20</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#a71d93</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">167, 29, 147</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-fireworks-digital </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #fae9f8; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Fireworks Light Digital-10</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#fae9f8</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">250, 233, 248</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-fireworks-light-digital-10 </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #f6d3f1; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Fireworks Light Digital-20</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#f6d3f1</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">246, 211, 241</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-fireworks-light-digital-20 </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #2F2C31; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Onyx</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#2F2C31</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">47, 44, 49</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-onyx </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #DDD8E0; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Violet Mist</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#DDD8E0</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">221, 216, 224</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-violet-mist </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #F1F0F2; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Violet Mist Light</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#F1F0F2</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">241, 240, 242</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-violet-mist-light </span></p>
    </div>
</div>

<div class="mb-3 col-3 d-inline-block border p-0 mr-2">
    <div class="wtw-color-swatch" style="background-color: #99909f; height: 50px"></div>
    <div class="color-swatch-wrapper p-2">
        <div class="heading-6">Violet Mist Dark</div>
        <p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#99909f</span></p>
        <p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">153, 144, 159</span></p>
        <p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-violet-mist-dark </span></p>
    </div>
</div>

UX and design intent is communicated in each atom, molecule, and organism. Do not deviate from the prescribed use.

Colors have been validated for accessibility.

  • Graphic elements that a user may need to perceive - e.g. charts/graphs - or elements with interaction (e.g. buttons, icons that are clickable) must achieve 3:1 contrast ratio
  • Large text (14pt or 19px bold, 18pt or 24px regular text) must achive 3:1 contrast ratio
  • Normal text (14pt or 19px regular text) must achieve 4.5:1 contrast ratio

Colors validated via WCAG Luminosity Contrast Checker.

wtwco.com uses color strictly in accordance with parameters defined in this style guide.