Styles

Styles comprise of the core parts of the B&NES brand such as colour, typography and the B&NES logos.

Also included is a grid for 2, 3 and 4 column layouts.

Colours

Colour Palette

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-primary"></div>
	<ul>
		<li><b>#00aeef</b></li>
		<li>$bathnes-primary</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-secondary"></div>
	<ul>
		<li><b>#00b259</b></li>
		<li>$bathnes-secondary</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-purple"></div>
	<ul>
		<li><b>#5261AC</b></li>
		<li>$bathnes-purple</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-yellow"></div>
	<ul>
		<li><b>#ffbf47</b></li>
		<li>$bathnes-yellow</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-red"></div>
	<ul>
		<li><b>#AF122A</b></li>
		<li>$bathnes-red</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-grey-1"></div>
	<ul>
		<li><b>#6f777b</b></li>
		<li>$bathnes-grey-1</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-grey-2"></div>
	<ul>
		<li><b>#bfc1c3</b></li>
		<li>$bathnes-grey-2</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-grey-3"></div>
	<ul>
		<li><b>#dee0e2</b></li>
		<li>$bathnes-grey-3</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<div class="swatch swatch-bathnes-grey-4"></div>
	<ul>
		<li><b>#f8f8f8</b></li>
		<li>$bathnes-grey-4</li>
	</ul>
</div>

Colour Uses

Use Sass variables in case colour values need to be updated – find these in colours.scss file.

<div class="swatch-wrapper">
	<h4 class="heading-small">Text</h4>

	<div class="swatch swatch-text-colour"></div>
	<ul>
		<li><b>#0B0C0C</b></li>
		<li>$text-colour</li>
	</ul>

	<div class="swatch swatch-secondary-text-colour"></div>
	<ul>
		<li><b>#6F777B</b></li>
		<li>$secondary-text-colour</li>
	</ul>

	<div class="swatch swatch-page-colour"></div>

	<ul>
		<li><b>#FFFFFF</b></li>
		<li>$page-colour</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<h4 class="heading-small">Links</h4>

	<div class="swatch swatch-link-colour"></div>
	<ul>
		<li><b>#00728F</b></li>
		<li>$link-colour</li>
	</ul>

	<div class="swatch swatch-link-hover-colour"></div>
	<ul>
		<li><b>#009bc2</b></li>
		<li>$link-hover-colour</li>
	</ul>

	<div class="swatch swatch-link-visited-colour"></div>
	<ul>
		<li><b>#5461AC</b></li>
		<li>$link-visited-colour</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<h4 class="heading-small">Backgrounds</h4>

	<div class="swatch swatch-border-colour"></div>
	<ul>
		<li><b>#BFC1C3</b></li>
		<li>$border-colour</li>
	</ul>

	<div class="swatch swatch-panel-colour"></div>
	<ul>
		<li><b>#DEE0E2</b></li>
		<li>$panel-colour</li>
	</ul>

	<div class="swatch swatch-highlight-colour"></div>
	<ul>
		<li><b>#F8F8F8</b></li>
		<li>$highlight-colour</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<h4 class="heading-small">Buttons</h4>

	<div class="swatch swatch-button-colour"></div>
	<ul>
		<li><b>#00663D</b></li>
		<li>$button-colour</li>
	</ul>

	<div class="swatch swatch-button-hover-colour"></div>
	<ul>
		<li><b>#004d2e</b></li>
		<li>$button-hover-colour</li>
	</ul>

	<div class="swatch swatch-page-colour"></div>
	<ul>
		<li><b>#ffffff</b></li>
		<li>Button text colour</li>
	</ul>
</div>

<div class="swatch-wrapper">
	<h4 class="heading-small">Status</h4>
	<div class="swatch swatch-focus-colour"></div>
	<ul>
		<li><b>#ffdd00</b></li>
		<li>$focus-colour</li>
	</ul>

	<div class="swatch swatch-error-colour"></div>
	<ul>
		<li><b>#AF122A</b></li>
		<li>$error-colour</li>
	</ul>
</div>

Layouts

Full Width

Introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width

Content

<div class="grid-row">

	<div class="column-full">
		<p>Content</p>
	</div>

</div>

Halves

Content

<div class="grid-row">

	<div class="column-one-half">
		<p>Content</p>
	</div>

	<div class="column-one-half">
		<p>Content</p>
	</div>

</div>

Thirds

Content

<div class="grid-row">

	<div class="column-one-third">
		<p>Content</p>
	</div>

	<div class="column-one-third">
		<p>Content</p>
	</div>

	<div class="column-one-third">
		<p>Content</p>
	</div>

</div>

One Third Two Thirds

Content

<div class="grid-row">

	<div class="column-one-third">
		<p>Content</p>
	</div>

	<div class="column-two-thirds">
		<p>Content</p>
	</div>

