Style Guide
Logos
Graphics
Colors
Red
Background Color
100%
.bg-red-100
80%
.bg-red-80
60%
.bg-red-60
40%
.bg-red-40
Color
100%
.color-red-100
80%
.color-red-80
60%
.color-red-60
40%
.color-red-40
Blue
Background Color
100%
.bg-blue-100
80%
.bg-blue-80
60%
.bg-blue-60
40%
.bg-blue-40
Color
100%
.color-blue-100
80%
.color-blue-80
60%
.color-blue-60
40%
.color-blue-40
Yellow
Background Color
100%
.bg-yellow-100
80%
.bg-yellow-80
60%
.bg-yellow-60
40%
.bg-yellow-40
Color
100%
.color-yellow-100
80%
.color-yellow-80
60%
.color-yellow-60
40%
.color-yellow-40
Black
Background Color
100%
.bg-black-100
80%
.bg-black-80
60%
.bg-black-60
40%
.bg-black-40
Color
100%
.color-black-100
80%
.color-black-80
60%
.color-black-60
40%
.color-black-40
Typography
Title / Header 1
Family: Din Condensed
Weight: 600
This is a Heading 1
h1 .h1
Title / Header 2
Family: Din Condensed
Weight: 600
This is a Heading 2
h2 .h2
Title / Header 3
Family: Din Condensed
Weight: 600
This is a Heading 3
h3 .h3
Title / Header 4
Family: Din Condensed
Weight: 600
This is a Heading 4
h4 .h4
Title / Header 5
Family: Din Condensed
Weight: 600
This is a Heading 5
h5 .h5
Title / Header 6
Family: Din Condensed
Weight: 600
This is a Heading 6
h6 .h6
Text / Paragraph
Family: Din Condensed
Weight: 600
This is sample text.
Lorem ipsum dolor sit amet, sample bold consectetur nostrud
exercitatios sample italic mollit anim id est laborum
p .p
Text / Paragraph Small
Family: Din Condensed
Weight: 600
This is sample text smaller than paragraph.
Lorem ipsum dolor sit amet, sample bold consectetur nostrud
exercitatios sample italic mollit anim id est laborum
p.small
Menu Items
Family: Oswald
Weight: 700
Menu Nav Item
p.font-nav-item
Side Menu Sections Items
Family: DIN Condensed
Weight: 700
p.font-menu-section .bg-blue-100
Font Ramo de Flores
Family: Ramo de Flores
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
p.font-ramo-de-flores
Font Ramo de Jazmin
Family: Ramo de Jazmin
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
p.font-ramo-de-jazmin
Font Ramo de Rosas
Family: Ramo de Rosas
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
p.font-ramo-de-rosas
Font Robu Bold
Family: ROBU Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
p.font-robu-bold
Punchline Icons
Family: Ramo de Flores
p.punchline-icons.color-red-100
p.punchline-icons.color-yellow-100
p.punchline-icons.color-blue-100
Punchline Text
Family: Ramo de Rosas
Program Details
p.punchline-text
Punchline Heading
Family: Ramo de Jazmin
Not Just Good, It's...
p.punchline-heading
Punchline Heading Cursive
Family: ROBU
So Welcome To
p.punchline-heading-cursive
Buttons
a.button.button-main
a.button.button-main.btn-hover-pulse
a.button.button-main.btn-hover-blue
a.button.button-main.btn-hover-blue.btn-hover-pulse
a.button.button-main.btn-color-yellow
a.button.button-main.btn-color-yellow.btn-hover-pulse
a.button.button-main.btn-color-yellow.btn-hover-pulse.btn-hover-blue
a.button.button-main.button-main-large
a.button.button-main.button-main-large.btn-hover-blue
a.button.button-main.button-main-medium.btn-hover-pulse
a.button.button-main.button-main-large.btn-hover-blue
a.button.button-masked.button-main-large.btn-hover-blue