exbike.com Style Guide
v1.0, 3/17/2018
Colors
- white
- grey: rgba(112,112,112,1)
- dark grey: rgba(82,82,82,1)
- exbike green: hsl(67, 71%, 49%)
- blue: hsla(203, 59%, 50%, 0.99)
- bright blue: hsla(203, 100%, 62%, 0.99)
highlight candidates:
- orange: hsl(34, 100%, 41%)
- blue: hsla(209, 100%, 64%, 0.99)
Typography
Heading 1 (h1)
Used for page titles an section titles on banners
- Jubilat
- weight: 500
- size: 150px
- letter spacing: 0em
- line height: 0.8em
- color: grey
- color when overlayed on image: white
Heading 2 (h2)
Used for emphasized text under page titles or for special content blocks that require a large heading
- Source Sans Pro
- weight: 300
- size: 38px
- letter spacing: -0.01em
- line height: 1em
- color: dark grey
- color when overlayed on image: white
Heading 3 (h3)
Used for headings on blocks of text or for slight visual emphasis
- Source Sans Pro
- weight: 400
- size: 24px
- letter spacing: 0em
- line height: 2em
- color: green
- color when overlayed on image: white
Body text
- Source Sans Pro
- weight: 400
- size: 16px
- letter spacing: 0.01em
- line height: 1.8em
- color: dark grey
- color when overlayed on image: white
- Body links: blue
- footer links: bright blue
Buttons
- Jubilat
- weight: 400
- size: 14px
- letter spacing: 0.15em
- transform: uppercase
- color: white
- color when overlayed on image: grey
Layout
The Squarespace template the site is based on is "Mojave" (in the Brine family).
The sizing of elements is based on a grid that divides the width of the page into 12 columns. When adjusting the width of an element, it will snap to those grid lines.
Banners
Use an h1 for the title on a banner, left align.
Left align any text or buttons that are on the banner image. If the text is long enough, place six columns of space on the right, so the text only spans half of the image.
All banner images have a light grey overlay so that text is more visible on top of them. This is configurable in the Style Editor.
Subheadings
To include an emphasized block of text under a banner (rather than inside of it), use an h2 in a block that is four columns wide, with four columns of space on either side. This way the text is centered on the page in a column slightly narrower than the normal body text.
Body text
For normal content (blocks of text on white background), place spacers on either side of the text that span three columns, creating a text block of six columns that is centered on the page.
Services page
The service name is a h2 in a text block that is three columns wide.
The text block in the center is six columns wide and has the price as an h3 and the description of the service beneath.
There are three columns of space on the right. A line extends the full width of the page to separate each service.