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.
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.
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.
The primary colour should be used for the majority of Procuret design elements, such as buttons, links, and borders.
|RGB||100, 206, 185|
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.
|RGB||165, 115, 255|
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.
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.
|Interface Text||#1e1e1e||30, 30, 30|
|Long form text||#6e6e6e||110, 110, 110|
|Background||#ffffff||255, 255, 255|
|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.
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.
|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|
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.