Buy Coinect
All Pages
Arrow Down Icon

[ Template ]

Style Guide

A style guide is a set of standards for writing and design, ensuring consistency and clarity across website.

Buy Template
Buy Template
White Right ArrowWhite Right Arrow
Layout
Section Padding:
Base
Tablet
Mobile L
Mobile

Normal:

40px

40px

20px

20px

Slim:

12px

12px

12px

12px

Container:
Base
Tablet
Mobile L
Mobile

Max Width:

1360px

1360px

1360px

1360px

Button Padding:
Base
Tablet
Mobile L
Mobile

Left and Right:

Small (16px)

Small (16px)

Small (16px)

Small (16px)

Top and Bottom:

Tiny (10px)

Tiny (10px)

Tiny (10px)

Tiny (10px)

Macro Spacing:
Base
Tablet
Mobile L
Mobile

Epic:

200px

200px

200px

200px

Enourmous:

156px

156px

156px

156px

Colossal:

128px

128px

128px

128px

Giant:

112px

112px

112px

112px

Massive:

96px

96px

96px

96px

Huge:

80px

80px

80px

80px

Base Spacing:
Base
Tablet
Mobile L
Mobile

Spacious:

72px

72px

72px

72px

Extra Large:

64px

64px

64px

64px

Large:

56px

56px

56px

56px

Big:

48px

48px

48px

48px

Regular:

40px

40px

40px

40px

Medium:

32px

32px

32px

32px

Base:

24px

24px

24px

24px

Micro Spacing:
Base
Tablet
Mobile L
Mobile

Semi:

20px

20px

20px

20px

Small:

16px

16px

16px

16px

Little:

12px

12px

12px

12px

Tiny:

10px

10px

10px

10px

Mini:

8px

8px

8px

8px

Nano:

6px

6px

6px

6px

Micro:

4px

4px

4px

4px

Fonts

Main:

Instrument Sans

Italic:

Lora

Font Size:
Base
Tablet
Mobile L
Mobile

H1:

56px

48px

48px

40px

H2:

48px

40px

40px

36px

H3:

40px

36px

36px

32px

H4:

32px

32px

32px

30px

H5:

24px

24px

24px

24px

H6:

20px

20px

20px

20px

Body M:

20px

20px

20px

20px

Body:

16px

16px

16px

16px

Body S:

14px

14px

14px

14px

Body XS:

12px

12px

12px

12px

Button Text:

16px

16px

16px

16px

Font Height:
Base
Tablet
Mobile L
Mobile

H1:

110%

110%

110%

110%

H2:

120%

120%

120%

120%

H3:

110%

110%

110%

110%

H4:

120%

120%

120%

120%

H5:

120%

120%

120%

120%

H6:

120%

120%

120%

120%

Body Rich Text:

160%

160%

160%

160%

Body M:

140%

140%

140%

140%

Body:

140%

140%

140%

140%

Body S:

120%

120%

120%

120%

Body XS:

140%

140%

140%

140%

Button Text:

120%

120%

120%

120%

Letter-Spacing:
Base
Tablet
Mobile L
Mobile

H1:

-1.12px

-0.96px

-0.96px

-0.8px

H2:

-0.96px

-0.8px

-0.8px

-0.72px

H3:

-0.8px

-0.72px

-0.72px

-0.64px

H4:

-0.64px

-0.64px

-0.64px

-0.6px

H5:

-0.48px

-0.48px

-0.48px

-0.48px

H6:

-0.4px

-0.4px

-0.4px

-0.4px

Font Weight:
Base
Tablet
Mobile L
Mobile

Normal:

400

400

400

400

Medium:

500

500

500

500

Semi-Bold:

600

600

600

600

Bold:

700

700

700

700

Colors
Light
White
Dirty White
Light Orange
Light Orange 60%
Light Orange 20%
Light Orange 15%
Light Orange 10%
Light Orange 5%
Dark
White
Dirty White
Black 60%
Black 30%
Black 20%
Black 10%
Other
Light Green
Green
Orange
System Messages
Success
Error
Other

Blur:

32px

Radius:
Base
Tablet
Mobile L
Mobile

Huge:

100px

100px

100px

100px

Large:

24px

24px

24px

24px

Normal:

16px

16px

16px

16px

Small:

12px

12px

12px

12px

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript