Color

▼

Primary & core

Color Name Hex Token Background class Font class
Principal blue #0076CF $color-primary pds-color-bg-primary pds-color-font-primary
Admiral blue #0061A0 $color-core-1 pds-color-bg-core-1 pds-color-font-core-1
True blue #0091DA $color-core-2 pds-color-bg-core-2 pds-color-font-core-2
Navy blue #004C97 $color-core-3 pds-color-bg-core-3 N/A
Sky blue 1 #F0FBFE $color-core-4 pds-color-bg-core-4 N/A
Sky blue 2 #E3F5FD $color-core-5 pds-color-bg-core-5 N/A
Sky blue 3 #D2F1FD $color-core-6 pds-color-bg-core-6 N/A
Sky blue 4 #BBE6FC $color-core-7 pds-color-bg-core-7 N/A
Prussian blue #003865 $color-core-8 pds-color-bg-core-8 pds-color-font-core-8
Dark prussian blue #002855 $color-core-9 pds-color-bg-core-9 pds-color-font-core-9

Complementary

Color Name Hex Token Background class Font class
Maya blue #94D8FA $color-complementary-1 pds-color-bg-complementary-1 pds-color-font-complementary-1
Dark maya blue #62B5E5 $color-complementary-2 pds-color-bg-complementary-2 pds-color-font-complementary-2
Cyan #00C4D9 $color-complementary-3 pds-color-bg-complementary-3 pds-color-font-complementary-3
Ocean cyan #007FA3 $color-complementary-4 pds-color-bg-complementary-4 N/A
Dark ocean cyan #315470 $color-complementary-5 pds-color-bg-complementary-5 N/A

Neutrals

Color Name Hex Token Background class Font class
White #FFFFFF $color-neutral-white pds-color-bg-neutral-white pds-color-font-neutral-white
Gray 1 #333333 $color-neutral-1 pds-color-bg-neutral-1 pds-color-font-neutral-1
Gray 2 #616267 $color-neutral-2 pds-color-bg-neutral-2 pds-color-font-neutral-2
Gray 3 #9D9EA4 $color-neutral-3 pds-color-bg-neutral-3 N/A
Gray 4 #C5C6C5 $color-neutral-4 pds-color-bg-neutral-4 N/A
Gray 5 #E8E8E8 $color-neutral-5 pds-color-bg-neutral-5 N/A
Gray 6 #F6F6F8 $color-neutral-6 pds-color-bg-neutral-6 N/A
Gray 7 #FBFBFB $color-neutral-7 pds-color-bg-neutral-7 N/A

Util colors

To learn more about how to use interactive tint colors on the interactive affordances page.

Color Name Hex Description Token Background class Font class
Util success #00A29B Used to indicate success. Not to be used for text. $color-utility-success pds-color-bg-utility-success N/A
Util warning #F76800 Used to indicate a warning. Not to be used for text. $color-utility-warning pds-color-bg-utility-warning N/A
Util error #C00000 Used to indicate errors. $color-utility-error pds-color-bg-utility-error pds-color-font-utility-error
Principal blue 110 #005DB6 Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-primary-110 pds-color-bg-utility-primary-110 N/A
Principal blue 120 #00439C Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-primary-120 pds-color-bg-utility-primary-120 N/A
Admiral blue 110 #004887 Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-1-110 pds-color-bg-utility-core-1-110 N/A
Admiral blue 120 #002E6D Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-1-120 pds-color-bg-utility-core-1-120 N/A
Dark prussian 80 #335B88 Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-9-80 pds-color-bg-utility-core-9-80 N/A
Dark prussian 90 #1A426F Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-9-90 pds-color-bg-utility-core-9-90 N/A
Dark prussian 110 #000F3C Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-9-110 pds-color-bg-utility-core-9-110 N/A
Dark prussian 120 #000022 Only intended for use as an interactive tint. Do not use for other purposes. $color-utility-core-9-120 pds-color-bg-utility-core-9-120 N/A

