Style Guide

Brand

Logo

Primary color

Blue/800
#1E40AF
.bg-primary-800

.text-primary-800

Blue/700
#1D4ED8
.bg-primary-700

.text-primary-700

Blue/600
#2563EB
.bg-primary-600

.text-primary-600

Blue/500
#3B82F6
.bg-primary-500

.text-primary-500

Blue/400
#60A5FA
.bg-primary-400

.text-primary-400

Blue/300
#93C5FD
.bg-primary-300

.text-primary-300

Blue/200
#BFDBFE
.bg-primary-200

.text-primary-200

Blue/100
#DBEAFE
.bg-primary-100

.text-primary-100

Blue/50
#EFF6FF
.bg-primary-50

.text-primary-50

Secondary color

Orange/600
#ea580c
.bg-secondary-500

.text-secondary-600

Orange/500
#f97316
.bg-secondary-500

.text-secondary-500

Orange/400
#fb923c
.bg-secondary-400

.text-secondary-400

Orange/200
#fed7aa
.bg-secondary-200

.text-secondary-200

Orange/100
#ffedd5
.bg-secondary-100

.text-secondary-100

Orange/50
#fff7ed
.bg-secondary-50

.text-secondary-50

Gray color

Turquoise/600
#ea580c
.bg-tetiary-500

.text-tertiry-600

Turquoise/500
#f97316
.bg-tertiary-500

.text-tertiary-500

Turquoise/400
#fb923c
.bg-tertiary-400

.text-tertiary-400

Turquoise/200
#fed7aa
.bg-tertiary-200

.text-secondary-200

Turquise/100
#ffedd5
.bg-tertiary-100

.text-secondary-100

Turquoise/50
#e6fefc
.bg-tertiary-50

.text-tertiary-50

Gray color

Gray/900
#111827
.bg-gray-900

.text-gray-900

Gray/800
#1f2937
.bg-gray-800

.text-gray-800

Gray/700
#374151
.bg-gray-700

.text-gray-700

Gray/500
#6B7280
.bg-gray-500

.text-gray-500

Gray/400
#9CA3AF
.bg-gray-400

.text-gray-400

Gray/300
#D1D5DB
.bg-gray-300

.text-gray-300

Gray/200
#E5E7EB
.bg-gray-200

.text-gray-200

Gray/100
#F3F4F6
.bg-gray-100

.text-gray-100

Gray/50
#F9FAFB
.bg-gray-50

.text-gray-50

Text color

.text-black

This is some text inside of a div block

.text-white

This is some text inside of a div block

Typography

Headings

.display - 64px | 4rem

Title .display

h1 - 48px | 3rem

Heading h1

h2 - 36px | 2.25rem

Heading h2

h3 - 30px | 1.875rem

Heading h3

h4 - 24px | 1.5rem

Heading h4

h5 - 20px | 1.25rem

Heading h5

h6 - 16px | 1rem

Heading h6

.h1 - 48px | 3rem

Heading .h1

.h2 - 36px | 2.25rem

Heading .h2

.h3 - 30px | 1.875rem

Heading .h3

.h4 - 24px | 1.5rem

Heading .h4

.h5 - 20px | 1.25rem

Heading .h5

.h6 - 16px | 1.25rem

Heading .h6

Paragraphs

.p1 - 20px | 1.25rem

This is some text inside of a div block .p1

p2 regular text - 16px | 1rem

This is some text inside of a div block

Elements

.eyebrow1 - 20px | 1.25rem

This is some text inside of a div block.

.eyebrow2 - 14px | 0.875rem

This is some text inside of a div block.

Sizes

.text-6xl - 48px | 3rem

This is some text inside of a div block .text-6xl

.text-5xl - 40px | 2.5rem

This is some text inside of a div block .text-5xl

.text-4xl - 36px | 2.25rem

This is some text inside of a div block .text-4xl

.text-3xl - 30px | 1.875rem

This is some text inside of a div block .text-3xl

.text-2xl - 24px | 1.5rem

This is some text inside of a div block .text-2xl

.text-xl - 20px | 1.25rem

This is some text inside of a div block .text-xl

.text-lg - 18px | 1.125rem

This is some text inside of a div block .text-lg

.text-base - 16px | 1rem - system <=> no class needed

This is some text inside of a div block .text-base

.text-sm - 14px | 0.875rem

This is some text inside of a div block .text-sm

.text-xs - 12px | 0.75rem

This is some text inside of a div block .text-xs

Sizes

.font-bold

This is some text inside of a div block.

Alignment

Text

.text-left

This is some text inside of a div block

.text-center

This is some text inside of a div block

.text-right

This is some text inside of a div block

Margin

.margin-align-left

