StartX - Styleguide

All visual elements in this template are available for both personal and commercial projects. Please review the license terms for each asset before use.

Colors

This is used as an overview to be able to visually see the current text styles and sizes. After changing the fonts, feel free to manually update the font name and settings, such as size and line spacing.

Text colors

Black

#262626

Black

#262626

Dark Grey

#707070

Dark Grey

#707070

Light Grey

#DCD9D6

Light Grey

#DCD9D6
Accent colors

Accent One

#121431

Accent One

#121431

Accent One Dark

#1D174E

Accent One Dark

#1D174E

Accent Two

#121431

Accent Two

#121431

Accent Two Dark

#121431

Accent Two Dark

#121431
Background colors

Beige

#F2EEE9

Beige

#F2EEE9

Milky Beige

#F7F3ED

Milky Beige

#F7F3ED

Milky White

#FFFBF5

Milky White

#FFFBF5

White

#FFFFFF

White

#FFFFFF

Typography

This is used as an overview to be able to visually see the current text styles and sizes. After changing the fonts, feel free to manually update the font name and settings, such as size and line spacing.

Titles

H1 XL - Lora, Regular, 60px, 120%

H1 - Lora, Regular, 54px, 120%

H2 - Lora, Regular, 48px, 120%

H2 Small - Lora, Regular, 40px, 120%

H3 - Lora, Regular, 32px, 120%

H4 - Figtree, Medium, 24px, 120%

H5 - Figtree, Medium, 22px, 120%
H6 - Figtree, Medium, 20px, 120%
Body text

Body XL - Figtree, Regular, 26px, 140%

Body L - Figtree, Regular, 18px, 140%

Body M - Figtree, Regular, 16px, 140%

Body S - Figtree, Regular, 14px, 140%

Button - Figtree, Semibold, 16px, 120%

Licensing

All visual elements in this template are available for both personal and commercial projects. Please review the license terms for each asset before use.

Guides and spacing

Grid for Main Desktop viewport (>1200 px width)

Space on top - 120px (or 60px if the same color beneath)

Space on top - 120px (or 60px if the same color beneath)

Space on top - 120px (or 60px if the same color beneath)

Content XL - Full width (no max width)

Content XL - Full width (no max width)

Content XL - Full width (no max width)

48px Padding

48px Padding

48px Padding

Content L - Max width 1296px

Content L - Max width 1296px

Content L - Max width 1296px

48px Padding

48px Padding

48px Padding

48px Padding

48px Padding

48px Padding

Content M - Max width 896px

Content M - Max width 896px

Content M - Max width 896px

48px Padding

48px Padding

48px Padding

48px Padding

48px Padding

48px Padding

Content S - Max width 696px

Content S - Max width 696px

Content S - Max width 696px

48px Padding

48px Padding

48px Padding

Space on bottom - 120px (or 60px if the same color beneath)

Space on bottom - 120px (or 60px if the same color beneath)

Space on bottom - 120px (or 60px if the same color beneath)

Spacing for Tablet viewport (810-1199 px width)

Space on top - 80px (or 40px if the same color beneath)

Space on top - 80px (or 40px if the same color beneath)

Space on top - 80px (or 40px if the same color beneath)

48px Padding

48px Padding

48px Padding

Content here

Content here

Content here

48px Padding

48px Padding

48px Padding

Space on bottom - 80px (or 40px if the same color beneath)

Space on bottom - 80px (or 40px if the same color beneath)

Space on bottom - 80px (or 40px if the same color beneath)

1224px Total width / 12x 80px wide columns with 24px Spacing

Spacing for Mobile viewport (<810 px width)

Space on top - 60px (or 30px if the same color beneath)

Space on top - 60px (or 30px if the same color beneath)

Space on top - 60px (or 30px if the same color beneath)

24px Padding

24px Padding

24px Padding

Content here

Content here

Content here

24px Padding

24px Padding

24px Padding

Space on bottom - 60px (or 30px if the same color beneath)

Space on bottom - 60px (or 30px if the same color beneath)

Space on bottom - 60px (or 30px if the same color beneath)

1224px Total width / 12x 80px wide columns with 24px Spacing