Final File

/

Webflow Style Guide

Webflow Style Guide

This is the style guide that we use when starting with any type of Webflow projects. It's inspired by the Lumos Framework from Timothy Ricks and Client First from Finsweet. Credit goes to them for their great work and giving me the best tools to perform. Edit these styles and UI elements here and the changes will be reflected throughout the library.

Typography

Font Styles

u-text-h1

Heading 1

Heading 1

u-text-h2

Heading 2

Heading 2

u-text-h3

Heading 3

Heading 3

u-text-h4

Heading 4

Heading 4

u-text-h5
Heading 5
Heading 5
u-text-h6
Heading 6
Heading 6
u-text-style-large
This is some text inside of a div block.
u-text-style-medium
This is some text inside of a div block.
u-text-style-main
This is some text inside of a div block.
u-text-style-small
This is some text inside of a div block.
u-text-style-extra-small
This is some text inside of a div block.
u-text-style-tag-large
This is some text inside of a div block.
u-text-style-tag-main
This is some text inside of a div block.
u-text-style-tag-small
This is some text inside of a div block.

Rich Text

u-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
  2. Item
  3. Item

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

u-rich-text-body

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
  2. Item
  3. Item

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

u-rich-text-secondary

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
  2. Item
  3. Item

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

u-rich-text-alternative

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
  2. Item
  3. Item

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

u-rich-text-tab

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
  2. Item
  3. Item

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Typography Elements

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

All Links
Text Link
All Block Quotes
Block Quote
All Ordered Lists
  1. List Item
  2. List Item
  3. List Item
All Unordered Lists
  • List Item
  • List Item
  • List Item

Font Family

u-text-font-primary
Roboto
u-text-font-secondary
Roboto Condensed

Font Weight

u-weight-thin
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-extra-light
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-light
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-normal
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-medium
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-semibold
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-bold
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-black
Lorem ipsum dolor sit amet consectetur tortor semper.
u-weight-extra-bold
Lorem ipsum dolor sit amet consectetur tortor semper.

Line Height

u-line-height-0-9
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-1
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-2
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-3
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-4
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-5
Lorem ipsum dolor sit amet consectetur tortor semper.
u-line-height-1-6
Lorem ipsum dolor sit amet consectetur tortor semper.

Line Clamp

u-line-clamp-1
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-2
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-3
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-4
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.
u-line-clamp-5
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames dictum habitant lorem in congue adipiscing varius ullamcorper amet quisque iaculis urna amet ornare a morbi commodo eu magna tristique sed in. Id eu facilisis dui eget auam egestas fames nisl pulvinar et. Et nisl mattis felis erat et enim diam adipiscing. Turpis egestas non congue bibendum lectus mattis nulla in urna sit et varius sit morbi ut. Neque varius dignissim posuere consequat vitae.

Letter Space

u-text-letter-space-none
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-small
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-main
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-large
Lorem ipsum dolor sit amet consectetur tortor semper.

Text Align

u-text-letter-space-none
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-small
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-main
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-letter-space-large
Lorem ipsum dolor sit amet consectetur tortor semper.

Text Transform

u-text-transform-none
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-uppercase
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-capitalize
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-lowercase
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-transform-italic
Lorem ipsum dolor sit amet consectetur tortor semper.

Text Wrap

u-text-wrap-default
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-wrap-pretty
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-wrap-balance
Lorem ipsum dolor sit amet consectetur tortor semper.

Colors

Theme

u-theme-dark

Heading

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.

Button Label
Button Label
Button Label
Button Label
u-theme-light

Heading

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.

Button Label
Button Label
Button Label
Button Label

Text Color

u-text-color-inherit
Lorem ipsum dolor sit amet.
u-text-color-faded
color-mix(in srgb, var(--text--primary) 50%, transparent)
u-text-color-primary
Lorem ipsum dolor sit amet.
u-text-color-secondary
Lorem ipsum dolor sit amet.
u-text-color-tertiary
Lorem ipsum dolor sit amet.
u-color-quaternary
Lorem ipsum dolor sit amet.
u-color-quinary
Lorem ipsum dolor sit amet.

Flexbox

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-strech
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-stretch
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Grid

Utilities

u-grid-custom
u-grid-breakout
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid

Column Utilites

u-column-custom
u-column-full
u-column-indent

Order Utilities

u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-first-landscape
u-order-last-desktop
u-order-last-tablet

Sizes

Gap Utilities

u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8

Row Gap Utilities

u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-4
u-gap-row-5
u-gap-row-6
u-gap-row-7
u-gap-row-8

Padding Top & Bottom

data-padding-top="none"
data-padding-bottom="none"
data-padding-top="extra-small"
data-padding-bottom="extra-small"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="medium"
data-padding-bottom="medium"
data-padding-top="large"
data-padding-bottom="large"
data-padding-top="extra-large"
data-padding-bottom="extra-large"

Miscellaneos

Hide Utilties

u-display-none
u-display-tablet-none
u-display-landscape-none
u-display-mobile-none
Overflow Utilities
u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-scroll
u-overflow-auto
u-overflow-x-auto
u-overflow-y-auto

Other Utilities

u-container-none
u-auto-center
u-visual-wrap
u-cover
Placeholder Image - Style Guide Diego Mendoza
u-cover-absolute
Placeholder Image - Style Guide Diego Mendoza
u-sr-only

Components

Buttons

Button Label
Button Label
Button Label
Button Label
Button Label
Button Label
Primary
Button Label
Button Label
Button Label
Button Label
Button Label
Button Label
Secondary
Button Label
Button Label
Button Label
Button Label
Button Label
Button Label
Tertiary

Text Button

Primary
Primary
Primary
Text Label
Text Label
Primary

Tags

Category
Primary
Category
Primary

Arrow

Primary

Global

Heading

Heading

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Eyebrow
Eyebrow Label
Spacer
Visual
Visual
Placeholder Image - Style Guide Diego Mendoza
Section Starer

Form

Select field
Submit
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select field
Submit
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.