Style Guide
The styles are controlled using CSS
The content below illustrates how we use CSS Style Sheets to control the look and feel of this site. This is how we control the styling on all sites that we build.
We just enter the main colours for Primary, Secondary, Base and Neutral. The other colours you see when you hover over the central button of the colour wheel are created automatically.
The typography on this site is responsive. As you resize the browser window you will see those changes. This site is built using Bricks Builder and the styles you see below are generated by Automatic CSS
If you need more colours you can add in Tertiary and Accent colours which will have their own light and dark shades.
Colours, and sometimes fonts, are normally taken from a brand’s logo.
The template used to create the Style Guide are from Frames for Bricks and designed to be used with Automatic CSS.
Brand Palette
Primary
Secondary
Tertiary
Accent
Base
Neutral
Headings & Text
Typography
The quick brown fox jumps over the lazy dog
h1
The quick brown fox jumps over the lazy dog
h2
The quick brown fox jumps over the lazy dog
h3
The quick brown fox jumps over the lazy dog
h4
The quick brown fox jumps over the lazy dog
h5
The quick brown fox jumps over the lazy dog
h6
The quick brown fox jumps over the lazy dog
h1 & L
This is large placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h2 & m
This is default placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h3 & s
This is small placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Color Relationships
Text
Auto Color Relationships
Sample heading
This is what text will look like on ultra light background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on light background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on dark background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on ultra dark background areas. You can also control link color relationships and there's an example button below.
Content Width & Spacing
General Spacing
Content Width
Grid Gap
Card Gap
Content Gap
Default Section Padding
Container Gap