Instructions

Variables

This template is primarily built using Webflow Variables, making it easy to update and maintain styles while ensuring consistency across the entire site. The variables allow you to define key style properties—such as colors, fonts, spacing, and more—in one central location.

By simply adjusting these variables, you can quickly update the look and feel of your site without needing to modify individual elements manually. This approach not only saves time but also ensures that your design remains cohesive and adaptable to future changes.

To learn more about Webflow Variables, please check out Webflow's article here.

‍

Site's Global Styles

To update site's global styles such as container widths, margins and gutters, please go to the Variable panel and search for "Site Global": 

‍

Typography

Currently the Primary Family is set to an open-source font "Inter". To update the font family go to the Variables panel and search for "Font". You can easily select Webflow standard fonts, use a Google font or upload your brand's custom font.

Individual text styles

This template has different types of text, including headings, body text, eyebrow. Each type has a set of properties which can be easily managed.

• Font Size (for desktop, tablet, and mobile)
• Font Family (in case the brand has multiple typefaces)
• Font Weight
• Line Height
• Letter Spacing

‍

Headings

There are several heading levels, such as: 

• Display
• H1
• H2
• H3
• H4
• H5
• H6

Their styles are primarily based on the global heading properties – to find these properties, go to the Variables panel and search for "Headings Global".

However, you can easily override styles for each heading level. To do this, search for a heading level, for example "H1", and update its styles. The changes will be automatically applied to the entire website.

Text and Paragraphs

There are several styles of the main text and paragraphs:

• Text Main – the main body text
• Text Large – the larger text which is primarily used in section headers
• Text Small – the smaller text which is used for secondary information, navigation links and button labels
• Eyebrow Text – used mainly as an eyebrow text (label) above section headings

To update text styles, search for the type of text you'd like to update:

‍

Colors

All colors are stored in the Variables panel. You can easily replace the template's colors and add more to make the site follow your brand's appearance.

Basic Colors

Currently, there are 3 main colors used as the basis:

• Dark
• Light
• Brand

Other colors derive from the main ones. There are:

• Brand Color Palette – a few variations of the Brand color
• Dark Color Palette – a few variations of the Dark color
• Utility Colors – fades of the Dark and Light colors mainly used for buttons and borders

Colors used in context

The basic colors are linked to the site's main elements: 

• Backgrounds
  • Primary Background
  • Secondary Background
• Text
  • Primary Text
  • Secondary Text
• Buttons
  • Primary Button, including hover state
  • Secondary Button + Hover State
• Borders
• Focus State
  • Input fields
  • Buttons
  • Links

You can easily update the existing colors and add as many as you need, and then apply (link) them to the site's main elements, for example, Buttons:

‍

Questions?

Please reach out to me at hello@slavasolovyev.com if you have any questions about how to use the template or if there are any issues.