Style Guide

Introduction

Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colors, buttons, form inputs and more. These changes will then be applied across your website. Your style guide is not viewable to the public, and can only be accessed with the provided password that you received during file handoff.

This style guide is a variation off of the client-first framework created by finsweet. This style guide uses client-first as a baseline while adding on to adapt to our purposes. For a quick overview, please see the Client First documentation website. You can use it for baseline reference, but it will not cover any of the modifications that we have made in this system. For documentation on the modifications, see the Figma file for this design system.

If you have any questions about this style guide or your website in general, then please do not hesitate to contact our team.

Logos / Primary Lockup

Full Color, Light Background

Full Color, Dark Background

Logos / Icon Lockup

Full Color, Light Background

Single Color, Light Background

Full Color, Dark Background

Single Color, Dark Background

Typography / HTML Heading Tags

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H5
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Typography / Display Classes

display-large

display-medium

display-small

Typography / Heading Classes

heading-xxxlarge

heading-xxlarge

heading-xlarge

heading-large

heading-medium

heading-regular

heading-small

heading-xsmall

heading-xxsmall

heading-xxxsmall

Typography / Subhead Classes

subhead-xlarge

subhead-large

subhead-medium

subhead-regular

subhead-small

subhead-xsmall

Typography / Paragraph Classes

paragraph-xlarge

paragraph-large

paragraph-medium

paragraph-regular

paragraph-small

paragraph-xsmall

Typography / Misc. Classes

All Links

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 Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-quote

Overline

Caption

Typography / Text Sizes

text-size-xlarge

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-xsmall

Typography / Text Style

text-style-italic

text-style-underline

text-style-strike

text-style-uppercase

text-style-lowercase

text-style-Titlecase

text-style-nowrap

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Typography / Text Weights

text-weight-light

text-weight-regular

text-weight-medium

text-weight-semibold

text-weight-bold

text-weight-xbold

Typography / Text Alignment

text-align-left

text-align-center

text-align-right

Typography / Line Height

Text Leading None (1.0-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Text Leading Tight (1.25-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Text Leading Snug (1.375-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Text Leading Normal (1.5-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Text Leading Relaxed (1.625-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Text Leading 200 (2.0-)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.

Typography / Letter Spacing

Text Tracking Tighter (-5%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text Tracking Tight (-2.5%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text Tracking Normal (0%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text Tracking Wide (2.5%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text Tracking Wider (5%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text Tracking Widest (10%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Typography / Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
The rich text element allows you to create and format headings,
‍

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

This is a placeholder image

Colors / Color Palette

Primary

Apple 50

Violet 70

Honey 50

Gray 50

Secondary

Apple 30

Apple 80

Apple 90

Violet 50

Aqua 30

Neutrals

Gray 5

Gray 10

Gray 20

Gray 30

Gray 40

Gray 50

Gray 60

Gray 70

Gray 80

Gray 90

Core

White

Black

Semantic

Success

Warning

Error

Info

Colors / Backgrounds

.background-color-primary

.background-color-secondary

.background-color-white

.background-color-dark

.background-color-[color-name (example: background-color-blue]

Colors / Text Colors

text-color-primary

text-color-secondary

text-color-tertiary

text-color-[color-name]

text-color-white

Icons / Icon Sizes

Icons / Icon 1x1 Sizes

Buttons

Webflow Elements

Unordered & Ordered List

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Tabs

Resources / File Downloads

Logo Files

Font Files

Photo Library

Iconography

Figma Design File

Finsweet's Client First Docs

See Documentation

Resources / File Export Guidelines

Do not export assets partially

Make sure the asset is not missing anything important (i.e. missing the center circle of the Instagram logo) before implementation.

Do not export cropped items

Make sure to export graphic elements such as shapes or other custom graphics outside of a parent frame before exporting. Otherwise, Figma will crop the shape based on its position in the parent frame and it would not be suitable for implementation into the live product.

Name each asset with a relevant name related to a particular asset

Try not to export shapes by their default name (i.e. Ellipse 10, Rectangle 50, Div Block 32, etc.) This will help with file organization later down the pipeline.

Try to always export as SVG format especially if the asset in question is already a vector format

Unless you are re-exporting a bitmap-type asset (photography), try to either copy the item as SVG (see above) or export as an SVG in the export panel.

Try not to re-export already existing icons and images

Use the original source files or icon library if available. If using an icon from an icon library, use an icon font (if available) or use an already exported SVG from the official icon library. Only export photography if the photo is inside a custom shape. Otherwise, use the photography from the photo library folder.

Resources / Glossary

Logo

A specific mark that is a combination of letters, symbols, or graphics used to identify a brand in a single instance. Logos often embody the core values of a brand and use the brand colors.

Color Palette

A combination of colors that are intended to be used together. In this case the colors are a key part of the branded experience and help form a sense of place.

CMYK

Abbreviations for the colors Cyan (C), Magenta (M), Yellow (Y), and Black (K), the inks used in four-color printing. When these inks are combined in they can produce a wide spectrum of color.

RGB

Screen-based applications such as websites and apps typically select their color palette from the RGB color system - a palette containing differing combinations of Red (R), Green (G), and Blue (B).

Pantone (PMS)

Pantone Matching System (PMS) is the world standard for the specification of printed inks between designers and printers.

Kerning

Adjustment of spacing between a pair of type characters.

Leading / Line height

The space between lines of type. It is generally measured from baseline to baseline and expressed in points.

Typeface / Font Family

In typography, a typeface (also known as font family) is a set of one or more fonts each composed of glyphs that share common design features. Each font of a typeface has a specific weight and/or style.

Font

A collection of letters, numbers, punctuation, and other symbols used to set text (or related) matter. Although font and typeface are often used interchangeably, font refers to the physical embodiment (whether it’s a case of metal pieces or a computer file) while typeface refers to the design (the way it looks). A font is what you use, and a typeface is what you see.

Serif & Sans Serif

A short line or finishing stroke that crosses or projects from stems or strokes in a character. Serifs have many shapes, including hairline, bracketed, wedge, and slab. Fonts without serifs are called “sans serifs.”

Monospaced

Characters designed to all have the same width, ignoring their normal proportions. Wide characters have an unusually narrow design, while narrow characters have lots of white space on both sides. This allows for neatly setting columns of text and tables, for example in programming code, or accounting.

X-height

The height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.

Point Size / Font Size

The point size or font size of a typeface refers to the size of the body, the imaginary area that encompasses each character in a font. This is why a typeface with a large x-height appears bigger than typeface with a small x-height at the same point size.

Lockup

The fixed arrangement of one, two, or more graphic elements — such as a logo and web address etc. — to create a single unit.

Style Guide

H1Sample text is being used as a placeholder.

H2Sample text is being used as a placeholder as real text.

H3Sample text helps you understand how real text may look on your website.

H4Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H5Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H6Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

display-large

display-medium

display-small

heading-xxxlarge

heading-xxlarge

heading-xlarge

heading-large

heading-medium

heading-regular

heading-small

heading-xsmall

heading-xxsmall

heading-xxxsmall

subhead-xlarge

subhead-large

subhead-medium

subhead-regular

subhead-small

subhead-xsmall

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Do not export assets partially

Do not export cropped items

Name each asset with a relevant name related to a particular asset

Try to always export as SVG format especially if the asset in question is already a vector format

Try not to re-export already existing icons and images

H1
Sample text is being used as a placeholder.

H2
Sample text is being used as a placeholder as real text.

H3
Sample text helps you understand how real text may look on your website.

H4
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

H5
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.