Style guide
Build
This blog is built with Jekyll and hosted with Netlify. Jekyll uses the Liquid templating language.
Here’s a link to the repo.
Spotted an error or something that could be improved? Please create an issue.
Fonts
I’m using system fonts, I borrowed this font stack from Andy.
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
Colours
- Dark black #181b1e
- Black #2e343b
- Dark grey #5b6774
- Medium grey #abb3bd
- Light grey #e4e7ea
- White #ecf0f3
- Primary #007575
- Primary dark mode #0eb9b9
Layout templates
A list of different layouts in use on the site.
- Page – About, Accessibility for designers
- List of posts – Blog
- List of categorised posts – Release notes
- List of categories – Categories
- Image post – 9 miles to Glasto
Typography
XXL text
XL heading (h1)
Large heading (h2)
Medium heading (h3)
Small heading (h4)
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod * tempor incididunt ut labore et dolore magna aliqua.
- This is a list item in an unordered list
- An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
- This is the last list item
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
- This is the last list item
Lede
<p class="lede">A large intro paragraph or summary.</p>
A large intro paragraph or summary.
Blockquote
> A blockquote is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation.
<br>— Homer Simpson
A blockquote is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation.
— Homer Simpson
Small text
Smaller, lighter text used for the “published on” date and image captions.
How to set date formats with Liquid.
<small>%e %B %Y</small>
This site was last generated on 20 February 2021
Big numbers
Use the big-number.html
include.
{%
include big-number.html
big-number="979"
text="miles driven"
%}
979 miles driven
File link
Use the file-link.html
include when you need to link a file and specify the file format and size at the same time.
{%
include file-link.html
text="View the raw data"
url="https://github.com/benjystanton/benjystanton.github.io/blob/master/_data/work-trips-2018.yml"
format="YML"
size="3KB"
%}
Symbols
- non-breaking space
- en dash
–
– - em dash
—
— - horizontal ellipsis
…
… - times (multiply) symbol
×
× - minus symbol
−
−
Images
Images are full width by default. Don’t forget alt text.
- Standard blog image: 1024 × 512
- Thumbnail (for Twitter summary card): 500 × 500

Images with captions
Image captions aren’t supported in standard Markdown so I’ve made an image-with-caption.html
include.

