[[TOC]]

In Webflow, each page has 2 main fields related to the page name:

Page Name Is the name that is used in Webflow to identify the page. The name will start each word with capital letters. Example: "Contact Us".

Slug Name of the page that will be used as part of the URL. Must be always in lowercase and spaces must be replaced with -. For example: contact-us. Final URL will be www.somesite.com/contact-us

• Lower Case
• Spaces to be replaced by "-"
• Cannot be left with Webflow's automatic class names.

Standalone element that is meaningful on its own.

• Components start with “c-” (ie. c-hero)
• Use descriptive names
• Only 1 per element

Parts of a component and have no standalone meaning. These will receive a unique class name because they shouldn't be used somewhere else apart from being children of its relative parent.

• Starts with “c-component-name_" (ie.c-hero_content)
• Use descriptive names after the "_" character.
• Only 1 per element. cannot have combined classes.

Use them to change a component's appearance.

• Also known as “combo classes”. Cannot be used alone.
• Modifiers start with “cc-" (ie.cc-hero-big)
• Use descriptive names
• Ideally use 1 per element (there are exceptions)

Must be called using prefix c-title-x where x is the size number. the higher the number, the smaller is the font size.

Must be called using prefix c-text-x where x is the size number. The higher the number, the smaller is the font size. Default size is c-text-2.

Buttons have 2 layers.

1. They are first defined by the size and then by placement. they start with a class called c-button-x where x is the size. It can be either s, m or l.

2. The second layer is to indicate how important they are in terms of placement. They start with prefix cc-PLACEMENT where PLACEMENT can be either primary, secondary or tertiary.

Primary class	Secondary Class
c-button-s	cc-primary cc-secondary cc-tertiary
c-button-m	cc-primary cc-secondary cc-tertiary
c-button-l	cc-primary cc-secondary cc-tertiary

Used to wrap titles, text or buttons. provide a layer of separation from other elements.

Element	Class
titles	c-title-wrapper
text	c-text-wrapper
buttons	c-button-wrapper

Element	Class	Description
Spacing	space-1 space-2 space-3	must start with space-x where x is a number. higher number means smaller size. can be used for margins, paddings, gaps.
Colors	Defined in
font-family	font-family-1 font-family-2 font-family-3	Defines different fonts. font-family-1 must be used as default.

Must be called using prefix c-icon-x where x is the size number. The higher the number, the smaller is the font size. Default size is c-icon-2.

Primary class
c-icon-1
c-icon-2
c-icon-3

Colors in Webflow can always be defined using either the RGB or Hexadecimal coding as in the following screen:

Color Type	Description	Classes
Neutral	Different tones of grey. starts with neutral-x0 where x0 is a number that ends always with 0, and the higher the first number, the blacker the color will be.	neutral-50 neutral-400
Main	The main colors that are used. Typically here black and white colors will be included, as well as any other used a lot	primary secondary
Accent	Any other colors used apart from the Main and Neutral. Typically colors that are vivid and calls the attention. order for numbering can be any	accent-1 accent-2

Webflow components naming conventions are similar than those of classes:

• The name must start with the name of the tag that is the parent of the component. For example: a component that represents a Hero section and its parent element is a div, the component must be called div-hero.
• If there is already an existing component and it is required to build a new option, a -x suffix can be included where x can be replaced with a number. Following previous example, if div-hero exists and a new hero must be developed, it can be called div-hero-2.

• The class name must start as "custom-code_[name]". Name must describe custom code mission.