Strategic Consulting Styleguide

Colors
Links
Headings
Texts
Buttons
Heros
Animations
Icons

Colors

  • white
  • slight off-white
  • lighter gray
  • light gray
  • gray
  • dark gray
  • charcoal
  • black
  • black blue
  • darkest blue
  • darker blue
  • dark blue
  • light blue
  • lighter blue
  • soft blue
  • cadillac blue
  • arctic blue
  • spearmint blue
  • ultimate blue
  • iconic blue
  • charcoal blue
  • light green-blue
  • green-blue
  • light orange
  • orange
  • orange adjacent
  • dark orange
  • darker orange
  • burnt orange
  • error
Show Code
Show Code

Headings

Level one heading

Level two heading

Level three heading

Level four heading

Level five heading
Level six heading
Show Code

Texts

XX-Large Text

Large text (31.5px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

X-Large Text

Large text (27px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

Large Text

Large text (22.5px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

Medium Text, also default

Large text (18px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

Small Text

Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing 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.

UL w/ circle

  • list item
  • list item
  • list item

OL w/ numbers

  1. list item
  2. list item
  3. list item

Otherwise, OL and UL are reset without list-type for use with floats

Show Code

Buttons

Primary
Button text
Dark Button text
Show Code

Heros

Show Code

Animations

Show Code

Icons

  • Home Bankruptcy Truck
    (fillable dollar sign)
  • Credit Card Stack
  • Globe
  • Heart
  • House
  • Money Bag
    (fillable dollar sign)
  • Money Hand
  • Talk Bubble
    (fillable dollar sign)
  • Network
  • Phone
  • Pig
  • Single Credit Card
  • Two Coins
  • Arrow Bars
  • Arrow Bars
  • Check Book
  • Dollar Man
  • Dollar Shield
  • Sleuth Glass
  • Coin Pig
  • Cash Machine
Show Code

Based on: Github repository

Don’t wait – get started today! Your free debt analysis and personalized financial solution is just a phone call away...

For a free financial analysis, call 855-906-3235