Styleguide
.png)
Headings
Heading H1 · 80px · 1 · Medium 500
Beauty in simplicity
Beauty in simplicity
Heading H2 · 80px · 1.2 · Regular 400
Beauty in simplicity
Beauty in simplicity
Heading H3 · 50px · .3 · Semi Bold 600
Beauty in simplicity
Beauty in simplicity
Heading H4 · 35px · 1 · Medium 500
Beauty in simplicity
Beauty in simplicity
Heading H5 · 30px · 1.3 · Regular 400
Beauty in simplicity
Beauty in simplicity
Heading H6 · 20px · 1.3 · Regular 400
Beauty in simplicity
Beauty in simplicity
Price tag · 16px · 1 · Medium 500
€59
Paragraphs & Links
Big Paragraph · 20px · 1.3 · Regular 400
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.
Regular Paragraph · 18px · 1.3 · Regular 400
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.
Caption · 16px · 1.1 · Regular 400
All rights to materials and products belong to teenage.engineering
Links
Inline Text Linkcolor palette
Changing Colors
How to Change Global Colors
This template uses Webflow Variables to manage colors across the entire site. You can change the brand color in one place, and it will update everywhere.
1. Go to the Variables panel (the sliders icon in the left sidebar).
2. Find the color category (e.g., "Brand" or "Neutral").
3. Click the Edit icon (pencil) next to the color you want to change (e.g.,
4. Pick your new color and click Save.
1. Go to the Variables panel (the sliders icon in the left sidebar).
2. Find the color category (e.g., "Brand" or "Neutral").
3. Click the Edit icon (pencil) next to the color you want to change (e.g.,
Brand Primary).4. Pick your new color and click Save.
.png)
Changing Fonts
How to Change Fonts
1. Go to Project Settings -> Fonts tab.
2. Upload your font file or select a Google Font from the list.
3. Go back to the Designer.
4. Select the Body (All Pages) tag in the Navigator or the Heading tag.
5. Change the font in the Typography panel on the right.
2. Upload your font file or select a Google Font from the list.
3. Go back to the Designer.
4. Select the Body (All Pages) tag in the Navigator or the Heading tag.
5. Change the font in the Typography panel on the right.
.png)
Managing Content (CMS)
Managing Services & Testimonials (CMS)
You don't need to duplicate pages manually. Use the CMS to add content.
You don't need to duplicate pages manually. Use the CMS to add content.
1. Click the CMS icon (stack of coins) in the left sidebar.
2. Select a Collection (e.g., Services, Rituals).
3. Click New Item to add a new service or click on an existing item to edit text and images.
4. Click Save or Publish.
2. Select a Collection (e.g., Services, Rituals).
3. Click New Item to add a new service or click on an existing item to edit text and images.
4. Click Save or Publish.
.png)
Forms Setup
Connecting Forms
To receive booking requests to your email:
To receive booking requests to your email:
1. Go to Project Settings -> Forms tab.
2. In the "Send form submissions to" field, enter your email address.
3. Save changes and Publish the site.
2. In the "Send form submissions to" field, enter your email address.
3. Save changes and Publish the site.
Images
Replacing Images
To change any image on the site:
To change any image on the site:
1. Double-click the image (or select it and click the gear icon ⚙️ settings).
2. Click Replace Image.
3. Upload your own photo.Tip: Try to use images with a similar aspect ratio (vertical/horizontal) to keep the layout clean.
2. Click Replace Image.
3. Upload your own photo.Tip: Try to use images with a similar aspect ratio (vertical/horizontal) to keep the layout clean.
.png)
Setting up Buttons
How to link buttons:
1. Click on any button.
2. Click the Gear Icon ⚙️ (Settings) in the right panel.
3. Under Link Settings, choose where the button should lead:
- URL: To an external site.
- Page: To another page within your website (e.g., "Contact" or "Services").
- Section: To a specific part of the current page (anchor link).
2. Click the Gear Icon ⚙️ (Settings) in the right panel.
3. Under Link Settings, choose where the button should lead:
- URL: To an external site.
- Page: To another page within your website (e.g., "Contact" or "Services").
- Section: To a specific part of the current page (anchor link).
.png)
SEO & Favicon
Before publishing, make sure to set up your SEO:
1. Go to the Pages panel (left sidebar).
2. Hover over a page (e.g., Home) and click the Gear Icon ⚙️.
3. Fill in the Title Tag and Meta Description. This is what people will see in Google search results.
2. Hover over a page (e.g., Home) and click the Gear Icon ⚙️.
3. Fill in the Title Tag and Meta Description. This is what people will see in Google search results.
.png)
How to change the Favicon (Browser Icon):
1. Go to Project Settings (W menu -> Site Settings).
2. Go to the General tab.
3. Scroll down to Icons.
4. Upload your Favicon (32x32px) and Webclip (256x256px).
2. Go to the General tab.
3. Scroll down to Icons.
4. Upload your Favicon (32x32px) and Webclip (256x256px).
.png)
.png)
New to Webflow?
If you are completely new to Webflow, don't worry! It's a visual tool, and you will learn it quickly. Here are the official free resources to help you start: