Overview

The Standard Life design system is called Compound. It enables efficient and consistent practices.

Compound documentation is written with all digital squads in mind. Squads can adopt Compound at various levels, ranging from following basic guidelines to utilising a complete component library and theme integration.

A design system includes several parts:

Guidelines

The guidelines on how to consume and apply the design system. The information encompasses both the design and technical approaches.

Components

The building blocks of the user interface (UI) are detailed with specific examples, usage guidelines, and platform-specific differences. The component roadmap is regularly updated with the status and health of the component libraries.

Component libraries are referenced throughout this documentation. They contain components available as design assets and code packages for squads to use.

These guidelines reference two separate Compound Component Libraries:

• Compound UI Web - HTML and CSS library

• Compound UI React Native - A React Native library for native and web platforms

This component library is actively maintained in the component documentation. The supporting storybook is only available to the internal development team.

Design Tokens

Design tokens store values for colours, spacing, and typography. They maintain consistent designs across all Standard Life products. Learn more about the approach in the Design Token documentation.

UX Writing

UX writing guidelines establish best practices for tone, terminology, and formatting that apply across all Compound components. Specific guidance is also provided within individual component documentation where relevant — such as button labels, form helper text, and error messages. Following both the foundational principles and component-specific recommendations ensures consistency and helps users accomplish their goals efficiently.

Supporting Documentation

Additional information, such as design tool best practices and templates, is relevant to product design and development.

Principles

The main principles for our design system are to:

• Work and explore consistently
• Make products accessible and inclusive
• Maintain and encourage consistency through a component-based approach
• Collaborate and contribute to a structured system that grows with Standard Life products
• Centralise best practices so teams can work independently
• Create guidelines that work for both humans and AI tools

Digital guidelines

As Standard Life works across multiple suppliers and platforms, it's not always possible to implement the component library or every aspect of the design system.

However, the guidelines are written in a way that allows for a multi-level approach to be applied to various systems.

Component Level - Tier 1

Teams build products faster and maintain consistency and accessibility standards by reusing tested components.

• Compound documentation and Storybook align to the project approach
• Design tokens are implemented at the core
• Dedicated Figma library with 1:1 parity to the component library

Theme Level - Tier 2

Teams have an existing UI which is themed using Compound design tokens and documentation guidelines where possible.

• Compound documentation partially aligns with the project approach
• Design tokens are implemented for theming
• The Figma library can be used as a reference or starter

Foundation Level - Tier 3

Teams reference Compound guidelines and principles when building components from scratch, incorporating standards into their existing codebase where possible.

• Compound documentation and Figma are points of reference only
• Design tokens cannot be used
• Existing technical approach is in place and cannot be changed

---

Quick Links