Foundations
This style guide is a collection of elements and components with brand colors and typography applied. To change any colors or values use Variables (V) panel.
Color
Foundation colors is a set of variables that should be applied to elements classes. Update colors by selecting an element (style panel) or in the variables panel
Background color
Section classes and background utility classes are using variables to adjust background and font color of nested text elements.
Heading
Heading
Heading
Heading
Heading
Heading
Typography
Headings tags and classes are connected through the variables which helps to keep them consistent.
Headings
Voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
A well-crafted typeface is more than just a collection of letters— it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
Spacing
Spacing styles such as margins, paddings, and gaps are using predefined set of REM-based variables and applied directly to component classes.
Set of variables used for grid and flex layouts.
Read docs for more information.
To keep spacing consistent, most of the text elements and components have spacing applied as margin or padding.
Headings embody the voice of a brand
Components
Text Button
Images are wrapped into a div with a class ratio_(value) It helps to control an aspect ratio of the image, takes care of overflow behavior and has a radius applied.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
Each tab button uses a base class and can be styled to reflect different backgrounds or interface variants.
Slider
Sliders use arrows for navigation. These arrows are styled using a base class, and surface modifiers can be added to adapt to different backgrounds.
Accordion
The accordion component is used to toggle the visibility of content in a vertically stacked format.
Dropdown
The dropdown component is used to display a list of options that appear on interaction.
Rich Text
The Rich Text component is used for long-form content such as blog posts, CMS fields, or documentation. It ensures consistent formatting of text elements like headings, paragraphs, links, and lists.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- A rich text element can be used with static or dynamic content.
- The rich text element allows you to create and format elements
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Colour tokens
Slate ramp
Slate 25
Slate 50
Slate 100
Slate 200
Slate 300
Slate 400
Slate 500
Slate 600
Slate 700
Slate 800
Slate 850
Slate 900
Slate 950
Status (RAGB)
Done
On Track
On Track Bright
At Risk
At Risk Bright
At Risk Tint
Off Track
Off Track Bright
Off Track Tint
Custom-code CSS (site head)
Five rules live in Site settings → Custom code because Webflow cannot express them natively. Everything else is in classes and variables — if a style isn't visible in the Designer, it should be one of these.
1. Elevation + glow tokens (--elev, --elev-hi, --glow-accent) with .u-elev / .u-glow utilities — shadow lists and gradients can't be Webflow variables. The card class carries these same shadow values natively.
2. Hero accent glow — a ::before pseudo-element on header.is-inverse. Pseudo-elements can't be built in the Designer. Only the per-page hero renders as <header>; mid-page dark bands are <section>.
3. Button-row spacing — .button-group + p adjacent-sibling margin. Sibling selectors can't be expressed in Webflow.
4. Global horizontal overflow guard — overflow-x: clip on html/body at tag level.
5. Mobile nav menu panel — background + shadow on .w-nav-menu, a Webflow-internal class that user styles can't target.
