Root Design System

Styles & Components

Brand

Logo Mark

Logo Mark

Typography

H0

Extra Large Title

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

Heading 6

subheading

Sub-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.

Paragraph

Lorem ipsum dolor sit amet

Text

Lorem ipsum dolor sit amet

Block Quote

Link

Lorem ipsum dolor sit amet

Meta

Buttons

Grids

1-Column Grid

2-Column Grid

4-Column Grid

Grid List

Colors

0 (White)

#FFFFFF

1,000 (Black)

#000000

Grey-50

#F8F8F8

Grey-100

#E3E3E3

Grey-200

#C7C7C7

Grey-300

#AAAAAA

Grey-400

#8E8E8E

Grey-500

#727272

Grey-600

#5B5B5B

Grey-700

#444444

Grey-800

#2E2E2E

Grey-900

#171717

Accent-50

#F5FAFE

Accent-100

#D9EBFC

Accent-200

#B3D7F9

Accent-300

#8DC3F5

Accent-400

#67AFF2

Accent-500

#419BEF

Accent-600

#347CBF

Accent-700

#275D8F

Accent-800

#1A3E60

Accent-900

#0D1F30

Padding & Margin

16px Padding

24px Padding

32px Padding

40px Padding

48px Padding

Margin Top 0

Margin Bottom 0

Margin Right 0

Margin Left 0

Margin Vertical 0

Margin Horizontal 0

Spacers & Dividers

8px Spacer

16px Spacer

24px Spacer

32px Spacer

40px Spacer

48px Spacer

56px Spacer

64px Spacer

72px Spacer

80px Spacer

88px Spacer

96px Spacer

Text Divider

16px Divider

24px Divider

48px Divider

Flex Box

Heading

Horizontal; Align Top; Justify Left

Heading

Horizontal; Align Top; Justify Center

Heading

Horizontal; Align Top; Justify Right

Heading

Horizontal; Align Top; Justify Split

Heading

Horizontal; Align Center; Justify Left

Heading

Horizontal; Align Center; Justify Center

Heading

Horizontal; Align Center; Justify Right

Heading

Horizontal; Align Center; Justify Split

Heading

Horizontal; Align Bottom; Justify Left

Heading

Horizontal; Align Bottom; Justify Center

Heading

Horizontal; Align Bottom; Justify Right

Heading

Horizontal; Align Bottom; Justify Split

Heading

Horizontal; Align Stretch; Justify Left

Heading

Horizontal; Align Stretch; Justify Center

Heading

Horizontal; Align Stretch; Justify Right

Heading

Horizontal; Align Stretch; Justify Split

Heading

Vertical; Align Left; Justify Top

Heading

vertical; Align left; Justify Center

Heading

vertical; Align left; Justify bottom

Heading

vertical; Align left; Justify Split

Heading

Vertical; Align Center; Justify Top

Heading

Vertical; Align Center; Justify Center

Heading

Vertical; Align Center; Justify Bottom

Heading

Vertical; Align Center; Justify Split

Heading

Vertical; Align Right; Justify Top

Heading

Vertical; Align Right; Justify Center

Heading

Vertical; Align Right; Justify Bottom

Heading

Vertical; Align Right; Justify Split

Heading

Vertical; Align Stretch; Justify Top

Heading

Vertical; Align Stretch; Justify Center

Heading

Vertical; Align Stretch; Justify Bottom

Heading

Vertical; Align Stretch; Justify Split