Website Design System

Cherry Blossom Design

design by LetsCodeManh

01 Colors

Azalea

#F6CDDE

RGB

246, 205, 222

HSL

335, 69%, 88%

Wewak

#EF9EBA

RGB

239, 158, 186

HSL

339, 72%, 78%

Tapestry

#B0617F

RGB

176, 97, 127

HSL

337, 33%, 54%

Wine Berry

#491B40

RGB

73, 27, 64

HSL

312, 46%, 20%

Cod Gray

#121212

RGB

18, 18, 18

HSL

0, 0%, 7%

02 Fonts

Lorem ipsum dolor sit amet consectetur adipisicing elit.

normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

bold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

bold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

bold

Lorem ipsum dolor sit amet consectetur adipisicing elit.

normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

italic

Lorem ipsum dolor sit amet consectetur adipisicing elit.

bold

03 Text Styles

Design System

Header H1 - 48px - 600fw

Colors

Header H2 - 28px - 600fw

Quicksand

Header H3 - 20px - 600fw - uppercase - 2px letter-spacing

Cherry Blossom Design

Subheader - 24px - 500fw

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph - 18px - 400fw

Design System

Header H1 - 48px - uppercase - 600fw

Colors

Header H2 - 28px - 600fw

Inter

Header H3 - 20px - 500fw - uppercase - 2px letter-spacing

Cherry Blossom Design

Subheader - 24px - 300fw

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph - 18px - 300fw

Design System

Header H1 - 48px - uppercase - 400fw

Colors

Header H2 - 28px - 500fw

Raleway

Header H3 - 20px - 600fw - uppercase - 2px letter-spacing

Cherry Blossom Design

Subheader - 24px - 400fw

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph - 18px - 300fw

Design System

Header H1 - 48px - 400fw - uppercase

Colors

Header H2 - 28px - 300fw - uppercase - 2px letter-spacing

Montserrat

Header H3 - 20px - 500fw - uppercase - 2px letter-spacing

Cherry Blossom Design

Subheader - 24px - 400fw

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph - 18px - 400fw

04 Components