Design

Types of card

We use overlay as a connective tissue through all levels of composition. It helps to evoke a sense of movement and dimension. There are two types of cards that help shape the composition: Primary and Overlay

Base Card

Overlap Card

Corner radius

Composition 1

Composition 2

Composition 3

Shadow positioning

It’s important to consider where the shadow is positioned based on the overlay card position. Use to the guide below for all overlaying graphics.

IMG_GuShadowPosition| Base card | Overlay - centred | Overlay - right | Overlay - left | | --- | --- | --- | --- | | The shadow is applied to the smaller rectangle placed behind the base card. The shadow is only visible on the bottom of the card. | The overlay card has a thin grey key-line. The shadow is applied to the smaller rectangle placed behind the overlay card in the same style as the base card shadow. | When the overlay card is placed on the right side of the base card, the shadow falls on the bottom left of the overlay. | When the overlay card is placed on the left side of the base card, the shadow falls on the bottom right of the overlay. |

Multiple overlapping base cards

Here are examples of the different shadow levels being applied on multiple base cards. Also apply the shadow positioning rule from the shadow positioning guidelines.

Key-line

Apply a key-line for the base and overlay card so that the product UI is defined when placed on top of the same background color.

Composition 1

Composition 2

Composition 3

Spacing

We use the responsive margin for elements inside components. We use the same margins for product UI’s as we do when designing for the sage.com website.

Color

Try to stay true to the real product colors with the closest match from the rebranded color palette. For consistency, the palette below is the most commonly used throughout our product UI’s created so far.

Primary

Functional

Text

Background

Greys

Semantic

Typestyles

IMG_GuiText

These are our default type sizes for product UIs. We use the “Sage UI” font on all types of styles.

Best practice

Purpose-driven use

Glossy UIs are useful visuals that clearly demonstrate the USP of Sage products, supporting the message set out in the headline and text in a purposeful way.

Assets that add value

These visuals should be supporting the copy, providing additional context. When adding visual assets ask yourself whether it's helping to make something clearer - ‘does this add value?’.

Singular and clear messaging

The connection between the text and the Glossy UI should be clear enough for the user to understand immediately.

Up to three Glossy UIs can be used in one frame or view provided they communicate one message, flow or task.

Authenticity

Glossy UIs should always present a true reflection of the product, with a moderate and attractive level of stylisation.

Example of a Glossy UI that clearly supports the headline and text.

Combining with photography

Glossy UIs combined with lifestyle photography in a meaningful way create a strong narrative that conveys the product message with emotive depth.

Example of a Glossy UI cobmined with photography to create a strong and emotive narrative.

Use cases

The Sage brand makes use of Glossy UIs in two ways in the web environment:

Primary brand assets

These are large formatted visuals used in hero environments such as landing pages and are used to position the Sage brand through its products.

Hero page main visual

Hero page mosaic layout

Hero page: two-column

Content support assets

These assets look the same as the Primary set, however, they're used at smaller sizes and in content pages.

They are used to explain functional features of the products, on patterns such as Product Benefits Cards.

Tab sets

Feature cards

This pattern appears on a visible or invisible white card, depending on the background colour.

Dos & don'ts

Glossy UIs should not be solely decorative - do not use them as filler or to increase the curb appeal of a page. They have a purpose, always.

Below are examples of incorrect usage, where the best practice rules have not been implemented and the purpose has been lost.

Don't

Don't

Don't

Don't

Don't

Don't

Don't

Don't

Don't

Don't

Don't