Style Guide

Branding:

Color Code Usage
@clarityOrange
#FF8D00

Color of text in nav menu when hovering
@clarityGreen
#80B61F

@clarityGrey
#7F7F7F

Position of team member (eg. Analyst) under Meet the Team
Border color of dark cookies popup
@lightGreen
#F5FAF4

In the Squarespace color palette
Background color for Light 1 color theme
Background of cards in List Sections for Lightest 2
@lightOrange
#FFF2E0

Background color for Light 2
Background color of menu item while hovering
@lightGrey
#F3F4F5

Background color for Dark 3
Background color for cards in List Sections for Lightest 1
Background color for summary blocks
@logoGreen
#8DAF3F

Checkmark bullet points on the Modeling page
@logoOrange
#F7941D

Color of various button types, which feature forward arrow, and clickable titles while hovering
Color of the plus icon on accordions
@brightGreen
#DEF4C8

Background color for Bright 1
@midGreen
#C3DC94

In the color Squarespace palette
Background color for Dark 1
@midOrange
#FABA6C

In the color Squarespace palette
Background color for Bright 2
@midGrey
#B7B7B7

Border color for testimonial blocks and cookie popup
@headingsGrey
#3F3F3F

h1 for the hero section on homepage
Background color for dark cookies bar
@hyperlinksGreen
#6A961A

Color of hyperlinks for some color themes
@darkHyperlinksGreen
#2F4405

Color of hyperlinks for some of the color themes
@almostBlack
#242424

In the Squarespace color palette
Primary text color
Button background for primary button, and tertiary button while hovering

Color Theme: Lightest 1

CSS class: .white.page-section

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

List Section | Lightest 1

  • Dream it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Build it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Grow it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It
Make It

Color Theme: Lightest 2

CSS class: .white-bold

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

List Section | Lightest 2

  • Dream it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Build it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Grow it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It
Make It

Color Theme: Light 1

CSS class: .light

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

List Section | Light 1

  • Dream it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Build it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Grow it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It
Make It

Color Theme: Light 2

CSS class: .light-bold

background-color: #FFF2E0

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

Color Theme: Bright 1

CSS class: .bright-inverse

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

Color Theme: Bright 2

CSS class: .bright

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

Color Theme: Dark 1

CSS class: .dark

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink #2F4405

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

Color Theme: Dark 2

CSS class: .dark-bold

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink #2F4405

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

List Section | Dark 2

  • Dream it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Build it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Grow it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It
Make It

Color Theme: Darkest 1

CSS class: .black

Heading 1 bold italic

Heading 2 bold italic

Heading 3 bold italic

Heading 4 bold italic

Paragraph 1 bold italic

Paragraph 2 bold italic

Paragraph 3 bold italic

Hyperlink #2F4405

This is a markdown block, use it for testimonials.

What if the testimonial was two lines?

— use an em dash, it's the longer dash for the person's name

  • Description text goes here

  • Description text goes here

  • Description text goes here

Image Card

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Stack

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text
“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source

Image Collage

Whatever it is, the way you tell your story online can make all the difference. Inline link?

Button text

Image Overlap

Whatever it is, the way you tell your story online can make all the difference.
Inline link?

Button text

List Section | Dark 2

  • Dream it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Build it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It

  • Grow it.

    It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

    Make It
Make It

 Color themes below have not been defined.

Color Theme: Darkest 2

CSS Class: .black-bold

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph 1

Paragraph 2

Paragraph 3