Website Design System

Colors

#361999

rgb(54,25,153)

#78FFF1

rgb(120,255,241)

#FF6495

rgb(255,100,149)

#162B32

rgb(22,43,50)

#FF4838

rgb(255,72,56)

#490B3D

rgb(73,11,61)

#BD1E51

rgb(189,30,81)

#F1B814

rgb(241,184,20)

#1A2238

rgb(26,34,56)

#9DAAF2

rgb(157,170,242)

#FF6A3D

rgb(255,106,61)

#F4DB7D

rgb(244,219,125)

#371BB1

rgb(55,27,177)

#05F4B7

rgb(5,244,183)

#12151F

rgb(18,21,31)

#1FC58E

rgb(31,197,142)

#FAE62D

rgb(250,230,45)

#191414

rgb(25,20,20)

#F7F7F7

rgb(247,247,247)

#7DA2A9

rgb(125,162,169)

#8DA242

rgb(141,162,66)

Fonts

Roboto

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Open Sans

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Nunito

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Lora

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Raleway

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Barlow

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Merriweather

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Playfair Display

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Noto Serif

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Text Styles

H1: Main Heading

  • Font-weight: 700 (bold)
  • Font-size: 32px
  • Font-family: Noto Serif

H2: Subheading

  • Font-weight: 500
  • Font-size: 24px
  • Font-family: Merriweather

P: Paragraph

  • Font-weight: 400 (regular)
  • Font-size: 16px
  • Font-family: Merriweather