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

u-text-h2

Heading 2

u-text-h3

Heading 3

u-text-h4

Heading 4

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

Rich Text

All 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

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

Other

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-font-primary
Lorem ipsum dolor sit amet.

Font Weight

u-weight-light
This is some text inside of a div block.
u-weight-regular
This is some text inside of a div block.
u-weight-medium
This is some text inside of a div block.
u-weight-semibold
This is some text inside of a div block.
u-weight-bold
This is some text inside of a div block.

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.

Text Align

u-text-align-left
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-center
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-right
Lorem ipsum dolor sit amet consectetur tortor semper.
u-text-align-streched
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
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.
u-text-pretty
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.
u-text-balance
Lorem ipsum dolor sit amet consectetur tortor semper dictum quam convallis diam ac nulla fames.

Colors

Themes

data-theme="invert"

Heading

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

Primaria
Primaria
data-theme="inherit"

Heading

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

Primaria
Primaria
data-theme="light"

Heading

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

Primaria
Primaria
data-theme="dark"

Heading

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

Primaria
Primaria

Text Color

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

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-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-line-clamp-5
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

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-none
u-gap-inherit
u-gap-ultra-small
u-gap-extra-small
u-gap-small
u-gap-main
u-gap-medium
u-gap-large
u-gap-extra-large
u-gap-ultra-large

Row Gap Utilities

u-gap-row-none
u-gap-row-inherit
u-gap-row-ultra-small
u-gap-row-extra-small
u-gap-row-small
u-gap-row-main
u-gap-row-medium
u-gap-row-large
u-gap-row-extra-large
u-gap-row-ultra-large

Border Radius

u-radius-none
u-radius-none
u-radius-small
u-radius-small
u-radius-main
u-radius-large
u-radius-round

Section Spacing Attributes

data-padding-top="none"
data-padding-bottom="none"
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"

Adaptive Values

size.0rem

0rem

size.0.125rem

0.125rem

size.0.25rem

0.25rem

size.0.375rem

0.375rem

size.0.5rem

0.5rem

size.0.625rem

0.625rem

size.0.75rem

0.75rem

size.0.875rem

0.875rem

size.1rem

1rem

size.1.125rem

1.125rem

size.1.25rem

1.25rem

size.1.5rem

1.5rem

size.1.75rem

1.75rem

size.2rem

2rem

size.2.5rem

2.5rem

size.3rem

3rem

size.3.5rem

3.5rem

size.4rem

4rem

size.4.5rem

4.5rem

size.5rem

5rem

size.5.5rem

5.5rem

size.6rem

6rem

size.6.5rem

6.5rem

size.7rem

7rem

size.7.5rem

7.5rem

size.8rem

8rem

size.8.5rem

8.5rem

size.9rem

9rem

size.9.5rem

9.5rem

size.10rem

10rem

size.11rem

11rem

size.12rem

12rem

size.13rem

13rem

size.14rem

14rem

size.15rem

15rem

size.16rem

16rem

Miscellaneos

Display Utilties

u-display-block
u-display-inline-block
u-display-inline-block
u-display-inline
u-display-inline

Hide Utilties

u-display-none
u-display-tablet-none
u-display-landscape-none
u-display-mobile-none
u-hide-if-empty
u-hide-if-empty-cms
u-auto-center
u-max-width-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
u-overflow-hidden-left

Z-Index Utilities

u-zindex-negative
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3
u-zindex-under-nav
u-zindex-over-nav

Position Utilities

u-position-static
u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Other Utilities

u-button-style
u-container
u-container-large
u-container-small
u-max-width-none
u-full-width
u-full-height
u-pointer-on
u-pointer-off
u-visual-wrap
u-cover
u-cover-absolute
u-sr-only
data-hide-if-empty-cms

Components

Buttons

Primaria
Primaria
Primaria
data-button-style="primary"
Primaria
Primaria
Primaria
data-button-style="secondary"
Primaria
Primaria
Primaria
data-button-style="tertiary"
Primaria
Primaria
Primaria
data-button-style="outlined"

Text Button

Global

Clickable
Eyebrow
Eyebrow Label
Visual
Placeholder Image - Style Guide Diego Mendoza
Spacer

Starter

Heading

Heading

Paragraph

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.

Section Starter
CSS / JS

Form

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