.svg){kind=logo}
Figma to Webflow Design System
Type Scaling
*Change breakpoints to see the change in size
Heading Element
h1 heading
Size: 56 / Weight: semi-bold / Line-height: 68
h2 heading
Size: 48 / Weight: semi-bold / Line-height: 58
h3 heading
Size: 32 / Weight: semi-bold / Line-height: 38
h4 heading
Size: 24 / Weight: semi-bold / Line-height: 30
h5 heading
Size: 20 / Weight: semi-bold / Line-height: 24
h6 heading
Size: 18 / Weight: semi-bold / Line-height: 22
Fixed Class
h1 heading
Size: 56 / Weight: semi-bold / Line-height: 68
h2 heading
Size: 48 / Weight: semi-bold / Line-height: 58
h3 heading
Size: 32 / Weight: semi-bold / Line-height: 38
h4 heading
Size: 24 / Weight: semi-bold / Line-height: 30
h5 heading
Size: 20 / Weight: semi-bold / Line-height: 24
h6 heading
Size: 18 / Weight: semi-bold / Line-height: 22
text-size-24
Size: 24 / Weight: Regular / Line-height: 32
text-size-20
Size: 20 / Weight: Regular / Line-height: 26
text-size-18
Size: 18 / Weight: Regular / Line-height: 24
text-size-16
Size: 16 / Weight: Regular / Line-height: 20
text-link-20
Size: 20 / Weight: semi-bold / Line-height: 24
text-link-18
Size: 18 / Weight: semi-bold / Line-height: 22
text-link-16
Size: 16 / Weight: semi-bold / Line-height: 20
RichText
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
The quick brown fox jumps over the lazy dog
padding-section-192
The quick brown fox jumps over the lazy dog
padding-section-160
The quick brown fox jumps over the lazy dog
padding-section-128
The quick brown fox jumps over the lazy dog
padding-section-96
Global Padding
*Change breakpoints to see the change in size. (No need to update unless the design requires it)
12 Grid Container
The quick brown fox jumps over the lazy dog
container-1280
The quick brown fox jumps over the lazy dog
container-1064
The quick brown fox jumps over the lazy dog
container-848
Colour Palette
*To change the colors, update the variables accordingly.
#ea5820
#eaa520
#000000
#141414
#9d9d9d
#ffffff
rgba(255, 255, 255, 0)
Accordion
*Use the component and update accordingly
Dropdown Label
Dropdown Label
Dropdown Label
Dropdown Label
Dropdown Label
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.
X