Style Guide Template

A complete style guide for every project. Simply swap out colors, edit fonts, etc. and you can use the Class ID's throughout your entire project - ultimately saving you time. All you need to do is copy/paste the "Copy/Paste Wrapper" into each project & edit to your liking.

Features:

  • Pre-made sections (added padding for spacing) & wrappers (added width % and max width for responsiveness).
  • Theme colors, buttons, typography, lists, badges, cards, form inputs, & shadows.
Created by Jarod Steffes.
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#4e70f8
Primary 2
#4ea696
Primary 3
#524b9a
Greys
Grey 1
#f8f6f4
Grey 2
#ecebea
Primary 3
#9b9b9b
Grey 4
#2d2d2d
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading one

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Caps
Lists
Headings, body and other common text elements.
Unstyled List
  • Awesome
  • Dope
  • Cool
Color Bullets
  • Awesome
  • Dope
  • Cool
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Text Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
Input Label
*Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Shadows
Preset styles to imply depth on interface components
Shadow Types
Small Shadow
Shadow
Large Shadow