Style Guide

Typography

Headings, body, and other font text.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
Tagline
Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.
Large text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.
Small text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.
Small text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Colors

A complete color swatch
used to color all interface
elements on the website.
Primary
#0c2dae
Primary 80
#2442b6
Primary 40
#6d81ce
Primary 10
#e6e9f6
Secondary
#52c5ae
Secondary 80
#74d0be
Secondary 40
#a8e2d6
Secondary 10
#edf9f6
Info
#bbdefb
Success
#c8e6c9
Warning
#ffe0b2
Error
#f8bbd0
Neutral Default
#000000
Neutral 80
#333333
Neutral 60
#666666
Neutral 40
#999999
Neutral 20
#dddddd
Neutral 15
#eeeeee
Neutral 10
#f4f4f4
Neutral 5
#fafafa
Neutral White
#ffffff

Spacing

A complete spacing guide
Selectors for padding, margin
and space below items
padding xl
padding large
padding medium
padding small
padding xs
margin xl
margin large
margin medium
margin small
margin xs
margin bottom xl
margin bottom large
margin bottom medium
margin bottom small
margin bottom xs

Buttons

Button styles and size variations use .c1-button for all buttons.  Add the classes under each button for different types and styles.
Primary Button
button-primary
Secondary Button
button-secondary
Primary Pill
button-primary button-pill
Secondary Pill
button-secondary button-pill
Outline Button
button-outline
Outline Pill
button-outline button-pill
OUtline Button
button-outline-light
Gradient Button
button-gradient
Two buttons inside a div
Primary Button
button-primary button-xl

Links & Tags

Top & Bottom Link
link-top-bottom
.c1-tag
.c1-tag-outline

Shadows & Border Radius

If you need an element to stand out you can add a shadow, rounded corners, or show image or containers as a circle.
box-shadow
rounded-corners

Backgrounds

Display elements with different backgrounds.
bg-light
bg-dark
bg-pattern

Images

Display images with effects.
normal image
muted image
black & white image

Cards & Callouts

Display elements with different backgrounds.

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Primary

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary

Callout Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

Callout Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

Callout Icon Box

Drag a button, link, or anything else into the icon box to place it below the text. Lorem ipsum dolor sit amet elit.

Callout 2

Drag a button, link, or anything else into the icon box to place it below the text.

Callout 2

Drag a button, link, or anything else into the icon box to place it below the text.

Icons

Display elements with different backgrounds.
icon-xl
icon-l
icon-m
icon-s
icon-xs

Heroes

Display elements with different backgrounds.

Hero Full Height

Hero XL

Hero Large

Hero Medium

twitterfacebookenvelopelinkedinhomemagic-wandheartstar-emptyenvelopegraduation-hatstorerocketarrow-right