Fonts & Sizes

Font Map
Element / Class Sample Font Size

Optum Sans Regular


Optum Sans Regular

h1, .alpha

Optum Sans Regular

h2, .beta

Optum Sans Regular

h3, .gamma

Optum Sans Regular

h4, .delta

Optum Sans Regular

h5, .epsilon

Optum Sans Regular

h6, .zeta

Optum Sans Regular


Optum Sans Regular


Optum Sans Regular

Default .body-text

Open Sans


Open Sans


Optum Sans Regular


Optum Sans Regular


Optum Sans Bold

Font Family Variables
Font Name: Less Variable: Class:
Optum Sans Regular @fontLight .font-light
Optum Sans Regular @fontRegular .font-regular
Optum Sans Bold @fontBold <b> or <strong>
Open Sans @fontBody .body-text

Text in Use

Some text. Some strong text and bold text. Some italic and emphasised text. Some text with 2nd and o2. Some text that is a link.


Core Colors

Main DMP color mappings.





Off White (trans)


Off White


Gray Lighter


Gray Light




Gray Dark


Gray Darker


Off Black




Brand Colors

Brand Primary


Brand Primary - alt


Brand Secondary


Brand Secondary - alt


Brand Tertiary


Brand Tertiary - alt


Accent 1


Accent 1 - alt


Accent 2


Accent 2 - alt


Accent 3


Accent 3 - alt


Accent 4


Accent 4 - alt


Control Colors





Extra Colors – Not in Use





All buttons start with a basic default styling with the class of .button, and are extended using the BEM naming convention. Use multiple classes together to alter both size and color, as well as to disable a button.

Examples include both links (<a>) styled as buttons and native buttons (<button>). In general, a link should be used when the click action leads to a new destination; a button should be used if an action is performed (e.g. submit a form, open/close an accordion).

Tag Usage Example
<a class="button-link">button-link</a> button-link link
<a class="button-link button-link--reverse">link</a> button-link reverse link
<a class="button">link</a>

<button class="button">button</button>
Basic Button link
<a class="button button--reverse">link</a>

<button class="button button--reverse">button</button>
Basic Button Reverse link
<a class="button button--transparent">link</a>

<button class="button button--transparent">button</button>
Basic Button Transparent link
<a class="button button--disabled">link</a>

<button class="button button--disabled">button</button>
Add disabled style to any button link
<a class="button button--video">link</a>

<button class="button button--video">button</button>
Video button link
<a class="button button--video button--reverse">link</a>

<button class="button button--video button--reverse">button</button>
Video button reverse link
<a class="button button--video button--transparent">link</a>

<button class="button button--video button--transparent">button</button>
Video button transparent link
<a class="button button--list">link</a>

<button class="button button--list">button</button>
List button link
<a class="button button--list button--reverse">link</a>

<button class="button button--list button--reverse">button</button>
List button reverse link
<a class="button button--list button--transparent">link</a>

<button class="button button--list button--transparent">button</button>
List button transparent link
<a class="button button--download">link</a>

<button class="button button--download">button</button>
Download button link
<a class="button button--download button--reverse">link</a>

<button class="button button--download button--reverse">button</button>
Download button reverse link
<a class="button button--download button--transparent">link</a>

<button class="button button--download button--transparent">button</button>
Download button transparent link
<a class="button button--email">link</a>

<button class="button button--email">button</button>
Email button
<a class="button button--email button--reverse">link</a>

<button class="button button--email button--reverse">button</button>
Email button reverse
<a class="button button--email button--transparent">link</a>

<button class="button button--email button--transparent">button</button>
Email button transparent
<a class="button button--location">link</a>

<button class="button button--location">button</button>
Location button link
<a class="button button--location button--reverse">link</a>

<button class="button button--location button--reverse">button</button>
Location button reverse link
<a class="button button--location button--transparent">link</a>

<button class="button button--location button--transparent">button</button>
Location button transparent link
<a class="button button--lock">link</a>

<button class="button button--lock">button</button>
Lock button link
<a class="button button--lock button--reverse">link</a>

<button class="button button--lock button--reverse">button</button>
Lock button reverse link
<a class="button button--lock button--transparent">link</a>

<button class="button button--lock button--transparent">button</button>
Lock button transparent link
<a class="button button--podcast">link</a>

<button class="button button--podcast">button</button>
Podcast button link
<a class="button button--podcast button--reverse">link</a>

<button class="button button--podcast button--reverse">button</button>
Podcast button reverse link
<a class="button button--podcast button--transparent">link</a>

<button class="button button--podcast button--transparent">button</button>
Podcast button transparent link
<a class="button button--document">link</a>

<button class="button button--document">button</button>
Document button link
<a class="button button--document button--reverse">link</a>

