The Environment component displays a clear banner at the top of every page to indicate when a user is viewing a non-production environment.

The component helps prevent confusion by ensuring users always understand whether they are interacting with a Development, Staging or Production service.

When to use this component

Use the Environment component on any page that is not part of the live, production service.

This includes:

• Development environments
• Staging or pre-production environments
• User testing or prototype environments
• Internal demo environments

The purpose of the component is to ensure users — including developers, testers, content designers and stakeholders — immediately recognise that the page is not a live, public-facing system.

When not to use this component

Do not use the Environment component in a production environment.

The banner should never appear on pages intended for real users completing real tasks.

Before using this component, consider:

• Whether the environment name is clearly configured and reliable
• Whether additional access restrictions (such as password protection) may reduce the risk of confusion
• Whether local development setups need different wording or colour contrasts

The Environment component is intentionally prominent. Its bright yellow background and position at the top of the page ensure that users do not mistake a testing environment for a live service.

Example of where we have used this component

This component is used on:

• Assure
• Formation
• EBIT

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.