Midnight Forever Style Guide

Colors

Primary Colors

Primary Background
Primary Background
#1d1c26
Primary Yellow
Primary Yellow
#F2E3B6

Secondary Colors

Secondary Gold
Secondary Gold
#F2BF5E
Secondary Orange
Secondary Orange
#F2A057
Secondary Blue
Secondary Blue
#CEE8F2
Secondary Black
Secondary Black
#F2BF5E

Special Colors

Secondary Color 1
Secondary Color 1
#F2BF5E
Secondary Color 1
Secondary Color 1
#F2A057

Neutral Colors

Neutral 800
Neutral 800
#050505
Neutral 700
Neutral 700
#333333
Neutral 600
Neutral 600
#5F5F5F
Neutral 500
Neutral 500
#989898
Neutral 400
Neutral 400
#DEDEDE
Neutral 300
Neutral 300
#EDEDED
Neutral 200
Neutral 200
#F4F4F4
Neutral 100
Neutral 100
#FFFFFF

Typography

Special Text

Display 1 Text

Display 1 - 90px/104px

Display 2 Text

Display 2 - 64px/74px

Display 3 Text

Display 3 - 48px/52px

Display 4 Text

Display 4 - 36px/42px
Text 400 Medium - Lorem Ipsum
Text 400 Medium - Lorem Ipsum
Text 400 Semi Bold - Lorem Ipsum
Text 400 Extra Bold - Lorem Ipsum
Text 400 - 30px/36px
Text 300 Medium - Lorem Ipsum
Text 300 Medium - Lorem Ipsum
Text 300 Semi Bold - Lorem Ipsum
Text 300 Extra Bold - Lorem Ipsum
Text 300 - 28px/32px
Text 200 Medium - Lorem Ipsum
Text 200 Medium - Lorem Ipsum
Text 200 Semi Bold- Lorem Ipsum
Text 200 Extra Bold - Lorem Ipsum
Text 200 - 24px/28px
Text 100 Medium - Lorem Ipsum
Text 100 Medium - Lorem Ipsum
Text 100 Semi Bold- Lorem Ipsum
Text 100 Extra Bold - Lorem Ipsum
Text 100 - 16px/22px

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 68px/76px

Heading H2 - Aa Bb Cc Dd

Heading 2 - 52px/60px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 30px/36px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 24px/28px
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus.

Paragraph Small - 14px/18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 18px/24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 24px/38px

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
“Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque velit euismod in pellentesque massa placerat”
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List

Icons

Icon Password - Digital X Webflow Template

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Gradient - Small
Default
Button Gradient - Default
Large
Button Gradient - Large

Cards