[[TOC]]

Define styles for each type element. Don’t use H1, H2, etc for style. The headings define the structure/markup, not the style.

• Font size must be set in EM or REM.
• Titles can be encapsulated with Wrappers to include spacing between the element and the following, unless its placed inside another component used for defining spacing like grids or flexbox.
• Look for the pre-defined classes that can be used in the Titles section.

Define styles for each of the different paragraphs and text blocks that will be used.

• Font size must be set in EM or REM.
• Texts can be encapsulated with Wrappers to include spacing between the element and the following, unless its placed inside another component used for defining spacing like grids or flexbox.
• Look for the pre-defined classes that can be used in the Text section.

This element is not used as frequent as the others. It's use is mostly focused on content that will be a long write like blog posts or news, where it makes sense to have a single place to modify the whole content instead of separating everything into elements as it will make its modification more difficult.

As default, there will be only 1 class for this called c-rich-text in which its titles, paragraphs, lists and others' styling will match the same elements that were defined separately in the same style guide. For example: H1 in rich text will match the styling defined for H1 in Style guide.

Links are basically an extension of text blocks or paragraphs, with the difference that they route to another page, as well as holding effects when hovering or clicking on it. Due to that, link classes will be only a few to hold these attributes, and any text-related styling will be provided with text classes as a parent element.

Classes available are:

Class	Description
c-link-primary	Default styling will be placed in this class.
c-link-secondary	Any different way to show links will be used in here. usually corresponds to showing a link where the background color in the area is of a similar color than c-link-primary

Other classes can be created to sort out other alternatives.

Even though colors are defined as classes to be displayed properly in the style guide, they need to be defined first in Webflow's palette as variables ( see Variables).

There are 3 type of colors to be defined:

• Main: Defining 3 colors: primary, secondary and terciary. these are the most colors being used through the website.
• Neutral: All kinds of grey tones required.
• Accent: Color palette that does not include white, black and grey tones.

Colors will be used in the following way:

• Classes defined in the style guide can be used. These will be placed as wrappers of child elements.
• Classes for this are defined using the following prefix: c-color-bg-. Examples:
  • c-color-bg-neutral-20
  • c-color-bg-primary
  • c-color-bg-accent-1
• In case of a specific class defined for a component, the background color can be set using the color variable

• Classes defined in the style guide can be used. These will be placed as wrappers of child elements.
• Classes for this are defined using the following prefix: c-color-text-. Examples:
  • c-color-text-neutral-20
  • c-color-text-primary
  • c-color-text-accent-1
• In case of a specific class defined for a component, the text color can be set using the color variable.

• Must be defined using <div>. avoid using <button>.
• Main classes will define the button sizes for the default view.
• secondary classes will define other alternatives like primary, secondary, border changes.
• These are the default names we are using for buttons: c-button-s c-button-m c-button-l
• These are the default secondary classes we are using for buttons: cc-primary cc-secondary cc-border

All form elements must be defined here. These will only have styling in place and no further settings will be added here like required or content-specific limitations such as Phone or Email. Those settings will be defined at the form as they are not class-dependent.

Available elements are:

Class	Description
c-form-textfield	classic input for the user to write such as name, profession, address, etc.
c-form-textarea	Input used for longer texts such as notes, messages.
c-form-dropdown	Displays a list of options to choose from.
c-form-label	Text that is used to show the user what type of data to write
c-form-item	Even though it is not defined in the style guide, this class will be used to wrap all elements related to a single field (Typically a field consists of a c-form-label and a c-form-textfield)

Coloring first-child element from list

• Font size must be set in EM or REM and must be defined on the div element, not in the svg.
• svgs used must not define a fixed width or height, and must include a fill="currentcolor" attribute in order to be able to define color from the parent classes defined below.
• icon class names have a suffix number. the bigger the number, the smaller the icon.
• These are the default names we are using for icons: c-icon-1 c-icon-2 c-icon-3

Spacing is not going to be shown as part of the style guide. However, it must be defined at this stage of the process.

Same as with colors, there will be variables which will define the spacing. They will be represented using prefix spacing- and a number. the lower the number, the bigger the size.

hidden: There are elements in a website that need to be hidden from the user. Whenever this is required, hidden can be useful. It will simple include a display: none.

mobile-hidden:Alternatively to the previous option, it can be required to only hide an element when in mobile view. For that, use mobile-hidden.