Design Language

Our design language is built on movement: a sense of momentum that reflects software which keeps evolving with our clients.

Stream

The key visual, used in places of high significance, graphically or in photography.

Lines

Up close, the stream is a network of connected lines that represent the power of many.

Grid

Supporting the lines is a grid that symbolises the communities and teams we build with.

Colour fosters recognition. Planbeter is a green brand through and through, with a small set of supporting colours for range.

Primary colours

Use HEX or RGB on screen. Click any value to copy it.

Combinations and backgrounds

White, Fog, Green and Dark Green are the primary background colours. Always pair colours for enough contrast and legibility.

Don'ts

Two typefaces: a humanist sans for everything on screen, and a monospace for code and technical detail. Both run from Thin to Bold, with italics.

Type scale

Other fonts

When the brand sans is unavailable, fall back to Verdana. For a monospace, use Roboto Mono.

Don'ts

Photography is real, clear and human: real people and real work. The imagery draws the eye horizontally, echoing the movement in the brand.

Light

Subjects are well lit, ideally with natural light. Never lit from behind.

Perspective

Interesting but not extreme points of view that draw the eye across the page.

Colour

Vibrant, slightly desaturated, earthy colours. Black is always deep black.

Don'ts

Technology can be joyful. Our illustrations explain complex subjects in a fun, metaphorical way, as centrepieces for larger designs.

Principles

4px outline weight on a 1080px artboard, closed shapes with a Dark Green outline, square caps and miter joins. Build from content blocks on a grid.

Don'ts

Icons make an immediate impact while letting text take centre stage. Simple strokes with square endings, one consistent weight.

Don'ts

Movement tells part of the brand story: bold, forward looking, always horizontal to suggest momentum.

Easing

Always ease animated elements so motion feels natural. cubic-bezier(0.22, 1, 0.36, 1)

Staging

Every movement should direct the eye to what matters most.

Overshooting

Animations go a little beyond the final pose, then settle, for a natural cadence.

Don'ts