Styleguide
What is this?
The Styleguide serves as a digital brand guideline to help with the website build. The goal of a styleguide is to improve consistency, quality and communication across the UI, making the design and development process more efficient and focused.
This Styleguide is to establish a shared vocabulary between designer and developer, and providing clear, discoverable guidance around design and development best practices.
How to use it
Each section showcases common style elements across the project with a specification on the right column on how to use it within snippets/sections.
Brand
This section displays all the brand marks assiocated with the client/project.
Logos
{% render 'global_site-logo' %}
{% render 'global_site-logo' with type: 'inverse' %}
Colours
Brand
$color-primary
$color-secondary
Greys
$color-grey-dark
$color-grey-medium
$color-grey-light
Typography
$color-text-primary
$color-text-light
Support Colours
$color-success
$color-warning
$color-error
Spacing
Base Spacing
For paddings and margins. Can also be used to style widths and heights of smaller elements
$spacing-2xs
$spacing-xs
$spacing-sm
$spacing-md
$spacing-lg
$spacing-xl
$spacing-2xl
$spacing-3xl
Large Layout Spacing
Used to style dimensions of larger elemens e.g. buttons
$span-sm
$span-md
$span-lg
$span-xl
Typography
.d1
.d2
.d3
h1, .h1
h2, .h2
h3, .h3
h4, .h4
h5, .h5
h6, .h6
p, .body-1
strong
a, .text-link
.body-2
.caption
small
label
blockquote, .blockquote
- Unordered list item
- Unordered list item
- Unordered list item
- Unordered list sub-item
- Unordered list sub-item
- Unordered list sub-item
ul
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list sub-item
- Ordered list sub-item
- Ordered list sub-item
ol