Brandemic · New Design

New Design Style Guide

The complete reference for building pages in the New Homepage style: colours, text, buttons, hover motion, form elements, containers and spacing.

Typography

Headings, text sizes, weights and styles.

Headings

heading-style-h1-new-design

Heading style H1

heading-style-h2-new-design

Heading style H2

heading-style-h3-new-design

Heading style H3

heading-style-h4-new-design

Heading style H4

Text sizes

text-size-large-new-design

The quick brown fox jumps over the lazy dog.

text-size-regular-new-design

The quick brown fox jumps over the lazy dog.

text-size-small-new-design

The quick brown fox jumps over the lazy dog.

Text weights

text-weight-normal-new-design
The quick brown fox
text-weight-medium-new-design
The quick brown fox
text-weight-bold-new-design
The quick brown fox

Text styles

text-style-eyebrow-new-design

Featured work

text-style-gradient-new-design

Move people

Buttons

Live buttons. Hover each one to preview the animation.

Button styles

new-button_link
Get in touch
new-button_secondary-link
Our work
new-button_text-link
Read all
new-button_icon
→

Colors

Webflow Variables. Always pick colours from Variables.

Brand

color/purple
color/green

Background

color/ink
color/surface
color/paper

Text

color/text
color/muted

Testimonial cards

color/testimonial-strauss
color/testimonial-kosher
color/testimonial-wedesh
color/testimonial-thalpa
color/testimonial-gygl

Form elements

The footer email field. Hover it to preview.

Email field

new-footer_newsletter-box

Get new work and ideas in your inbox.

Your email→

Containers and spacing

Layout classes, shown on a purple box.

Container

container-large-new-design

Padding

padding-global-new-design
padding-section-large-new-design
padding-section-medium-new-design
padding-section-new-design

Tokens

Variables used across the New Design.

Variables

font/primary
Manrope
spacing/page-gutter
3.5rem
spacing/section
7rem
spacing/small
1rem
--pad
clamp(36px, 5.4vw, 112px)
--ease
cubic-bezier(0.22, 0.7, 0.23, 1)
Max width
80rem
Mobile breakpoint
760px

Build a new page

What every New Design page needs.

Setup

Page wrapper class
new-home_page
First component
New Design / Advanced Styles
Frame components
New Design / Navigation · New Design / Footer
Main element id
new-home-main
Section structure
padding-global-new-design > container-large-new-design
Page settings, Head
Copy fonts and legacy block from New Homepage