.svg){kind=logo}
Figma to Webflow Design System
Type Scaling
*Change breakpoints to see the change in size
Heading Element
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
Fixed Class
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
Body Text
Rich Text Block
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.
Our goal with Webflow is to empower designers and developers to build for the web without sacrificing creativity or control.
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Section Padding
*Change breakpoints to see the change in size.
*You can also combine section paddings by adding "t" for top and "b" for bottom; e.g. padding-section-t128-b80
Global Padding
*Change breakpoints to see the change in size. (No need to update unless the design requires it)
12 Grid Container
Colour Palette
*To change the colors, update the variables accordingly.
Contact Form
*Use the component and update accordingly
Accordion
*Use the component and update accordingly
Pop-Up
*Default template for pop-up
A Guide for a High Performance Life
The power to live a healthy, high performing life is inside of you. To tap into it you have to understand it. This guide gives you that understanding.
Aspect Ratio
*for image combo class add aspect ratio
*adjust the width and height after you added aspect ratio as combo class.
Aspect Ratio Square/Circular Formats
Aspect Ratio Portrait Formats
Aspect Ratio Landscape Formats
Tooltip
*for static and cms
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.
A Guide for a High Performance Life
The power to live a healthy, high performing life is inside of you. To tap into it you have to understand it. This guide gives you that understanding.
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.
A Guide for a High Performance Life
The power to live a healthy, high performing life is inside of you. To tap into it you have to understand it. This guide gives you that understanding.
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.
A Guide for a High Performance Life
The power to live a healthy, high performing life is inside of you. To tap into it you have to understand it. This guide gives you that understanding.