Skip to content
HOMEABOUTPRODUCTS / SERVICES / TERMS AND CONDITIONS PRIVACY POLICY404 PageSITEMAP
Combo classes - blue (primarily a utility class. Custom class is combined with a utility class to make a combo class)
Utility classes - blue (primarily used to name elements to be represented all through the site. Used after custom class)
Global classes - are used inside sections (like components)
Section - Content holderFixed horizontal paddingFIxed vertical padding
Long-upper - Content holderFixed horizontal paddingLong vertical padding topFixed vertical padding lower
Long-lower- Content holderFixed horizontal paddingLong vertical padding lowerFixed vertical padding top
Section-regular - Content holderFixed horizontal paddingShort vertical padding
Card - All card spacing Fixed horizontal paddingFIxed vertical padding
Para-black- Content holderFixed horizontal paddingFIxed vertical padding
Para-white - Content holderFixed horizontal paddingFIxed vertical padding
H1 - H4 - Content holderFixed horizontal paddingFIxed vertical padding
H1 - H4 (combo - is_dark/white) - Content holderFixed horizontal paddingFIxed vertical padding
Site_width - Content holderFixed horizontal paddingFIxed vertical padding
site-margin - Content holderFixed horizontal paddingFIxed vertical padding
- H4 - Content holderFixed horizontal paddingFIxed vertical padding
Design System: Style guides
For business use only. This document contains everything you need to know about our business, client onboarding, client demographics, business plan, service offerings
(1) Essential Pages
(1) Style selector
CLASS - blue
Variable folders and components become custom classes.
HTML ELEMENT TAG - pink
Variable folders and components become custom classes.
PSEUDO CLASS - green
Used to change element state - hover, pressed, none
U
(2) Site Classes:
(2) Spacing:
For desktop, tablet and mobile
Webflow Site Framework – World-Class Setup
This document provides a comprehensive, scalable, and efficient framework for building a world-class website in Webflow. It includes essential pages, classes, spacing, typography, colors, tokens, and breakpoints for a professional and maintainable web experience.
1. Essential Pages
Every professional website should include the following core pages:
• Home
• About
• Products / Services
• Contact
• Terms and Conditions
• Privacy Policy
• 404 Page
• Sitemap
2. Style Guide
2.1 Style Selector
Type Color Description
Class Blue Custom classes for components & variables
HTML Tag Pink Standard HTML elements like <h1>, <p>
Pseudo Class Green State changes (hover, active, focus)
Combo Class Blue Custom class combined with a utility class
Utility Class Blue Reusable classes (spacing, flex, grid)
Global Class Blue Used inside sections (e.g., containers, components)
3. Site Classes
3.1 Section Structure
Class Name Description
Section Standard section with fixed padding
Section-long-upper Increased vertical padding on top
Section-long-lower Increased vertical padding on bottom
Section-short Reduced vertical padding
Site-width Defines max width of the site
Site-margin Standard margin for sections
3.2 Card & Typography
Class Name Description
Card Standard card layout with padding
H1 – H4 Headings with consistent spacing
H1 – H4 (is_dark/white) Color variant for headings
Paragraph-black Standard black paragraph styling
Paragraph-white Standard white paragraph styling
4. Spacing & Layout
4.1 Spacing & Padding Guide
Size/Type Category Value Description
Max Width Layout 1440px (90rem) Defines the maximum width for the site
Grid Gap Spacing 32px Space between items in a grid layout
X-Small Vertical Padding 4px Between buttons, tight spaces
Small Vertical Padding 24px Between stacked elements
Main Vertical Padding 48px Between text and buttons
Large Vertical Padding 64px For large separations
Standard Horizontal Padding 32px Standard horizontal spacing
4.2 Border Radius & Stroke Width
Size Category Value Description
Small Radius 12px Used for buttons
Large Radius 24px Used for cards
SVG Stroke Width 1px Standard stroke width
5. Typography System
5.1 Type Scale Ratios
Ratio Name
1.067 Minor Second
1.125 Major Second
1.200 Minor Third
1.250 Major Third
1.333 Perfect Fourth
1.414 Augmented Fourth
1.500 Perfect Fifth
1.618 Golden Ratio
5.2 Font Styles
Tag Font Size Font Family Font Weight Letter Spacing Description
H1 48px Product Sans Medium 1rem Main title heading
H2 40px Product Sans Medium 1rem Secondary title
H3 34px Product Sans Medium 1rem Subheading
H4 28px Product Sans Medium 1rem Smaller headings
H5 23px Product Sans Medium 1rem Accent heading
H6 19px Product Sans Medium 1rem Small heading
P1 16px Default Font Normal 1rem Base font for text
P2 12px Default Font Normal 1rem Small text
P3 8px Default Font Normal 1rem Button font
6. Tokens (CSS Variables)
:root {
/* Size Scale */
--max-width: 90rem; /* 1440px */
--margin: 1.5rem;
--gutter: 1.5rem;
--grid-columns: 12;
/* Color Palette */
--color-brand: #3B82F6; /* Blue */
--color-dark: #1F2937; /* Dark Gray */
--color-light: #F3F4F6; /* Light Gray */
--color-transparent: rgba(255, 255, 255, 0.8);
--color-text-dark: #111827; /* Deep Gray */
--color-text-light: #FFFFFF; /* White */
/* Button Styles */
--button-primary-bg: #3B82F6;
--button-primary-text: #FFFFFF;
--button-primary-border: #3B82F6;
--button-primary-hover-bg: #2563EB;
--button-primary-hover-text: #FFFFFF;
--button-primary-hover-border: #2563EB;
--button-secondary-bg: #FFFFFF;
--button-secondary-text: #3B82F6;
--button-secondary-border: #3B82F6;
--button-secondary-hover-bg: #F3F4F6;
--button-secondary-hover-text: #2563EB;
--button-secondary-hover-border: #2563EB;
/* Size Scale */
--size-0: 0rem;
--size-1: 1rem;
--size-1-5: 1.5rem;
--size-2: 2rem;
--size-2-5: 2.5rem;
--size-3: 3rem;
--size-3-5: 3.5rem;
--size-4: 4rem;
--size-4-5: 4.5rem;
--size-5: 5rem;
--size-6: 6rem;
--size-7: 7rem;
--size-8: 8rem;
--size-9: 9rem;
--size-10: 10rem;
--size-11: 11rem;
--size-12: 12rem;
--size-13: 13rem;
--size-14: 14rem;
/* Typography */
--h1-size: 2.5rem; /* 40px */
--font-primary: 'Inter', sans-serif;
--font-bold: 700;
--line-height-tight: 1.2;
--tracking-tight: -0.02em;
--text-transform-normal: none;
}
/* Tablet Breakpoint */
@media (max-width: 1024px) {
:root {
--max-width: 50rem; /* 800px */
--margin: 1rem;
--gutter: 1rem;
--grid-columns: 8;
}
}
/* Mobile Breakpoint */
@media (max-width: 768px) {
:root {
--max-width: 20rem; /* 320px */
--margin: 1rem;
--gutter: 0.75rem;
--grid-columns: 4;
}
}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.