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
Accent colors
Background colors
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"