Style Guide

A guide for your brand and Webflow elements

Identity

Logo primary

Logo alternatives

Social & Favicon

Typography

Font Styles

u-text-display-2

Display 2

u-text-display-1

Display 1

u-text-h1

H1 Heading

H1 Heading Style

u-text-h2

H2 Heading

H2 Heading Style

u-text-h3

H3 Heading

H3 Heading Style

u-text-h4

H4 Heading

H4 Heading Style

u-text-h5

H5 Heading

H5 Heading Style

u-text-h6

H6 Heading

H6 Heading Style

u-text-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Typography Elements

All Ordered Lists

Apply any class
to unordered list
to clear styles

All Figures

Caption goes here with a link if required

All Ordered Lists

Ordered list
when not inside
of rich text

Ordered list
when inside
of rich text

All Unordered Lists

Unordered list
when not inside
of rich text

Unordered list
when inside
of rich text

All Block Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rich Text

u-rich-text

Lorem ipsum dolor

Lorem ipsum dolor conse ctetur

Lorem ipsum dolor sit amet conse ctetur dolor sit amet conse ctetur

Caption goes here with a link if required

Lorem ipsum dolor sit amet conse ctetur

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

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
List item two
List item three

Lorem ipsum dolor sit amet conse ctetur

<script>
</script>

Lorem ipsum dolor sit amet conse ctetur

Line Clamp

u-line-clamp-1

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.

u-line-clamp-2

u-line-clamp-3

u-line-clamp-4

Color

Brand

100%

25%

This is some text inside of a div block.

HEX:

RGB:

CMYK:

This is some text inside of a div block.

100%

25%

Primary

HEX: #f20023

RGB: 242, 0, 35

CMYK: 0, 100, 85, 5

Neutral

100%

25%

This is some text inside of a div block.

HEX:

RGB:

CMYK:

This is some text inside of a div block.

100%

25%

This is some text inside of a div block.

HEX:

RGB:

CMYK:

This is some text inside of a div block.

100%

25%

Dark 1

HEX: #242424

RGB: 36, 36, 36

CMYK: 0, 0, 0, 86

100%

25%

Dark 2

HEX: #292929

RGB: 41, 41, 41

CMYK:

100%

25%

Dark 3

HEX: #2e2e2e

RGB: 46, 46, 46

CMYK:

100%

25%

Dark 4

HEX: #383838

RGB: 56, 56, 56

CMYK:

100%

25%

Medium

HEX: #8c8c8c

RGB: 140, 140, 140

CMYK: 0, 0, 0, 45

100%

25%

Medium 2

HEX: #8c8c8c @ 75%

RGB: 140, 140, 140, 0.75

CMYK:

100%

25%

Medium 3

HEX: #8c8c8c @ 50%

RGB: 140, 140, 140, 0.5

CMYK:

100%

25%

Medium 4

HEX: #8c8c8c @ 25%

RGB: 140, 140, 140, 0.25

CMYK:

100%

25%

Light 1

HEX: #ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

100%

25%

Light 2

HEX: #f7f7f7

RGB: 247, 247, 247

CMYK:

100%

25%

Light 3

HEX: #f0f0f0

RGB: 240, 240, 240

CMYK:

100%

25%

Light 4

HEX: #e0e0e0

RGB: 229, 229, 229

CMYK:

Accents

100%

25%

This is some text inside of a div block.

HEX:

RGB:

CMYK:

This is some text inside of a div block.

100%

25%

This is some text inside of a div block.

HEX:

RGB:

CMYK:

This is some text inside of a div block.

100%

25%

Accent 1

HEX: #2B7AF3

RGB: 43, 122, 243

CMYK: 82, 50, 0, 5

100%

25%

Accent 2

HEX: #008E5F

RGB: 0, 142, 95

CMYK: 85, 0, 35, 20

Themes

u-theme-dark

Heading

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.

Button

u-theme-light

Heading

Button

data-theme=invert

Heading

Button

u-theme-inherit

Heading

Button

Heading

Button

Elements

Button Variants

Button

Button Secondary

Button

Button Text

Button

Button Icon

Button classes

Button Style Button Style Button Style Button Style

Icons

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Notifications

Standard notification component.

Notification title

Standard notification component.

Alert! Something went wrong while submitting the form.

Success! That went well.

Cookie banner

Sizes

Space

Section Space

small

main

large

page-top

Layout

Section vertical spacing

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="large"

data-padding-bottom="large"

Grids

u-grid-custom

u-grid-breakout

u-grid-desktop

u-grid-tablet

u-grid-landscape

u-grid-autofit

u-grid-autofill

u-grid-subgrid

u-grid-flex

Columns

u-column-custom

u-column-full

u-column-indent

u-column-1

u-column-2

u-column-3

u-column-4

u-column-5

u-column-6

u-column-7

u-column-8

u-column-9

u-column-10

u-column-11

u-column-12

u-order-first

u-order-first-desktop

u-order-first-tablet

u-order-last

u-order-last-desktop

u-order-last-tablet

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

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

u-vflex-left-top

u-vflex-left-center

u-vflex-left-bottom

u-vflex-left-between

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

Misc

Starter

Section

u-embed-css

u-embed-js

Global

Global / Eyebrow

Eyebrow Text Here

Global / Clickable

Global / Visual

Global / Section Space

Containers

u-container

u-container-small

u-container-full

Visuals

u-cover

u-cover-absolute

u-visual-wrap

Button Helpers

u-button-wrap-left

u-button-wrap-center

u-button-wrap-right

u-button-wrap-between

Hide

u-hide

u-hide-tablet

u-hide-landscape

u-hide-portrait

u-hide-if-empty

u-hide-if-empty-cms

Others

u-alignment-vertical

u-alignment-horizontal

u-icon

u-icon-stroke

u-badge

Badge

u-margin-trim

u-scroll-anchor

u-recaptcha

u-map-embed

u-dropdown

post-link-block

Text link