The Stylebook

The Stylebook is your styleguide that it will maintain the coherence of the design of your website and keep a uniform and homogeneous style, without breaking with the image that you want to convey to the visitor.

Styles
Structural
Functional
Colors
Primary
#12c2e9
#c471ed
#f64f59
AAA
Gradient
#12c2e9
#c471ed
#f64f59
AAA
Dark Blue
#0e1a34
AAA
Grey
#878787
AAA
Purple
#321889
AAA
Light Blue
#278ff8
AAA
Gold
#f6b801
AAA
Gold
#f6b801
AAA

Typography

Typeface
Roboto
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Element - 4.209rem / 1.1 / Normal

H1

Element - 3.157rem / 1.1 / Normal

H2

Element - 1.2rem / 1.2 / Medium

H3

Element - 2.369rem / 1.1 / Medium

H4

Element - 1.333rem / 1.1 / Normal
H5
Element - 1rem / 1.1 / Normal
H6
Class

H1

Class

H2

Class

H3

Class

H4

Class
H5
Class
H6
Typeface
Font
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: The body font should be set on the root 'Body (All Pages)' tag.
Paragraph Big (p-big) - 1.2rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - 1rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph Small (text-small) - 0.8rem / 1.4 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List
Quote - 1.5rem / 1.5 / Normal
Block Quote – Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Buttons

Btn x Outline
Btn x Secondary
Btn x Secondary xx Outline

Form

<label>
Txt
Txa
Chb
Rdo
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
by
by

Grid

[Grid]

Container

[Container]
[Container] Inner x Large
[Container] Inner x Medium
[Container] Inner x Small
[Container] Inner x Left
[Container] Inner x Right

Section

[Section] H Wrapper
[Section] V Wrapper
[Section] V Wrapper x Reduced
[Section] V Wrapper x Small

Vertical

Vertical / 2XS
Vertical / XS
Vertical / S
Vertical / M
Vertical / L
Vertical / XL
Vertical / 2XL
Vertical / 3XL
Vertical / 4XL
Vertical / 5XL
Vertical / 6XL
Vertical / 7XL

Horizontal spacing

Horizontal / 2XS
Horizontal / XS
Horizontal / S
Horizontal / M
Horizontal / L
Horizontal / XL
Horizontal / 2XL
Horizontal / 3XL
Horizontal / 4XL
Horizontal / 5XL
Horizontal / 6XL
Horizontal / 7XL

Padding

Padding / 2XS
Padding / XS
Padding / S
Padding / M
Padding / L
Padding / XL
Padding / 2XL
Padding / 3XL
Padding / 4XL
Padding / 5XL

Align

Align / Left

This text aligns to the left in desktop breakpoint and smaller ones.

Align / Left Tab

This text aligns to the left in tablet and smaller breakpoints.

Align / Left Mob

This text aligns to the left in in mobile, landscape and portrait.

Align / Center

This text aligns to the center in desktop breakpoint and smaller ones.

Align / Center Tab

This text aligns to the center in tablet and smaller breakpoints.

Align / Center Mob

This text aligns to the center in in mobile, landscape and portrait.

Align / Right

This text aligns to the right in desktop breakpoint and smaller ones.

Align / Right Tab

This text aligns to the right in tablet and smaller breakpoints.

Align / Right Mob

This text aligns to the right in in mobile, landscape and portrait.

Line Height

Line Height / XS

This text has a line-height of 1 (unitless) in desktop breakpoint and smaller ones.

Line Height / XS Tab

This text has a line-height of 1 (unitless) in tablet and smaller breakpoints.

Line Height / XS Mob

This text has a line-height of 1 (unitless) in mobile, landscape and portrait.

Line Height / S

This text has a line-height of 1.25 (unitless) in desktop breakpoint and smaller ones.

Line Height / S Tab

This text has a line-height of 1.25 (unitless) in tablet and smaller breakpoints.

Line Height / S Mob

This text has a line-height of 1.25 (unitless) in mobile, landscape and portrait.

Line Height / M

This text has a line-height of 1.5 (unitless) in desktop breakpoint and smaller ones.

Line Height / M Tab

This text has a line-height of 1.5 (unitless) in tablet and smaller breakpoints.

Line Height / M Mob

This text has a line-height of 1.5 (unitless) in mobile, landscape and portrait.

Line Height / L

This text has a line-height of 1.75 (unitless) in desktop breakpoint and smaller ones.

Line Height / L Tab

This text has a line-height of 1.75 (unitless) in tablet and smaller breakpoints.

Line Height / L Mob

This text has a line-height of 1.75 (unitless) in mobile, landscape and portrait.

Line Height / XL

This text has a line-height of 2 (unitless) in desktop breakpoint and smaller ones.

Line Height / XL Tab

This text has a line-height of 2 (unitless) in tablet and smaller breakpoints.

Line Height / XL Mob

This text has a line-height of 2 (unitless) in mobile, landscape and portrait.

Line Height / 0

Line Height 0

Font Style

Font Style / Upper

Uppercase

Font Style / Under

Underline

Font Style / Strike

Strikethrough

Font Style / None

Uppercase

Ratio

Ratio / Square
Ratio / Square Tab
Ratio / Square Mob
Ratio / Panorama
Ratio / Panorama Tab
Ratio / Panorama Mob
Ratio / Landscape
Ratio / Landscape Tab
Ratio / Landscape Mob
Ratio / Standard
Ratio / Standard Tab
Ratio / Standard Mob
Ratio / Tall
Ratio / Tall Tab
Ratio / Tall Mob
Ratio / Skyscraper
Ratio / Skyscraper Tab
Ratio / Skyscraper Mob

This div has its display set to inline-block on tablet and smaller breakpoints.

Position

Position / Static

This div has its position set to static on desktop breakpoint and smaller ones.

Position / Static Tab

This div has its position set to static on tablet and smaller breakpoints.

Position / Static Mob

This div has its position set to static on mobile, landscape and portrait.

Position / Relative

This div has its position set to relative on desktop breakpoint and smaller ones.

Position / Relative Tab

This div has its position set to relative on tablet and smaller breakpoints.

Position / Relative Mob

This div has its position set to relative on mobile, landscape and portrait.

Display

Display / Block

This div has its display set to block on desktop breakpoint and smaller ones.

Display / Block Tab

This div has its display set to block on tablet and smaller breakpoints.

Display / Block Mob

This div has its display set to block on mobile, landscape and portrait.

Display / InBlock

This div has its display set to inline-block on desktop breakpoint and smaller ones.

Display / InBlock Tab
Display / InBlock Mob

This div has its display set to inline-block on mobile, landscape and portrait.

Display / Inline

This div has its display set to inline on desktop breakpoint and smaller ones.

Display / Inline Tab

This div has its display set to inline on tablet and smaller breakpoints.

Display / Inline Mob

This div has its display set to inline on mobile, landscape and portrait.

Display / None
Display / None Tab

This div has its display set to none on tablet and smaller breakpoints.

Display / None Mob

This div has its display set to none on mobile, landscape and portrait.