Welcome

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

Each library follows the same overall design system guidelines but includes platform-specific variations.

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.

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
• 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
• Make products accessible and inclusive
• 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.

Foundation Level

While many platforms may not be able to utilise our component library, teams can incorporate the guidelines into their codebase where possible.

Component Level

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

---

Quick Links