Quick Start

An overview of key principles to help teams get started quickly on Compounds core concepts

 

Using the guidelines

The guidelines aim to serve all users, whether customising a whitelabel's properties or building an interface using a component library.

The documentation is structured to scale from foundational principles to more intricate component-level details.

Refer to the broader documentation for more detailed guidelines on specific principles and examples.

Accessibility

Accessibility is the foundation of all the decisions made in the Compound guidelines. It is essential to read the accessibility pages for each component, or the sections that highlight specifics, in our foundational documentation.

Layout and structure

  • Any decisions should always prioritise accessibility best practices
  • Always start from a smaller viewport and work outward to larger breakpoints – even if an application has higher usage on a large screen
  • Use the language of small, medium, large and extra large viewports, not mobile and desktop
  • Work to an 8px soft grid – a soft grid defines the spacing between elements rather than a strict document-wide grid
  • Brand logos should be placed in the top corner and direct the user back to the application homepage when tapped
  • Whether working on a single or cross-platform journey, be familiar with the platform conventions

Typography

Colours

  • The design tokens are based on the principle of intent; they should only be used for the cases intended
  • If your application cannot implement the direct tokens, the same guidelines and intent can be applied to your colour scheme manually
  • All typography placed on a surface should meet the AA contrast ratio accessibility guidelines
  • Cards should always use the card surface colour; do not use alternate colours

Surfaces & Elevation

  • Surfaces are the areas or backgrounds on which UI is placed.
  • Each mode (light and dark) has a base surface and an inverted surface.
  • Inverted surfaces are used to call out key information, usually situated at the top of the page
  • Each mode includes several alternate surfaces that can be used to section content. These should not replace a clean visual hierarchy to group content

Iconography

  • Font Awesome is used as the icon library across all platforms.
  • The library contains thousands of icons, but Compound uses a curated list delivered in a custom kit
  • Compound uses the Classic > Regular suite of icons and, in some cases, Classic > Solid for selected states
  • Icons fit within a 16px,24px or 48px suite size, follow the iconography guidelines for more details
  • Additional icon suggestions should go through the contribution process

Cards & Tiles

  • Cards and tiles can be used to group and encapsulate content. However, each component has a specific use case
  • Tiles are cards in which the whole container acts as a hit state for a single action. Cards contain button groups that trigger multiple actions

Spacing

  • Compound uses an 8px soft grid to layout content
  • Content should be spaced using factors of 8, except for components which may require specific values
  • Compound uses the concept of “stacks”, which are components and classes which group common UI patterns consistently

Buttons and Controls

  • All user interaction controls should meet the minimum tappable size of 44px
  • Controls should use states to indicate to the user that an action has taken place
  • Buttons have primary, secondary and tertiary variants for default and inverted surfaces
  • The buttons component outlines how to use the suite of buttons individually
  • Button groups provide patterns for displaying button combinations
  • Do not use additional libraries to adjust or style native controls

Forms

Components and design system

  • Compound is created for both web and native platforms
  • Designs should use Compound guidelines where possible, but diverge where a platform has specific requirements
  • Compound is open for contribution by any member of the digital team and the current ro
  • The key criteria are that any component request or update is beneficial to more than one team

Guidelines and checklists

  • Minimum AA accessibility guidelines should be followed for all designs, and aim to reach a higher level of accessibility where possible
  • Consider vulnerable customers when evaluating design approaches
  • Follow structured guidelines when working in Figma to maintain consistency across shared files
  • Use checklists on Figma files to maintain consistency in the work across the team
  • Regular attendance at design review and Compound catch-up sessions ensures governance and the chance for contribution to Compound

Other key points

Avoid The Following

  • Using disabled states on components increases cognitive load
  • Hiding content in tooltips, aiming to surface content in the context of the page
  • Using alternate surface colours that are not outlined in the design token approach
  • Using design tokens for purposes other than their intent

Next Steps

  • Standard Life's digital estate spans multiple platforms and technical stacks — Compound supports teams at different levels through three implementation tiers
  • Use the documentation Search to explore the documentation in greater depth on specific topics
  • Compound is open to contributions, so please suggest solutions for anything that needs to be covered or expanded upon.

 

Guidelines
Welcome
Guidelines
Contribution

© 2026 Compound. Page last updated on Feb 13, 2026, 10:17