Style Guide

Foundations
TypographyColors
Elements
ButtonsForms

Foundations

Typography

Headings

Typeface

Karma 300

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

H1

H1 - 3rem (48px) / 1.15 / 600
H1

H2

H2 - 2.5rem (40px) / 1.1 / 600
H2

H3

H3 - 2rem (32px) / 1.1 / 600
H3

H4

H4 - 1.5rem (24px) / 1.1 / 600
H4
H5
H5 - 1.25rem (20px) / 1.1 / 600
H5
H6
H6 - 1rem (16px) / 1.1 / 600
H6

Body

Typeface
Libre Franklin 300
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Large - 1.5rem (24px) / 1.5 / 400
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Base - 1rem (16px) / 1.5 / 400
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Small - 0.875rem (14px) / 1.5 / 400

Accent

Typeface
Ralyne 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Large - 1.5rem (24px) / 1.5 / Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Base - 1rem (16px) / 1.5 / Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Small - 0.875rem (14px) / 1.5 / Normal

Lists, Block Quotes, Links

  1. List Item 1
  2. List Item 2
  3. List Item 3
Ordered List - 1rem (16px) / 1.5 / 400
  • List Item 1
  • List Item 2
  • List Item 3
Unordered List - 1rem (16px) / 1.5 / 400
"The meaning of life is to find your gift. The purpose of life is to give it away."
Pablo Picasso
Block Quote - 1rem (16px) / 1.5 / 400
Text Link
Text Link - 1rem (16px) / 1.5 / 400
This is some text inside of a div block.
Link Block - 1rem (16px) / 1.5 / 400

Colors

Global Colors

Body Background Color
Body Text Color
Headings Color
Brand Color

Button Colors

Button Color
Button Hover Color
Button Text Color
Button Text Hover Color
Button Secondary Color
Button Secondary Hover Color
Button Secondary Text Color
Button Secondary Text Hover Color

Link Colors

Link Color
Link Hover Color
Nav Link Color
Nav Link Hover Color

Other

These apply to the background classes and you can use them however you'd like.
Border Color
Form Input Background Color
Form Input Placeholder Color

Background Colors (optional)

These are extra colors tied to background color utility classes for you to use however you'd like.
Background Color 1
Background Color 2
Background Color 3
Background Color 4

Text Colors (optional)

These are extra colors tied to text color utility classes for you to use however you'd like.
Text Color 1
Text Color 2
Text Color 3
Text Color 4

Brand

Green Smoke
Hex: #99a452
rgba(153, 164, 82, 1.00)

Secondary

Galliano
Hex: #e0a70e
rgba(224, 167, 14, 1.00)
Equator
Hex: #e8c55f
rgba(232, 197, 95, 1.00)
Yellow Metal
Hex: #687038
rgba(104, 112, 56, 1.00)

Grayscales

Dark
Gray Dark 1
Hex: #000000
Gray Dark 2
Hex: #323334
Gray Dark 3
Hex: #424446
Gray Dark 4
Hex: #545557
Gray Dark 5
Hex: #656668
Gray Dark 6
Hex: #757779
Light
Gray Light 1
Hex: #86888a
Gray Light 2
Hex: #989a9b
Gray Light 3
Hex: #a9abac
Gray Light 4
Hex: #babbbd
Gray Light 5
Hex: #cbcdce
Gray Light 6
Hex: #ffffff

Shades and Tints

Primary
Shade 10
Shade 9
Shade 8
Shade 7
Shade 6
Shade 5
Shade 4
Shade 3
Shade 2
Shade 1
Primary
Primary
Tint 1
Tint 2
Tint 3
Tint 4
Tint 5
Tint 6
Tint 7
Tint 8
Tint 9
Tint 10
Secondary
Shade 10
Shade 9
Shade 8
Shade 7
Shade 6
Shade 5
Shade 4
Shade 3
Shade 2
Shade 1
Secondary
Secondary
Tint 1
Tint 2
Tint 3
Tint 4
Tint 5
Tint 6
Tint 7
Tint 8
Tint 9
Tint 10

Gradients

Primary Gradient
Hex: #99a452 - #e0a70e
Secondary Gradient
Hex: #55b0ff - #cde4ec
Tertiary Gradient
Hex: #55b0ff - #80feff

Feedback

Success
Light Green
Hex: #73ec99
rgba(115, 236, 153, 1.00)
Error
Radical Red
Hex: #f84568
rgba(248, 69, 104, 1.00)
Warning
Golden Glow
Hex: #f6d87c
rgba(246, 216, 124, 1.00)

Elements

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Created by di•puentes‍