# Figma: brand book and build spec

A black-and-white product page where the color comes from the work. One light weight of Figma Sans, square media and a giant black Get started button. Behind it sits a jumbo language of primitives and an expanded palette for campaigns.

From unfairly.ai/brand-guidelines/figma, checked 2026-10-29. Unofficial study; not affiliated with Figma.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** The canvas is the brand. Figma keeps its own chrome black, white and quiet so the things people make in Figma supply all the color, and saves its jumbo primitives for campaigns. Based on: From the Brand Book's black-or-white wordmark rule, the 2024 refresh post, and a homepage whose only color is product imagery (observed 2026-10-29).

## Purpose

Not published on the public brand pages: The homepage implies it: help teams move from idea to shipped product together. (our reading; )

Story: In September 2024 Figma's in-house Brand Studio replaced the cursor-and-black-outline look of about five years with a "jumbo" language of primitives, an expanded palette run as variables, motion principles and the custom Figma Sans by Grilli Type. (published)

## Fixed and flexible

Never changes:
- Wordmark black or white
- Icon colors never changed
- One light weight of Figma Sans
- Square media, black buttons

The one thing that varies: Color scheme, primitives and composition move in campaign work.

## Positioning

- **Statement**: Figma presents itself as the full-stack creative canvas: one place where teammates and AI agents design, build and ship together. (observed)
- **Category**: Collaborative design and product-development platform: Figma Design, Make, Weave, Dev Mode, Motion, Specs, FigJam, Slides, Draw, Sites, Buzz (footer Product column). (observed)
- **Audience**: Whole product teams, not only designers: Figma says only about a third of its users identify as designers. (published)
- **Promise**: Go from idea to shipped product in one shared space, with your team and your agents. (our reading)
- **Differentiators**: Multiplayer: teammates and AI agents in the same file with shared context; 95% of the Fortune 500 uses Figma (Figma's figure, based on March 2025 data)

## Messaging

Boilerplate (our reading): Not published on the public brand pages.

Taglines:
- The full-stack creative canvas (homepage H1)
- Make. Believe. (billboard shown in the 2024 visual-language launch post)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Design | Design anything you can imagine: ideas into apps, websites and products (homepage feature). |  | observed |
| Build | Build with intention: tools that take you all the way to production (homepage feature). |  | observed |
| AI-native | Teammates and AI agents work in the same space with shared context (homepage section). |  | observed |
| Proof | The products you love are designed in Figma: customer quote, 95% of the Fortune 500, a logo marquee. |  | observed |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "The full-stack creative canvas" | homepage | https://www.figma.com/ |
| "Move fast in the right direction on an AI-native canvas." | homepage | https://www.figma.com/ |
| "One workspace for your entire product development process." | homepage | https://www.figma.com/ |
| "Powerfully expressive. Incredibly precise." | homepage | https://www.figma.com/ |
| "Start with design context. Build with consistency." | homepage | https://www.figma.com/ |
| "The products you love are designed in Figma" | homepage | https://www.figma.com/ |
| "Ideas no longer have to wait their turn" | homepage | https://www.figma.com/ |
| "Explore what you can do in Figma." | homepage | https://www.figma.com/ |
| "Make. Believe." | out of home | https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/ |

## Voice

Tone words: Plain, Declarative, Calm.

Traits:
- Plain-spoken, but not Hyped (observed)
- Collaborative, but not Solo genius (published)
- Playful in campaign, but not Playful in UI (our reading)
- Crafted, but not Decorated (published)

- Plain, declarative product voice: short statement sentences, sentence case, a black claim followed by a grey explanation; no exclamation, no playful copy, no bold. A landing page built in Figma's style follows this homepage voice and layout.
- Trademark voice: talk about Figma as an adjective ("the Figma platform"), never a noun, verb or possessive, except for Figma the company.

Rules a copy check enforces:
- Sentence case headlines
- Use a Figma mark as an adjective (the Figma platform), never as a noun, verb or possessive
- Say "for Figma" (Tom's plugin for Figma design), never "Tom's Figma plugin"
- Never put Figma or "Fig" in your own company, product, domain or handle
- Section heads: a black claim sentence, then a grey (#757575) explanation at the same size

Never: Tom's Figma plugin, Clara's FigJam tutorials, Figma's (possessive, except the company), to figma (as a verb).

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Homepage and product pages 1, Campaigns, events and community 4. Two voices. The homepage is plain and product-led; the brand language (primitives, schemes, billboards) is louder. Levels are our reading.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Black | #000000 | ink | Published: the wordmark is black or white only. On figma.com, all type, every filled button, and the footer ground. |
| White | #FFFFFF | paper | Published wordmark color on dark. The ground of every homepage band except the footer. |
| Grey 54% | #757575 | ink_muted | Observed: the second sentence of every two-tone heading, dropdown labels, captions. |
| Hairline | #D6D6D6 | line | Observed: 1px rules beside the quote and stat, and the inset ring of outlined buttons. |
| Wash | #F5F5F5 | surface | Observed: the 36px media-control circles and light pills. |
| Red | #FF3737 | icon | Published icon shape (PMS 032 U). |
| Purple | #874FFF | icon | Published icon shape (PMS 2088 U); the "signature purple" the 2024 refresh kept. |
| Green | #24CB71 | icon | Published icon shape (PMS 7479 U). |
| Orange | #FF7237 | icon | Published icon shape (PMS 1655 U). |
| Blue | #00B6FF | icon | Published icon shape (PMS 306 U). On the homepage also the dashed ring around the quote avatar. |

Proportion (observed; Not published as a ratio. Measured share of the figma.com homepage height at 1440 (8739px): the black footer is 983px (11%), the full-bleed tools grid 1337px (15%), and the white bands with their framed videos take the rest (74%).): White bands 74%, Product imagery grid 15%, Black footer 11%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Figma Sans | Proprietary: commissioned from Grilli Type for the 2024 refresh; not licensed to third parties | Inter | "SF Pro Display", system-ui, helvetica, sans-serif |
| body | Figma Sans | Proprietary (Grilli Type for Figma) | Inter | system-ui, helvetica, sans-serif |
| mono | Figma Mono | Proprietary (part of the 2024 type family, with Figma Condensed and Figma Hand by OH no Type) | IBM Plex Mono | ui-monospace, Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline (h1) | --text-hero-headline-h1-* | display | 56px | 36px | 1 | -1.7px | 350 |
| Stat numeral | --text-stat-numeral-* | display | 88px | 72px | 1 | -2.7px | 350 |
| Outro bar label | --text-outro-bar-label-* | display | 56px | 36px | 1 | -1.7px | 350 |
| Section headline large (h2) | --text-section-headline-large-h2-* | display | 44px | 32px | 1.1 | -0.66px | 340 |
| Section headline (h2, two-tone) | --text-section-headline-h2-two-tone-* | display | 30px | 24px | 1.2 | -0.45px | 330 |
| Hero button label | --text-hero-button-label-* | display | 30px | 24px | 1.2 | -0.45px | 330 |
| Dropdown big link | --text-dropdown-big-link-* | display | 24px | 24px | 1.3 | -0.3px | 320 |
| Body / feature title / link | --text-body-feature-title-link-* | body | 16px | 16px | 1.4 | -0.12px | 300 |
| Small | --text-small-* | body | 14px | 14px | 1.45 | 0px | 300 |
| Footer link | --text-footer-link-* | body | 16px | 22px | 1.45 | -0.5px | 300 |
| Mono label | --text-mono-label-* | mono | 16px | 16px | 1.3 | 0.48px | 400 |
| Badge | --text-badge-* | mono | 12px | 12px | 1 | 0.6px | 400 |

## Layout

Measured on https://www.figma.com/: computed styles, bounding boxes and hover/focus states at 1440 and 390 in headless Chromium with a desktop Chrome user agent, 2026-10-29; each section scrolled into the viewport and held 2.5s before measuring (lazy Vimeo media)..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 40px | 16px |
| Section padding | 80px | 40px |
| Container max width | 1360px | full |
| Grid columns | 12 | 1 |
| Gutter | 16px | 16px |
| Navigation height | 78px | 78px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| hero headline | 36px / 36px, 2 lines | 56px / 56px, 3 lines in 328px |
| two-tone section heading | 24px / 28.8px | 30px / 36px |
| solo heading, quote | 32px / 35.2px | 44px / 48.4px |
| stat numeral | 72px | 88px |
| side margin | 16px (footer 24px) | 40px (footer 60px) |
| band padding | 40px top and bottom | 80px top and bottom |
| hero | stacked: h1, media 358x431, button 195x77 centered | three zones: h1 / media 581x700 / button 224x84 |
| media width | 358 inset (AI canvas) or 390 full-bleed (One workspace, Make) | 901 / 1131 / 1360 |
| tools grid | 2 columns 187x233, 6 rows | 4 columns 348x435, 3 rows, full bleed |
| features | stacked under the media | beside (AI canvas) or 2-up under (One workspace) |
| template cards | 265 wide | 328 wide |
| nav | mark, Get started for free, menu button | mark, 5 items, Log in, Contact sales, Get started for free |
| footer links | 22px / 29.7px, one column | 16px / 23.2px, 4 columns |

Breakpoints from Figma's CSS: 480, 560, 768, 960, 1024, 1280, 1440, 1920px.

Homepage bands, top to bottom (observed):
1. Nav
   - Desktop: fixed, y 0-78; mark x 40; Products/Solutions/Community/Resources/Pricing from x 83; Log in, Contact sales (151x46), Get started for free (193x46) ending x 1400
   - Phone: 78px: mark x 16, CTA 193x46 x 140, menu 40px x 344
   - #D6D6D6 1px hairline via box-shadow
   - buttons radius 8, 16px labels
2. Hero: The full-stack creative canvas
   - Desktop: y 78-938: h1 cols 1-3 (x 40, y 424-592), video 581x700 cols 4-9 (x 430, y 158), button 224x84 cols 10-12 (x 1124, y 466)
   - Phone: y 78-818: h1 y 118, video 358x431 y 230, button 195x77 y 701
   - 56/56 h1 in 3 lines
   - black 16px-radius button with 30px label
   - 36px pause circle at x 960, y 808
3. AI-native canvas
   - Desktop: y 938-1769: two-tone h2 30/36 x 40; video 901x507 y 1166; feature x 957
   - Phone: h2 24px y 858; video 358x201 y 1063; feature y 1384
   - grey continuation #757575
   - feature: 16px glyph, title, grey description, text link
4. One workspace
   - Desktop: y 1769-2834: heading x 269 w 901; video 1131x636 x 155 y 1961; features x 155 / 728 y 2637
   - Phone: video full-bleed 390x219 y 1741; features stacked
   - video on #F3FFE3 field baked in
5. Powerfully expressive
   - Desktop: y 2834-4443: heading x 40 + link right x 1400; 4x3 tiles 348x435, gutters 16, x 0-1440, y 3026-4363
   - Phone: 2 columns 187x233, 6 rows from y 2579
   - 6 stills + 6 videos
   - pause circles on videos
6. Figma Make
   - Desktop: y 4443-5556: heading x 269; video 1360x765 x 40 y 4671; link y 5452
   - Phone: video full-bleed 390x219 y 4317
   - #CAFFF9 field baked into the video
7. Proof
   - Desktop: y 5557-6216: h2 44px y 5637; quote 1016 wide x 40, stat 328 wide x 1072, both with 1px #D6D6D6 left rules, y 5749; logos y 6102
   - Phone: quote, then stat, stacked; logos y 5444
   - 54px dashed #00B6FF avatar ring
   - 95% at 88px
   - 13 black logos scroll left
8. Outro CTA
   - Desktop: y 6216-6616: centered 44px h2 y 6296; black bar 1360x136 radius 24 y 6401
   - Phone: bar 358x117 y 5669
   - 56px white label
9. Explore templates
   - Desktop: y 6617-7514: two-tone 44px h2; link + "1 of 10" + 2 ringed buttons y 6802; cards 328 wide from y 6902, ragged bottoms
   - Phone: cards 265 wide y 6139
   - 10 slides, square corners
   - text-link captions
10. Footer
   - Desktop: y 7514-8739: padding 120, x 60; wordmark + socials | PRODUCT(+PLANS) | USE CASES | RESOURCES | COMPANY; English bottom-left
   - Phone: y 6616-9835 single column
   - mono heads #999999
   - links white, Inter 300 antialiased
   - no copyright line

## Page anatomy

How Figma's own landing pages are built, part by part (observed; https://www.figma.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: No announcement bar above the nav (checked at 1440 and 390 on 2026-10-29). Fixed white 78px bar: color Figma mark, five text items left, Log in + outlined Contact sales + black Get started for free right
- ground: #FFFFFF, position fixed (stays on scroll), bottom hairline as box-shadow 0 1px 0 #D6D6D6
- height: 78px at 1440 and 390
- border: box-shadow 0 1px 0 0 rgba(0,0,0,0.16) = #D6D6D6 hairline
- logo: 5-color Figma mark (slot brand.figma_mark) 19x28 at x 40, y 25; on phones the mark itself renders 32x48 at x 16, y 12 (the SVG grows; measured 2026-10-30), not 19x28 in a larger box. No wordmark in the nav
- links: 5 items, 16/23.2 wght 400 #000000, start-aligned after the mark: "Products" (button x 83, w 101), "Solutions" (x 184, w 104), "Community" (x 289, w 118), "Resources" (x 407, w 112) each with an 18px chevron-down 4px after the label, then "Pricing" (link x 519, w 67). Items are 39px tall at y 20 with 8px side padding; labels start x 91, 192, 297, 415, 527
- actions: right group ending at x 1400: "Log in" text link (x 977, 59x39), 12px gap, "Contact sales" outlined 151x46 (x 1048, radius 8, inset 1px #D6D6D6), 8px gap, "Get started for free" black 193x46 (x 1208, radius 8). Both buttons 16px labels, padding 12px 22px, y 16
- sticky: yes, position fixed at top 0; content starts at y 78
- phone: Figma mark at x 16; "Get started for free" black 193x46 at x 140, y 13; 40x40 menu button (two-bar icon 24px) at x 344. Menu opens a full-screen white sheet: Products, Solutions, Community, Resources (24px rows with down-arrows), Pricing, Log in, rows 62px apart with #D6D6D6 rules; Get started + Contact sales buttons pinned at the bottom
- dropdown: desktop panels are white, full width, open below the bar (y 78). Products: left "WHAT YOU CAN DO IN FIGMA" (14px mono #757575) with two 24px links over 271x153 / 270x153 collage images, then 16px links AI workflows / Release notes / Downloads; right "EXPLORE ALL PRODUCTS" in two columns of 16px product names with 20px color product icons and #757575 one-line descriptions, NEW/BETA mono badges. Solutions/Resources: mono group labels over 24px links 39px apart. The page behind dims to grey while a panel is open.

**Hero**
- summary: White band: 56px three-line headline at left, a tall stack of floating Figma-made artboards (video) in the middle, a lone oversized black Get started button at right
- desktop: section y 78-938 (padding 80). Three zones on the 12-column grid: headline in columns 1-3 (x 40, w 328) vertically centered: h1 y 424-592 (3 lines of 56). Media in columns 4-9 (container x 384-1056, y 158-858): Vimeo 581x700 centered at x 430, object-fit contain, transparent around the artboards. CTA 224x84 centered in columns 10-12 at x 1124, y 466-550. Pause button 36x36 at x 960, y 808 (bottom right of the media column)
- phone: section y 78-818 (padding 40): h1 36/36 at x 16, y 118 (2 lines, 358 wide); media 358x431 at x 16, y 230; pause 36px at x 323, y 611; "Get started" 195x77 (radius 16, label 24px) centered at x 97, y 701
- at rest: Resting frame = assets hero-rest-capture.jpg (the frame the reference screenshots show, about 3s after load): a dark purple panel with a yellow dot-matrix "F" on a grid at left, a white video-editor card (daisy photo, 1:13 / 4:28, a timeline strip with a purple selected range, four tool buttons with the first filled lavender), a yellow slider, a "Resonance / August 2-4, 2026" purple poster behind, and two step-count cards below. Use this image for the hero media; other frames of the loop are animation only.
- media: Vimeo 1202887330, muted, loop, autoplay, poster provided. Overlapping artboards are inside the video; no CSS radius, no shadow
- type: h1 56/56, #000000; Inter 350 -1.7px (real figmaSans 400 -1.25px wdth 96, reference only). No subhead, no eyebrow, no body copy in the hero
- cta: one button only: black "Get started" 224x84, radius 16, padding 24px 32px, label 30/36 white, Inter 330 -0.45px, antialiased; hover #262626 + 36px arrow fades in
- proof: none in the hero
- media fit: The supplied hero-rest-capture.jpg (1162x1400) has transparent-white margins, so at object-fit contain in 581x700 its artwork is only 524px wide. On figma.com the visible artwork spans x 439-979 at 1440 (540 wide, measured on the reference fold) and x 16-371 on phones. So render the image at 597x719 at x 422, y 149 on desktop (scale 1.027 about the 581x700 box centre) and 382x460 at x 4, y 216 on phones (scale 1.066), overflow visible, no clip. The pause button stays at x 960, y 808 (phone x 323, y 611), measured as a child of the 581x700 box, so it sits at the lower right of the step-count cards.

**AI-native canvas**
- summary: Two-tone 30px heading, an 8-column video on the left, one feature (icon/title/description/link) in the right columns, its icon 16px below the video top
- ground: #FFFFFF
- desktop: section y 938-1769. Heading block x 40 w 901: h2 y 1018 (36 tall), grey continuation y 1054-1126 (2 lines). Video 901x507 at x 40, y 1166 (40px below). Feature at x 957 (column 9), w 419: icon y 1182, title y 1214, description y 1238 (2 lines, 393 wide), link y 1297. Pause at x 891, y 1623
- phone: h2 24/28.8 y 858, continuation to y 1029; video 358x201 at x 16, y 1063; feature below: title y 1384, description y 1409, link y 1490
- anatomy:
  - Heading text, verbatim: black "Move fast in the right direction on an AI-native canvas." then, on a new line, grey #757575 "Teammates and AI agents work in the same space with shared context. Generate new ideas, refine, and align—together.". Both sentences of the black part stay black.
  - Heading: "Move fast in the right direction on an AI-native canvas." black + "Teammates and AI agents work in the same space with shared context. Generate new ideas, refine, and align—together." #757575, 30/36
  - Video Vimeo 1202195324 at rest: finance-app phone screens on a flat #D0D0D0 canvas (assets ai-canvas-frame0.jpg: one finance-app phone screen centred on the grey, no prompt bubble)
  - Feature: ring glyph 16px, "Your built-in creative collaborator", "Ask Figma’s agent to add motion to designs, document your design systems, implement feedback, and more.", link "Explore Figma's agent" + arrow
  - Full-page reference shows the video area blank (y 1166-1673): lazy video, not empty
  - Resting image = ai-canvas-frame0.jpg at desktop and phone (the reference phone shows the lone selected phone screen centred on #D0D0D0, no prompt bubble). ai-canvas-rest.jpg (with the "Explore more screens" prompt bubble) is a later animation frame: never the resting image.
- components:
  - two-tone heading
  - media_pause
  - feature_item
  - text_link

**One workspace**
- summary: Centered two-tone heading, a centered 1131px video, two features side by side under it
- ground: #FFFFFF
- desktop: section y 1769-2834. Heading block centered: x 269, w 901 (columns 3-10), text start-aligned inside it: h2 y 1849, continuation y 1886 (1 line). Video 1131x636 at x 155, y 1961 (centered). Features 40px below the video: two columns 533 wide at x 155 and x 728: icon y 2637, title y 2669, description y 2693, link y 2730. Pause at x 1235, y 2547
- phone: h2 y 1594; video full-bleed 390x219 at x 0, y 1741; features stacked at x 16: "Design anything..." y 2025, "Build with intention" y 2196
- anatomy:
  - Heading text, verbatim: black "One workspace for your entire product development process." then, on a new line, grey #757575 "Made so your whole team can go from WIP to ship, together.". Both sentences of the black part stay black.
  - Heading: "One workspace for your entire product development process." + grey "Made so your whole team can go from WIP to ship, together."
  - Video Vimeo 1202195955 at rest: zoomed Figma file with Mobile / Exhibition ("MODULAR LIVING") and Mobile / Explore frames, multiplayer cursors Yeojin and Galaxia, on #F3FFE3 (assets one-workspace-rest.jpg)
  - Feature 1: filled-circle glyph, "Design anything you can imagine", "Turn your ideas into apps, websites, and products.", "Explore design tools"
  - Feature 2: four-lobed glyph, "Build with intention", "Dev tools that take you all the way to production.", "Explore build tools"
  - Full-page reference shows the video blank (y 1961-2597)
- components:
  - two-tone heading
  - media_pause
  - feature_item
  - text_link

**Powerfully expressive (tools grid)**
- summary: Two-tone heading with a right-aligned link, then a full-bleed 4x3 grid of square-cornered tiles (6 stills, 6 videos)
- ground: #FFFFFF
- desktop: section y 2834-4443. h2 x 40 y 2914, continuation y 2951; "Explore Figma Design" link right-aligned to x 1400 at y 2962 (aligned with the second heading line). Grid y 3026-4363: tiles 348x435, x 0/364/728/1092, rows at y 3026, 3477, 3928 (16px gutters), the right column bleeds off the 1440 edge exactly. Video tiles carry the 36px pause button 14px from their bottom-right
- phone: h2 24px y 2384, continuation, link under the heading at y 2515; grid 2 columns 187x233 at x 0 and 203, 6 rows from y 2579, 250px pitch
- anatomy:
  - Heading text, verbatim: black "Powerfully expressive. Incredibly precise." then, on a new line, grey #757575 "Every technical tool you need to dial in the details.". Both sentences of the black part stay black.
  - Row 1: Texture still (karecare wellness site with a "Texture S1-R50" panel), video "Precise accessibility" (Bloom contrast picker), video "Precise padding" (art gallery layout with magenta spacing guides), video "Glass depth" ("RE:FINISHED BY ANA VOSS" glass card)
  - Row 2: brushes still (Scribble/Chalk/Paint brush panel over red lilies), vector-edit still (blue shape with bezier handles), video "Variable type" (VAULT, Weight 400 slider), type-on-path still (purple dots on a pink/teal path)
  - Row 3: video "Motion timeline" (glass nav over clouds, 0-0.6 timeline), prompt-node still (CHATGPT IMAGE 2.0 node), video "Image displace effects" (daisy, Grid Size 32), bitmap-mosaic still (yellow mosaic, butterfly)
  - Full-page reference shows the six video tiles blank (only the six stills render)
  - Every tile is 348x435 (4:5) at 1440 and 187x234 on phones; crop supplied files with object-fit: cover. Video tiles use their *-rest/frame stills.
- components:
  - two-tone heading
  - text_link
  - media_pause

**Figma Make**
- summary: Centered two-tone heading, a full-width 1360px video, link under the video at left
- ground: #FFFFFF
- desktop: section y 4443-5556. Heading block x 269 w 901: h2 y 4523, continuation y 4560-4630 (2 lines). Video 1360x765 at x 40, y 4671. "Explore Figma Make" at x 40, y 5452 (16px below the video). Pause at x 1350, y 5386
- phone: h2 y 4141; video full-bleed 390x219 at y 4317; link x 16 y 4552
- anatomy:
  - Heading text, verbatim: black "Start with design context. Build with consistency." then, on a new line, grey #757575 "Your context, codebase, and agents stay connected so what you design is what gets shipped.". Both sentences of the black part stay black.
  - Heading: "Start with design context. Build with consistency." + grey "Your context, codebase, and agents stay connected so what you design is what gets shipped."
  - Video Vimeo 1204234347 at rest: a white "Clone repo | https://github.com/colab/colab-app" pill with a violet send button on #CAFFF9; later a struck-through checklist and a CoLab editor (assets make-local-rest.jpg)
  - Full-page reference shows the video blank (y 4671-5436)
- components:
  - two-tone heading
  - media_pause
  - text_link

**Proof: quote, stat, logos**
- summary: 44px solo headline, a 9-column pull quote and a 3-column stat each hung on a 1px left rule, then a scrolling row of black customer logos
- ground: #FFFFFF
- desktop: section y 5557-6216. h2 44/48.4 y 5637 (one line). Quote figure x 40 w 1016, y 5749-6037, 1px #D6D6D6 left rule; quote 44/48.4 4 lines (hanging open quote at x 62, text x 81); avatar ring at x 71, y 5973; name y 5989, role y 6010 at x 151. Stat li x 1072 w 328, y 5749-5914, its own left rule; "95%" x 1113 y 5744; caption y 5869; footnote x 1072 y 5938. Logo marquee y 6102, 32px tall logos 70px apart, clipped to the 40-1350 band; pause button 36px #F5F5F5 at x 1364, y 6100
- phone: h2 32/35.2 y 4656; quote 32/35.2 x 17 w 357 y 4767 (9 lines); avatar 48px at x 44, name x 111 y 5126, role wraps to 2 lines; stat below with its own rule: "95%" 72px at x 33 y 5227, caption y 5335, footnote x 16 y 5382; marquee y 5444, pause at x 338
- anatomy:
  - Avatar (measured 2026-10-30, DOM boxes): a 54x54 wrapper at x 81, y 5982 (figcaption starts x 41, no negative margin); the 48px black-and-white photo sits at x 84, y 5985 (3px inset). The dashed #00B6FF ring fills that 3px band between photo and wrapper edge: 3px thick, dashes about 18deg, gaps about 12deg (conic-gradient masked to the band). Name and role at x 151 (16px after the wrapper). Phone: wrapper x 41, y 5130; photo x 44. There is no 74px ring anywhere.
  - Quote text box is 901px wide (x 41 to 942), not the 1016px figure: at that width the stand-in sets the four measured lines.
  - Quote line breaks at 1440 (4 lines): "...influence, inspire, and give / input without ever leaving the design file. That / creates a really transparent, open, and honest / process throughout the whole project."
  - Quote: "Everyone is able to influence, inspire, and give input without ever leaving the design file. That creates a really transparent, open, and honest process throughout the whole project." - Francisco Seiz, Senior Design Director, Code and Theory
  - Avatar: black-and-white headshot 48px circle inside a 54px dashed ring of #00B6FF (repeating-conic-gradient 18deg dash / 12deg gap)
  - Stat: "95%" / "95% of the Fortune 500 uses Figma" / "Based on data from March 2025." The numeral counts up when scrolled into view: resting state 95%, the full-page reference caught it at 81% (animation only)
  - Logos in order, all black SVGs 32px tall: airbnb, atlassian, dropbox, duolingo, github, mercado libre, microsoft, netflix, pentagram, slack, stripe, the new york times, zoom; the row repeats and scrolls left continuously (animation only)
- components:
  - quote
  - stat
  - marquee_pause

**Outro CTA**
- summary: Centered 44px headline over a full-width black Get started bar
- ground: #FFFFFF
- desktop: section y 6216-6616. h2 44/48.4 centered (text-align center in the 901 block at x 269), y 6296. Bar 1360x136 at x 40, y 6401, radius 24, label 56px white centered
- phone: h2 32/35.2 centered y 5558 (2 lines); bar 358x117 at x 16, y 5669, label 36px
- anatomy:
  - Headline "Ideas no longer have to wait their turn"
  - Bar: #000000, hover #262626, no arrow
- components:
  - outro_bar

**Explore templates carousel**
- summary: 44px two-tone heading, link + pager row, then a horizontal carousel of square-cornered template images with link captions, bleeding off the right edge
- ground: #FFFFFF
- desktop: section y 6617-7514. h2 44/48.4 y 6697 black "Explore what you can do in Figma." + #757575 "Browse resources made by the community." (y 6745). Row at y 6802-6838: "Browse all templates" link at x 40 (y 6810); "1 of 10" 14px at x 1263; prev/next 36px ringed circles at x 1316 and 1364. Cards from y 6902: 328 wide, 16px gutters at x 40, 384, 728, 1072, 1416 (cut by the viewport edge); a 24px sliver of the previous card (Icons) shows at x 0-24. Image heights 492 (2:3), 328 (1:1), 219 (3:2); captions 16px below each image, so caption y varies (7410, 7246, 7137)
- phone: h2 32/35.2 y 5866; link y 6022; "1 of 10" x 237 y 6073; buttons x 290/338 y 6063; cards 265 wide, 16px gutters from x 16 at y 6139 (one and a bit visible)
- anatomy:
  - Heading text, verbatim: black "Explore what you can do in Figma." then, on a new line, grey #757575 "Browse resources made by the community.". Both sentences of the black part stay black.
  - Slides in order: UI Kits (2:3), Websites (1:1), Social media (2:3), Mobile apps (1:1), Presentations (3:2), Wireframes (1:1), Illustrations (3:2), Portfolios (1:1), Web ads (2:3), Icons (1:1)
  - Each caption is a text link with the arrow; the hidden h2 per slide is visually hidden
- components:
  - two-tone heading
  - text_link
  - carousel_button
  - template_card

**Footer**
- summary: Black footer: white Figma wordmark and 4 round social buttons at left, four mono-headed link columns at right, language selector at the bottom left. No copyright line
- ground: #000000 full width, starts at y 7514 (no gap after the carousel band's 80px padding)
- anatomy:
  - Padding 120px top/bottom, side margin 60: grid 390 | 180 | 180 | 180 | 180 with 60px column gaps (x 60, 510, 750, 990, 1230)
  - Wordmark (slot brand.wordmark_white) 120x44 at x 60, y 7635; social row y 7718: X, YouTube, Instagram, Facebook 36px circles #3D3D3D, 8px apart, 24px white glyphs
  - Column heads figmaMono 16/20.8 +0.48px uppercase #999999: PRODUCT, USE CASES, RESOURCES, COMPANY at y 7635; PLANS under PRODUCT at y 8342
  - Links 16/23.2 white #FFFFFF (Inter 300 -0.5px, antialiased; real figmaSans wght 320), first link 41px below the head, rows 37.3px apart; two Resources links wrap to 2 lines in the 180px column
  - NEW/BETA badges #292929, 4px radius, 12px mono
  - Language: globe + "English" + caret at x 60, y 8580; footer ends y 8739
- phone: padding 80 top / 48 bottom, side 24: wordmark y 6697, socials y 6779, then PRODUCT, PLANS, USE CASES, RESOURCES, COMPANY stacked full width (heads 16px +0.64px), links 22/29.7 white (Inter 300, antialiased), rows 41.7px apart, English at y 9748

**On dark grounds**
- secondary button: footer social circles: #3D3D3D (white 24%) fill, white glyph; no outlined button on dark
- link: #FFFFFF, wght 320, 1px underline on hover (offset 4.5px), focus 2px dashed #FFFFFF
- muted text: #999999 (white 60%) for mono column heads
- hairline: none drawn on the footer; badges use #292929
- logo variant: white wordmark (currentColor), never the 5-color mark in the footer

## Components

- **nav cta** (observed): fill #000000, text #FFFFFF, radius 8, height 46, padding x 22, padding y 12, font size 16, weight 400, width 193, use "Get started for free" at the right end of the nav (x 1208-1401); on phones 193x46 at x 140, transition background 0.18s ease-out, box-shadow 0.18s ease-out, date 2026-10-29
  - hover (observed): background-color #262626
  - focus (observed): outline 2px dashed #000000, outline-offset 4px
- **nav secondary** (observed): fill none, text #000000, radius 8, height 46, padding x 22, padding y 12, font size 16, weight 400, width 151, border box-shadow inset 0 0 0 1px #D6D6D6 (black 16%), use "Contact sales", 8px left of the black CTA, date 2026-10-29
  - hover (observed): box-shadow inset 0 0 0 1px #999999
  - focus (observed): outline 2px dashed #000000, outline-offset 4px
- **nav link** (observed): fill none, text #000000, radius 0, height 39, padding x 8, font size 16, weight 400, use Products, Solutions, Community, Resources (each + 18px chevron, 1.25 stroke), Pricing, Log in, date 2026-10-29
  - hover (observed): text-decoration underline
  - open (observed): 
  - focus (observed): outline 2px dashed #000000, outline-offset 4px
- **hero button** (observed): fill #000000, text #FFFFFF, radius 16, height 84, padding x 32, padding y 24, font size 30, weight 400, width 224, use hero "Get started", centered in columns 10-12 (x 1124-1348), vertically centered on the hero (y 466-550). Phone: 195x77 centered under the media, label 24px, date 2026-10-29
  - hover (observed): background-color #262626
  - focus (observed): outline 2px dashed #000000, outline-offset 4px
- **outro bar** (observed): fill #000000, text #FFFFFF, radius 24, height 136, padding x 80, padding y 40, font size 56, weight 400, width 1360, use "Get started" full-width bar under "Ideas no longer have to wait their turn"; label centered, 56px -1.25px. Phone: 358x117, label 36px, transition background, border-radius, box-shadow 0.18s ease-out, date 2026-10-29
  - hover (observed): background-color #262626
  - focus (observed): outline 2px dashed #000000, outline-offset 4px
- **text link** (observed): fill none, text #000000, radius 2, height 22, font size 16, weight 400, use Explore Figma's agent, Explore design tools, Explore build tools, Explore Figma Design, Explore Figma Make, Browse all templates, template card captions, anatomy 16/22.4 label with a 1px solid underline in the text color, offset 4px (text-decoration, not a border), followed 3px later by a 20px arrow-right icon that is NOT underlined. On hover the arrow translates right (transform 0.18s ease-out); focus 2px dashed outline offset 4px, date 2026-10-29
- **media pause** (observed): fill #000000, text #FFFFFF, radius pill, height 36, width 36, font size 14, weight 400, use every autoplaying video (hero, AI canvas, One workspace, six grid tiles, Make): a black 36px circle with a white 24px two-bar pause glyph, 14px in from the media box right and bottom edges (hero: centered under the collage at x 960, y 808), date 2026-10-29
  - toggled (observed): 
- **carousel button** (observed): fill none, text #000000, radius pill, height 36, width 36, padding x 8, font size 16, weight 400, border inset 0 0 0 1px #D6D6D6, use template carousel prev/next at x 1316 and 1364, y 6802; "1 of 10" 14px 12px to their left, date 2026-10-29
  - hover (observed): box-shadow inset 0 0 0 1px #999999
- **marquee pause** (observed): fill #F5F5F5, text #000000, radius pill, height 36, width 36, padding x 8, font size 16, weight 400, use pause control at the right end of the customer logo marquee (x 1364), date 2026-10-29
- **footer social** (observed): fill #3D3D3D, text #FFFFFF, radius pill, height 36, width 36, padding x 6, font size 18, weight 330, use X, YouTube, Instagram, Facebook: 24px white glyphs, 8px apart, 83px below the top of the wordmark, date 2026-10-29
- **footer badge** (observed): fill #292929, text #FFFFFF, radius 4, height 21, padding x 8, padding y 4.5, font size 12, weight 400, use NEW (Figma Weave, Figma Motion), BETA (Figma Specs, Figma Sites, Figma Buzz), date 2026-10-29
- **footer link** (observed): fill none, text #FFFFFF, radius 0, height 18, font size 16, weight 300, use every footer link, date 2026-10-29, tracking px -0.5, smoothing -webkit-font-smoothing: antialiased. Inter 300 -0.5px antialiased, white; real figmaSans wght 320 (reference only)
  - hover (observed): text-decoration underline
  - focus (observed): outline 2px dashed #FFFFFF, outline-offset 4px
- **feature item** (observed): fill none, text #000000, radius 0, height 137, font size 16, weight 400, use icon + title + description + text link stack, anatomy 16px black glyph; 16px gap; title 16/22.4 black; description 16/22.4 #757575 directly under (no gap); 16px gap; text link with arrow, date 2026-10-29
- **quote** (observed): fill none, text #000000, radius 0, height 288, font size 44, weight 400, use pull quote, anatomy blockquote box x 41, w 901, y 5749 (measured 2026-10-30; the figure with its 1px #D6D6D6 left rule is 1016 wide); the opening quote mark hangs at x 62 and the text starts at x 81; 44/48.4 black, 4 lines with the breaks listed in Proof. Phone: blockquote x 17 w 357, 9 lines. Avatar (measured 2026-10-30, DOM boxes): a 54x54 wrapper at x 81, y 5982 (figcaption starts x 41, no negative margin); the 48px black-and-white photo sits at x 84, y 5985 (3px inset). The dashed #00B6FF ring fills that 3px band between photo and wrapper edge: 3px thick, dashes about 18deg, gaps about 12deg (conic-gradient masked to the band). Name and role at x 151 (16px after the wrapper). Phone: wrapper x 41, y 5130; photo x 44. There is no 74px ring anywhere., date 2026-10-29, avatar 54px wrapper at x 81, 48px photo at x 84, 3px dashed #00B6FF band between them; name at x 151
- **stat** (observed): fill none, text #000000, radius 0, height 165, font size 88, weight 400, use stat beside the quote, anatomy 328px column at x 1072 with its own 1px #D6D6D6 left rule; "95%" 88/88 at x 1113 (41px inside); caption 16px #757575 247px wide 27px below the numeral box; footnote 14px #757575 outside the rule at x 1072, 24px below the rule end, date 2026-10-29
- **template card** (observed): fill none, text #000000, radius 0, height 508, font size 16, weight 400, use template carousel slide, anatomy 328px wide image, square corners, natural aspect (2:3 = 492 tall, 1:1 = 328, 3:2 = 219); images top-aligned so the row has a ragged bottom; caption text link 16px below the image, date 2026-10-29

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover | ease-out | 180ms | filled buttons: background #000000 -> #262626; outlined buttons: inset ring #D6D6D6 -> #999999; a built-in arrow-right fades in (opacity 0.18s) at the right while the label shifts left | observed |
| link-arrow-nudge | ease-out | 180ms | text links: the trailing arrow translates right on hover (transform 0.18s ease-out) | observed |
| hero-collage-loop |  |  | Vimeo 1202887330, 8s muted loop of overlapping artboards. Resting state = poster hero-collage-poster.jpg; card swaps are animation only | observed |
| section-videos |  |  | AI canvas (23s), One workspace (28s), six grid tiles, Make (23s) autoplay muted loops when in view, each with a pause button. Resting states supplied as *-rest.jpg / grid-*.jpg frames; the full-page reference shows them blank because they load only in the viewport | observed |
| stat-count-up |  |  | "95%" counts up from a lower number when scrolled into view (reference caught 81%). Resting/final state: 95%. Animation only | observed |
| logo-marquee |  |  | 13 logos repeat and scroll continuously to the left; the #F5F5F5 pause button stops it. Static state: logos sitting 70px apart starting at the left edge of the band | observed |
| dropdown |  |  | nav panels drop below the 78px bar; chevron rotates 180deg; the page behind dims | observed |

## Icon tokens

Grid not published, stroke not published (observed).

## Signature moves

### Black statement, grey continuation

Where: every section heading on the homepage except the three 44px solo headlines.
Do: A heading is one paragraph block 901px wide: the first sentence in #000000, the next sentence(s) in #757575 (black at 54%) at the same size, weight, tracking and line height (30/36 desktop, 24/28.8 phones, Inter 330 -0.45px; 44/48.4 for "Explore what you can do in Figma. / Browse resources made by the community."). The grey sentence starts on a new line. No eyebrow, no bold, no second size..
Don't: No subtitle in a smaller size, no bold lead-in, no color other than black and 54% black.

### One light weight, size does the work

Where: whole page.
Do: figmaSans at weight 400 everywhere (renders light; footer links even lighter at 320). Hierarchy is only size: 88, 56, 44, 30, 24, 16, 14. figmaSans (reference only): wdth 96 and -1.25px at display sizes, -0.66px at 30-44px. Stand-in (final recipe, see spec.type): Inter 350 at 56px, 340 at 44px, 330 at 30px, 300 at 16px..
Don't: Never bold or semibold, never italic, never all-caps sans (caps only in the mono).

### Square media, rounded black controls

Where: all media and buttons.
Do: Every video, image and tile has 0 radius and no border or shadow, sitting straight on white. Only controls are rounded: 8px (46px nav buttons), 16px (84px hero button), 24px (136px outro bar), full circles (36px media and carousel buttons). Buttons are solid #000000 with white text, or transparent with a 1px #D6D6D6 inset ring..
Don't: No rounded image cards, no drop shadows, no colored buttons, no gradients.

### Giant Get started

Where: hero and outro.
Do: The primary CTA is oversized rather than repeated: a 224x84 black button with a 30px label floating alone in the hero right columns, and near the end a 1360x136 black bar (24px radius) with a 56px "Get started" centered under a centered 44px headline..
Don't: No paired secondary button next to them, no arrow at rest (the arrow appears only on hover).

### Product UI as autoplaying video

Where: hero, AI canvas, One workspace, tools grid, Make.
Do: Each band shows a muted looping Vimeo of real Figma UI on a flat pastel or grey field baked into the video (#CAFFF9, #D0D0D0, #F3FFE3), always with a 36px black round pause button 14px inside the bottom-right corner. Media sizes: 581x700 hero, 901x507 (8 columns, left), 1131x636 (centered), 1360x765 (full width)..
Don't: No device mockups or browser chrome added in CSS, no captions on the media.

### Uppercase mono for meta labels

Where: footer heads, dropdown group labels, NEW/BETA badges.
Do: figmaMono (stand-in IBM Plex Mono 400 +0.03em) uppercase: 16px +0.48px #999999 footer column heads, 14px #757575 dropdown group labels ("WHAT YOU CAN DO IN FIGMA", "EXPLORE ALL PRODUCTS"), 12px badges on #292929..
Don't: Never mono for headlines or body.

### Full-bleed 4x3 tools grid

Where: Powerfully expressive band.
Do: Twelve 348x435 tiles (6 stills, 6 videos) in 4 columns with 16px gutters running from x 0 to x 1440, ignoring the 40px page margin; 2 columns of 187 on phones. Each tile is a crop of a Figma panel over vivid art..
Don't: Do not inset the grid to the 1360 container, no gaps wider than 16.

### All-white page, one black footer

Where: page grounds.
Do: Every band from nav to the template carousel is #FFFFFF with no tinted section grounds; color only arrives inside media. The only dark ground is the #000000 footer (white wordmark, #999999 mono heads, 320-weight white links)..
Don't: No grey or pastel CSS section grounds (those belong to the guide page, not the homepage).

### Logo on the outer edge with clear space equal to its height

Where: every layout that carries the wordmark or icon.
Do: Place the wordmark or icon on a layout's outer edge with even margins; clear space all round equals the mark's own height. Black or white wordmark only..
Don't: Never centre the mark in a crowded composition, never colour the wordmark.

## Messaging: rules

The homepage leads with one positioning line, "The full-stack creative canvas", then states the product in plain claims: an AI-native canvas, one workspace from WIP to ship, design context for consistent builds. Proof follows: a customer quote, a 95% Fortune 500 stat and a logo row.

Why it works: Figma grew from a design tool into a platform for whole product teams; the copy names the whole journey rather than design alone.

|  |  |
|---|---|
| Hero line | "The full-stack creative canvas" (observed 2026-10-29) |
| Proof stat | 95% of the Fortune 500 (March 2025 data) |

- Lead with a short positioning line, then one plain claim per section
- Pair each claim with a grey sentence that explains it
- Close on proof: a named customer quote, one stat, customer logos
- Don't Exclamation marks or playful wordplay on the homepage
- Don't Feature lists in place of a claim

Real examples, to look at on Figma's own pages (not for reuse):
- Homepage hero resting state: the collage of Figma-made artboards: https://www.figma.com/

Sources: https://www.figma.com/

## Voice: rules

Two voices. Homepage: sentence case, short declaratives, a black claim then a grey explanation, no bold. Trademark guidance: Figma is an adjective (the Figma platform), never a noun, verb or possessive; third parties say "for Figma".

Why it works: Adjective use protects the trademark; the plain homepage voice lets the product imagery carry the energy.

|  |  |
|---|---|
| Case | sentence |
| Two-tone heads | claim #000000 + explanation #757575, same size |

- Sentence case everywhere
- Figma as an adjective: "the Figma platform"
- "Tom's plugin for Figma design", not "Tom's Figma plugin"
- A landing page follows the homepage voice
- Don't "Fig" or "Figma" inside your own product or handle
- Don't Possessive "Figma's" except for the company
- Don't Implying Figma endorsement

Do and don't:
- Do: "Tom's plugin for Figma design". Say what works with Figma.
- Don't: "Tom's Figma plugin". Implies Figma made or endorses it.

Sources: https://www.figma.com/using-the-figma-brand/, https://www.figma.com/

## Logo: rules

Three marks: the wordmark (preferred), the five-shape icon (full color or mono outline) and a lockup of icon plus wordmark for low-awareness settings. App icons put the mark in a rounded square. Wordmark black or white only, aiming for APCA contrast 60.

Why it works: The wordmark carries the brand where it is known; the lockup boosts recognition where it is not.

|  |  |
|---|---|
| Clear space | equal to the mark's height |
| Wordmark colors | #000000 or #FFFFFF |
| Contrast target | APCA Lc 60 |
| Minimum size | not published |

- Wordmark in black or white only, chosen for APCA Lc 60 or better
- Full-color icon on white or black only; the mono outline icon may sit on color
- Clear space all round equals the mark's height
- Place marks on a layout's outer edge with even margins
- Lockup in black, on light grounds only, used as-is
- In partnerships prefer the lockup or wordmark; pair wordmark with wordmark, icon with icon, evenly sized
- Don't Color applied to the wordmark
- Don't Wordmark on a low-contrast color
- Don't Your own logo combinations ("Figma Edu")
- Don't Full-color icon on color
- Don't Recolored icon shapes
- Don't Grayscale icon (use the mono outline)
- Don't The icon as the letter F
- Don't The lockup in white
- Don't Resizing or moving parts of the lockup

Do and don't:
- Do: "Figma". Black wordmark on white, clear space equal to its height.
- Don't: "Figma Edu". Never connect the wordmark to other words.
- Do: "Figma". White wordmark on black.
- Don't: "Figma". Wordmark on a color ground: use approved grounds that pass APCA.

Real examples, to look at on Figma's own pages (not for reuse):
- Wordmark, black on light and white on black: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.2
- Icon: full color and mono outline, with the five published colors: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3
- Clear space and positioning on the outer edge: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.4
- Lockup for low-awareness settings: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.5
- App icons for Figma and FigJam: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.6
- Partnership lockups: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.7
- Pairing identity marks evenly: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.8

Sources: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033, https://www.figma.com/using-the-figma-brand/, https://static.figma.com/uploads/4fbf4d754dbbc027ba1530205f8747cd97d532e5

## Color: rules

The Brand Book publishes five icon colors with PMS and CMYK. The 2024 refresh kept the signature purple and added bold primaries, neons and earthy tones in three schemes (Core, Warm, Cool), each a primary plus four secondaries, in light and dark modes. The homepage itself is black and white; color arrives only through product imagery.

Why it works: A black-and-white frame lets the work people make in Figma be the color.

|  |  |
|---|---|
| Icon red | #FF3737 / PMS 032 U |
| Icon purple | #874FFF / PMS 2088 U |
| Icon green | #24CB71 / PMS 7479 U |
| Icon orange | #FF7237 / PMS 1655 U |
| Icon blue | #00B6FF / PMS 306 U |
| Campaign scheme hexes | not published |

- Homepage and landing pages: white grounds, black type and buttons, #757575 for secondary text
- Brand color comes from imagery and primitives, not UI chrome
- Campaign pieces pick one scheme: a primary plus four secondaries
- Don't Colored buttons or colored text on the homepage
- Don't Recoloring the icon shapes
- Don't Wordmark on a low-contrast ground

Do and don't:
- Do: "Get started". The one call to action: a solid black button with white text on white.
- Don't: "Get started". Purple text or buttons: on figma.com brand color lives in imagery, not UI.

Real examples, to look at on Figma's own pages (not for reuse):
- The expanded 2024 palette: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- Scheme A: Core: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- Scheme B: Warm: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- Scheme C: Cool: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- Tonal vibrancy: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/

Sources: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033, https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/, https://www.figma.com/

## Typography: rules

Figma Sans (Grilli Type) at one light weight; hierarchy is size alone: 88, 56, 44, 30, 24, 16, 14px. Display sizes use a narrower width (wdth 96) and -1.25px tracking. Figma Mono sets the uppercase labels. The family also has Figma Condensed and Figma Hand (OH no Type).

Why it works: Figma wanted one face that works for display and long reading, for designers, developers and newcomers.

|  |  |
|---|---|
| H1 | 56/56, -1.25px (phone 36/36) |
| Solo H2 / quote | 44/48.4, -0.66px (phone 32/35.2) |
| Two-tone head | 30/36, -0.66px (phone 24/28.8) |
| Body | 16/23.2 |
| Mono label | 16/20.8, +0.48px, uppercase |

- One weight; size does the work
- Tight negative tracking at display sizes
- Mono only for uppercase labels and badges
- Stand-in: Inter 350/340/330/300 at 56/44/30/16px (spec.type), IBM Plex Mono 400
- Don't Bold or semibold headings
- Don't Italic
- Don't All-caps sans

Do and don't:
- Do: "Move fast in the right direction.". One light weight, sentence case; a grey sentence follows.
- Don't: "MOVE FAST IN THE RIGHT DIRECTION". No bold, no all-caps sans.

Real examples, to look at on Figma's own pages (not for reuse):
- Figma Sans, Condensed, Mono and Hand: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/

Sources: https://www.figma.com/blog/the-story-of-creating-figma-sans/, https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/, https://www.figma.com/

## Iconography: rules

Interface icons are 24px single-weight line glyphs: arrow-right on every text link, chevrons in the nav, pause/play on media, a globe on the language selector. Social icons sit white on #3D3D3D circles in the footer.

Why it works: Icons stay out of the way so product imagery leads.

|  |  |
|---|---|
| Size | 24px glyph, 36px circular control |
| Social circles | #3D3D3D |

- 24px line glyphs, black on white or white on dark
- Every text link ends in an arrow that nudges right on hover
- Don't Colored or filled icon tiles in place of imagery

Sources: https://www.figma.com/

## Illustration: rules

Illustration is a "language" of primitives: vector shapes from blobs to representational forms, made in Figma and drawn jumbo (big shapes, oversized nodes, bold color). They have passive, activated (pattern) and hyper-activated states, and compose by overlap, reveal, clustering and multi-move. It replaced the old black-outline main-character shapes.

Why it works: Figma's creative director argues identities should work as languages, not systems.

|  |  |
|---|---|
| States | passive, activated, hyper-activated |
| Moves | overlap, reveal, clustering, multi-move |

- Jumbo scale, nodes and borders
- Compose with overlap, reveal, clustering or multi-move
- Primitives may be activated with pattern
- Don't The retired thin black-outline style
- Don't Cursor characters as illustration

Real examples, to look at on Figma's own pages (not for reuse):
- The primitives collection: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- A jumbo butterfly primitive: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- An activated primitive: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- The retired black-outline style: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/
- Brand Book cover: primitives on black: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.1

Sources: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/, https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033

## Photography: rules

The homepage uses no lifestyle photography. Imagery is Figma-made work: product UI, artboards, templates and motion stills, shown edge to edge with square corners. The only portrait is the customer headshot, black-and-white in a dashed blue ring.

Why it works: The product's output is the proof.

|  |  |
|---|---|
| Media radius | 0 |
| Avatar | 48px circle inside a 54px wrapper, 3px dashed #00B6FF band |

- Show real work made in Figma
- Square corners, no shadows, no borders
- Customer headshot in black and white
- Don't Stock photos of people at laptops
- Don't Rounded image cards with drop shadows

Real examples, to look at on Figma's own pages (not for reuse):
- Tools-grid tile: glass depth: https://www.figma.com/
- Tools-grid tile: variable type: https://www.figma.com/
- Template carousel card: https://www.figma.com/

Sources: https://www.figma.com/

## Motion: rules

Motion principles are craft, interactivity and freeform, built on selection, activation and transformation without cursors. On figma.com, looping muted product videos carry it; UI motion is 0.18s ease-out hover fills and arrow nudges, a counting stat and a scrolling logo row.

Why it works: Motion shows the product working instead of decorating it.

|  |  |
|---|---|
| Hover | 0.18s ease-out, #000000 to #262626 |
| Videos | muted loops with a 36px pause button |

- Selection, activation, transformation
- UI transitions 0.18s ease-out
- Every autoplay video has a pause control
- Don't Cursor-led animation
- Don't Bouncy or long UI transitions

Real examples, to look at on Figma's own pages (not for reuse):
- Maximalist scheme in motion work: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/

Sources: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/, https://www.figma.com/

## Interface and layout: rules

A 1360px content width with 40px side margins at 1440 on a 12-column grid; 80px band padding. The hero splits into three zones: headline, media and a giant Get started button. Sections alternate centered and left-aligned two-tone heads over large square videos. A full-bleed 4x3 tile grid breaks the margins once, and the footer is black.

Why it works: Wide, quiet white bands let the product media dominate.

|  |  |
|---|---|
| Content width | 1360px at 1440 |
| Margins | 40px desktop, 16px phone |
| Band padding | 80px / 40px |
| Nav height | 78px |

- 40px margins, 1360px content at 1440; 16px on phones
- 80px band padding (40px phones)
- One full-bleed media grid per page
- Footer black, four mono-headed link columns
- Don't Colored band grounds on the homepage
- Don't Cards with radius around media

Real examples, to look at on Figma's own pages (not for reuse):
- Hero video first frame: https://www.figma.com/

Sources: https://www.figma.com/

## Rules: rules

The trademark page sets the outside rules: marks used truthfully, your own brand larger than Figma's, no modification, no imitation of Figma's look and feel, no merchandise.

Why it works: Protects the trademark while letting the community talk about Figma.

|  |  |
|---|---|
| Contact | legal@figma.com; permissions press@figma.com |

- Your branding larger and more prominent than the Figma marks
- Refer to Figma informationally; say what works with Figma
- Link to Figma content with the word or logos
- Screenshots allowed for education
- Don't Modifying the marks or merging them into yours
- Don't "Fig" in your name, domain or handle
- Don't Implying affiliation or endorsement
- Don't Imitating Figma's visual identity
- Don't Figma marks on merchandise

Real examples, to look at on Figma's own pages (not for reuse):
- Usage don'ts: colored wordmark, low contrast, made-up combinations: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.9
- Usage don'ts: icon on color, recolored, grayscale, as an F: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.10
- Usage don'ts: lockup in white, rearranged lockup: https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.11

Sources: https://www.figma.com/using-the-figma-brand/, https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033

## Campaigns

### Evolving our visual language (2024 brand refresh) (2024)

Announced September 16, 2024. Figma's in-house Brand Studio retired the cursor-and-black-outline look for four foundations: versatile primitives, dynamic compositions, an expanded palette run as variables, and integrated motion. Figma Sans came from Grilli Type.

How the system shows: Jumbo primitives in overlap and cluster compositions, three color schemes (Core, Warm, Cool) with light and dark modes, and a "Make. Believe." billboard.
Why it works: The identity is built in Figma with variables, so the brand demonstrates the product it sells.
Channels: identity system, figma.com, Config, out of home, product marketing. Source: https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/

### Figma Sans (2024)

A custom grotesque commissioned from Grilli Type after off-the-shelf options fell short, built to work for display and long reading.

How the system shows: One light weight across the site, variable width axis tightening display sizes.
Why it works: One face serves designers, developers and newcomers alike.
Channels: typeface, figma.com, Help Center. Source: https://www.figma.com/blog/the-story-of-creating-figma-sans/

### Friends of Figma brand refresh (2026)

Published May 19, 2026: the community program pulled the logomark apart into basic shapes for a new Friends of Figma logo, with "bouncy F" chapter badges, sticker templates and a palette from which each chapter picks six extra colors.

How the system shows: The five icon shapes become building blocks; stickers echo the illustration primitives.
Why it works: Chapters get local expression inside one recognisable kit.
Channels: community chapters, stickers, templates, chapter badges. Source: https://www.figma.com/blog/friends-of-figma-brand-refresh/

## Applications

| Format | What | Source |
|---|---|---|
| website | figma.com homepage: white bands, giant black Get started, square product videos, full-bleed tools grid, black footer. | https://www.figma.com/ |
| brand page | using-the-figma-brand: 72px headline beside the full-color icon, a mint #F3FFE3 "Brand together" band of three resource cards, then trademark rules. | https://www.figma.com/using-the-figma-brand/ |
| out of home | "Make. Believe." billboard in the 2024 refresh. | https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/ |
| community kit | Friends of Figma stickers, chapter badges and templates. | https://www.figma.com/blog/friends-of-figma-brand-refresh/ |
| partnerships | Figma + Jira and Figma + GitHub lockups; wordmarks paired with wordmarks. | https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.7 |

## By format

How our engine applies Figma's system to each format. This is our recipe built from their rules, not something Figma publishes. Level = how far toward the campaign end (jumbo primitives, full schemes) from the black-and-white product end. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | White 78px nav with the 19x28 five-color Figma icon at x 40 (no wordmark in the nav), five menu labels and a black "Get started for free"; three-zone hero (56px three-line H1 left, square product media centre, 224x84 black Get started right); two-tone 30px section heads; one full-bleed square-tile grid; proof with quote, stat and logos; black footer with mono column heads | which product sections follow the hero and what media fills them |
| Deck | 2 | White slides, one light weight, black wordmark on the outer edge, product imagery square | one color scheme for section dividers |
| Social | 3 | Jumbo primitives in one scheme, wordmark black or white | composition move: overlap, reveal, cluster |
| Event / out of home | 4 | Primitives at billboard scale, short two-word line | scheme and activation state |
| Email | 1 | White, black type, one black button, square product image | one primitive accent |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Figma: white page, one light grotesque weight, square product media, a giant black Get started, two-tone heads.
- **Swap test**: Put another SaaS logo on it. If the oversized black button, grey continuation sentences and full-bleed product grid don't feel out of place, it's generic.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Figma's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- The Brand Book lists the same RGB (r129, g113, b113) under all five icon colors, an apparent template error; use the published hex values.
- Minimum logo sizes: not published.
- Campaign scheme hexes (Core, Warm, Cool and secondaries): not published; shown only as images.
- Figma Sans, Figma Mono, Figma Condensed and Figma Hand are proprietary; Inter and IBM Plex Mono are calibrated stand-ins.
- Photography guidance: not published.
- Grid, spacing and layout rules: not published; all layout values are measured from figma.com on 2026-10-29.
- Mission statement and boilerplate: not published on the public brand pages.
- The guide points account holders to a Brand Book inside Figma (sign-in); only the public PDF, which covers identity (logos) only, was used.

Logos and reference images belong to Figma. Look at them on Figma's own pages; don't reuse them.