Surfaces

Every page is built on a surface. Surfaces are the backgrounds that contain all UI elements.

Overview

Compound uses the term "surfaces," which refers to backgrounds. Use surfaces in specific scenarios. Surfaces are at the bottom of the user interface (UI). They have no functionality; content and components sit on top of them.

Base

Each theme has its own base surface, and every style and component is thoroughly tested to ensure it works with these theme colours.

Inverted Surfaces

There should be only one inverted area per screen; otherwise, it will not draw the user’s attention.

An inverted surface draws user attention to a particular area of content. Use it as a banner or top section with more intricate content.

The inverted surface has complementary styles for typography and basic elements, but not all components are compatible with this palette. Use inverted surfaces only for informational content — interactive components like forms, tables and complex UI elements should appear on base surfaces instead. This ensures consistent functionality and maintains accessibility standards across the interface.

Alternate Surfaces

Use alternate surfaces to draw attention to a specific section of content or grouping.

Use alternate surfaces sparingly, as they can alter the user's focus depending on the content's size.

Consider using spacing to group and section content, leaving alternate surfaces for key content areas.

Specific Alternate Surfaces

Child Themes

Standard Life has alternate surfaces that can be used to section content if spacing does not work.

Standard Life has an alternate colour for each of its sub-brands:

Customer - Surface / Alt 1

Advisor - Surface / Alt 2

Employer - Surface / Alt 3

Cards Surfaces

The second alternate surface colour, Surface/Alt 1, serves a dual purpose.

When multiple cards appear on a screen, such as a dashboard or homepage, this surface colour should be used for the main surface, replacing the base/surface.

This allows for the cards to have a higher elevation and be distinguished with a transparent shadow.

Dashboards and homepages

Pages that use cards solely to build up their interface, such as a dashboard or homepage, should use the alternate surface colour.

The first row of cards should overlap the inverted surface.