Cadence brand guidelines
Logo variants
Use the vertically laid out logo wherever possible
Use the horizontal logo, with strapline, where the vertical one can not be accommodated. Make sure the strapline is legible
Use the horizintal logo without the strapline if the strapline wouldn’t be legible or the strapline is repeated as a page heading
Brand colours
#002282
#00E1C3
#FFFFFF
#0048AF
Cadence loves Jost
The font for all content is Jost, it is available via Google fonts.
Did you know
Did you know: the logo is based on Outfit, a font available via Google. The logo should remain special. Do not use this font for content.
Font sizes, spacing and units
The base font for digital media is 18px with 24px line-spacing. Heading sizes are calculated using the golden ratio, 1:1.618
An alternative base-font is 16px. This used with upper-case and to calculate some heading sizes.
24px is the base grid size. All page elements should align to the grid including white-space and images. Half and quarter alignment is permitted where required.
| Name | Size (px) | Line height (px) | Line height (em) | Size@16px (em) |
| Heading “0” | 67 | 78 | 1.1642 | 4.1875 |
| Heading 1 | 47 | 60 | 1.2766 | 7.8333 |
| Heading 2 | 42 | 54 | 1.1286 | 2.625 |
| Heading 3 | 29 | 36 | 1.2414 | 1.8125 |
| Heading 4 | 26 | 36 | 1.3846 | 1.625 |
| Heading 5 | 18 | 24 | 1.3333 | 1.125 |
| Heading 6 | 16 | 24 | 1.5 | 1 |
| Paragraph | 18 | 24 | 1.3333 | 1.125 |
| Small | 16 | 18 (or 24) | 1.125 (or 1.5) | 1 |
| Extra small | 13 | 18 | 1.3846 | 0.8125 |
The rational behind the sizes
The text sizes were calculated using a modular scale and then the line-heights set to fit to a vertical rhythm (a 24px grid).
See More Meaningful Typography (A List Apart) for a very in-depth article and CSS with vertical rhythm (drewish) for an simple example.
A calculator can be found at modularscale.com
Boxes
Boxes should have a border radius of 12px and padding of 24px
Spectra container example
Example of a Spectra container with 12px border radius and 24px padding. This example has a Custom width set to 80%.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et rhoncus purus. Aliquam sit amet sagittis lorem. Proin vitae tempor metus, eget auctor lacus. Morbi viverra purus augue, vel hendrerit libero suscipit ut. Duis non iaculis mauris, quis mattis urna. Ut vel mattis diam. Proin non ex enim. Vestibulum vulputate ullamcorper feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc accumsan facilisis tellus vel convallis.
Images
Use photography where it’s available. Cadence screenshots with a legend are improved if there is a gap to the edge (See Legend, Layout)
Thumbnails be one image and should not contain text. Cadence screenshots should not contain a legend. White backgrounds and white at the edges of thumbnails should be avoided.