The standard for the look and feel of services available via


This document outlines design thinking and approach, covering Grid, Typography and Link language, with inline examples for common elements.

The grid

If you do nothing else: get responsive; be consistent.

Get responsive

We make use of a responsive 12 column grid which works across multiple devices. There are 4 breakpoints, which allow for custom CSS to be generated for different viewports and which can be loosely attributed to: smart phones; small/portrait tablet; desktop and desktop HD.

This allows us to deliver content optimised for a variety of devices. It means that mobile is loved just as much as desktop. It means that we engrain in our thinking “let’s start with mobile” and “let’s enhance desktop”. The goal is that our users don’t notice they are on the mobile version of our site — they are just on our site. Consistency of design elements and language throughout ensure that the journey is the same.

HD desktop (L)

For displays ≥ 1200px

The grid on large desktops

Desktop (M)

For displays ≥ 992px

The grid on normal desktops

Tablet (S)

For displays ≥ 768px

The grid on tablets

Mobile (XS)

For displays < 768px

The grid on mobiles

Be consistent

By defining a set of rules that determine spacing above and below common elements on the site, we set the vertical rhythm. And this rhythm is ever more pertinent across mobile devices where users encounter much longer pages that often look very uniform compared to their desktop counterparts.

The use of a 7px baseline/vertical grid sets the rules for vertical spacing across the site. This provides the backbone for typographical line-height and padding as well as sizing and margins for all graphical elements. Line-height and fixed height elements are all multiples of 7px. Padding, margins and borders of each block element also total multiples of 7px. So everything sits on the grid, which is nice, but most importantly, as a designer/developer there is less guess work involved and you are better prepared to make decisions.

Note: It may be necessary to fine-tune spacing to accurately position against the baseline. ‘Baseline grid’ is a recognised term in web design with it’s grounding in print design. It refers to the baseline that text sits on, as if writing on ruled paper (descenders drop below the baseline). However, in the case of web design, it can be misleading as the vertical spacing of text is determined by the css parameter ‘line-height’ and this positions text within the vertical centre of the attributed area.

Use the baseline grid to inform layout, and use it as a guide, not a constraint.


Good typography isn’t noticed.


If you’re creating a site to host digital public services that people will rely on then accessibility has to be at the forefront of your thinking. Gone are the days of ‘make it Arial min 12pt’. We now have the luxury of being able to use a much wider range of fonts and are in an age where rendering of fonts are of a much higher standard.

We chose to use Roboto, a Google font, which ticks a lot of boxes in terms of readability and flexibility. Importantly it is a non-serif font which has humanist qualities increasing legibility, particularly with dyslexic viewers in mind. It has a good range of weights which all (except ‘Thin’ at small sizes) render well on modern browsers and still perform on the not-so-modern.

1. Font sizing and spacing

Good semantic copy is supported by appropriate styling. Levels of importance are defined by size, weight, and margins. Line-height, padding and margins all adhere to the baseline grid of 7px. Any deviations from this are nested within fixed height blocks which adhere to the grid. Any further deviations from this can be put down to ‘artistic license’.

See the Pen Font size and spacing by jonathan sutcliffe (@jsutcliffe) on CodePen.

2. Column width

It’s tempting to use all the space available. Don’t. Wide columns of text can make it difficult for the reader to keep their place, as the eye has greater distance to travel from end of one line to the start of the next.

Recommendation: average 14 words per line

All the best attention to typographical detail goes out the window if the body copy sits within an uncomfortably wide column. Further reading with design composition fundamentals blog post.

3. Font weight treatment

To ensure best font­ weight appearance, use font smoothing. This delivers a truer and more legible interpretation of a font-set across macs, and is more consistent with PC display in terms of weight. We achieve that with the following CSS.

    -­webkit­font­smoothing: antialiased;
fontweight example
Font weights

4. Typographical variations

4.1. Emphasis headings

