Design
We will be updating this content to our new principle-based format in the near future.
Start designing with a Design System from the Royal Navy
Welcome to the Royal Navy Design System! We are here to help you build thoughtful, user-friendly digital experiences.
Here’s a checklist of everything you need to get started:
1Design libraries
We provide three Axure libraries which contain all Royal Navy Design System components. Using our libraries saves you having to design components from scratch and, when handing off to your developers, there won’t be confusion about the components and their behaviour.
Getting started with the Axure design libraries
A short document to help you
Install, use and keep our libraries up to date
Understand which library to use when
Discover tips and tricks for working with Axure
Download our Getting Started Guide
Static Axure library
Current version: 3.2
Changes from previous version:
New component: Classification bar (for Masthead and Sidebar)
Tabs: Updated design to match new v3 design
Masthead: Updated design to match new v3 Tab Nav design
Date picker, Time picker: Minor update to mask text style
Number input active state: Fixed buttons z-index
Select: Updated sheet to v3 design
Tertiary button: Visual updates to button style (buttons may need to be re-aligned when you import library styles, as the default state now includes Padding)
Buttons: added icon-left and icon-right variants
Buttons: updated designs to match new v3 design
All components: Titles changed from "Active" to more accurate "Focused" where appropriate
Components with Sheets: Updated drop shadows for improved consistency with live components
Checkbox: Added 'no container' variant
Range slider: 'Error' icon replaced with 'Dangerous'
All components: Component-specific information and warnings moved to yellow box notes for easier reference; these will appear every time a component is used in a design
Download our static Axure library
Interactive Axure library
Current version: 3.1
Changes from previous version:
New widget: Classification bar (for Masthead and Sidebar)
Tabs: Updated design to match new v3 design
Masthead: Updated design to match new v3 Tab Nav design
Date picker, Time picker: Minor update to mask text style
Drawer: Background colour fixed to white (instead of transparent)
Select: Updated sheet to v3 design
Tertiary button: Visual updates to button style (buttons may need to be re-aligned when you import library styles, as the default state now includes Padding)
Number input: Added small size
Buttons: added icon-left and icon-right variants
Buttons: updated styles to match new v3 styles
Buttons: removed dynamic light blue border for hover/focussed/pressed states, in order to simplify aligning and editing
Components with Sheets: Updated drop shadows for improved consistency with live components
Checkbox: Added 'no container' variant
All components: Component-specific information and warnings moved to yellow box notes for easier reference; these will appear every time a component is used in a design
Download our interactive Axure library
Icons Axure library
All icons available on the Design System are in this searchable Axure library and can be dropped directly into your designs.
Current version: 3.0
Changes from previous version:
First Axure icons library
Download our icons Axure library
Legacy Sketch design library
If you are still using v2 of the MOD.UK Design System (now renamed Royal Navy Design System), you should use our legacy Sketch library. Please note that this library is not maintained any longer and you should transition to our Axure libraries where possible.
Download our legacy Sketch design library
2Foundational guidance
Read about our Tokens to understand how elements like colour, typography and spacing work, especially if you need to create a new component or pattern.
3Guidance on individual components
We provide guidance on how to use each individual component and its variants, including any applicable Standards you may have to adhere to.