.svg){kind=logo}
Figma to Webflow Design System
Type Scaling
*Change breakpoints to see the change in size
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
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-128
The quick brown fox jumps over the lazy dog
padding-section-80
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