Style Guide

A guide for your brand and Webflow elements

Identity

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
  1. Apply any class
  2. to unordered list
  3. to clear styles
All Figures
Caption goes here with a link if required
All Ordered Lists
  1. Ordered list
  2. when not inside
  3. of rich text
  1. Ordered list
  2. when inside
  3. 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 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 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

Lorem ipsum dolor sit amet conse ctetur 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

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

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

<script>
</script>
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

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

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

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

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.

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
Button
Button
Button
u-theme-light

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
Button
Button
Button
data-theme=invert

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
Button
Button
Button
u-theme-inherit

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

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
Button

Elements

Button Variants

Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button Secondary
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button Text
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button Icon

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.
Standard notification component.
Notification title
Standard notification component.
Alert! Something went wrong while submitting the form.
Success! That went well.

Cookie banner

We and selected partners, use cookies or similar technologies as specified in the cookie policy.

Sizes

Space

1
2
3
4
5
6
7
8

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
Button Text
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
xx