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 Accent
#F1D152
AAA
Dark Brown
#323232
AAA
White
#FFFFFF
AAA
Dark Grey
#3b4142
AAA
Mid Grey
#A3A3A3
AAA
Light Grey
#D8D9D8
AAA

Typography

Headings

Typeface
Font
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 - 8rem / 1.1 / Normal

H1

Element - 5.375rem / 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

Body

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
Button Text

Call to action

Call to action

Call to action

Btn x Outline
Button Text
Btn x Secondary
Button Text
Btn x Secondary xx Outline
Button Text

Form

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

Cards

Titulo

En La Repera Music, el primer paso siempre es entender a fondo tus necesidades y preferencias. Queremos conocer cada detalle de tu evento, desde la atmósfera que deseas crear hasta tus gustos musicales.

Cliente

Evento corporativo

Contratamos a La Repera Music para nuestra fiesta de empresa y fue la mejor decisión. Profesionales, talentosos y con un repertorio impresionante.

15

Dato

CONFÍAN EN NOSOTROS

CONFÍAN EN NOSOTROS

CONFÍAN EN NOSOTROS

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.