UI Kit Styleguide
of Daeng Web.

(This Web)

01. Typography

Heading

Heading 1 - XXL

Font: Circular Bold
Size: 60px

Heading 2 - XL

Font: Circular Bold
Size: 48px

Heading 3 - Large

Font: Circular Bold
Size: 32px

Heading 4 - Medium

Font: Circular Bold
Size: 24px

Default Size

Font: Circular Bold
Size: 16px

HEADING 5 SMALL (Capitalized)

Font: Circular Bold
Size: 16px

Paragraph Text

Paragraph1: Circular Book Std. 16px Line height 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Paragraph 2: Circular Book Std. 18px Line height 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Paragraph 3: Inter 18px Line height 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Big Text

Big Text.

Font: Circular Bold
Size: 120px

02. Colors

Global Yellow

#FFD228

Global Blue

#0057A4

Global Black

#212121

Grey Background

#F6F6F6

Global White

#FFFFFF

03. Buttons

Primary Button

Semantic

Full Width Button

Click Me!

UI Kit Styleguide of Daeng Web.