Fonts & Sizes
| 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 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
@link-color
@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 | link |
|
<a class="button button--email button--reverse">link</a>
<button class="button button--email button--reverse">button</button> |
Email button reverse | link |
|
<a class="button button--email button--transparent">link</a>
<button class="button button--email button--transparent">button</button> |
Email button transparent | link |
|
<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 | link |
|
<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 | link |
|
<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 | link |
|
<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 |
|
Top