Design Guidelines

swansea.art identity guidelines

Wordmark

swansea.art does not have a logo in order to meet university sub-brand requirements. However, to provide consistency and identifiability, it instead has a wordmark that should be used where appropriate:

As this is not a true logo, it is OK to just write the text ‘swansea.art’ when it is preferable, using whatever typeface is in use. However, if the name is prominently displayed or is included in something made in-house, use of the wordmark is preferred.

Whichever way it is displayed, the wordmark should not be overlapped by other elements, text or graphical.

When typing it out, it is preferable to emphasise it in some way to differentiate it from the surrounding text – e.g., by use of italics or bold type – but this is not essential.

When typing the name, ensure the initial ‘S’ is in lower-case. Many word processors automatically capitalise the first letter, but the name is ‘swansea.art’, not ‘Swansea.art’. This is even true if at the start of a sentence. You can add ‘swansea.art’ to the dictionary to stop it complaining about the punctuation.

If online, the first time ‘swansea.art’ is mentioned in any page or document it should be linked to the homepage. The full address (also called a URL) to use is:

https://swansea.art

Note the ‘s’ in ‘https’. Do not include a ‘www’ before ‘swansea’.

The ‘dot’

The dot of swansea.art is meant to represent the ‘fine’ of fine art, and encompasses all the varied forms fine art can take. As such it emphasised more than is usual for a web address and is central to the site’s theme and used prominently for marketing. It is the ‘site icon’, as displayed next to the page title in browser tabs and is used as a graphical motif in various ways.

Be careful how you design any media relating to swansea.art. Don’t include circles in a cavalier manner and consider how your use of them could be interpreted in context.

Typefaces

The wordmark, and all headings on the site are displayed using ‘Montserrat’. The wordmark lettering is in bold, while the dot is in extra-bold. The wordmark has had some kerning adjustments but is otherwise standard Montserrat. It does not use any alternate glyphs, to keep it compatible with other apps.

The typeface used in body text is ‘Lato’. Use Lato for longer form writing.

Colours

The website is almost entirely greyscale, with only a single highlight colour. This colour is the same as the dot of the wordmark and should be used sparingly for effect. It is used for links in-page (but not for menu items) and as trim to emphasise sections.

The highlight colour can be described as:

  • HSB: Hue 6%, Saturation 82%, Brightness 79%
  • RGB (8-bit): Red 203, Green 55, Blue 37
  • CMYK: Cyan 14%, Magenta 93%, Yellow 100%, Black 4%
  • Hex code: #cb3725
  • Pantone: 7626 C

If you are putting together a quick internal document it’s OK to just pick a similar red colour, but for anything outward-facing you should use an accurate colour.

The site uses a minimal colour scheme so the artwork it contains instead provides the colour and vibrancy to its pages. However, the shades it uses are not just plain black and white, for example:

WhereShade
Wordmark lettering & headings0% brightness (black)
Body text15% brightness
Box out backgrounds93% brightness
Section highlighting98% brightness
Button highlights31% brightness

If you need to pick a different shade for another purpose, be aware of how shades are used throughout the rest of the site. If a particular shade is used repeatedly, we will standardise it and add it to the list above.