Style Guide

A style guide for web building ensures consistent design, layout, and user experience across the site.

Color

Dark Pink
#fa4ead
Dark Cyan
#02b6d4
Dark Orange
#fc6221
Light Pink
#f8c5eb
Light Cyan
#92fbff
Light Orange
#fda985
White
#ffffff
Light Silver
#eceff8
Black
#1b1b1b
Dark Silver
#dfdfdf
Silver
#fffafc
Gray
#4c4c4c

Heading Typography

Heading 1 - Aa Bb Cc

Heading 1
Poppins - 600 Semi Bold
Size: 4 Rem & 3 Rem
Height: 110%

Heading 2 - Aa Bb Cc

Heading 2
Poppins - 600 Semi Bold
Size: 3 Rem & 2,5 Rem
Height: 120%

Heading 3 - Aa Bb Cc

Heading 3
Poppins - 500 Medium
Size: 2,25 Rem & 2 Rem
Height: 120%

Heading 4 - Aa Bb Cc

Heading 4
Poppins - 500 Medium
Size: 2 Rem & 1,75 Rem
Height: 120%
Heading 5 - Aa Bb Cc
Heading 5
Poppins - 500 Medium
Size: 1,75 Rem & 1,625 Rem
Height: 120%
Heading 6 - Aa Bb Cc
Heading 6
Poppins - 500 Medium
Size: 1,5 Rem
Height: 120%

Rich Text Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Woman typing
Image caption

Button & Link

Default Button
Button Text
Outline Button
Button Text
CTA Button
Button Text