Style Guide – Brander

Style Guide

/ Style Guide

01

Colors

Brand

Brand Color

#4866DE

Brand Subtle

#F5F5FF

Brand Light

#DCE0F4

Brand Hover

#304494

Brand Pressed

#24336F

State

Error

#F74622

Warning

#EDCD00

Success

#53D642

Info

#00C9E8

Text

Title

#181D34

Subtitle

#3E4356

Text

#6A6D7C

Caption

#7D808D

Placeholder

#A3A6AF

Text light

#F5F5FF

Element

Background

#F5F5FF

Border

#DCE0F4

Brand Dark

#18224A

02

Typography

DISPLAY

ANTON / 40 px

THE QUICK BROWN FOX JUMPS

H1

ANTON / 175 px

THE QUICK BROWN FOX JUMPS

H2

Poppins Semibold / 70 px

THE QUICK BROWN FOX JUMPS

H3

Poppins Medium / 54 px

THE QUICK BROWN FOX JUMPS

H4

Poppins Semibold / 40 px

THE QUICK BROWN FOX JUMPS

H5

Poppins Medium/ 36 px

THE QUICK BROWN FOX JUMPS

H6

Poppins Medium / 28 px

THE QUICK BROWN FOX JUMPS

Text

Poppins Regular / 18 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Text Medium

Poppins Medium / 18 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Small Text

Poppins Regular / 14 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Navigation

Poppins Regular / 16 px

Home I About Us I Service I Projects I Contact

Caption

Poppins Regular/ 16px

Contact me for more information

Caption

Poppins Medium/ 16px

Contact me for more information

Button

Poppins Medium/ 20px

Let's Talk

03

UI Element

Button Size

Button Type

Button Icon

Counter

Google Reviews

0

Finished Work

0 K

Years of Experience

0

Experts Team

0 +

Satisfied Clients

0

04

Form

Get in touch with me

Get in touch with me