Colors
Gradients
Blue Gradient
Light: #089ad8
Dark: #075f91
Yellow Gradient
Light: #fdfd87
Dark: #ffd128
Green Gradient
Light: #64b730
Dark: #30b799
Shades
Darker Gray
#d9d9d9
Light Yellow
#f8eda1
Light Blue
#089ad8
Dark Blue
#075f91
Typography
Normal Fonts
Headings: Roboto – 300 (light)
Body: Roboto – 400 (regular)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lead
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam, massa ut tristique hendrerit, sem sem condimentum elit, eu ultrices mi sem quis diam. Aenean tortor risus, blandit eget nunc vitae, elementum interdum nibh. Sed auctor nisl non tellus egestas facilisis. Pellentesque eu lobortis ex. Pellentesque nec vestibulum urna, vitae laoreet felis. Etiam imperdiet velit justo. Donec sagittis aliquet interdum. Quisque dictum consectetur eros, id dapibus est sagittis id. Quisque maximus lectus nec tincidunt convallis. Suspendisse sollicitudin nibh aliquet ligula placerat, ultricies ultrices justo elementum. Nunc quis quam vel quam gravida tincidunt.
Display Headings
You can use the following display classes to get larger fonts, or alternatively you can use the size slider on the text elements in Flatsome.
Display 1
class=”display-1″
Display 2
class=”display-2″
Display 3
class=”display-3″
Display 4
class=”display-4″
Special Fonts
Font: Calgary Script
Usage Notes: Since this font often uses other graphical elements (squirts from the logo, gradients, other icons, etc) it is being treated more as a graphical element than a typographic one. Avoid using these elements to convey important information like titles (pages like this style guide where SEO is not important are an exception). Add to the site as a svg and make sure to set the alt tag.
Adobe fontsButtons
Icons
Using a svg icon (fitted to a square canvas is preferred), set the icon color in flatsome to white. Add the classes listed below.
Normal Icons
Use a light weight line icon in any of the theme colors. No additional classes needed.
Graphics
Waves
Avoid sharp transitions as much as possible. Use wave elements to divide sections.
Screens
Use screens to display work that Lemonade Stand does.
Shadows
There’s a custom class called “shadow” that gives a more diffused shadow then flatsome has.
Rounded Corners
The classes are set up in this format: rounded – top – right or rounded – top -left. They are written like this: “rounded-tl” or “rounded-tr”. Use this on banner or image elements.