Guy Carberry /

Style Guide

This page contains examples and guidance for all of the styles and components used on this website, guycarberry.co.uk.

Overal aesthetic

This website is intentionally minimal, uncluttered, almost 'undesigned' and sparse.

Fonts

This website uses "Helvetica Neue", Helvetica, Arial, san-serif which gives Mac and iOS users a rather delightful typographic experience. Windows and Android users will see Arial. The same font stack is applied to all headings and body copy.

Headings

Heading, level 1

Heading, level 2

Heading, level 3

Heading, level 4

Heading, level 5
Heading, level 6

If you find yourself needing to use headings level 4-6 then your page is probably too long. Consider splitting it into smaller, more focussed topics across multiple pages.

Paragraphs and inline styles

This is a paragraph, the most commonly used HTML element. It can contain any number of inline elements such as bold or italic text or a hyperlink to a webpage.

This is an introductory paragraph with the "intro" class attribute. You'll only have one of these on a page at a time. It's the first, leading paragraph.

Images

Bridge

Image, right

Mother and son

They were very quick and abrupt in their actions, and their speech, in moments of hot discussion over the allotment of the choicer teeth, was truly a gabble.

They spoke in monosyllables and short jerky sentences that was more a gibberish than a language.

And yet, through it ran hints of grammatical construction, and appeared vestiges of the conjugation of some superior culture. Even the speech of Granser was so corrupt that were it put down literally it would be almost so much nonsense to the reader. This, however, was when he talked with the boys.

Image, left

Computer chips

She had not gone much farther before she came in sight of the house of the March Hare: she thought it must be the right house, because the chimneys were shaped like ears and the roof was thatched with fur.

It was so large a house, that she did not like to go nearer till she had nibbled some more of the lefthand bit of mushroom, and raised herself to about two feet high: even then she walked up towards it rather timidly, saying to herself 'Suppose it should be raving mad after all! I almost wish I'd gone to see the Hatter instead!'

There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head.

Image, Centre

They filled a little sack at my side with Zodangan money. The medium of exchange upon Mars is not dissimilar from our own except that the coins are oval.

Microscope

Paper money is issued by individuals as they require it and redeemed twice yearly. If a man issues more than he can redeem, the government pays his creditors in full and the debtor works out the amount upon the farms or in mines, which are all owned by the government.

Image, captioned

Chatting on the sofa

These two ladies are having a nice chat

Lists

Only ordered and unordered lists are used on this website. Definition lists are to be avoided.

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item

Quotes

This is the piece of quoted text. It is inside a paragraph element withing the blockquote.

This is the cited source, placed within a paragraph element inside a blockquote element.

Tables

Avoid using tables where possible. There is usually another easier way to present information using headings and paragraphs or lists. Where tables are the most suitable mechanism for presenting data, consider accessibility limitations and test thoroughly.

thead 1 thead 2 thead 3
tfoot 1 tfoot 2 tfoot 3
tbody 1a tbody 2a tbody 3a
tbody 1b tbody 2b tbody 3b
tbody 1c tbody 2c tbody 3c
tbody 1d tbody 2d tbody 3d
tbody 1e tbody 2e tbody 3e

Forms

About you

Please note we may call to discuss your requirements.

What sports do you like?
What is your favourite colour?
How old are you?

Navigation

Get in touch

I'm available to talk to you about how I might add some value to your digital services and products. You'll find me on LinkedIn, Twitter, Instagram, Facebook and Gmail (guycarberry).

Home | Portfolio | Skills | Testimonials | Articles | About | Site map

Copyright © 2021 Guy Carberry

Site last updated 23 November 2021