</div>

Two Thirds One Third

Content

<div class="grid-row">

	<div class="column-two-thirds">
		<p>Content</p>
	</div>

	<div class="column-one-third">
		<p>Content</p>
	</div>

</div>

Quarters

Content

<div class="grid-row">

	<div class="column-one-quarter">
		<p>Content</p>
	</div>

	<div class="column-one-quarter">
		<p>Content</p>
	</div>

	<div class="column-one-quarter">
		<p>Content</p>
	</div>

	<div class="column-one-quarter">
		<p>Content</p>
	</div>

</div>

Logos

Colour Logo

<img src="/assets/patterns/images/logos/bathnes-logo-colour.png" alt="Bath & North East Somerset logo" />

Gold Logo

Used for heritage sites

<img src="/assets/patterns/images/logos/bathnes-logo-gold.png" alt="Bath & North East Somerset logo" />

Mono Logo

<img src="/assets/patterns/images/logos/bathnes-logo-mono.png" alt="Bath & North East Somerset logo" />

White Logo

<div class="ui-item-group__reverse">
	<img src="/assets/patterns/images/logos/bathnes-logo-white.png" alt="Bath & North East Somerset logo" />
</div>

Typography

Headings

Use GDS Transport Website Bold
Use sentence case for headings
Use headings consistently to create a clear hierarchy

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading

<h1 class="heading-xlarge">A 48px Bold heading</h1>

<h2 class="heading-large">A 36px Bold heading</h2>

<h3 class="heading-medium">A 24px Bold heading</h3>

<h4 class="heading-small">A 19px Bold heading</h4>

Lead Paragraph

Use 24px for a lead paragraph
There should only be one lead paragraph per page

A 24px lead paragraph with some longer text so that you can see how it wraps.

A 19px body copy paragraph with some longer text so that you can see how it wraps.

<p class="lede">
	A 24px lead paragraph with some longer text so that you can see how it wraps.
</p>

<p>
	A 19px body copy paragraph with some longer text so that you can see how it wraps.
</p>

Body Copy

Avoid using bold and italics
Use 19px for body copy – 16px for smaller screens
Use smaller sizes only if there’s a user need (eg 16px, 14px, 12px)
Make sure lines of text don’t exceed 75 characters, as they become harder to read beyond that point

A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.

A 16px supporting text paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.

<p>
	A 19px body copy paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.
</p>

<p class="font-xsmall">
	A 16px supporting text paragraph. This includes even more text to give a good representation of a more average length paragraph. That way you can see more than one line wrapping.
</p>

Links

Links within body copy should be blue and underlined
Links without surrounding text should not have a full stop at the end
Link colours can be found in the colour palette

A 19px link without surrounding text

A 19px body copy link with surrounding text which shows the link in more context.

Back

<p>
	<a href="#">A 19px link without surrounding text</a>
</p>

<p>
	<a href="#">A 19px body copy link</a> with surrounding text which shows the link in more context.
</p>

<a href="#" class="link-back">Back</a>

Lists

List items start with a lowercase letter and have no full stop at the end
See the style guide to check how to punctuate numbered lists

here is a bulleted list
this is another item in the list
and another item with a bit more text

Understand that this is a numbered list.
Follow the second step in this numbered list.
Make sure each item is a full sentence ending with a full stop.

<ul class="list list-bullet">
	<li>here is a bulleted list</li>
	<li>this is another item in the list</li>
	<li>and another item with a bit more text</li>
</ul>

<ol class="list list-number">
	<li>Understand that this is a numbered list.</li>
	<li>Follow the second step in this numbered list.</li>
	<li>Make sure each item is a full sentence ending with a full stop.</li>
</ol>

<ul class="list">
	<li><a href="#">Related link</a></li>
	<li><a href="#">Another related link</a></li>
	<li><a href="#">And another link</a></li>
	<li><a href="#" class="bold-xsmall" aria-label="View more [title of section]">View more</a></li>
</ul>

Inset Text

Use bordered inset text to draw attention to important content on the page.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

<div class="panel panel-border-wide">
	<p>
		It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
	</p>
</div>

Legal Text

Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.

You can be fined up to £5,000 if you don’t register.

<div class="notice">
	<i class="icon icon-important">
        <span class="visually-hidden">Warning</span>
    </i>
	<strong class="bold-small">
        You can be fined up to £5,000 if you don’t register.
    </strong>
</div>

Hidden Text

Use this to make your page easier to scan, only showing contextual information when required.
Click on "Help with nationality" to see how this works.

Help with nationality

If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

<details>

	<summary><span class="summary">Help with nationality</span></summary>

	<div class="panel panel-border-narrow">

		<p>
			If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
		</p>

		<p>
			We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
		</p>

	</div>

</details>