Style Guide

Foundations
TypographyColors
Elements
ButtonsForms

Foundations

Typography

Headings

Typeface

Bebas Neue

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

H1

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

H2

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

H3

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

H4

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

Body

Typeface
Arimo
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

Accent

Typeface
Rock Salt
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 / Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Base - 1rem (16px) / 1.5 / Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Small - 0.875rem (14px) / 1.5 / Bold

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

Nero
aka: Very dark (mostly black) magenta
Hex: #272627
rgba(39, 38, 39, 1.00)

Accent

Use sparingly
Neon Blue
aka: Light blue
Hex: #4353ff
rgba: rgba(67, 83, 255, 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

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