Opti-Num Styles
  • Colours
  • Typography
  • Icons
Symbols
  • Buttons

Opti-Num Style Guide V1.0

Please note: This is a fluid document, and will evolve as and when the project moves forward. This version is a base stylesheet.

Buy Template

Colours

Primary Colors

Primary 1
#00d5c8
Primary 2
#1072B9
Primary 3
#162034
Neutral 100
#F4F9FF

Linear Gradient

Gradient
#1072B9-#00b7ac

Neutral Colors

Neutral 800
#080808
Neutral 700
#2B2B2B
Neutral 600
#575757
Neutral 500
#989898
Neutral 400
#CCCCCC
Neutral 300
#EDEDED
Neutral 200
#F6F6F6
Neutral 100
#FFFFFF

Typography_Poppins

Special Text

Display 1 Text

Display 1 - 94px/92px

Display 2 Text

Display 2 - 34px/36px

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 74px/86px

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px/62px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/34px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/28px
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/20px
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/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.

Paragraph Small - 14px/20px

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 - 16px/27px

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 - 20px/32px
Link - Lorem ipsum dolor sit amet
Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum.
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
Lorem ipsum dolor sit
Figure and Figure Caption

Icons

TBC

Buttons

Small
Button Primary - Small
Default 
Button Primary - Default
Default 
Button Primary - Gradient
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large