Version
has been released! Read the upgrade guide

Help

1What is the Royal Navy Design System?

The Royal Navy Design System is a set of rules that save designers and developers time when creating new applications for the Royal Navy. They ensure familiarity is maintained between applications, providing Defence personnel with a consistent user experience.

Design System guidance primarily governs the style and usage of visual elements on a page. These are categorised into three key areas:

  • Styles - basic rules governing the use of elements such as colour, typography and imagery.

  • Components - individual elements that make up a page, such as drop-downs, buttons and headings.

  • Patterns - collections of components to describe how a user is presented with a simple workflow. For example, the form components making up a ‘sign in’ dialogue box.

2Why is the Design System useful?

Having a pre-made library of styles, components and patterns reduces the barrier to entry when building new software. It saves designers and developers time as they do not need to create many common elements from scratch, and can re-use proven code. For example, the appearance and functional behaviour of a button is defined in the Design System.

The Royal Navy Design System provides visual templates and code samples enabling the rapid delivery of design work and production ready code. This allows functional prototypes to be quickly tested with users and iterated frequently based on feedback.

Users have a consistent experience when switching between applications. This reduces the need to learn new systems and reduces training times. Guidance around each component and pattern ensures that design elements always have a consistent behaviour, for example, a red button would always indicate a destructive action such as ‘delete’.

3How does the Design System align with Royal Navy principles?

By maintaining a disciplined approach to design and development of Applications and respecting the Standard, we ensure that end-users are well-equipped to perform their role, and can work to the best of their abilities.

Using the Design System correctly enables the integrity of software to be maintained. Applications are characterised by their design based on end-user needs, consistent and predictable behaviour and high quality user experiences. Costs are reduced as designers and developers do not need to start over with new codebases and visual language for every project.

The Royal Navy Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright