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.

Brand

Colours

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

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

Content

Forms

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

Use one of the common standardised header patterns to start your page.
Images

Use images to provide additional visual context.
Tables

Use a tables to display tabular data.

Layout

Grid

Use the TNA grid system to help position and organise content on your pages.
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.

Typography

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.
Typography

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

This website uses cookies

Styles