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

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.

Medium Paragraph

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.

Large Paragraph

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.

Font Weights

Font weight light

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.

font weight normal

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.

font weight bold

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.

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
inline button button inverted
Button
Phone inline button
phone inline button inverted
 (123) 456-7890
calendar inline button
 Schedule Demo
calendar inline button inverted
 Schedule Demo

Button Groups

Button group
Button group centered
Button group vertical
Button group vertical centered

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript