UI Styleguide v.1

01. Grid

(12 columns) 88px column width - 20px gutter width

02. colors

#F05A21

#142032

#6D737E

#CBD3D9

#F5F6F7

#FF0000

03. Typography

Nimbus Sans

Light

Nimbus Sans

Regular

Nimbus Sans

Bold

Nimbus Sans

Black

Heading 1

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 68px / 78px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 48px / 58px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 28px / 38px
How can we help in your eCommerce?

Heading 2

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 42px / 52px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 36px / 44px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 26px / 34px
How can we help in your eCommerce?

Heading 3

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 38px / 48px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 28px / 38px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 24px / 34px
How can we help in your eCommerce?

Heading 4

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 32px / 42px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 24px / 32px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 22px / 26px
How can we help in your eCommerce?

Heading 5

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 28px / 34px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 22px / 28px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 20px / 26px
How can we help in your eCommerce?

Heading 6

Desktop

Font family: Nimbus Sans / Black
variant & line-height: 22px / 32px
How can we help in your eCommerce?

Laptop

Font family: Nimbus Sans / Black
variant & line-height: 20px / 28px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Black
variant & line-height: 18px / 26px
How can we help in your eCommerce?

Paragraph 1

Desktop

Font family: Nimbus Sans / Regular
Size & line-height: 18px / 28px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Regular
Size & line-height: 16px / 24px
How can we help in your eCommerce?

Paragraph 2

Desktop

Font family: Nimbus Sans / Regular
Size & line-height: 16px / 24px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Regular
Size & line-height: 14px / 22px
How can we help in your eCommerce?

Paragraph 3

Desktop

Font family: Nimbus Sans / Regular
Size & line-height: 14px / 22px
How can we help in your eCommerce?

Phone

Font family: Nimbus Sans / Regular
Size & line-height: 12px / 20px
How can we help in your eCommerce?

04. Buttons

Big button

Primary (no icon) Primary (with icon) Secondary (no icon) Secondary (with icon)
Normal Normal Normal Normal
Active Active Active Active
Disabled Disabled Disabled Disabled

Medium button

Primary (no icon) Primary (with icon) Secondary (no icon) Secondary (with icon)
Normal Normal Normal Normal
Active Active Active Active
Disabled Disabled Disabled Disabled

Small button

Primary (no icon) Primary (with icon) Secondary (no icon) Secondary (with icon)
Normal Normal Normal Normal
Active Active Active Active
Disabled Disabled Disabled Disabled

Special button

Normal
Active
Disabled

05. Elements

Checkboxes

Radio buttons

Input

Normal
Active
Disabled
Invalid

The name that you entered is not valid.

06. Icons

Line icon

Chevron down
Chevron up
Chevron right
Chevron left
Arrow down
Arrow up
Arrow right
Arrow left

Multicolor icon

Delivered UI / UX
Online ecommerce
Digital services
Page view