Style Guide

Style Guide

Based on Client-First V2

Client-First Docs

Colors

Color Palette

Background Color

Text Color

Typography

HTML Headings Tags

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

####### Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

Heading Classes

heading-style-h1

Heading-style-h1

heading-style-h2

Heading-style-h2

heading-style-h3

Heading-style-h3

Other HTML Tags

All Paragraphs

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.

All Links

All Links

All Block Quotes

Block Quote

All Unordered Lists

All Ordered Lists

  1. No bullet list
  2. No bullet list
  3. No bullet list

Text Sizes

text-size-xlarge

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Text Weights

text-weight-xbold

test-weight-xbold (800)

text-weight-bold

test-weight-bold (700)

text-weight-semibold

test-weight-semibold (600)

Text Styles

text-style-italic

test-style-italic

text-style-strikethrough

test-style-strikethrough

text-style-allcaps

test-style-allcaps

Text Alignment

text-align-left

test-align-left

text-align-center

test-align-center

text-align-right

test-align-right

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

“Lorem ipsum dolor sit amet, consectetur enod adipisc elit, sed do eiusmod tempor incididunt ut labore et dolo magna aliqua. Tortor donoran condimentum.”

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  1. List item
  2. List item
  3. List item

Caption goes here

Effects

Cards

Global card class, useful for controlling global responsive card padding

Box Shadows

Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

Border Radius

Border Radiuses to use globally for easy management

Aspect Ratios

Global aspect ratio classes to maintain across breakpoints. Note -these styles are handled by custom CSS inside the Global Styles component at the top of any page in the navigation panel.

UI Elements

Buttons

To use on a dark background, simple use the add-on class is-alternate

Form Elements

field-label

form-input

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

HubSpot Form Elements

Some Form Elements

Text area Input

Checkboxes

Note: HubSpot uses basic HTML checkboxes, Webflow checkboxes work differently than the default HTML checkboxes, hence in order to style HubSpot checkboxes you need custom CSS.

you can use Webflow checkbox to style and then copy CSS from it.

Radio Buttons

Success message

RecaptCHA

Submit button

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

Icons (HTML Embed)

HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Structure Classes

Defined and flexible core structure we can use on all or most pages.

Max Widths

Use the max-width CSS property to contain inner content to a maximum width.

Paddings

Direction Classes

Size Classes

Margins

Direction Classes

Size Classes

Spacers

Unified spacer system for the project.

Utility Classes

Useful utility classes we like to use in most of our projects to build faster.