ServiceX - Styleguide
This is used as an overview page to be able to visually see the current text styles and sizes. After changing the colors, fonts and other settings - manually update them on this styleguide. This will be handy when working with designers and developers.
Colors
These are the main colors. Feel free to change them to fit your branding. After you have decided on the final colors remember to change the names and HEX codes manually.
Text colors
Black
#262626
Dark Grey
#707070
Light Grey
#DCD9D6
Accent colors
Accent One
#121431
Accent One Dark
#1D174E
Accent Two
#121431
Accent Two Dark
#121431
Background colors
Beige
#F2EEE9
Milky Beige
#F7F3ED
Milky White
#FFFBF5
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 - Lora, Medium, 24px, 120%
H5 - Lora, Medium, 22px, 120%
H6 - Lora, Medium, 20px, 120%
H6 Small - Lora, 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%
Spacing & width
Grid for Main Desktop viewport (>1200 px width)
Space on top - 120px (or 60px if the same color beneath)
Content XL - Full width (no max width)
48px Padding
Content L - Max width 1296px
48px Padding
48px Padding
Content M - Max width 896px
48px Padding
48px Padding
Content S - Max width 696px
48px Padding
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)
48px Padding
Content here
48px Padding
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)
24px Padding
Content here
24px Padding
Space on bottom - 60px (or 30px if the same color beneath)
1224px Total width / 12x 80px wide columns with 24px Spacing
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.
Once ready to publish
Use the promo code to save 3 months on the Pro plan.
Follow instructions, update the template to match your branding and publish it.
To get 3 free months on a Pro annual subscription subscribe through this link: framer.link/artursskutanshq
Or use promo code "artursskutanshq"