UI Style Guide

Click a section heading to expand.

Headings

Display XL

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body

Lorem ipsum dolor sit amet consectetur. Orci quis consequat iaculis convallis amet platea molestie scelerisque. Vitae mauris vel morbi rutrum risus vel.

Lorem ipsum dolor sit amet consectetur. Orci quis consequat iaculis convallis amet platea molestie scelerisque. Vitae mauris vel morbi rutrum risus vel. Varius tristique et volutpat commodo morbi egestas mauris tempor. Nunc mattis scelerisque est odio ut sit velit habitant congue.

Eyebrows

Eyebrow Large

Eyebrow Small

Colors

Primary Colors

Red

#E64247

Charcoal

#242021

Secondary Colors

Red (Secondary)

#AB484B

Blue

#77A6C1

Light Blue

#D0E1EE

Neutral Colors

Greige

#F7F3F1

White

#FFFFFF

Neutral 700

#423E3F

Neutral 500

#A6A2A3

Neutral 300

#ECE8E9

Neutral 100

#FCFAFB

Gradients

#E64247

#242021

#FCFAFB

#FFFFFF

Buttons

Buttons (Primary)

Default:

Small:

XL:

Icon:

Buttons (Secondary)

Default:

Small:

XL:

Icon:

Default Alt:

Small Alt:

XL Alt:

Icon Alt:

Default Dark:

Small Dark:

XL Dark:

Icon Dark:

Buttons (Tertiary)

Default:

Default Alt:

Tabs

Overview

UI Style Guide

Headings

Body

Eyebrows

Colors

Primary Colors

Secondary Colors

Neutral Colors

Gradients

Buttons

Buttons (Primary)

Buttons (Secondary)

Buttons (Tertiary)

Tabs

Icon Library