Accent colors

Color Name Hex Token Background class Font class
Chartreuse #DCF94D $color-accent-1 pds-color-bg-accent-1 N/A
Bright cyan #55FFF5 $color-accent-2 pds-color-bg-accent-2 pds-color-font-accent-2

Data colors

Color Name Hex Token Background class Font class
Data orange #FFC82E $color-data-1 pds-color-bg-data-1 N/A
Data purple #9E8BFF $color-data-2 pds-color-bg-data-2 N/A

Gradients

Color Name Hex Token Background class Font class
Dark blue gradient N/A N/A pds-color-bg-dark-blue-gradient N/A
Principal blue gradient N/A N/A pds-color-bg-principal-blue-gradient N/A
Light blue gradient N/A N/A pds-color-bg-light-blue-gradient N/A

Icon

▼
Icon Name
area-chart
alert-circle
alert-triangle
arrow-down
arrow-left
arrow-right
arrow-up
arrow-norgie-down
arrow-norgie-up
bell
calculator
calendar
check-circle
check
chevron-down
chevron-left
chevron-right
chevron-up
chevrons-down
chevrons-left
chevrons-right
chevrons-up
clock
copy
corner-up-left
crop
delete
download
edit
edit-2
external-link
eye-off
eye
facebook
file
filter
flag
globe
heart
help-circle
home
info
line-chart
linkedin
list
loader
lock
magnifier
mail
map-pin
menu
message-square
minus
more-horizontal
paperclip
pause-circle
phone
play-circle
plus
printer
refresh-cw
refresh-ccw
security-badge
settings
share-2
share
star
star-half
thumbs-down
thumbs-up
trash-2
twitter
unlock
user-plus
user-x
user
users
x
youtube
zoom-in
zoom-out

Icon Fill

▼
Icon Name
heart
star

Icon Sized

▼
Icon Name
calendar

Typography

▼

FS Elliot Pro, regular

FS Elliot Pro, bold

H1 heading

Paragraph tag styled as H1

H2 heading

Paragraph tag styled as H2

Bold H3 heading

Paragraph tag styled as bold H3

H4 heading

Paragraph tag styled as H4

Bold H4 heading

Paragraph tag styled as bold H4

Bold H5 heading

Paragraph tag styled as bold H5

H6 heading

Paragraph tag styled as H6

Body text 1

Body text 1 bold

Body text 2

Body text 2 bold

Body text 3

Body text 3 bold

Body text 4

Body text 4 bold

Body text 5

Body text 5 bold

Title® put any type of typography elements in here and using a built in pds class on this container div.

Eyebrow 1
Eyebrow 2

Align left

Align center

Align right

Align end

Align initial

Align justify

Align start

Align unset

Simple paragraph tag

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices suscipit sem at euismod. Sed vitae lectus a augue elementum.

Util

▼
Name Values
.pds-util-center-block
  • display: block !important;
  • margin-left: auto !important;
  • margin-right: auto !important;
Name Values
.pds-util-flex
  • display: flex !important;
.pds-util-inline-flex
  • display: inline-flex !important;
.pds-util-inline
  • display: inline !important;
.pds-util-inline-block
  • display: inline-block !important;
.pds-util-table
  • display: table !important;
.pds-util-table-cell
  • display: table-cell !important;
.pds-util-table-row
  • display: table-row !important;
Name Values
.pds-util-flex-align-start
  • display: flex;
  • align-items: flex-start;
  • height: 100%;
.pds-util-flex-align-center
  • display: flex;
  • align-items: center;
  • height: 100%;
.pds-util-flex-align-end
  • display: flex;
  • align-items: flex-end;
  • height: 100%;
.pds-util-flex-none
  • flex: none !important;
Name Values
.pds-util-float-left
  • float: left;
.pds-util-float-right
  • float: right;
