Template Info

Style Guide

An in-depth guide to mastering color, typography, layout, and other essential design elements

Insights
ColorsTypographyButtons

Colors

Yellow 400

#E6E646

Yellow 600

#E6E646

Background / Black 700

#222222

Background / Black 800

#161616

Background / Black 850

#1C1C1C

Background / Black 900

#0F0F0F

Background / Black 1000

#000000

Border / Gray 800

#2A2A2A

Border / Gray 850

#202020

Text / White

#FFFFFF

Text / Gray 300

#BFBFBF

Text / Gray 500

#8A8A8A

Status / Green 400

#7BC98F

Status / Green 400 14A

rgba(76,175,80,0.14)

Status / Green 400 25A

rgba(76,175,80,0.25)

Alpha / Yellow 400 3A

rgba(251,251,76,0.025)

Alpha / Yellow 400 10A

rgba(251,251,76,0.1)

Alpha / Yellow 400 40A

rgba(251,251,76,0.4)

Alpha / Black 900 35A

rgba(15,15,15,0.35)

Alpha / Black 900 92A

rgba(15,15,15,0.92)

Alpha / Black 950 60A

rgba(10,10,10,0.6)

Alpha / White 6A

rgba(255,255,255,0.06)

Typography

Heading 1

H1 - 132px /100% || Regular || Lora

Heading 2

H2 - 72px /105% || Regular || Lora

Heading 3

H3 - 32px /110% || Regular || Lora

Heading 4

H3 - 24px /130% || Regular || Lora

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 - 16px /160% || Regular || Inter

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,