In addition to regular article formatting, we have found a need for ‘h2 emphasis’ to jump out within swathes of content that we don’t have as much control over i.e. from external feeds OR to act as a sub-header as in the instance of business rates calculator. ‘h2 emphasis’ applies a top border to h2.

See the Pen Emphasis headings by jonathan sutcliffe (@jsutcliffe) on CodePen.

4.2. Multi-page article subpage headings

Guide pages display both the guide title (h1) and page/section title (h2) on each page. The standard h2 which is used site-wide does not have enough prominence in this instance to handle the page title, therefore ‘h2 emphasis (guide)’ has been defined to be used solely on guide pages. Can only appear once on a page as in the case of h1. Note: Guide page h3s match styling of regular h2s and similarly guide page h4s match regular h3s. ‘h2 emphasis (guide)’ is larger than standard ‘h2 emphasis’ and applies a blue top border.

Example on Apply for or renew a disabled parking permit (Blue Badge)

See the Pen Guide subpage headings by jonathan sutcliffe (@jsutcliffe) on CodePen.

5. Breadcrumbs

Currently breadcrumbs appear on all views except mobile (320px). They adopt the ‘small print’ size and line-height styling.

Example on Getting financial support when you’re pregnant

See the Pen Mygov Breadcrumbs by jonathan sutcliffe (@jsutcliffe) on CodePen.

6. Informational notes

It’s not good enough to rely on the html <blockquote> element to render all information requiring some kind of highlighting. Here we have a range of ‘informational notes’…

6.1. Note

Example of a “note” on Your limited company’s first accounts and Company Tax Return

See the Pen Info note: note by jonathan sutcliffe (@jsutcliffe) on CodePen.

6.2. Caution

Example of a “caution” on Bereavement benefits and help with money

See the Pen Info note: caution by jonathan sutcliffe (@jsutcliffe) on CodePen.

6.3. Blockquote

See the Pen Info note: blockquote by jonathan sutcliffe (@jsutcliffe) on CodePen.

7. Ordered lists

ordered-list example
An ordered list

8. Unordered lists

Example on Guardian’s Allowance

unordered-list example
An unordered list

Set the user's expectation by taking away the unknown.

Users will quickly become familiar with the language of a site and we can gain their trust by delivering consistent interactions. If this is achieved, then the user can browse and find the information they seek quicker and easier. That’s the ultimate goal.

Links/Buttons by default need to stand out from their context. The way we handle different types of links needs to vary slightly dependent on the context.

Users are informed when a text link or button will link to an external site by way of the recognised ‘external link’ icon.

Links are by default Primary blue. In the case of text links, underline only appears on hover except in the instance of contextual text links, whereby their default state is underlined to help stand-out from body text. Call to Action (CTA) buttons are big and bold. Secondary buttons are smaller than their Primary counterparts and are a darker blue to indicate that they are optional. Cancel/Call-off buttons have a ‘ghost’ appearance meaning they do not fight for attention with CTA buttons which they will often sit alongside.

Hover states are subtle indicators. All text and button links darken on hover.

Transitions are almost immediate (0.2 secs duration on hover), and ease out at a slower rate (1 sec duration).

Active states are affirming. In the case of buttons the hover state is maintained while the reversal text becomes semi-transparent. This maintains a consistency across desktop and mobile devices where hover becomes redundant, while replicating a real-life down-press event. In the case of text links and Category / Content item listings a light blue is applied to the background. This is especially useful to mobile users, as screen size and brightness, smaller text and graphical elements, and poor connectivity can all potentially make it difficult to know whether a link has been pressed.

text-links example
Header and contextual links; internal and external

2. Primary button

primary-button example

3. External button

external-button example

4. Secondary button

secondary-button example

5. Stop / Call-off / Cancel button

cancel-button example

6. Navigation button

See the Pen Mygov Page Navigation by jonathan sutcliffe (@jsutcliffe) on CodePen.

7. Sequential guide navigation

See the Pen Sequential multi-page navigation by jonathan sutcliffe (@jsutcliffe) on CodePen.

