Global Presets Style Guide
This global presets style guide is a great way to start a new web design project!
Wondering how to turn modules into global presets? For a detailed tutorial on how to use this style guide, click on the link below to be redirected.
Color palette
In the first part of the style guide, you can find the color palette that’s been used for the website design. Use these global colors inside the default color palette in the section, row and module settings.
#000000
#294867
#939393
#e6e7e8
#294867
Text Styles
In this part of the style guide, you’ll find the different text styles that were used throughout the layout pack. There’s a separate preset for each heading style and a global preset with all text styles in one.
All text dark left
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph text
- List paragraph text
- List paragraph text
- Numbered paragraph text
All text light left
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph text
- List paragraph text
- List paragraph text
- Numbered paragraph text
All text dark centered
All text light centered
This is the floating statement global preset. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Buttons
Here, you’ll find the buttons styles used throughout the website.
Blurbs
Up next, we have some blurb modules that have been on the home page and other main landing pages.
BLURB IMAGE CENTERED
Blurb Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
BLURB IMAGE LEFT
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Rows
Here are the global presets for rows. Every new row needs a global preset assigned. The presets drive spacing, corner shape, background color, width, and height.
SKINNY ROW WHITE BKGD
Use this row global preset to get the white background with the standard max height for consistency, as well as all the other settings for spacing corners, etc.
See two example rows directly below.
ROW wHITE BKGD
Use this row global preset to get the white background without a max height, as well as all the other settings for spacing corners, etc. Also use this preset for other background colors, such as dark gray – just change the background color in the row settings after you assign the global preset. Do not edit the global preset. Any settings changed in the row settings after the global preset is assigned will only override the preset for the one instance.