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

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 xsmall

spacer small

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. Modifiy the clamp code below using this tool

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

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

Text Weights

text weight light

text weight normal

text 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 Styles

uppercase

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_small

maxwidth_medium

maxwidth_large

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

Secondary Btn

Button

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

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