Introduction
Welcome to SystemFlow!
Please, watch the introduction video to get started with the Framework. Feel free to send us your suggestions - we'll try to make SystemFlow better using your feedback.
Send your suggestions to hello@systemflow.co and we'll be happy to help!
Happy exploring!
Matt & Greg
How to set up the template
1. Set New Brand Colors
- First, get their primary color from their logo.
- Use this tool to set Shades and Tints Shadowlord — Tints and Shades Generator Tool
- set percentage to 18% in shadowlord, and input in the primary color.
- Note "Primary - 60" is the true Primary Color in this template.
Remember that you need to actually change the swatch colors that are associated with each class below.
Use the following table for conversion when setting up the colors:
- 90% = Primary 10
- 72% = Primary 20
- 54% = Primary 30
- 36% = Primary 40
- 18& = Primary 50
- 0% = Primary 60*
- 18% Dark = Primary 70
- 36% Dark = Primary 80
- 54% Dark = Primary 90
- 72% Dark = Primary 100
1. Set New Brand Colors
Use this tool to set Shades and Tints
Shadowlord — Tints and Shades Generator Tool
Primary - 60 is the true Primary Color.
set percentage to 18% in shadowlord, and input in the primary color.
Remember that you need to actually change the swatch colors that are associated with each class below.
Use the following table for conversion when setting up the colors:
- 90% = Primary 10
- 72% = Primary 20
- 54% = Primary 30
- 36% = Primary 40
- 18& = Primary 50
- 0% = Primary 60*
- 18% Dark = Primary 70
- 36% Dark = Primary 80
- 54% Dark = Primary 90
- 72% Dark = Primary 100
2. Set Logos
Make sure you're changing the underlying image, not just replacing it for the symbol
.png){kind=logo}
3. Set Favicons
- Use this template to create the larger favicon
- Upload Image here - Favicon-O-Matic
- Add both images in the "settings" Menu
Global Font
Click body and edit Body (All Pages) to change global font family.
Structural Headings
Heading XL
Heading L
Heading M
Heading S
Heading XS
Heading XXS
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text
This is Default Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is Large (L) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
5. Set Icon Theme
- Click on the icon:
- Rename Material Icons class to the name of desired theme: Material Icons Outlined , Material Icons Round , Material Icons Sharp