Style Guide

Fonts

Bonkers

Type : Custom

Used for : headings & overline

Download the font

SILKA

Type : lineal

Used for :  paragraphs & navigation

Download the font

Colors

Name : Primary

Ref : 8C50F5

Used for : Highlights and buttons

Name : Secondary

Ref : FFD528

Used for : Highlights and buttons

Name : secondary

Ref : FF62AD

Used for : Highlights and buttons

Name : Primary

Ref : 8C50F5

Used for : Highlights and buttons

Name : 100 black

Ref : 1B1824

Used for :  Backgrounds

Name : Medium Black

Ref : 221E2C

Used for :  Background variation

Name : Light Black

Ref : 2F2844

Used for : border and strokes

Name : Light Grey

Ref : BBBABD

Used for : 
subtitle and light texts

Name : White

Ref : FFFFFF

Used for : texts

Headings

HTML H1

Heading H1

Easy Peasy
Lemon

Squeezy

HTML H2

Heading H2

HTML H3

Heading H3

HTML H4

Heading H4

OVERLINE

Paragraphs

HTML Paragraph
‍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.

Text Medium
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.

Text Regular
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.

Text Small
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.

Button

Class : .Button

Get started

Class : .Button .Is Small

Get started

Class : .Button .Is Secondary

Get started

Class : .Button .Is Secondary .Is Small

Get started

Class : .Button Icon

Button

Class : .Link

Text Link

Rich Text

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