This is some text inside of a div block

.margin-align-center

This is some text inside of a div block

.margin-align-right

This is some text inside of a div block

Flex alignment

.flex-h - horizontal - no spacing

Horizontally align child elements, no spacing

.flex-h-xs - 12px horizontal spacing

This is some text inside of a div block

.flex-h-base - 16px horizontal spacing

This is some text inside of a div block

.flex-h-2xl - 32px horizontal spacing

This is some text inside of a div block

.flex-h-4xl - 64px horizontal spacing

This is some text inside of a div block

.flex-v - vertical - no spacing

Vertically align child elements, no spacing

.flex-v-3xs - 4px spacing

Vertically align child elements, 4px | 0.25rem spacing

.flex-v-2xs - 8px spacing

Vertically align child elements, 8px | 0.5rem spacing

.flex-v-xs - 12px spacing

Vertically align child elements, 12px | 0.75rem spacing

.flex-v-sm - 14px spacing

Vertically align child elements, 14px | 0.875rem spacing

.flex-v-base - 16px spacing

Vertically align child elements, 16px | 1rem spacing

.flex-v-lg - 20px spacing

Vertically align child elements, 20px | 1.25rem spacing

.flex-v-xl - 24px spacing

Vertically align child elements, 24px | 1.5rem spacing

.flex-v-2xl - 32px spacing

Vertically align child elements, 32px | 2rem spacing

.flex-v-3xl - 48px spacing

Vertically align child elements, 48px | 3rem spacing

.flex-v-4xl - 64px spacing

Vertically align child elements, 64px | 4rem spacing

.align-left

This is some text inside of a div block

.align-center

This is some text inside of a div block

.align-right

This is some text inside of a div block

.justify-center

This is some text inside of a div block

.space-between

This is some text inside of a div block

Flex sizing

.flex-grow

This is some text inside of a div block

Icons

1. Go to fontawesome.com/icons/
2. Search for your desired icon
3. Copy the glyph
4. Paste it into the component settings as regular text





Shadows

.shadow-base

.shadow-md

.shadow-md:hover

.shadow-lg

.shadow-xl

Spacing

Vertical space, margin, padding

Spacer/3xs - 8px | 0.5rem

Spacer/2xs - 8px | 0.5rem

Spacer/xs - 12px | 0.75rem

Spacer/sm - 14px | 0.875rem

Spacer/base - 16px | 1rem

Spacer/lg - 20px | 1.25rem

Spacer/xl - 24px | 1.5rem

Spacer/2xl - 32px | 2rem

Spacer/3xl - 48px | 3rem

Spacer/4xl - 64px | 4rem

Spacer/5xl - 80px | 5rem

Spacer/6xl - 96px | 6rem

.m-0 | .my-0 | .mx-0 - 0px

.m-2xs | .my-2xs | .mx-2xs - 8px

.m-xs | .my-xs | .mx-xs - 12px

.m-sm | .my-sm | .mx-sm - 14px

.m-base | .my-base | .mx-base - 16px

.m-lg | .my-lg | .mx-lg - 20px

.m-xl | .my-xl | .mx-xl - 24px

.m-2xl | .my-2xl | .mx-2xl - 32px

.m-3xl | .my-3xl | .mx-3xl - 48px

.m-4xl | .my-4xl | .mx-4xl - 64px

.m-5xl | .my-5xl | .mx-5xl - 80px

.m-6xl | .my-6xl | .mx-6xl - 96px

.p-0 | .px-0 | .py-0 - 0px

.p-2xs | .px-2xs | .py-2xs - 8px

.p-xs | .px-xs | .py-xs - 12px

.p-sm | .px-sm | .py-sm - 14px

.p-base | .px-base | .py-base - 16px

.p-lg | .px-lg | .py-lg - 20px

.p-xl | .px-xl | .py-xl - 24px

.p-2xl | .px-2xl | .py-2xl - 32px

.p-3xl | .px-3xl | .py-3xl - 48px

.p-4xl | .px-4xl | .py-4xl - 64px

Widths

.max-width-640 - min 0, max 640px wide container

Where this is being used - to be added

.max-width-768 - min 0, max 768px wide container

Where this is being used - to be added

.max-width-825 - min 0, max 825px wide container

Where this is being used - to be added

Overflow

.overflow-hidden

Backgrounds

.bg-maze-01

.bg-maze-02

.bg-maze-03

.bg-curves-dark-blue-01

.bg-curves-dark-blue-02

.bg-curves-dark-blue-03

.bg-curves-blue-01

.bg-curves-blue-02

.bg-curves-gray-01

.bg-curves-gray-02

.bg-curves-orange-01

.bg-curves-orange-02