UI Style Guide

Colors

Main colors

#222222

Almost black

Primary
#0072CE

Soprema blue

Seconday
#F5F5FA

Grey 1

#FFFFFF

White

#41693D

Green

Backgrounds & outlines - Neutral Shades

#FFFFFF

White

#F5F5FA

Gray 1

#E2E3EE

Gray 2

#D1D8E2

Gray 3

#6B7280

Gray 4

#051C2D

Navy

#222222

Almost black

#000000

Black

Fonts - Primary & secondary

#222222

Almost black

#4B5563

Charcoal

Fonts - Dark mode

#FFFFFF

White

#E2E3EE

Gray 2

Fonts - Links

#000000

Black

(link)

#0651A9

Soprema blue

(link hover)

Accent colors - Tags, content blocs

#1ECD84

Eco Green

#9C5DF4

Violet

#8EB7FF

Soft blue

#FC6944

Tangerine

#FEC62E

Construction Yellow

20% opacity

Alerts

#36A053

Success Green

#DA6F14

Warning yellow

#DF1642

Error red

#518CE3

Info Blue

8% opacity

Typeface

Aa

Azo Sans - Regular

ABCDEFGHIJKLMNOP
abcdefghijklmnop
12345678910
!@#$%?&*()_+

Aa

Azo Sans - Medium

ABCDEFGHIJKLMNOP
abcdefghijklmnop
12345678910
!@#$%?&*()_+

Aa

Azo Sans - Bold

ABCDEFGHIJKLMNOP
abcdefghijklmnop
12345678910
!@#$%?&*()_+

Aa

Azo Sans - Black

ABCDEFGHIJKLMNOP
abcdefghijklmnop
12345678910
!@#$%?&*()_+

Font Style

Display 1

The quick brown fox jumps over the lazy dog

Display 1

The quick brown fox jumps over the lazy dog

Display 1

The quick brown fox jumps over the lazy dog


Display 2

The quick brown fox jumps over the lazy dog

Display 2

The quick brown fox jumps over the lazy dog

Display 2

The quick brown fox jumps over the lazy dog


Heading 1

The quick brown fox jumps over the lazy dog

Heading 1

The quick brown fox jumps over the lazy dog

Heading 1

The quick brown fox jumps over the lazy dog


Heading 2

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog

Heading 2

The quick brown fox jumps over the lazy dog


Heading 3

The quick brown fox jumps over the lazy dog

Heading 3

The quick brown fox jumps over the lazy dog

Heading 3

The quick brown fox jumps over the lazy dog


Heading 4

The quick brown fox jumps over the lazy dog

Heading 4

The quick brown fox jumps over the lazy dog

Heading 4

The quick brown fox jumps over the lazy dog


Heading 5

The quick brown fox jumps over the lazy dog

Heading 5

The quick brown fox jumps over the lazy dog

Heading 5

The quick brown fox jumps over the lazy dog


Heading 6

The quick brown fox jumps over the lazy dog

Heading 6

The quick brown fox jumps over the lazy dog

Heading 6

The quick brown fox jumps over the lazy dog


Uptitle

The quick brown fox jumps over the lazy dog

Uptitle

The quick brown fox jumps over the lazy dog

Uptitle

The quick brown fox jumps over the lazy dog


Quote

The quick brown fox jumps over the lazy dog

Quote

The quick brown fox jumps over the lazy dog

Quote

The quick brown fox jumps over the lazy dog


Body large

The quick brown fox jumps over the lazy dog

Body large

The quick brown fox jumps over the lazy dog

Body large

The quick brown fox jumps over the lazy dog


Body medium

The quick brown fox jumps over the lazy dog

Body medium

The quick brown fox jumps over the lazy dog

Body medium

The quick brown fox jumps over the lazy dog


Body small

The quick brown fox jumps over the lazy dog

Body small

The quick brown fox jumps over the lazy dog

Body small

The quick brown fox jumps over the lazy dog


Body x-small

The quick brown fox jumps over the lazy dog

Body x-small

The quick brown fox jumps over the lazy dog

Body x-small

The quick brown fox jumps over the lazy dog





Breadcrumb

Hover

Breadcrumb

Hover


Name product page

Product name

Name product page

Product name

Text Hierarchy Example

Press release

Soprema is the world leader in substainable roofing material

See how their inovative products change the game in the construction field all over the globe.

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.

Read more

Press release

Soprema is the world leader in substainable roofing material

See how their inovative products change the game in the construction field all over the globe.

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.

Read more

Alert Messages

Buttons

Large Regular Small With icons Icon only Links Links hover
Primary Read more Read more
Secondary See more See more
Tertiary
Quaternary

Inactive Hover Disabled
Primary
Secondary
Tertiary
Quaternary
Inactive Hover Inactive Hover
Primary Read more Read more
Secondary See more See more
Tertiary
Quaternary

text Fields, dropdowns & inputs

text Field

Inactive
Completed
Error
Please enter a valid address
Disabled
Info Icon
Lorem ipsum dolor, consectetur adipisicing elit.
Info Icon
Active
Lorem ipsum dolor, consectetur adipisicing elit.

Dropdown

Inactive
Filled
Unboxed

Textarea

Inactive

Tool Tips

Icon
Tooltip content
Link

Checkbox

Inactive
Checked
Disabled
Disabled
Toggle

Radio Button

Inactive
Checked
Disabled
Disabled

Elevations

20% Shadow
40% Shadow
60% Shadow
20% Shadow
40% Shadow
60% Shadow

UI Icons

Icon family - Feather icons 1px

Brand Icons

Tags

New Back in stock Top seller
New Back in stock Top seller