Here we can test stuff. Specially design stuff. We have access to all Design Styles in case we need to do global changes to check if all components have been changed and updated properly. WE LOVE THIS. so organized. so wow. So we can try to keep everything organized in this page. Here is an Index to scroll fast 💕🚀
First, you scroll wherever you want to be. (not now, please read this section till the end to understand how to work with this)
In each Section you will find these cute Tags. These are the Style Tags. They are meant to give you guidance in case you want to change a style or you don't know anymore what style combinations to put in the style selector in Webflow. 🛠️🌟
Meaning: the Sequence of tags you see here, is the sequence you will input in the style selector. ACHTUNG! Please do not change the styles. If you want changes create a NEW combo class and document it here (we love to keep it Sauber!🔪 )
Main Style Tag
First Combo Style Tag
Second Combo Style Tag
Same principle as always. 12er Grid for everything bigger than small desktop and 6er for Smartphone. The Grid works on an 8px pixel scale and the guideline is based on the smallest average screen format (1280px width) and the smallest smartphone screen (360px width). Since we are using fluid formats, we turn the pixel (px) sizes into viewport width (vw) sizes.
How to do this? If you are designing in Figma and the margin of the Grid on small desktop is 32px the calculation would be: ((pixel size / screen width)*100) = viewport width size
Example (for 32px): ((32 px/1280 px)*100) = 2,5 vw
Desktop Breakpoint: Range: 768 px and up | Base screen size: 1280 px
Mobile Breakpoint: Range: 767 px and down | Base screen size: 360 px
Columns: Desktop: 12 columns | Mobile: 6 columns
Margin: Desktop: 32 px or 2.5 vw | Mobile: 24 px or 6.67 vw
Spacing: Desktop: 32 px or 2.5 vw | Mobile: 24 px or 6.67 vw
Here is the Typography Section (Yes Belén...I know you scrolled directly here). The Scale used is a Major Third (in 1,25x steps) and it's divided in Display (big fonts, we love it), Headings (for visual hierarchy in text), Text (for small size body text) and special cases (coming anytime soom....maybe). For this section I determined the different settings needed for a style:
min. Font size: The smallest scale of the font style
min. Screen size: at what breakpoint this style stops scaling down (because we are using fluid fonts)
max. Font size: The largest scale of the font style
max. Screen size: at what breakpoint this style stops scaling up (because we are using fluid fonts)
Fluid code: this is a code to put in the custom field for the font-size, so that the font scales properly
Line height (in %): I don't know if I have to explain this but....it's the size and space of one line of text. (ACHTUNG: recommended body line height is around 150% in perspective of the EU accessibility Act)
Display lg
min. size: 57.33 px | min. screen: 478 px | max. size: 119,21px | max. screen: 1440 px | Clamp: clamp(3.583rem, 1.661rem + 6.432vw, 7.451rem) | Line height: 105%
Display md
min. size: 52.55 px | min. screen: 478 px | max. size: 95,37px | max. screen: px | Clamp: clamp(3.284rem, 2.397rem + 2.969vw, 5.961rem) | Line height: 105%
Display sm
min. size: 47,78 px | min. screen: 320 px | max. size: 76,29 px | max. screen: 2400 px | Clamp: clamp(2.986rem, 2.712rem + 1.371vw, 4.768rem) | Line height: 105%
Heading xxl
min. size: 39,81 px | min. screen: 454 px | max. size: 61,04 px | max. screen: 2400 px | Clamp: clamp(2.488rem, 2.179rem + 1.091vw, 3.815rem) | Line height: 105%
Heading xl
min. size: 33,18 px | min. screen: 613 px | max. size: 48,83px | max. screen:2400 px | clamp(2.488rem, 2.179rem + 1.091vw, 3.815rem) | Line height: 105%
Heading lg
min. size: 27,65 px | min. screen: 1052 px | max. size: 39,06px | max. screen: 2400 px | Clamp: clamp(1.728rem, 1.172rem + 0.846vw, 2.441rem)) | Line height: 105%
Heading md
min. size: 23,04 px | min. screen: 907 px | max. size: 31,25 px | max. screen: 2400 px | Clamp: clamp(1.44rem, 1.128rem + 0.55vw, 1.953rem) | Line height: 105%
Heading sm
min. size: 19,2 px | min. screen: 1057 px | max. size: 25px | max. screen: 2400 px | Clamp: clamp(1.2rem, 0.915rem + 0.432vw, 1.563rem) | Line height: 105%
Heading xs
min. size: 16px | min. screen: 1440px | max. size: 20px | max. screen: 2400px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%
Text lg - 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.
Text lg
min. size: 16px | min. screen: 1440px | max. size: 20px | max. screen: 2400px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%
Text md - 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.
Text md
min. size: 16px | min. screen: 1440px | max. size: 20px | max. screen: 2400px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%
Text sm - 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.
Text sm
min. size: 16px | min. screen: 1440px | max. size: 20px | max. screen: 2400px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%
Display Quote
min. size: 28.8px | min. screen: 1024px | max. size: 76.304px | max. screen: 1920px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%
Text sm - 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.
Text sm
min. size: 16px | min. screen: 1440px | max. size: 20px | max. screen: 2400px | Clamp: clamp(1rem, 0.625rem + 0.417vw, 1.25rem) | Line height: 145%