Styles

Make your service look part of The National Archives with guides for applying layout, typography, colour and images.

Make services look and feel like The National Archives.

If you are using the GOV.UK Prototype Kit with TNA Frontend or have TNA Frontend included in your build, the coded examples in the Design System will not need any additional styling.

If you need to apply styles manually, you should still follow existing National Archives conventions. For example, do not assign new meanings to colours, do not change the style of buttons or adjust the thickness of borders on form inputs.

Colours

Use colours to add interest to your pages and content.
Forms

Allow users to enter information, search for content or perform tasks.
Grid

Use the TNA grid system to help position and organise content on your pages.
Headers

Use a standardised page header to start your page.
Icons

Use icons sparingly to reinforce call to actions and support small pieces of information such as metadata.
Images

Use images to provide additional visual context.
Links

Link to pages within your service or to external resources.
Lists

Create lists of content to more easily allow users to find what they need.
Media

Provide services for a variety of screen sizes as well as print media.
Page template

Use the TNA Frontend base template to create consistent page layouts.
Spacing

Space content out in a consistent and flexible manner that works for all screen sizes.
Tables

Use a tables to display tabular data.
Typography

Utilise a full range of typography to more clearly communicate your content.

This website uses cookies

Styles