8. Non-sequential guide navigation

See the Pen Non-sequential multi-page navigation by jonathan sutcliffe (@jsutcliffe) on CodePen.

9. Accordion

Example on Help if you’re made redundant

See the Pen Mygov Expandable by jonathan sutcliffe (@jsutcliffe) on CodePen.

10. Tabs

tabs example

11. Notifications

See the Pen Notifications by jonathan sutcliffe (@jsutcliffe) on CodePen.

Colour palette

Users will see, process and react to colour instantly and will learn patterns quickly.

Purpose of this palette: This is the colour palette we use for and Any services being created in line with will need to follow this palette to meet the Digital First Service ‘consistent user experience’ standard.

The colours reflect the branding of the Scottish Government.

As a general rule use:

  • blue – for links
  • dark grey – for text
  • light greys – for layout
  • light blues – for active/selected states
  • red – for error
  • green – for messages of success or validation
  • yellow – for warning or notifications.


Primary Blue: #0065bd (rgb: 0, 101, 189)
Use: default link colour

Other examples:
  • text links
  • CTA / primary button
  • secondary button outline
  • accompanying icons (arrows/numbers/graphics)
  • form field focus border
  • heading emphasis border above
  • blockquote / address vertical left border
  • footer background
Dark blue: #00437e (rgb: 0, 67, 126)
Use: link hover state
Darker blue: #002d54 (rgb: 0, 45, 84)
Use: currently undefined
Light blue: #d9effc (rgb: 217, 239, 252)
Use: link active state background
Lighter blue: #e5f0f8 (rgb: 229, 240, 248)
Use: navigational selected state background / form field focus background


Dark grey: #333333 (rgb: 51, 51, 51)
Use: default all text (para and headings) / call-off / cancel buttons
Base grey: #727272 (rgb: 114, 114, 114)
Use: secondary text and form element borders

Other examples:
  • search field placeholder (Mid-grey to be used for all other form field placeholders)
  • form field character count
  • form field border
  • drop down select border
  • checkbox / radio button border
  • list items date / time
Mid grey: #b3b3b3 (rgb: 179, 179, 179)
Use: form field placeholder text / secondary text reversal out of dark grey

Other examples:
  • info and caution notes top and bottom border
Pale grey: #e3e3e3 (rgb: 227, 227, 227)
Use: subtle borders / lines

Other examples:
  • search results divider
  • sub-nav items divider
  • inactive field border
Light grey: #ebebeb (rgb: 235, 235, 235)
Use: background grey hover

Other examples:
  • hover state for ‘lighter grey’ block element
Lighter grey: #f8f8f8 (rgb: 248, 248, 248)
Use: block backgrounds

Other examples:
  • white background button/nav/search results hover state
  • block element background
  • aside / filter background


Error red: #d32205 (rgb: 211, 34, 5)
Use: error messages / attention

Other examples:
  • messages like ‘This fund is currently closed’ / ‘Please enter your name’
  • error playback border and text
  • form field border in error state
  • supporting error message
  • fieldset border in error state
Error red tint: #f4e2df (rgb: 244, 226, 223)
Use: error messages / attention

Other examples:
  • fieldset background in error state


Validation green: #4e9d52 (rgb: 78, 157, 82)
Use: validation / success messages / attention (friendly)

Other examples:
  • ‘Hide this page’ button
  • success message border and heading text
  • form field border in validated state
  • fieldset border in validation state
Validation green tint: #edf5ee (rgb: 237, 245, 238)
Use: validation / success messages / attention (friendly)

Other examples:
  • fieldset background in validation state


Notification yellow: #ffb644 (rgb: 255, 182, 68)
Use: amber state / notification background (accompanied by dark grey text)

Other examples:
  • ‘Beta banner’ or ‘You have been redirected from a site which no longer exists’
Notification yellow tint: #fff8ec (rgb: 255, 248, 236)
Use: can be used in instances where solid notification yellow isn’t suitable.