Style guide

This document details the colors, fonts, layout, and visual styles that create a unified and professional look for the Smileyce website.

Colors

Neon blue

#5d44ff

Royal Blue

#3c2ead

Cloud white

#f3f3f3

White

#ffffff

Midnight blue

#000f41

Obsidian blue

#111827

Slate blue

#41435b

Light gray

#dbdbdb

Typography

Typography Name

Size

Height

Weight

H1

3.5rem

120%

Semi Bold

H2

2.5rem

120%

Semi Bold

H3

2rem

120%

Semi Bold

H4

1.75rem

130%

Semi Bold

H5

1.5rem

130%

Semi Bold

H6

1.125rem

140%

Medium

Text Large

1.125rem

150%

Medium

Text Medium

1rem

150%

Normal

Text Small

0.875rem

160%

Normal

Text link

1rem

150%

Medium

Paragraph

1rem

150%

Normal

Rich text

Heading 2

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.

Heading 3

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.

Blog details icon — Lorem ipsum dolar sit amet

Heading 4

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.