{%
include image-with-caption.html
image="coop-sticker.jpg"
caption="Co-op digital design principle sticker – We design for everyone"
alt-text="A yellow sticker with black text on a laptop"
%}
<figure>
<img src="https://www.benjystanton.co.uk/assets/coop-sticker.jpg" alt="A yellow sticker with black text on a laptop" />
<figcaption class="text-small">
Co-op digital design principle sticker – We design for everyone
</figcaption>
</figure>
SVG icons
Read more about SVGs in this blog post
<svg height="54" width="165" viewBox="0 0 320 104" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-labelledby="logoTitle">
<title id="logoTitle">Benjy Stanton</title>
<path d="M72 89.3s0-6.3-.7-12.7c-.8-6.7-2.3-13.5-2.3-13.5s-1-2.8-2.4-3.1c-1.4-.4-3.3 1.7-3.3 1.7s-.8.7-1.3.5c-.5-.1-.6-1.2-.6-1.2s0-1.1-.6-1.7c-.6-.6-2-.6-2-.6l-2.8.5s-2.2 8.1-4.6 14.5c-1.9 5.2-3.9 9-3.9 9s-1.8 4.1-5.7 5.4c-1.9.6-2.8-1.9-2.8-1.9s-.7-1.5-.9-2.9c-.2-1.4.1-2.8.1-2.8s.2-1.2.6-1.9c.4-.7 1-1.7 1-1.7S46 68.2 45 63.2c-1.3-6.9-7.4-3.1-7.4-3.1s-5.2 3.2-6.9 9.8c-1.5 5.9-.5 12.9-.5 12.9s.2.8.1 1.6c-.1.7-.7 1.5-.7 1.5s-2.3 2-4.6 3.6c-1.9 1.3-3.8 2.1-3.8 2.1s3.7-7.1 1.8-12.3c-2.9-7.9-11.1-1-11.1-1l-.5-16.5s0-1.4.2-2.6c.2-1 .8-1.8.8-1.8s6.7-10.8 9.9-24.6c2.9-12.4 3.9-24.9 3.9-24.9S27 2 23.7.9C21.4.1 19 2.8 19 2.8S5.7 19.9 1.2 46.3c-4 24 3.3 50.7 3.3 50.7s.6 1.8 1.7 2.5c1.1.8 2.8.6 2.8.6s3.2-.6 6.3-2.5c5.8-3.6 13.1-9.7 13.1-9.7s1.3-1.4 2.1-1.6c.5-.1 1.2.7 1.2.7s1.7 2.2 3.5 3.1c1.9 1 4.1 1.1 4.1 1.1s4.9.1 8.3-6.8c3.1-6.2 6.2-14.4 6.9-17.3.2-.6.6-.6.6-.6s.4 0 .4.7c.2 4 .5 17.9.5 17.9s.2 5 2.9 6.2c2 .9 4.5-1.9 4.5-1.9s.7-1.2.5-3.5c-.5-7.1-1.9-21.7-1.9-21.7s.7-.8 1.7-1.7c.6-.6 1.2-1.4 2-1.4 1.4 0 1.3 3.1 1.3 3.1s.3 7.5.7 14.2c.3 5.4.8 10.4.8 10.4s.4 2.2 1.9 2.4c1.6.2 1.6-1.9 1.6-1.9zM38.5 68.9c.2-2.8.8-5.4.8-5.4s1.7-5.3 4.1-.7c.8 1.5-.5 5.8-.5 5.8s-.7 1.9-1.5 3.6c-.8 1.7-1.8 3.3-1.8 3.3s-.4.9-1.1.8c-.3-.1-.3-1.1-.3-1.1s0-3.2.3-6.3zM14.2 28c2.1-11.5 7.2-23.1 7.2-23.1s1.3-3.4 2.7-2.4c1.2.9 1.2 4.5 1.2 4.5s-1.1 15.7-4.7 28.6C17.5 46.7 12 55.3 12 55.3s-.3-13.8 2.2-27.3zM14 96.4l-2-16.6s2.8-2.3 5.2-2.6c3.8-.4 4.4 1.7 4.4 1.7s2.3 4.7-.6 10.8c-2.2 4.3-7 6.7-7 6.7zm84.6-31.7c-.6 0-1.2.4-1.2.4l-4.1 2.5s-.5.3-.7 0c-.2-.4-.1-1.3-.1-1.3s-.1-11.1-.3-19c-.1-4.2-.5-7.5-.5-7.5s.2-1.8-3.4-1.4c-2.4.3-2.7 1.8-2.7 1.8s-1.8 10.5-2.3 20.4c-.5 8.9-.2 17-.2 17s0 .6-.1 1.1c-.1.6-.4 1.1-.4 1.1s-4.2 6.3-4 14.2c.2 6.3 4.4 8.6 4.4 8.6s3.2 1.8 5.9-.4c2-1.7 2.3-5.8 2.3-5.8s.5-6.9.8-13.4c.3-5.9.4-11.4.4-11.4s0-.9.4-1.7c.4-.7 1.2-1.4 1.2-1.4s3.7-2.3 5.1-3.2c.4-.2.6-.4.6-.4s-.5-.3-1.1-.2zM80.8 98.2c-1.4-2.7-1.2-5.3-1.2-5.3s.1-2.3.7-4.6c.9-3.1 2.7-6.7 2.7-6.7l.7 20.2c0-.1-1.8-1.5-2.9-3.6zm54-40.5s-.9 0-1.9.2c-1.2.3-2.4.8-2.4.8l-8.6 4.7s-.4.1-.6-.1c-.2-.2-.2-.8-.2-.8s-.1-4-.5-7.8c-.4-3.4-1-6.6-1-6.6s.1-1.3-2.7-1.4c-2.8-.1-3 1.1-3 1.1s-.2 3.3-.2 6.4v5.7s-1.8 4.3-3.8 4.6c-1.5.1-1.8-4-1.8-4l-.3-11.9s-2.4-1.3-3.8-1.1c-1.4.3-1.8 2.2-1.8 2.2s-1.5 12 2.7 16.3c3.7 3.8 8.8-3.2 8.8-3.2l.2 6.7s-1.8 2.3-3.5 5.7c-1 2-1.8 4.3-2.5 6.7-2.6 8.3-2.7 14.7-2.7 14.7s-.2 6.1 10 4.4c5.5-.9 6.5-8.5 6.5-8.5s.2-5.1.1-10.8c-.1-7.5-.4-16.2-.4-16.2s.1-.4.3-.8c.2-.3.5-.4.5-.4l9.7-5s.7-.3 1.4-.5c.6-.1 1.2-.3 1.2-.3s.9-.1 1-.4c.1-.2-.7-.4-.7-.4zm-20.4 26c-.1 6.6-.8 13.5-.8 13.5s-.4 3.5-4.1 2.3c-1.7-.6-2.2-1.8-2.4-2.8-.2-1.1-.1-2-.1-2s0-.8.2-2.1c.5-2.9 1.7-8.4 3.2-13 2.4-7.1 3.8-6.9 3.8-6.9s.1.2.2.7c-.1 1.5 0 5.7 0 10.3zM165.6 42s-5.2 5.8-5.4 13.8c-.2 9.2 4.2 19.5 4.2 19.5s3.6 8.1 4.4 12.4c1 5.5-1.8 8.9-1.8 8.9s-1.6 2.1-4.5 1.3c-4.2-1.1-6.7-5.5-6.7-5.5s-1.4-2.2-2.4-4.7c-1.3-3.3-5.4-10.9-5.4-10.9s-.1-1.1-.8-1c-.6.1-.6 1.2-.6 1.2s4.2 10.8 7.2 16.1c3.2 5.7 8.6 6.8 8.6 6.8s7.4 2 12.7-3c5.3-5 3.9-11.9 3.9-11.9s-.3-2.6-2-6.3c-1.6-3.6-3.6-7.8-3.6-7.8s-2.9-7.1-4.6-13.5c-1.5-5.8.3-12 .3-12s.7-2.8 2.6-2.6c1.3.2 2.2 2.8 2.2 2.8L175 51s.3 1.2.7 1c.9-.4 1.1-2.3 1.1-2.3s-1-6.5-4.3-8.8c-3.9-2.4-6.9 1.1-6.9 1.1zm90.9 40.7s-.5-10.1-1.2-17.5c-.4-4.3-1.1-7.7-1.1-7.7s-.6-2.3-1.7-2.5c-2.8-.3-4.4 2.9-4.4 2.9l-3.8 6s-.7 1-1.1.8c-.4-.2-.4-1.5-.4-1.5l-.7-3.6s-.6-1.3-1.3-1.2c-1.4.1-3.5 1.6-3.5 1.6s-.9 8.9-2.8 16.4c-1.7 6.4-4.5 11.2-4.5 11.2s-1.5 1.9-2.1 1.3c-.9-.9-1.1-4.2-1.1-4.2l.6-17s-6.6-3.3-13.9 1.7c-5.2 3.5-7.2 11.7-7.2 11.7s0 .5-.3.9c-1.2 2.1-5.2 8.4-8.4 12.9-2.9 4.1-5.5 4.2-5.5 4.2s-1.9.3-2-2.5c-.2-5.5.7-16.4.7-16.4l4-38.5s0-.6.4-1c.5-.4 1.5-.6 1.5-.6l9.5-.1s.2-.2.2-.4-.1-.3-.1-.3h-10.8c-.4 0-.8-.3-.8-.3l.2-10.6s.2-.7-3.5-1.1c-2.9-.3-3.9 1-3.9 1s-.6 3.2-1 6c-.3 2.2-.5 4.1-.5 4.1s-.3.1-.7.1c-2.1-.1-9.3-.7-9.3-.7s-.2.2-.2.3c0 .2.2.5.2.5l9.7 1.2s.1.2 0 .6c-.7 5-5.4 39.6-3.9 55.6.5 5.9 9.5 4.8 9.5 4.8s2.9-.3 5.4-3.5c3.4-4.4 7.5-10.9 7.5-10.9s.5-1.1.9-1.1c.6 0 .4 1.5.4 1.5s-.2 8.3 2.8 10.7c4 3.1 8.7-1.5 8.7-1.5s1.2-1.2 2-3.7c1.6-4.6 3.4-11.9 3.4-11.9s-.2 6.8 2.4 9.6c1.6 1.6 4.8-.5 4.8-.5s2.6-1.7 4.2-8.3c1.6-6.4 3.4-14.6 3.4-14.6s.3 9.5.7 15.8c.2 3.4.6 5.6.6 5.6s.5 3.4 2.9 3.1c2.5-.3 2.5-3.7 2.5-3.7l-.8-16.9s-.1-1.8.7-3.6c1.6-3.5 4.7-8.1 4.7-8.1s.5-.8.7-.6c.3.2.3 1.3.3 1.3s-.1 10-.1 17.3c0 4.7.3 8.1.3 8.1s2.1 4.2 5.5 2.8c1.6-.1 1.3-5 1.3-5zM223 71.1c-.6 3.6-1.6 11.7-3.6 17.4-.6 1.7-1.4 3.4-2.2 4.6-.8 1.1-1.7 1.6-1.7 1.6s-1.8 1.4-2.9 1c-1.4-.5-1-2.7-1-2.7s.3-3 1.1-6.8c.5-2.6 1.8-5.6 2.8-8.3 3.4-9.4 7.4-8.6 7.4-8.6s.3.6.1 1.8z"/>
<path d="M261.2 27.5s-.7 3.1-1 6.2c-.4 3.6-.5 7.4-.5 7.4s0 .2-.1.4c-.1.1-.6.1-.6.1l-8.3.5s-.7.3-.7.5c-.1.2.5.4.5.4h3.4c2.3 0 5.1-.1 5.1-.1s.2-.1.3.1c.1.2.1.6.1.6s-.6 10.6-.9 21.2c-.3 11-.2 21.9-.2 21.9S257.5 99 263 102c5.5 3.1 10.1-2.6 10.1-2.6s1.4-1.7 2.4-3.3c1.3-2.2 2.7-5 2.7-5s-.2-.7-.3-.7c-.3 0-.6.7-.6.7s-2.7 4.1-4.7 6.5c-2.7 3.1-5.7 1.7-5.7 1.7s-1.4-.2-1.9-2.7c-.5-2.9-.8-7-.8-7s-.2-12.4 0-24.3c.3-10.9 1.2-21.3 1.2-21.3s-.1-.5.1-.8c.3-.4.9-.7.9-.7l9.4-2s.6-.2.6-.5-.5-.7-.5-.7l-9.4 1.8s-.6.2-1-.1c-.3-.3-.3-1.1-.3-1.1s.3-2.7.3-5.3c0-2.8-.3-5.7-.3-5.7s-.3-.9-1.4-1.5c-2-1.4-2.6.1-2.6.1z"/>
<path d="M320 78.6s-.9-10.2-2-18.5c-.8-5.8-1.9-10.5-1.9-10.5s-.6-4.6-6.4-2.5c-4.5 1.6-8.2 9.4-8.2 9.4s-.6 1.1-1 1.3c-.4.2-.7-.4-.7-.4l-.4-4.8s.2-1.8-2-1.5c-2.4.3-4.2 2.9-4.2 2.9s0 1.7-.2 3c-.1.9-.5 1.6-.5 1.6s-2.2 3.1-4.7 4.6c-1.9 1.1-4.1 1.2-4.1 1.2s-1.1-9.6-8.4-8.3c-7.9 1.4-9 12.2-9 12.2s-.6 8.5 4.4 10.8c7.2 3.4 10.2-2.5 10.2-2.5s1-2.1 1.7-4.5c.8-2.9 1.1-6.2 1.1-6.2s2.6-.5 4.9-1.8c2.5-1.4 4.4-3.9 4.4-3.9s-.8 10.7.4 15.3c.9 3.4 6.3 2.2 6.3 2.2s.6 0 .8-.4c.2-.5 0-1.4 0-1.4l-.6-13.6s0-1.5.6-2.8c.5-1.3 1.3-2.3 1.3-2.3s3.6-5.6 6.3-7.8c3-2.3 3.2 1.6 3.2 1.6l1.6 27s.3 2 1 2.3c1.7.8 4.8.2 4.8.2s.8.1 1.1-.3c.3-.4.2-1.6.2-1.6zm-43.9-20.7s.7-.8 2.4-.1c1.3.5 2.4 2 2.4 2s.8.9 1.2 2c.4 1.1.4 2.7.4 2.7s-2.5 1-5-1.8c-1.5-1.6-1.4-4.8-1.4-4.8zm6.4 9.1s-1.3 8.8-4.3 10.7c-6 3.9-6.3-3.1-6.3-3.1s-.6-4.1-.3-8.2c.4-6.1 2-7.5 2-7.5s.6-.9 1-.8c.3 0 .4 1.7.4 1.7s.5 2.9 2.2 4.5c1.8 1.7 4.7 1.4 4.7 1.4s.5-.1.6.2c.2.5 0 1.1 0 1.1z"/>
</svg>
Logo designed by Saph at Magenta
Tables
HTML tables
<table>
<caption><h4>This is a table caption</h4></caption>
<thead>
<tr>
<th>Table Heading</th>
<th>Table Heading</th>
<th class="cell--right">Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td class="cell--right">1</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td class="cell--right">12</td>
</tr>
</tbody>
</table>
Table Heading | Table Heading | Numbers |
---|---|---|
Table Cell | Table Cell | 1 |
Table Cell | Table Cell | 12 |
Markdown tables
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |