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.

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-xxlarge

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.
Placeholder
This is a placeholder image
Colors / Color Palette
Primary
Blue 10
Blue 20
Blue 50
Blue 60
Blue 80
Secondary
Violet 70
Fuschia 50
Red 60
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
example iconexample iconexample iconexample iconexample iconexample iconexample icon
Icons / Icon 1x1 Sizes
example iconexample iconexample iconexample iconexample iconexample iconexample icon
Buttons
Button
Button
Button-link
Button
Button
Button-link
Button
Button
Button-link
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.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Form
Helper text goes here
Helper text goes here
Helper text goes here
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tabs
Tab 1
Tab 2
Tab 3
Resources / File Downloads
Logo Files
Download
Font Files
Download
Photo Library
Download
Iconography
Download
Figma Design File
See Figma 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.
© Copyright <Brand Name> 2022 | All rights reserved