Style Guide Starter v 3.0

Introduction

Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.
‍
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

Your style guide is not viewable to the public, and can only be accessed with a password.

If you have any questions about this style guide or your website in general, then please do not hesitate to email me - linford@heka.design

Colors

Main Colors

Secondary Colors

Tertiary Colors

Accent & interactive Colors

Neutral Colors

Typography

Fonts

Headings

Paragraphs

The .p class can have a number of combo-classes applied to it, such as -
‍
.large (increases font size to 1.5 rem).
.tiny (reduces font size to 0.75 rem).
.no-max-width (disables the 90 ch max-width setting).
.opacity (reduces opacity to 60 %).

Others

UI Elements

Buttons

Icons

All icons are from Google Material Icons Library.
To use an icon type icon name in a text block/text span. Then apply css class .material-icons.
You can find icon name list on the link above.

Social Network Icons

components

Navigation & Containers

Heading

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.

Heading

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.

Heading

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.

Heading

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.

‍

Rich text

What’s a Rich Text element ?

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.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is an ordered list -

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet

This an unordered list -

• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet

Below is what block quotes will look like in your blog posts -

"Lorem ipsum dolor sit amet, consectetur adipiscing elit."

‍

Sliders

Trusted and loved by the incredible teams of

Read our customer testimonials

Cards

product design

Our team will guide you through the entire process of ideating, validating and designing your product from scratch.

UX Design

UX Audit

User Flow

Design System

Forms

Others

Utility classes

spacing

text

Image boxes

.image-frame

.image-frame .zoom-in

.image-frame .zoom-in .spin-10

.ratio-box .1:1

.ratio-box .4:3

.ratio-box .3:2

.ratio-box .8:5

.ratio-box .16:9

.ratio-box .21:9

.bg-filter

.parent-cover

Mix blend modes

.mbm-normal

.mbm-multiply

.mbm-screen

.mbm-overlay

.mbm-darken

.mbm-lighten

.mbm-color-dodge

.mbm-color-burn

.mbm-hard-light

.mbm-soft-light

.mbm-difference

.mbm-exclusion

.mbm-hue

.mbm-saturation

.mbm-color

.mbm-luminosity

Exclude ip adress from analytics

To allow anyone on your site (usually beta testers or internal users) to exclude themselves from analytics, you can have them visit this page and use the button below. With this method, similar to above, the page would need to be visited and enabled per domain and per browser, for every user.

warning    This snippet only works for Plausible analytics.

HTML embed for preview in designer

You can paste this HTML Embed in the bottom of a page, before the footer for exemple. It provides a more accurate preview inside Webflow designer by executing some of the custom code, that would be visible only on live version of the website.

warning    Don't forget to delete this element before publishing the website to prevent duplicated code that would eventually slow down page load.