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.

Logo

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.

Icon

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.

Colours

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.

Hex	#64ceb9
RGB	100, 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.

Hex	#a573ff
RGB	165, 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

Gradient

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.