Table of contents

Containers Spacers Flexbox Flexbox Gaps Headings Text elements Text weights Text alignments Max widths Colors Buttons Button Groups Links Rich text

Sher Agency | Style guide 🚀

Below you will find a list of commonly use HTML elements as well as utility classes to help with the project. Please sync up these global elements with the Figma design to begin your project.
‍
Happy Building!

Containers

Check the style guide from the Figma design and take the values of however many variations of container sizes that exist.

Small Container

small medium container

Medium Container

Large Container

Spacers

Spacers are used within block containers, or if desired, vertical oriented flex boxes. Spacers are used to add a set amount of vertical space between elements

spacer tiny

spacer xxsmall

spacer xsmall

spacer small

spacer small-medium

spacer medium

spacer large

spacer xlarge

spacer xxlarge

Flexbox

Use these for simple and quick flexbox parents. Note: Follow the naming in this order: flex [start/center/end] [vertical] [gap]

flex start

flex center

flex end

flex space-between

flex space-around

flex vertical

Flexbox gaps

Add these as a utility subclass to any flexbox_parent to control the gap size

flex gap tiny

flex gap xsmall

flex gap small

flex gap medium

flex gap large

Headings

Below you can customize your headings based on what heading sizes and line heights are in the Figma style guide. Be sure you are not adding class names to the below elements as you customize them.

How to use the clamp tool:
‍

Click this link to generate the values for the clamp tool, then add the values to the code snippet below.

all h1 headings

Heading 1

all h2 headings

Heading 2

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 Styles

Sometimes we need to style text blocks the same as one of our predefined heading styles, but we don't want it to actually have that tag for SEO purposes. Use the below class names to style text blocks as any of the associated headings.

h1 heading style

Heading 1

all h2 headings

Heading 2

all h3 headings

Heading 3

all h4 headings

Heading 4

all h5 headings

Heading 5

all h5 headings

Heading 6

Text Elements

The first paragraph is the Webflow default, using the default Paragraph class. The remaining paragraphs are to be customized based on text size variations seen in the Figma file.

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.

Small Paragraph

Medium Paragraph

Large Paragraph

Font Weights

Font weight light

font weight normal

font weight bold

Text Alignments

text align left

Lorem ipsum dolor sit amet

text align center

Lorem ipsum dolor sit amet

text align right

Lorem ipsum dolor sit amet

text align right

Lorem ipsum dolor sit amet

Text Styles

uppercase

Lorem ipsum dolor sit amet

lowercase

Lorem ipsum dolor sit amet

sentence case

Lorem ipsum dolor sit amet

Max Widths

These are helpful when you have repeating text elements on various pages that have max widths given to them in Figma. For example. this paragraph block has a maxwidth_large applied to it in order to keep it from spanning the entire screen. On some projects, max widths are always centered, on others they are always left justified. Remove the 'centered' sub class if you wish and customize these to match whatever Figma design you are working with!

maxwidth_tiny

maxwidth_small

maxwidth_small-medium

maxwidth_medium

maxwidth_large

maxwidth_xlarge

maxwidth_xxlarge

Colors

These colors are for reference only. These class names are not intended to be used. This is simply a visual view of your variables that you have set in the Variables panel. Feel free to remove/add more below as you remove/add variables in the backend.

Primary

Secondary

Accent

Buttons

Primary Button

Button

Secondary Btn

Button

inline button button

Button

inline button button inverted

Button

Phone inline button

(123) 456-7890

phone inline button inverted

(123) 456-7890

calendar inline button

Schedule Demo

calendar inline button inverted

Schedule Demo

Button Groups

Button group

Button Button

Button group centered

Button Button

Button group vertical

Button Button

Button group vertical centered

Button Button

Links

Link

Text Link

Forms

form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons

icon

Rich Text

rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript