Design System

Colors

Crimson

#DC143C

DarkMagenta

#8B008B

LemonChiffon

#FFFACD

DarkGreen

#006400

DarkOrange

#FF8C00

DeepSkyBlue

#00BFFF

Color palette allows us to be bold, tasteful, experimental, playful and sensitive.

Fonts

Source Code Pro

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

Poppins

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.

Font Sizes

In HTML, font sizes range from 1-7, with 1 being the smallest. Font sizes 2 and 3 are the most commonly used. If a font size is not specified the default setting is 3.

Font Typefaces

When HTML was first introduced there was only one font available. And while current versions of HTML and newer browsers allow greater flexibility in specifying preferred fonts for an HTML document to be displayed in, ultimately the choice is limited by which fonts end-users have installed on their systems (even then users may decide to set their browsers to override preferred font settings). A few commonly supported fonts are:

Text Styles

H1: Main page heading

  • Font-weight: 700 (bold)
  • Font-size: 26px
  • Font-family: Nunito Sans

H2: Subheading

  • Font-weight: 500
  • Font-size: 18px
  • Font-family: Poppins

P: Paragraph text

  • Font-weight: 400 (regular)
  • Font-size: 14px
  • Font-family: Poppins

Buttons

Buttons are interactive components and helps aid users in taking control and interacting with the web platform. There are various types of buttons based on their purposes.

Size(Medium)

Size(Small)