Name Values Description
.pds-util-focus-visible-only
  • outline: none !important;
 Adding this utility class provides a focus ring around an element on keyboard use for accessibility, but does not display the focus ring on click.
Name Values
.pds-util-image-circle
  • border-radius: 50% !important;
.pds-util-image-rounded
  • border-radius: 4px;
.pds-util-responsive-image
  • display: block;
  • width: 100%;
  • height: auto;
.pds-util-responsive-image-raster
  • max-width: 100%;
  • height: auto;
Name Values Description
.pds-util-list-spacing-4
  • margin-bottom: 4px;
 Margin bottom is not applied to the last child.
.pds-util-list-spacing-8
  • margin-bottom: 8px;
 Margin bottom is not applied to the last child.
Name Values
.pds-util-pos-rel
  • position: relative !important;
.pds-util-pos-abs
  • position: absolute !important;

Possible spacing values: 0 - 128

Name Values Breakpoint
.pds-util-margin-16
  • margin: 16px !important;
 Not applicable
.pds-util-margin-left-16
  • margin-left: 16px !important;
 Not applicable
.pds-util-margin-right-16
  • margin-right: 16px !important;
 Not applicable
.pds-util-margin-top-16
  • margin-top: 16px !important;
 Not applicable
.pds-util-margin-bottom-16
  • margin-bottom: 16px !important;
 Not applicable
.pds-util-margin-horz-16
  • margin-left: 16px !important
  • margin-right: 16px !important;
 Not applicable
.pds-util-margin-vert-16
  • margin-top: 16px !important
  • margin-bottom: 16px !important;
 Not applicable
.pds-util-padding-16
  • padding: 16px !important;
 Not applicable
.pds-util-padding-left-16
  • padding-left: 16px !important;
 Not applicable
.pds-util-padding-right-16
  • padding-right: 16px !important;
 Not applicable
.pds-util-padding-top-16
  • padding-top: 16px !important;
 Not applicable
.pds-util-padding-bottom-16
  • padding-bottom: 16px !important;
 Not applicable
.pds-util-padding-horz-16
  • padding-left: 16px !important;
  • padding-right: 16px !important;
 Not applicable
.pds-util-padding-vert-16
  • padding-top: 16px !important;
  • padding-bottom: 16px !important;
 Not applicable
.pds-util-margin-xs-16
  • margin: 16px !important;
 0
.pds-util-margin-left-sm-16
  • margin-left: 16px !important;
 375px
.pds-util-margin-right-md-16
  • margin-right: 16px !important;
 720px
.pds-util-margin-top-lg-16
  • margin-top: 16px !important;
 1024px
.pds-util-margin-bottom-xl-16
  • margin-bottom: 16px !important;
 1280px
.pds-util-margin-horz-xs-16
  • margin-left: 16px !important;
  • margin-right: 16px !important;
 0
.pds-util-margin-vert-sm-16
  • margin-top: 16px !important;
  • margin-bottom: 16px !important;
 375px
.pds-util-padding-xs-16
  • padding: 16px !important;
 0
.pds-util-padding-left-sm-16
  • padding-left: 16px !important;
 375px
.pds-util-padding-right-md-16
  • padding-right: 16px !important;
 720px
.pds-util-padding-top-lg-16
  • padding-top: 16px !important;
 1024px
.pds-util-padding-bottom-xl-16
  • padding-bottom: 16px !important;
 1280px
.pds-util-padding-horz-xs-16
  • padding-left: 16px !important
  • padding-right: 16px !important;
 0
.pds-util-padding-vert-sm-16
  • padding-top: 16px !important;
  • padding-bottom: 16px !important;
 375px
Name Values
.pds-util-vertical-align-top
  • vertical-align: top !important;
.pds-util-vertical-align-middle
  • vertical-align: middle !important;
.pds-util-vertical-align-bottom
  • vertical-align: bottom !important;