UI components

Interface design at WorkSafe

Interface designers can hit the ground running by using WorkSafe's design system. This design guide introduces the patterns and foundation elements, utilities, components and content types, and explains how we design accessible digital products that are true to our brand, are modular and reusable, with the right amount of white space in the interface.

If you're a designer employed by WorkSafe (not an agency doing design work for WorkSafe) we have extra information and tools for you including Figma files.

You can request access to them by contacting the Digital Operations team.

Accessibility

Before we dive into the design details it's important that you understand accessible design.

All design, content and code presented by any of WorkSafe's websites must be WCAG 2.1 AA certified. For the visual brand this largely means making sure that text is big enough and has enough contrast against backgrounds.

• Text and photos: Photographs with text over them should either have a black overlay at 60% opacity or a solid background colour behind the text.
• Colour contrast: Most elements on the website will not allow you to create non-compliant colour combinations. If you're designing something new in the core WorkSafe brand, use black (#191919) as a contrast against yellow (#FDCD59), white (#FFFFF) and grey (#D3D3D3).

White space

The website's user interface is designed to feel spacious and open. The purpose of this spaciousness is to ensure that the great density of information that the WorkSafe website holds does not feel overwhelming.

The use of white space on the homepage, section pages and content pages is an integral part of enabling the three modes of navigation. It guides the user's eye and ensures that content is easy to read.

The website's responsive design also means that the amount of white space on the screen changes depending on the size of the device you are using.

Shadow and depth

The design system is mostly flat and users borders in most instances. Shadows are sparingly to highlight particular interface elements and signify functionality.

Shadows are used to draw attention to a useful or important element and to visually communicate when one interface element is above another, eg the menu dropdown, the search dropdown, modals.

Design examples

The design system is made up of a collection of reusable, modular elements.

Some elements have a clear single purpose, while others can be reused in multiple scenarios to serve different purposes.

This means new types of pages can be created by combining different elements.

Before creating a new element, first look to see if existing elements from the design system could be reused to serve your purpose. Using existing elements will mean you can get your product to market faster and learn from it before investing time into designing bespoke elements.