Color

A collection of core brand colors often used across most projects. Global utility classes like the below are prefixed with u- for easier discovery. For the full list of brand colors see the official brand guidelines.

Primary colors

Click to copy HEX color to clipboard.

u-Bg-blue400 — #3B89FF
u-Bg-blue — #146EF5
u-Bg-blue600 — #0055D4
u-Bg-white — #ffffff
u-Bg-gray100 — #f0f0f0
u-Bg-gray200 — #D8D8D8
u-Bg-gray300 — #ABABAB
u-Bg-gray400 — #898989
u-Bg-gray500 — #757575
u-Bg-gray600 — #5A5A5A
u-Bg-gray700 — #363636
u-Bg-gray800 — #222222
u-Bg-gray900 — #171717
u-Bg-Black — #080808

Type colors

We use different grays depending on visibility and background.

  • Darkest gray on black while passing AA: #898989 .u-text-gray400

  • Lightest gray on white while passing AA: #757575 .u-text-gray500

  • Gray for paragraphs on black background: #D8D8D8 .u-text-gray200

  • Gray for paragraphs on white background: #D8D8D8 .u-text-gray600

Design. Build. Launch.
u-text-blue — #146ef5
Design. Build. Launch.
u-text-Black — #080808
Design. Build. Launch.
u-text-GRAY600 — #5a5a5a
Design. Build. Launch.
u-text-GRAY500 — #757575 (lightest gray on white)
Design. Build. Launch.
u-text-gray400 — #898989 (darkest gray on black)
Design. Build. Launch.
u-text-gray300 — #ABABAB
Design. Build. Launch.
u-text-gray200 — #D8D8D8
Design. Build. Launch.
u-text-white — #ffffff

Examples

Design. Build. Launch.

Large heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Design. Build. Launch.

Smaller heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Build

This is a card's title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Perhaps an author's name would go here?

design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.