Fonts & Sizes


Font Map
Element / Class Sample Font Size
.giga

Optum Sans Regular

64px
.mega

Optum Sans Regular

48px
h1, .alpha

Optum Sans Regular

40px
h2, .beta

Optum Sans Regular

36px
h3, .gamma

Optum Sans Regular

30px
h4, .delta

Optum Sans Regular

23px
h5, .epsilon

Optum Sans Regular

20px
h6, .zeta

Optum Sans Regular

18px
.subhead

Optum Sans Regular

16px
.subhead--small

Optum Sans Regular

20px
Default .body-text

Open Sans

15px
.body-text-small

Open Sans

13px
.caption

Optum Sans Regular

13px
.ul-style

Optum Sans Regular

12px
.ol-style

Optum Sans Bold

13px
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.

Colors


Core Colors

Main DMP color mappings.

Undefined

@undefined-color

White

@white

Off White (trans)

@off-white-transparent

Off White

@off-white

Gray Lighter

@gray-lighter

Gray Light

@gray-light

Gray

@gray

Gray Dark

@gray-dark

Gray Darker

@gray-darker

Off Black

@off-black

Black

@black

Brand Colors

Brand Primary

@primary-brand

Brand Primary - alt

@primary-brand-alt

Brand Secondary

@secondary-brand

Brand Secondary - alt

@secondary-brand-alt

Brand Tertiary

@tertiary-brand

Brand Tertiary - alt

@tertiary-brand-alt

Accent 1

@accent-color-1

Accent 1 - alt

@accent-color-1-alt

Accent 2

@accent-color-2

Accent 2 - alt

@accent-color-2-alt

Accent 3

@accent-color-3

Accent 3 - alt

@accent-color-3-alt

Accent 4

@accent-color-4

Accent 4 - alt

@accent-color-4-alt

Control Colors

@error-color

@success-color

@warning-color

@info-color

Extra Colors – Not in Use

@optum__gold-dark

@optum__navy

@optum__navy-dark

Buttons

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
.oi-health-plan-benefits
(was: .oi-health-plans)
.oi-people-employers
(was: .oi-employers)
.oi-government
.oi-family
(was: .oi-individuals-families)
.oi-life-sciences
.oi-provider
(was: .oi-providers)

General Icons

Class name Example
.oi-achievement
.oi-alert
.oi-allergies
.oi-ambulance
.oi-arrow-down
.oi-arrow-up
.oi-asterisk
.oi-attach
.oi-awards
.oi-back
.oi-blood-pressure
.oi-bookmark
.oi-blog
(see .oi-reviews)
.oi-box-close
.oi-box-open
.oi-brightness
.oi-calendar
.oi-carb-counting
.oi-caution
.oi-chat
.oi-clinical-overview
.oi-clock
.oi-cloud
.oi-coaching
.oi-column-chart
.oi-rows-chart
.oi-communicate
.oi-computer
.oi-consent
.oi-consent-no
.oi-contacts
.oi-coverage
.oi-credit-card
.oi-customer-services
.oi-dental-exam
.oi-direct-mail
.oi-document
(was .oi-document-cta)
.oi-doc-copy
.oi-doc-copy-no
.oi-doc-search
.oi-download
.oi-edit-personalize
.oi-email
.oi-email-have-mail
.oi-email-reply
.oi-email-reply-all
.oi-email-forward
.oi-email-empty-trash
.oi-email-full-trash
.oi-emotional-health
.oi-error
.oi-export
.oi-eye-exam
.oi-filter
.oi-finances
.oi-flagged-item
(also .oi-flag)
.oi-folder-closed
.oi-folder-open
.oi-forward-doc
.oi-forward
.oi-full-screen
.oi-glucose
.oi-go-green
.oi-guide
.oi-haz-mat
.oi-health
.oi-help
.oi-history
.oi-home
.oi-hospitals-clinics
.oi-import
.oi-individual
.oi-info-tooltips
.oi-lab-results
.oi-landline
.oi-line-chart
.oi-line-chart-isolated
.oi-like
.oi-link
.oi-link-broken
.oi-list
.oi-location
.oi-lock
.oi-make-claim
.oi-menu
.oi-minimize-screen
.oi-mobile
.oi-my-health-stats
(see .oi-computer)
.oi-new
.oi-new-window
.oi-no
.oi-nurseline
.oi-nutrition
.oi-oral-medication
.oi-overdue
.oi-partnership
.oi-pdf
.oi-pharmacy
.oi-pie-chart
.oi-pin
.oi-playback-forward
.oi-playback-reverse
.oi-playback-fast-forward
.oi-playback-fast-reverse
.oi-plus
.oi-population
.oi-power
.oi-print
.oi-profile
(see .oi-individual)
.oi-redo
.oi-refresh-running
.oi-reimburse
.oi-results
.oi-reviews
.oi-save
.oi-search
.oi-secure
.oi-settings
.oi-share
.oi-sort
.oi-sort-drag
.oi-sms-texting
.oi-stacked-rows
.oi-stacked-rows-100
.oi-stacked-rows-vert
.oi-stacked-rows-vert-100
.oi-star
.oi-star-filled
.oi-success
.oi-syringe
.oi-thermometer
.oi-trash
(see .oi-email-empty-trash)
.oi-trash-full
(see .oi-email-full-trash)
.oi-tools
.oi-undo
.oi-unlock
.oi-upload
.oi-video
.oi-vitals
.oi-volunteering
.oi-walking
.oi-weight-loss
.oi-wellness
.oi-wifi
.oi-work
.oi-workers-comp
.oi-xray
.oi-yes
.oi-zoom-in
.oi-zoom-out