, ,

Figma Brand Guidelines: The Five Colours, Logo & Font

·

Brand Guidelines · Field Guide

Figma Brand Guidelines

Five colours, five shapes, one browser-native design tool — a mark that’s a little design system in itself.

FIG 1.0 — FIVE COLOURS (HOMAGE)

FIG 1.1 — NEO-GROTESQUE
Aa

Two constants: a five-colour palette and a crisp neo-grotesque. Abstract homage — not the Figma logo shapes or wordmark.

Palette
FiveOne per product
Logo
5 shapesAbstract “F”
Brand type
WhyteDinamo
Product UI
InterThe app font
01

Five colours, five shapes

Figma’s logo isn’t one colour defended to the death — it’s five, arranged like the building blocks of the tool itself.

The mark is built from five interlocking geometric shapes, each a distinct colour, assembling into an abstract “F”. It’s a fitting emblem for a product all about composing simple pieces into something bigger. Figma even assigns each colour a meaning across its products — roughly red for components, purple for prototyping, blue for community, green for design, orange for FigJam — so the palette isn’t decoration, it’s a small system. For a tool that popularised design systems, a logo that is one is exactly on brand.

02

Colour

Where most brands guard a single hue, Figma celebrates a full, joyful set. Click a swatch to copy the hex.

The five logo colours are Red #F24E1E, Purple #A259FF, Blue #1ABCFE, Green #0ACF83 and Orange #FF7262 — bright, saturated and confident together against clean white space. Using a whole palette as your identity is risky (it’s easy to look chaotic) but Figma pulls it off because the colours are tied to real meaning and used with discipline. The result feels creative, open and a little playful — precisely the mood you want from the tool where design actually happens.

Copy
Red
#F24E1E
Copy
Purple
#A259FF
Copy
Blue
#1ABCFE
Copy
Green
#0ACF83
Copy
Orange
#FF7262
03

Typography

Figma is careful about a distinction many brands blur: the font it markets with is not the font inside the app.

Figma’s brand typeface is Whyte by the Swiss foundry Dinamo, with the distinctive Whyte Inktrap — its little ink-trap notches showing at display sizes — used for headlines. It’s a crisp neo-grotesque with just enough character to feel designed rather than default. Meanwhile the product UI runs on Inter, the open-source workhorse tuned for screens. Keeping them separate is a smart, honest split: an expressive voice for the marketing, a neutral, legible face for the tool people work in all day.

Aa Gg Rt

Crisp, contemporary, with ink-trap character at display sizes. (Specimen set in Archivo, a grotesque in Whyte’s family of forms.)

Whyte · brandWhyte Inktrap · displayInter · product UI

04

An identity for the browser

Figma’s whole reason for existing shaped how its brand looks and feels.

Figma’s breakthrough was putting a real design tool in the browser — multiplayer, always up to date, open to a link. That ethos of openness and collaboration runs straight through the identity: a many-coloured mark instead of a single guarded logo, a strong community presence, and a generous, sharing-first tone. It’s a good reminder that the best brands aren’t a coat of paint on top of a product — they’re an honest expression of what the product actually believes. Figma believes design should be shared, and its rainbow says so at a glance.

05

The brand of a design community

Figma’s identity has to work in an unusually tough room — it’s used, remixed and judged every day by professional designers themselves.

Most brands are consumed by people who never think about kerning; Figma’s audience lives in it. That raises the stakes for consistency and craft, and it shapes the whole approach: the five-colour mark, the careful split between the expressive Whyte brand face and the neutral Inter product face, and the tidy assignment of a meaning to each colour all read as a brand built by designers, for designers. It’s an identity that survives the scrutiny of the very people best equipped to pull it apart — which is a demanding kind of proof that the system was made with real intent rather than decoration.

The brand also reaches into the product in a way few others can. Figma’s community — shared files, plugins, templates and widgets — means users are constantly building on top of the brand, and the open, collaborative tone is engineered to invite exactly that. The visual language mirrors the philosophy: a many-coloured logo instead of a single guarded hue quietly says this is a place for many hands, and the generous, sharing-first personality matches a tool whose breakthrough was putting real design in the browser for anyone with a link. The identity works because it’s an honest expression of what the product believes — that design is a team sport. There is a neat recursion to it, too: a tool that popularised shared design systems carries an identity that behaves like one, a small kit of coloured parts assembled with consistent rules. For an audience that spends its days building exactly that kind of system, few things could be more persuasive than a brand that visibly practises what the product preaches.

06

Explore & save

Keep Figma’s identity on hand — save it to a board in the Made Good inspiration library.

Figma identity set

Pin the five colours and the type to your own board.

Five Colours
Homage
Aa
Neo-Grotesque
Whyte spirit
Core Palette
Five colours

♡ Save to a board

07

Source & notes

Editorial reference. This article reports publicly documented facts about Figma’s identity; it is not affiliated with, or endorsed by, Figma. The Figma logo and wordmark are trademarks of Figma — the graphics here are original abstract homages (five colour dots; colour swatches), not the Figma logo shapes, and are not reproduced from Figma’s assets. Facts verified against Figma’s brand pages and design records; the brand typeface Whyte is by Dinamo, and the product UI uses Inter.