Using our guidelines
Our guidelines aim to serve all users, whether customing a whitelabel's properties or building an interface using our component library.
Our documentation is structured to scale and provide more detailed information as required.
You should read through the base guidelines below then the guidelines for the brand you're working with. Each of these deep link into specific pages if you need more detailed information.
Base guidelines
Layout and structure
- All of our design solutions are mobile-first, no matter whether it is web or native – this forces us to make sure the design is simple and the context is focused
- We always start from a smaller viewport and work outward to our larger breakpoints – even if an application has higher usage on a large screen
- We use the language of small, medium, large and extra large viewports, not mobile and desktop
- We work to an 8px soft grid – a soft grid defines the spacing between elements rather than a strict document-wide grid
- Layout grids can be used to help structure pages across breakpoints (these aren’t mandatory but can be used as a guideline)
- The 8px soft grid should be used for any components inside a layout grid
- Brand logos should be placed in the top list and direct the user back to the application homepage when tapped
Colour and typography
- Each brand digital guideline details the colour palettes and typography
- All copy should meet AA accessibility guidelines (in most cases, this is a body copy size of at least 16px and contrast ratio that meets the criteria)
- We underline our text links to make sure they stand out from body copy
- Text links should be styled as per the brand guidelines for default, hover, active and visited states
- We are still working on our dark mode colour palettes (these have been defined but not yet implemented)
Buttons and controls
- All of our controls that a user interacts with should meet the minimum tappable size of 44px
- Controls should use states to indicate to the user that an action has taken place
- Our buttons component outlines how we use our suite of buttons individually or as a group
- These are outlined in each brand's component library and style block guidelines
Components and design system
- Our work is delivered both on web and native platforms
- We should aim for as much consistency in our system as 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
- We follow minimum AA accessibility guidelines and aim to reach a higher level of accessibility where possible
- We also consider our vulnerable customers when evaluating our designs
- We use Figma and FigJam as our design tools allowing us to design and collaborate in the open
- We follow structured guidelines on working in Figma to maintain consistency across our files
- We use checklists on our Figma files to maintain consistency in the work across the team
- Regular attendance to design review and Compound catch-up sessions ensure governance across our system
Other key points
- We have taken the time to detail how to write consistently in our UX writing guide – our UX copy style guide is also detailed and continually updated
- We always design with accessibility needs in mind – we don’t wait until development specifications to consider accessibility
- Our icon suite is custom to our platform and is available as 16px and 24px
- We are working towards all of our style definitions being aligned with the W3C design token standard
- As we are mobile-first, our digital applications should be as high-performing as possible
Future vision
Our digital estate is currently spread across a number of platforms and technical stacks.
The future vision is that these will consolidate into a shared set of components with brand specific themes.
We have structured this document to allow for this approach and future scalability.