If you have suggestions for new components or updates, please follow our component contribution process.
Overview
The Phoenix Group design system is called Compound and its purpose is to facilitate efficient and more consistent practices.
A design system includes a number of parts:
Platform guidelines
Our guidelines on how we approach and apply our design system. The information covers both design and ethos.
Component library
The building blocks of our UI are details with specific examples, usage guidelines, and platform-specific differences. We interpret the brand guidelines into palettes that are accessible across our digital products.
Supporting documentation
Additional information, such as design tool best practices and templates, relevant to how we approach our product design and development.
Principles
Our main principles for our design system are to:
- Embrace more productive ideation and exploration in a consistent manner
- Maintain and encourage consistency through alignment and reuse of components (unless specific design requirements are absolutely necessary)
- Collaborate and contribute to a structured system that grows with our products
- Centralise our approach to reduce the overhead of following best practices and allow people to work autonomously
- Maintain intellectual property of design and design best practices as part of the business
Digital guidelines
As we work across a number of suppliers and platforms, it's not always possible to implement our component library or design system. In these instances, we should follow our foundational and brand specific guidelines.
These guidelines aim to be reference points for any digital product to align as closely as possible with our brand:
- Digital guidelines - An overview of our approach to all of our digital products and design system components
- Standard Life guidelines - Digital guidlines specific to the Standard Life brand
- Phoneix Group guidelines - (coming soon)
Quick links
Standard Life
Browse the Standard Life Component Library
Figma Guidelines
Follow our best practices for using Figma
Figma Checklist
Check your project and component files against our checklist.