Style Guide

Living examples of available style, layout, and conventions for the wwwebsite.

Two column section

This one has a blockquote and shows off built-in text sizes.

Columns can have headers

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident

Structured content is fun

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Big words.

Medium words.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

Smaller words too.

OMG, header level four.

And even just bold body text.

Three Columns, Card Style

Sub-headers can be longer too, or include links. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

Lorem ipsum dolor

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.

Excepteur sint occaecat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voluptate velit esse

Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Four column section

With a summary.

FIRST COLUMN

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SECOND COLUMN

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

THIRD COLUMN

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

FOURTH COLUMN

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Typography

text-micro

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-micro

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

font-thin (100)

font-extralight (200)

font-light (300)

font-normal (400)

font-base (500)

font-medium (600)

font-semibold (700)

font-bold (800)

font-extrabold (900)

font-black (1000)

leading-none
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

leading-tight
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

leading-snug
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

leading-normal
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

leading-relaxed
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

leading-loose
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Width

Small

Medium

Large

Extra-large

Max Contained

Color Palette

bg-magenta

#EE0FD8

238, 15, 216

bg-yellow

#FFFD54

255, 253, 84

bg-mint

#BDF9DF

189, 249, 223

bg-hero-pink

#EF09F3

239, 9, 243

bg-green-800

#B6F309

182, 243, 9

bg-hero-cyan

#09F3E5

9, 243, 229

bg-orange-800

#F37A09

243, 122, 9

bg-teal

#43BDA7

67, 189, 167

bg-blue-100

#5DD2FA

93, 210, 250

bg-green-500

#2AF409

42, 244, 9

bg-green-900

#DEFFD9

222, 255, 217

bg-benefits-1

#CBED83

203, 237, 131

bg-green-600

#83EDBF

131, 237, 191

bg-benefits-3

#83E0ED

131, 224, 237

bg-benefits-4

#83AEED

131, 174, 237

bg-lavender

#EBE2F9

235, 226, 249

bg-lavenderlight

#FBF8FF

251, 248, 255

bg-peach

#FFF1CC

255, 241, 204

bg-lime

#ECFFB6

236, 255, 182

bg-robin

#C3F0FF

195, 240, 255

bg-lemon

#F8F7B3

248, 247, 179

bg-magentaPill

#EA38A6

234, 56, 166

bg-red

#EC4B29

236, 75, 41

bg-teal

#66BBA9

102, 187, 169

bg-melon

#F7BDBF

247, 189, 191

Buttons

Signup Form

Having trouble? Let us know.

Customized Form

Do you really need more reasons?

Having trouble? Let us know.

Featured Media Section

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dimmed text --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header 2

Header 3

Header 4

Left side media (thin)

You can do links

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons too

Wide container

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.