<button class="button button--document button--reverse">button</button>
Document button reverse link
<a class="button button--document button--transparent">link</a>

<button class="button button--document button--transparent">button</button>
Document button transparent link
<a class="button button--large">link</a>

<button class="button button--large">button</button>
Large button link
<a class="button button--large button--reverse">link</a>

<button class="button button--large button--reverse">button</button>
Large button reverse link
<a class="button button--large button--transparent">link</a>

<button class="button button--large button--transparent">button</button>
Large button transparent link
<a class="button button--large button--video">link</a>

<button class="button button--large button--video">button</button>
Large video button link
<a class="button button--large button--video button--reverse">link</a>

<button class="button button--large button--video button--reverse">button</button>
Large video button reverse link
<a class="button button--large button--video button--transparent">link</a>

<button class="button button--large button--video button--transparent">button</button>
Large video button transparent link
<a class="button button--large button--list">link</a>

<button class="button button--large button--list">button</button>
Large list button link
<a class="button button--large button--list button--reverse">link</a>

<button class="button button--large button--list button--reverse">button</button>
Large list button reverse link
<a class="button button--large button--list button--transparent">link</a>

<button class="button button--large button--list button--transparent">button</button>
Large list button transparent link
<a class="button button--large button--download">link</a>

<button class="button button--large button--download">button</button>
Large download button link
<a class="button button--large button--download button--reverse">link</a>

<button class="button button--large button--download button--reverse">button</button>
Large download button reverse link
<a class="button button--large button--download button--transparent">link</a>

<button class="button button--large button--download button--transparent">button</button>
Large download button transparent link
<a class="button button--large button--email">link</a>

<button class="button button--large button--email">button</button>
Large email button
<a class="button button--large button--email button--reverse">link</a>

<button class="button button--large button--email button--reverse">button</button>
Large email button reverse
<a class="button button--large button--email button--transparent">link</a>

<button class="button button--large button--email button--transparent">button</button>
Large email button transparent
<a class="button button--large button--location">link</a>

<button class="button button--large button--location">button</button>
Large location button link
<a class="button button--large button--location button--reverse">link</a>

<button class="button button--large button--location button--reverse">button</button>
Large location button reverse link
<a class="button button--large button--location button--transparent">link</a>

<button class="button button--large button--location button--transparent">button</button>
Large location button transparent link
<a class="button button--large button--lock">link</a>

<button class="button button--large button--lock">button</button>
Large lock button link
<a class="button button--large button--lock button--reverse">link</a>

<button class="button button--large button--lock button--reverse">button</button>
Large lock button reverse link
<a class="button button--large button--lock button--transparent">link</a>

<button class="button button--large button--lock button--transparent">button</button>
Large lock button transparent link
<a class="button button--large button--podcast">link</a>

<button class="button button--large button--podcast">button</button>
Large podcast button link
<a class="button button--large button--podcast button--reverse">link</a>

<button class="button button--large button--podcast button--reverse">button</button>
Large podcast button reverse link
<a class="button button--large button--podcast button--transparent">link</a>

<button class="button button--large button--podcast button--transparent">button</button>
Large podcast button transparent link
<a class="button button--large button--document">link</a>

<button class="button button--large button--document">button</button>
Large document button link
<a class="button button--large button--document button--reverse">link</a>

<button class="button button--large button--document button--reverse">button</button>
Large document button reverse link
<a class="button button--large button--document button--transparent">link</a>

<button class="button button--large button--document button--transparent">button</button>
Large document button transparent link
<a class="button button--full-width">link</a>

<button class="button button--full-width">button</button>
Give any button 100% width. link

<a class="button button--primary">link</a>

<button class="button button--primary">button</button>

<a class="button button--primary button--reverse">link</a>

<button class="button button--primary button--reverse">button</button>
Primary call to action link link
<a class="button button--secondary">link</a>

<button class="button button--secondary">button</button>

<a class="button button--secondary button--reverse">link</a>

<button class="button button--secondary button--reverse">button</button>
Secondary call to action link link

Font Icons

IcoMoon Custom Icon

Icons may have more than one class name that can be used. Any icon with a (was: ) notation indicates a name change. The old name is maintained for backward compatability, but should not be used going forward. The old name has been manually added to the icomoon.less file.

Icons with a (see ) notation indicate that the class name has been manually added to the CSS. The actual icon name is at the "see" reference. Use of either class name is acceptable.

Segment Icons

Class name Example
(was: .oi-health-plans)
(was: .oi-employers)
(was: .oi-individuals-families)
(was: .oi-providers)

General Icons

Class name Example
(see .oi-reviews)
(was .oi-document-cta)
(also .oi-flag)
(see .oi-computer)
(see .oi-individual)
(see .oi-email-empty-trash)
(see .oi-email-full-trash)