STYLE GUIDE

General Guide

Typography

Headings, body and other common text elements

Heading 1

Poppins font
Weight 700 - Size 56px - Height 68px
Margin bottom 8px

Use for Hero Title of each page

Heading 2

Poppins font
Weight 700 - Size 30px - Height 36px
Margin bottom 16px

Use for Title of each section

Heading 3

Noto Sans font
Weight 700 - Size 20px - Height 30px
Margin bottom 4px

Use for Title of each information group

Heading 4

Noto Sans font
Weight 700 - Size 16px - Height 24px
Margin bottom 4px

Using for Title of groups in Checkout page

Heading 5

Noto Sans font
Weight 700 - Size 14px - Height 20px
Margin bottom 4px

Using in Footer

Heading 6

Noto Sans font
Weight 400 - Size 12px - Height 18px

Using in Footer

Normal Body

Noto Sans font
Weight 400 - Size 16px - Height 24px

The common type used for paragraph and content

Small Body

Noto Sans font
Weight 400 - Size 14px - Height 20px

Use for Title of each section

TIPS:
  • All types above are align left so that if want to align center, add class
    [Align Text Center]
  • All types above use Black color so that if want to change text color, add class [Color Text Grey], [Color Text White], [Color Text Blue]
  • There is a variant of typo is italic and bold, add class [Text Bold] to use
  • Change style of text here will apply for all places

Color

Primary, secondary and grays colors
Primary - #cfa719
Secondary - #0352af
Black (for text) - #323a43
Medium (for text) - #323a43
BG light - #f7f7f8
BG white - #ffffff
Blue darker (for decoration) - #023b7d
Blue lighter (for decoration) - #e6eef8
Line (for divider/line) - #ecedee
Field line (input field) - #d7dde4

Icons

Icons used in Button and illustration.

Spacing

Besided default margin of Typography, if you want to inscrease space between objects. Use Margin Bottom or Right.

Use classes below if using margin bottom:

  • [Margin Bottom 16px]
  • [Margin Bottom 24px]
  • [Margin Bottom 48px]

Use classes below if using margin right:

  • [Margin Right 8px]
  • [Margin Right Left 24px]

Buttons

Component, text style and size variations

Types

Variants

Use in Card components such as Course info card, checkout preview

Avatars