Figma

Nothing great is made alone.

design softwareverifiedfigma.com

Figma is where teams design together. It brought design into the browser and made it multiplayer, so anyone — designers, engineers, PMs — can build in the same place. The brand is bold and joyful: a five-color geometric mark, expressive type, and a playful, inclusive voice that celebrates making things with other people.

Color

primary

Figma Red

#f24e1e

Signature brand red — the top-left shape of the mark; the color the brand reads as at a glance.

accent

Figma Blue

#0d99ff

Product accent blue — primary buttons, links, selection in the app UI.

surface

White

#ffffff

Background — white; canvas gray at 200.

text

Charcoal

#1e1e1e

Body and heading ink.

logoBlue

Deep Sky Blue

#1abcfe

Bottom shape of the Figma mark (cyan).

logoGreen

Emerald Green

#0acf83

Top-right shape of the Figma mark.

logoOrange

Salmon

#ff7262

Right-middle shape of the Figma mark.

logoPurple

Bright Indigo

#a259ff

Left-middle shape of the Figma mark.

logoRed

Orange Red

#f24e1e

Top-left shape of the Figma mark.

Typography

display → Whyte Inktrapheading → Whytebody → Intermono → Roboto Mono

Interinter

google

Nothing great is made alone.

Foundry:: Rasmus Andersson
Weights:: 400, 500

Inter (SIL OFL) — product UI and long-form body; safe to self-host.

Roboto Monoroboto-mono

google

Nothing great is made alone.

Weights:: 400, 500

Roboto Mono (Apache 2.0) — code and technical labels.

Whytewhyte

licensed

Nothing great is made alone.

Foundry:: Dinamo
Weights:: 400, 500

Whyte by Dinamo — licensed brand sans; never rehosted.

Whyte Inktrapwhyte-inktrap

licensed

Nothing great is made alone.

Foundry:: Dinamo
Weights:: 500, 700

Whyte Inktrap by Dinamo — licensed display cut for big brand headlines. Reference by name only; never rehosted.

Gradient

Derived from the colour roles, interpolated perceptually. The same three tokens ship in brand.css and tokens.json.

Brand--brand-gradient

linear-gradient(135deg in oklch shorter hue, #f24e1e 0%, #0d99ff 100%)

Worst-case contrast — white 2.99:1 · black 5.86:1 AA

Hero--brand-gradient-hero

linear-gradient(135deg in oklch shorter hue, #955e4f 0%, #56789a 100%)

Worst-case contrast — white 4.61:1 AA · black 3.99:1 AA-large · ink #ffffff

Button--brand-gradient-button

linear-gradient(180deg in oklch shorter hue, #dc3800 0%, #bf1000 100%)

Worst-case contrast — white 4.56:1 AA · black 3.29:1 AA-large · ink #ffffff

Voice & Tone

playfulinclusiveboldcreativeencouraging

Do

+Celebrate collaboration and the people doing the work
+Be bold and a little joyful — it's okay to have fun
+Invite everyone in; design isn't just for designers
+Show the craft

Don't

−Don't gatekeep with insider design jargon
−Avoid cold, corporate distance
−Don't take yourself too seriously

Sample copy

event promoheadline

Nothing great is made alone. Join us at Config.

buttoncta

Start designing

hero headlineheadline

Design, together.

feature subheadheadline

See everyone's cursors, live, on the same canvas.

Logo Inventory

primary

svgpng

mono

svg

inverse

svg

Marks from Simple Icons (CC0). Licences and attribution

Usage Rules

MUSTMeet WCAG AAaccessibility
Body text must clear 4.5:1; don't set text in the bright logo colors on white without checking contrast.
MUSTThe five colors define the markcolor
Red, orange, purple, blue, and green are the logo. Use them expressively in illustration, but never substitute or reorder the mark's shapes.
MUSTKeep the mark full-colorlogo
The five-color mark is used as-is on light or dark. Never recolor individual shapes or apply gradients.
SHOULDInvite everyone invoice
Write so a PM or engineer feels as welcome as a designer. Skip insider jargon.

mcpConnect your agent to Figma

live endpoint

Point any MCP client at this brand and every session grounds itself in the real system — colors, type, voice, usage rules. Read-only.

endpointhttps://mcp.brandsweets.com/figma/mcp

.mcp.json

{
  "mcpServers": {
    "brandsweets-figma": {
      "type": "http",
      "url": "https://mcp.brandsweets.com/figma/mcp"
    }
  }
}

claude codeclaude mcp add --transport http brandsweets-figma https://mcp.brandsweets.com/figma/mcp

Figma trademarks and logos belong to their owner. Shown for identification (nominative use); not affiliated or endorsed. Owner of this brand? Request a correction or removal →