Figma uses a vibrant color palette. While quite open ended in its use, there are some nuances to the application – particularly in how the Figma mark interplays with colors elswhere. This section delves into those nuances.
Figma’s colors are rooted in design history – drawing inspiration from modernist such as Paul Rand, and the vibrant color schemes of the Modern era. Given the diversity and energy of these accents we use them sparingly and for maximum impact. This often takes form of simple vector graphics on a black or white background.
While these accents make our brand accessible, we also work to cement our reputation as the premier interface design tool. To do this we telegraph ‘quality’ to a designer audience. Simply put, this means we use a lot of black.
Figma uses a bold and vibrant color palette in our communications. We often rely on a dark background to make these colors pop. When possible, a dark background should be used in marketing materials.
#5651FF
#00C05B
#FF2020
#F24E1E
#7043A8
Figma’s marketing materials use a richer version of the icon’s colors. The marketing colors when paired vibrate, and the contrast is lessened in the icon.
When making marketing materials, veer towards the more intense palette.
Colors can be applied in combination – in general try not to combine more then 3 colors in a composition.
Black should be used as the predominant background color for high impact visual moments. For instance, the homepage of Figma.com, microsites, and other instances where we quickly need to distinguish ourselves.
For more bold applications, the accent colors can be used as primary colors. In this case a mono or duo chromatic application is preferred.
An example of these bolder color applications can also be found on the marketing website. To show off specific features we use bright background colors to distinguish ourselves from other product’s websites and for visual interest.
For less impactful moments, a white background should be used. These moments need less ‘branding’, and are more generic then our main brand touchpoints. For instance, sub pages on our marketing website.
Colors can be used in tints of their originals. This can be an effective strategy for monochromatic compositions. Mixing and matching different tints of different colors is discouraged.
Colors can be used in tints of their originals. This can be an effective strategy for monochromatic compositions. Mixing and matching different tints of different colors is discouraged.
When using gradients, they should feel highly intentional, and subtle. Combining complimentary, or vibrating colors within a single gradient should be avoided. Instead, they should move within an analagous range, and maintain a level of contrast between stops. Furthermore, try and avoid 90° angles in gradients, instead manipulating and blending radial and linear gradients to feel ‘natural’.
When creating color schemes outside of our typical colors, they should communicate a level of ‘quality’. To do this, look for rich and vibrant colors, and ensure a significant amount of contrast (black or complimentary colors)
The following list ideal colors for reproduction of the Figma icon in different media.