Fonts: Styles & Sizes

Note: The teal color is just used here as an accent color. The color of headings are contextually based.

H1 - Page Header

Helvetica Neue Light for IBM, 24px=1.500em

H2 - Card Header

Helvetica Neue Light for IBM, 18px=1.125em

H3 - ?

Helvetica Neue Light for IBM, 16px=1.000em

H4 - Section Header & Tab Headers

Helvetica Neue Light for IBM, 14px=0.875em

H5 - Table Header

Helvetica Neue Light for IBM, 12px=0.750em

Button Text (>2 words)

Helvetica Neue Light for IBM, 14px=0.875em

Button Text (<=2 words)

Helvetica Neue Bold for IBM, 14px=0.875em

Body A

Helvetica Neue Light for IBM, 12px=0.750em

Body B

Helvetica Neue Roman for IBM, 12px=0.750em

Fineprint

Helvetica Neue Light for IBM, 10px=0.625em

Colors: Primary

Colors: Navy-Grey Scale

Colors: Secondary/Accent Colors

Icons

Ace Icons

Service Provider Specific Icons

Nav Group


Forms

Buttons



Radio Buttons



Checkboxes



Select Boxes

Text Input

Tab Group

Toggle Switch

Code

This is code: cf curl --headers ...
This is a prompt
This is a system message...

Alerts

Awesome!!! This is a success alert message!
By the way, this is an info message. It's also dismisable!
Careful! This is a warning message. You should pay attention before something fails!
Woops! This is an error message. Something has failed miserably

Table

Device ID
User ID
Device Alias
Platform
1-10 of 300
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS
aa6596d976as76g 80846124919158943 Personal Phone iOS

Menu