Style Guide

A guide for your brand and Webflow elements

Identity

Logo primary

Social & Favicon

Typography

The display text is using The Seasons font and the body text is using Poppins.

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

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

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

Apply any class
to unordered list
to clear styles

All Unordered Lists

Apply any class
to unordered list
to clear styles

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 conse ctetur

Lorem ipsum 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

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: #AB88BE

RGB: 171, 136, 190

CMYK: 10, 28, 0, 25

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: #1F1F1F

RGB: 31, 31, 31

CMYK: 0, 0, 0, 88

100%

25%

Dark 2

HEX: #262626

RGB: 38, 38, 38

CMYK:

100%

25%

Dark 3

HEX: #333333

RGB: 51, 51, 51

CMYK:

100%

25%

Medium

HEX: #999999

RGB: 153, 153, 153

CMYK: 0, 0, 0, 40

100%

25%

Medium 2

HEX: #999999 @ 75%

RGB: 153, 153, 153, 0.75

CMYK:

100%

25%

Medium 3

HEX: #999999 @ 50%

RGB: 153, 153, 153, 0.5

CMYK:

100%

25%

Medium 4

HEX: #999999 @ 25%

RGB: 153, 153, 153, 0.25

CMYK:

100%

25%

Light 1

HEX: #ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

100%

25%

Light 2

HEX: #F5F5F5

RGB: 245, 245, 245

CMYK:

100%

25%

Light 3

HEX: #D3D3D3

RGB: 211, 211, 211

CMYK:

Accent

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%

Mediation

HEX: #27bdbe

RGB: 39, 189, 190

CMYK: 79, 0, 0, 25

100%

25%

Book

HEX: #f15b67

RGB: 241, 91, 103

CMYK: 0, 62, 57, 5

100%

25%

Project

HEX: #689BD2

RGB: 104, 155, 210

CMYK: 50, 26, 0, 18

Themes

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

u-theme-dark

Heading

Button

data-theme=invert

Heading

Button

u-theme-inherit

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

Size

0.125

0.25

0.5

0.75

1.25

1.5

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

Space

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-column-2

u-grid-column-3

u-grid-column-4

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

u-icon-stroke

u-badge

Badge

u-margin-trim

u-scroll-anchor

u-recaptcha

u-map-embed

u-dropdown