Procuret Branding

Through colour, shape, and motion, Procuret branding aims to create a sense of security, clarity, and professionalism.

This document provides guidance as to how to brand and style Procuret content. It is used by the Procuret team, and made public for the benefit of interested parties. If you do not work for Procuret, you may not use Procuret branding, including our logo, without our express written permission.


Light Backgrounds

Dark Backgrounds

Coloured backgrounds

The dark Procuret logo must only be presented on a white (#ffffff) background. The light Procuret logo may be presented on a coloured backgrounds, provided a strong contrast ratio is maintained.

Positioning & Transformation

The Procuret logo must be surrounded by empty space equal to at least 50% of the logo's height.

The Procuret logo must not be transformed, skewed, altered, squashed, adjusted or otherwise presented in any other way than appears above.


The Procuret icon serves to identify Procuret quickly and succinctly. It should be used in circumstances where the Procuret name is likely to be familiar to the viewer, or is introduced elsewhere in the vicinity.

The procuret icon may be displayed on a white (#FFFFFF) or very dark grey (#1e1e1e) background only.

The Procuret icon and logo must not be displayed side by side.

Like the the Procuret logo, the icon must not be transformed, skewed, altered, squashed, or adjusted.


The Procuret primary and secondary colours must be the main colours used in a Procuret design. In most designs, they are likely to be the only colours used.

Primary colour: Green

The primary colour should be used for the majority of Procuret design elements, such as buttons, links, and borders.

RGB100, 206, 185

Accent colour: Purple

The accent colour should be used sparingly to add visual interest to situations in which the primary colour has been exhausted through heavy use, or to differentiate a critical element of a design from a majority primary colour context.

RGB165, 115, 255

Backgrounds & Body Text

All user-interactive content should be displayed on one of two colours: white (#FFFFFF) or very dark grey (#1e1e1e) only. All interfaces must respond to the preference of the user's platform. For example, prefers-color-scheme in the browser or UIUserInterfaceStyle on iOS.



Text overlaid on either background should adopt either "interface" or "long form text" colours. Use "interface" colours generally. Use "long form text" where large sections of text are the dominant feature of the design. For example, this page, or a blog post.

Light background colour reference

Element Hex RGB
Interface Text #1e1e1e 30, 30, 30
Long form text #6e6e6e 110, 110, 110
Background #ffffff 255, 255, 255

Dark background colour reference

Element Hex RGB
Interface Text #ffffff 255, 255, 255
Long form text #efefef 239, 239, 239
Background #1e1e1e 30, 30, 30


The Procuret Gradient is an intense visual motif that may be used to generate interest in a design.

When to use the Gradient

The Procuret Gradient should be used rarely, sparingly, and should never dominate the majority of a whole design.

For example: The Procuret Gradient might be used as the background of the first visible section of a splash landing page. A counter example: It must not be used as the background of a business card, as it would dominate the design.

If in doubt, do not use the Procuret Gradient.

Reference Values

Stop Hex RGB
10% #14d2b8 20, 210, 184
24% #24c7c0 36, 199, 192
52% #4Fabd5 79, 171, 213
90% #937ef6 157, 126, 246
99% #a59bff 165, 115, 255

Overlaid content

Text overlaid on the Gradient must be white only. Other content should be majority white, with care taken to clearly separate coloured elements from the gradient background.