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 the foundational level of general principles to the more intricate details at a component level.
Refer to the broader documentation for more detailed guidelines on specific principles and examples.
Layout and structure
- Any concepts 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
- Use typography design tokens where possible
- All typography should meet AA accessibility guidelines
- Body copy size should be at least 16px
- Avoid using h6 for headings if possible
- Underline text links to make sure they stand out from body copy
- Ubuntu should be used only for headings, subheadings and Legends
- Headings scale down between small and large viewports
- The platform’s system font should be used for all other copy
- Web - Arial, sans-serif
- iOS - San Francisco
- Android - Roboto
Colours
- The design tokens are based on the principle of intent; they should only be used for the cases intended
- All typography placed on a surface should meet AA 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 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 or 24px suite size, except for a few native UI elements
- 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
- Compound uses forms extensively that prioritise accessibility over UI
- Form patterns should be diverged from
- Forms should always be designed with accessibility as a priority and tested with screenreaders and inclusion tools
- Take time to review the forms overview and guidelines for specific components
Components and design system
- Compound is used both on 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
- 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
- Write consistently using the UX writing guide and UX copy style guide
- Always design with accessibility needs in mind, do not wait until development specifications to consider accessibility
- Design tokens are working towards aligning with the W3C design token standard
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
Next Steps
- Standard Life’s digital estate is currently spread across several platforms and technical stacks. Compound aims to support the estate as widely as possible.
- Use 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.