My Website Design System

Colors


#748B75

Moss green

main color


#ED8E45

Dark orange

accent color


#F9CB76

Orange-yellow

second accent


#F4F6F5

Ashy white

text color

Typography

Abril Fatface

This is Abril Fatface.
This is Abril Fatface.
This is Abril Fatface.


This is Abril Fatface.
This is Abril Fatface.
This is Abril Fatface.


This is Abril Fatface.
This is Abril Fatface.
This is Abril Fatface.

Poppins

This is Poppins.
This is Poppins.
This is Poppins.


This is Poppins.
This is Poppins.
This is Poppins.


This is Poppins.
This is Poppins.
This is Poppins.

Helvetica (fallback)

This is Helvetica.
This is Helvetica.
This is Helvetica.


This is Helvetica.
This is Helvetica.
This is Helvetica.


This is Helvetica.
This is Helvetica.
This is Helvetica.

Hierachy

H1
Main heading

Font-size: 32px

Font-family: Abril Fatface

Font-weight: 700 (bold)

H2
Subheading

Font-size: 24px

Font-family: Poppins

Font-weight: 500

p
Paragraph

Font-size: 16px

Font-family: Poppins

Font-weight: 400