Gulp BoilerplateEJS

Base of typography

Our typography, the most important medium of communication in our platform, needs to be perfectly legible to convey the core value of our brand.

Our typeface

Name Typeface Example
Ponder-Regular A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "
Ponder-Medium A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "
Ponder-Bold A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "
Ponder-Black A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "
Ponder-Light A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "
Ponder-Thin A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i z k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) _ + = - , . / [ ] { } \ | : ; ' "

Heading

Tag typeface font-size Example
h1 Ponder-Black 56px/3rem

Heading text h1
h2 Ponder-Black 40px/2.5rem

Heading text h2
h3 Ponder-Bold 36px/2.25rem

Heading text h3
h4 Ponder-Bold 28px1.75rem

Heading text h4
h5 Ponder-Bold 24px/1.5rem
Heading text h5
h6 Ponder-Medium 18px/1.125rem
Heading text h6

Paragraph

tag typeface Example
p Ponder-Regular

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
strong Ponder-Bold

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Base of Colors

colors play an important role when we are working with a product, a service or a space. The right combination of colors can influence how users feel, think, and behave.

Primary Colors

Black is used primarily for body text and headings, and White is used for screen backgrounds and negative space.

BLACK100

Hex: #000000

BLACK80

Hex: #222222

WHITE100

Hex: #ffffff

BLUE100

Hex: #003049

ORANGE100

Hex: #f77f00

Secondary Colors

Secondary color provides more ways to accent and distinguish our product. Each color is selected with purpose in order to provide meaningful feedback within our products

BLUE50

Hex: #05668d

RED100

Hex: #d62828

GREEN100

Hex: #02c39a

YELLOW100

Hex: #fcbf49

Shades and Tints

We intend for tints and shades to be ever evolving, offering an endless palette to choose from. Usage of these colors varies depending on scenarios, but they come in handy for components in our products.

RED100

Hex: #d62828

RED80

Hex: #de5353

RED60

Hex: #e67e7e

ORANGE100

Hex: #f77f00

ORANGE80

Hex: #f99933

ORANGE60

Hex: #fab266

GREEN100

Hex: #02c39a

GREEN80

Hex: #35cfae

GREEN60

Hex: #67dbc2

YELLOW100

Hex: #fcbf49

YELLOW80

Hex: #fdcc6d

YELLOW60

Hex: #fedfa4

BLUE100

Hex: #003049

BLUE80

Hex: #33596d

BLUE50

Hex: #05668d

BLUE30

Hex: #3785a4

Button

Buttons are action items that can initiate a certain action or change state, they can have customisable background, icons and text. Buttons should be easy to discover and clearly indicate the intended action.

Button Collection

a collection of button design system and variant colour can pick

Button Extra Modifier

type class modfier Example
Button link .link
button small .sm
button large .lg

Card

Cards are containers to show content or actions relevant to an app or certain function. They are always the top layer when They are shown in any layout. They can contain other components as part of them, also can have multiple behaviours depending on how they are used in a flow. They appear from the bottom and can be scrollable or fixed depending on their type.