{
  "schema": "brand-kit@2",
  "palette": {
    "paper": "#FFFFFF",
    "surface": "#F5F5F5",
    "ink": "#000000",
    "ink_muted": "#757575",
    "accent": "#000000",
    "on_accent": "#FFFFFF",
    "accent_secondary": "#874FFF",
    "night": "#000000",
    "on_night": "#FFFFFF",
    "extras": [
      {
        "name": "figma-red",
        "hex": "#FF3737",
        "role": "One of the five icon shapes (PMS 032 U, CMYK 0/91/100/0). Published for the full-color icon only; never applied to the wordmark. On figma.com it appears only inside the logo and product imagery, plus #00B6FF as the dashed ring around the quote avatar",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3"
      },
      {
        "name": "figma-purple",
        "hex": "#874FFF",
        "role": "One of the five icon shapes (PMS 2088 U, CMYK 62/69/0/0). Published for the full-color icon only; never applied to the wordmark. On figma.com it appears only inside the logo and product imagery, plus #00B6FF as the dashed ring around the quote avatar",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3"
      },
      {
        "name": "figma-green",
        "hex": "#24CB71",
        "role": "One of the five icon shapes (PMS 7479 U, CMYK 76/0/87/0). Published for the full-color icon only; never applied to the wordmark. On figma.com it appears only inside the logo and product imagery, plus #00B6FF as the dashed ring around the quote avatar",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3"
      },
      {
        "name": "figma-orange",
        "hex": "#FF7237",
        "role": "One of the five icon shapes (PMS 1655 U, CMYK 0/60/83/0). Published for the full-color icon only; never applied to the wordmark. On figma.com it appears only inside the logo and product imagery, plus #00B6FF as the dashed ring around the quote avatar",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3"
      },
      {
        "name": "figma-blue",
        "hex": "#00B6FF",
        "role": "One of the five icon shapes (PMS 306 U, CMYK 79/0/0/0). Published for the full-color icon only; never applied to the wordmark. On figma.com it appears only inside the logo and product imagery, plus #00B6FF as the dashed ring around the quote avatar",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.3"
      },
      {
        "name": "ink",
        "hex": "#000000",
        "role": "All text on white, primary/CTA button fill, video pause buttons, footer ground",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "paper",
        "hex": "#FFFFFF",
        "role": "Page ground of every band from nav to the template carousel; text and wordmark on the black footer",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "muted",
        "hex": "#757575",
        "role": "Black at 54% (oklch(0 0 none / 0.54)) on white: the grey continuation sentence of every two-tone heading, feature descriptions, quote attribution role, stat caption, dropdown descriptions and mono group labels",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "hairline",
        "hex": "#D6D6D6",
        "role": "Black at 16% on white: header bottom hairline (box-shadow 0 1px 0), Contact sales and carousel-button 1px inset rings, 1px left rules on the quote and the stat",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "hover-ring",
        "hex": "#999999",
        "role": "Black at 40%: the 1px inset ring of outlined buttons on hover. Same hex as the footer column heads (white at 60% on black)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "hover-fill",
        "hex": "#262626",
        "role": "Black at 85%: filled black buttons on hover",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "wash-4",
        "hex": "#F5F5F5",
        "role": "Black at 4%: the 36px round pause button of the logo marquee",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "wash-8",
        "hex": "#EBEBEB",
        "role": "Black at 8%: hover/tile wash inside the Products dropdown",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "footer-social",
        "hex": "#3D3D3D",
        "role": "White at 24% on black: 36px round social buttons in the footer",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "footer-badge",
        "hex": "#292929",
        "role": "White at 16% on black: NEW / BETA badges beside footer links (4px radius)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "make-video-ground",
        "hex": "#CAFFF9",
        "role": "Baked into the Figma Make video (pale cyan field); never a CSS ground",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "canvas-video-ground",
        "hex": "#D0D0D0",
        "role": "Baked into the AI-native canvas video (grey canvas); never a CSS ground",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "workspace-video-ground",
        "hex": "#F3FFE3",
        "role": "Baked into the One workspace video (pale green canvas); never a CSS ground",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      }
    ]
  },
  "typography": {
    "display": {
      "family": "Inter",
      "fontsource": "@fontsource-variable/inter",
      "fontsource_css": "@fontsource-variable/inter/opsz.css (needs the opsz axis; font-optical-sizing:auto gives the display cut at 56px)",
      "google_fonts": "Inter:opsz,wght@14..32,100..900",
      "on_shelf_list": true,
      "weight": 350,
      "tracking_em": -0.0304,
      "tracking_note": "Final recipe (2026-10-30): 56px 350 -1.7px; 88px 350 -2.7px; 44px 340 -0.66px. See spec.type.",
      "line_height": 1,
      "real": "figmaSans (proprietary variable font, axes wdth/wght, shared woff2 with figmaMono; site uses wdth 96 at 56px and 88px)",
      "fallback_stack": "\"SF Pro Display\", system-ui, helvetica, sans-serif",
      "stand_in": true
    },
    "body": {
      "family": "Inter",
      "fontsource": "@fontsource-variable/inter",
      "google_fonts": "Inter:opsz,wght@14..32,100..900",
      "on_shelf_list": true,
      "weight": 300,
      "tracking_em": -0.0075,
      "scale": {
        "30px two-tone heads and hero button label": {
          "weight": 330,
          "tracking_px": -0.45
        },
        "24px dropdown big links": {
          "weight": 320,
          "tracking_px": -0.3
        },
        "16px body, feature titles, nav, buttons, links": {
          "weight": 300,
          "tracking_px": -0.12
        },
        "16px footer links, white on black": {
          "weight": 300,
          "tracking_px": -0.5,
          "smoothing": "-webkit-font-smoothing: antialiased"
        },
        "14px small": {
          "weight": 300,
          "tracking_px": 0
        }
      },
      "line_height": 1.4,
      "real": "figmaSans wdth 98, wght 400 (renders light)",
      "fallback_stack": "system-ui, helvetica, sans-serif",
      "stand_in": true
    },
    "mono": {
      "family": "IBM Plex Mono",
      "fontsource": "@fontsource/ibm-plex-mono (400)",
      "google_fonts": "IBM+Plex+Mono:wght@400",
      "on_shelf_list": true,
      "weight": 400,
      "tracking_em": 0.03,
      "case": "uppercase",
      "real": "figmaMono (same variable file, MONO 100)",
      "uses": "footer column heads 16/20.8 +0.48px, dropdown group labels 14px, NEW/BETA badges 12/12 +0.6px",
      "fallback_stack": "ui-monospace, Menlo, monospace",
      "stand_in": true
    },
    "calibration": "FINAL RECIPE (2026-10-30), the only Inter numbers to use: 56px 350 -1.7px; 88px 350 -2.7px; 44px 340 -0.66px; 30px 330 -0.45px; 24px 320 -0.3px; 16px 300 -0.12px; 14px 300 0; footer links 16px 300 -0.5px antialiased; mono IBM Plex Mono 400. Method: each line rendered at 1x in headless Chromium and matched to the same line in the 1440 reference screenshot, first on inked width, then ink per px of width. Earlier recipes (390/330/310 from the 2x calibration of 2026-10-29, then 390/370/350/360 after round 1) read too light, then too heavy; both are superseded. Real face for reference only: figmaSans wght 400 (footer links 320), wdth 96 at 56/88px and 98 elsewhere; tracking -1.25px at 56, -0.66px at 30-44.",
    "calibration_numbers": {
      "method": "2026-10-29, headless Chromium at deviceScaleFactor 2. Each line was rendered on www.figma.com itself in the loaded figmaSans/figmaMono (same woff2 variable file, axes MONO/wdth/wght) with the site's exact font-variation-settings and letter-spacing, nowrap, black on white; then rendered in each Google Fonts candidate at the same size and letter-spacing across weights (280-440 step 10 for the finalists). Metrics: rendered line width (getBoundingClientRect), ink per px of width (sum of 1-luminance over the line screenshot / width, CSS px), x-height (ink height of \"xxxx\" at 200px, scaled to size). For each candidate the weight was chosen to match ink, then width and x-height were compared at the site's own tracking. Candidates tried: Inter (opsz axis), Inter Tight, Geist, Rethink Sans, Hanken Grotesk, Public Sans, Instrument Sans, Plus Jakarta Sans, Wix Madefor Text, Archivo, Figtree, Albert Sans, Host Grotesk, Schibsted Grotesk, Onest, Funnel Sans; mono: Geist Mono, JetBrains Mono, IBM Plex Mono, Fira Code, Source Code Pro, Space Mono, DM Mono, Roboto Mono.",
      "lines": {
        "h1": {
          "text": "The full-stack creative canvas",
          "size_px": 56,
          "site_tracking_px": -1.25,
          "site_settings": "figmaSans 'wdth' 96, 'wght' 400",
          "real_width_px": 670.3,
          "real_ink_per_px": 11.995,
          "real_x_height_px": 28.14,
          "real_x_to_cap": 0.71
        },
        "sub": {
          "text": "Move fast in the right direction on an AI-native canvas.",
          "size_px": 30,
          "site_tracking_px": -0.66,
          "site_settings": "figmaSans 'wdth' 98, 'wght' 400",
          "real_width_px": 672.9,
          "real_ink_per_px": 6.145,
          "real_x_height_px": 15.07,
          "real_x_to_cap": 0.71
        },
        "body": {
          "text": "Ask Figma’s agent to add motion to designs, document your design systems",
          "size_px": 16,
          "site_tracking_px": 0,
          "site_settings": "figmaSans 'wdth' 98, 'wght' 400",
          "real_width_px": 542.7,
          "real_ink_per_px": 3.097,
          "real_x_height_px": 8.04,
          "real_x_to_cap": 0.71
        },
        "mono": {
          "text": "WHAT YOU CAN DO IN FIGMA",
          "size_px": 16,
          "site_tracking_px": 0.48,
          "site_settings": "figmaMono 'MONO' 100, 'wdth' 100, 'wght' 400, uppercase",
          "real_width_px": 241.9,
          "real_ink_per_px": 2.999,
          "real_x_height_px": 8.04,
          "real_x_to_cap": 0.71
        }
      },
      "winner_sans": {
        "h1": {
          "family": "Inter",
          "weight": 390,
          "width_px": 687.9,
          "width_delta_pct": 2.6,
          "ink_per_px": 12.095,
          "ink_delta_pct": 0.8,
          "x_height_px": 28.98,
          "x_height_delta_pct": 3,
          "tracking_to_match_px": -1.84,
          "tracking_to_match_em": -0.0328
        },
        "sub": {
          "family": "Inter",
          "weight": 330,
          "width_px": 661.2,
          "width_delta_pct": -1.7,
          "ink_per_px": 6.116,
          "ink_delta_pct": -0.5,
          "x_height_px": 15.52,
          "x_height_delta_pct": 3,
          "tracking_to_match_px": -0.45,
          "tracking_to_match_em": -0.015
        },
        "body": {
          "family": "Inter",
          "weight": 310,
          "width_px": 559.7,
          "width_delta_pct": 3.1,
          "ink_per_px": 3.089,
          "ink_delta_pct": -0.3,
          "x_height_px": 8.28,
          "x_height_delta_pct": 3,
          "tracking_to_match_px": -0.24,
          "tracking_to_match_em": -0.0148
        }
      },
      "runners_up_sans": {
        "Inter Tight": {
          "h1": {
            "family": "Inter Tight",
            "weight": 360,
            "width_px": 684.1,
            "width_delta_pct": 2.1,
            "ink_per_px": 11.875,
            "ink_delta_pct": -1,
            "x_height_px": 30.66,
            "x_height_delta_pct": 9,
            "tracking_to_match_px": -1.71,
            "tracking_to_match_em": -0.0305
          },
          "sub": {
            "family": "Inter Tight",
            "weight": 320,
            "width_px": 670.5,
            "width_delta_pct": -0.4,
            "ink_per_px": 6.066,
            "ink_delta_pct": -1.3,
            "x_height_px": 16.43,
            "x_height_delta_pct": 9,
            "tracking_to_match_px": -0.62,
            "tracking_to_match_em": -0.0206
          },
          "body": {
            "family": "Inter Tight",
            "weight": 300,
            "width_px": 531.7,
            "width_delta_pct": -2,
            "ink_per_px": 3.101,
            "ink_delta_pct": 0.1,
            "x_height_px": 8.76,
            "x_height_delta_pct": 9,
            "tracking_to_match_px": 0.15,
            "tracking_to_match_em": 0.0095
          },
          "why_not": "closest raw width (mean |delta| 1.5%) but x-height +9.0% on every line; it reads visibly taller and tighter than figmaSans"
        },
        "Funnel Sans": {
          "h1": {
            "family": "Funnel Sans",
            "weight": 380,
            "width_px": 697,
            "width_delta_pct": 4,
            "ink_per_px": 11.987,
            "ink_delta_pct": -0.1,
            "x_height_px": 28.14,
            "x_height_delta_pct": 0,
            "tracking_to_match_px": -2.14,
            "tracking_to_match_em": -0.0382
          },
          "sub": {
            "family": "Funnel Sans",
            "weight": 320,
            "width_px": 683.6,
            "width_delta_pct": 1.6,
            "ink_per_px": 6.149,
            "ink_delta_pct": 0.1,
            "x_height_px": 15.07,
            "x_height_delta_pct": 0,
            "tracking_to_match_px": -0.85,
            "tracking_to_match_em": -0.0284
          },
          "body": {
            "family": "Funnel Sans",
            "weight": 300,
            "width_px": 537.1,
            "width_delta_pct": -1,
            "ink_per_px": 3.218,
            "ink_delta_pct": 3.9,
            "x_height_px": 8.04,
            "x_height_delta_pct": 0,
            "tracking_to_match_px": 0.08,
            "tracking_to_match_em": 0.0049
          },
          "why_not": "x-height exact (0.0%) but h1 runs +4.0% wide, letterforms rounder/wider (a, e, c), lightest weight 300 leaves 16px body +3.9% dark; not on the shelf list"
        },
        "Archivo": {
          "h1": {
            "family": "Archivo",
            "weight": 330,
            "width_px": 680.2,
            "width_delta_pct": 1.5,
            "ink_per_px": 12.015,
            "ink_delta_pct": 0.2,
            "x_height_px": 29.68,
            "x_height_delta_pct": 5.5,
            "tracking_to_match_px": -1.58,
            "tracking_to_match_em": -0.0282
          },
          "sub": {
            "family": "Archivo",
            "weight": 300,
            "width_px": 658.7,
            "width_delta_pct": -2.1,
            "ink_per_px": 6.438,
            "ink_delta_pct": 4.8,
            "x_height_px": 15.9,
            "x_height_delta_pct": 5.5,
            "tracking_to_match_px": -0.41,
            "tracking_to_match_em": -0.0135
          },
          "body": {
            "family": "Archivo",
            "weight": 300,
            "width_px": 524,
            "width_delta_pct": -3.4,
            "ink_per_px": 3.458,
            "ink_delta_pct": 11.7,
            "x_height_px": 8.48,
            "x_height_delta_pct": 5.5,
            "tracking_to_match_px": 0.26,
            "tracking_to_match_em": 0.0162
          },
          "why_not": "h1 width +1.5% but x-height +5.5% and the 16px body stays +8.9% dark even at 280 (its floor in this test)"
        },
        "Figtree": {
          "h1": {
            "family": "Figtree",
            "weight": 430,
            "width_px": 706.2,
            "width_delta_pct": 5.4,
            "ink_per_px": 11.94,
            "ink_delta_pct": -0.5,
            "x_height_px": 28.14,
            "x_height_delta_pct": 0,
            "tracking_to_match_px": -2.45,
            "tracking_to_match_em": -0.0437
          },
          "why_not": "h1 +5.4% wide"
        },
        "Hanken Grotesk": {
          "h1": {
            "family": "Hanken Grotesk",
            "weight": 440,
            "width_px": 710,
            "width_delta_pct": 5.9,
            "ink_per_px": 11.98,
            "ink_delta_pct": -0.1,
            "x_height_px": 27.72,
            "x_height_delta_pct": -1.5,
            "tracking_to_match_px": -2.57,
            "tracking_to_match_em": -0.046
          },
          "why_not": "h1 +5.9% wide"
        },
        "Geist": {
          "h1": {
            "family": "Geist",
            "weight": 380,
            "width_px": 727.5,
            "width_delta_pct": 8.5,
            "ink_per_px": 12.023,
            "ink_delta_pct": 0.2,
            "x_height_px": 29.82,
            "x_height_delta_pct": 6,
            "tracking_to_match_px": -3.16,
            "tracking_to_match_em": -0.0564
          },
          "why_not": "h1 +8.5% wide, x-height +6%"
        }
      },
      "winner_mono": {
        "family": "IBM Plex Mono",
        "weight": 400,
        "width_px": 241.9,
        "width_delta_pct": 0,
        "ink_per_px": 3.009,
        "ink_delta_pct": 0.3,
        "x_height_px": 8.32,
        "x_height_delta_pct": 3.5,
        "tracking_to_match_px": 0.48,
        "tracking_to_match_em": 0.03
      },
      "runners_up_mono": {
        "Geist Mono 340": {
          "family": "Geist Mono",
          "weight": 340,
          "width_px": 241.9,
          "width_delta_pct": 0,
          "ink_per_px": 3.02,
          "ink_delta_pct": 0.7,
          "x_height_px": 8.52,
          "x_height_delta_pct": 6,
          "tracking_to_match_px": 0.48,
          "tracking_to_match_em": 0.03
        },
        "JetBrains Mono 300": {
          "family": "JetBrains Mono",
          "weight": 300,
          "width_px": 241.9,
          "width_delta_pct": 0,
          "ink_per_px": 2.973,
          "ink_delta_pct": -0.9,
          "x_height_px": 8.84,
          "x_height_delta_pct": 10,
          "tracking_to_match_px": 0.48,
          "tracking_to_match_em": 0.03
        },
        "Fira Code 380": {
          "family": "Fira Code",
          "weight": 380,
          "width_px": 241.9,
          "width_delta_pct": 0,
          "ink_per_px": 2.953,
          "ink_delta_pct": -1.5,
          "x_height_px": 8.48,
          "x_height_delta_pct": 5.5,
          "tracking_to_match_px": 0.48,
          "tracking_to_match_em": 0.03
        },
        "note": "all 0.6em monospaces match width exactly (241.9px); IBM Plex Mono 400 wins on ink (+0.3%) and x-height (+3.5%), and its slab-serifed I and pointed W match figmaMono's caps"
      },
      "verified": "With the adjusted settings below, Inter renders the h1 at 670.3px (real 670.3), sub 672.9 (672.9), body 542.7 (542.7); IBM Plex Mono 400 + 0.03em renders 241.9 (241.9). (top block = real faces on figma.com, then Inter / Inter Tight / Funnel Sans / Archivo per line, then IBM Plex Mono and Geist Mono)."
    },
    "smoothing": "figma.com sets -webkit-font-smoothing: antialiased on body (observed 2026-10-30). Recipe: leave default smoothing for black/grey text on white, and set -webkit-font-smoothing: antialiased on every black ground (footer, black buttons, outro bar), where white Inter otherwise renders 50% heavier than the reference."
  },
  "style": {
    "button_shape": "rounded rectangles on square media: 8px (46px nav buttons), 16px (84px hero Get started), 24px (136px outro bar), full circles for 36px media controls",
    "motion": "functional: 0.18s ease-out hover fills and arrow nudges; brand motion lives in looping product videos (selection, activation, transformation)",
    "prov": "observed",
    "source": "https://www.figma.com/",
    "date": "2026-10-29"
  },
  "voice": {
    "tone": [
      "Plain",
      "Declarative",
      "Calm"
    ],
    "notes": [
      "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": [
      {
        "id": "headline-case",
        "kind": "headline_case",
        "value": "sentence"
      },
      {
        "id": "adjective",
        "kind": "guidance",
        "text": "Use a Figma mark as an adjective (the Figma platform), never as a noun, verb or possessive",
        "prov": "published",
        "source": "https://www.figma.com/using-the-figma-brand/"
      },
      {
        "id": "compat",
        "kind": "guidance",
        "text": "Say \"for Figma\" (Tom's plugin for Figma design), never \"Tom's Figma plugin\"",
        "prov": "published",
        "source": "https://www.figma.com/using-the-figma-brand/"
      },
      {
        "id": "no-fig",
        "kind": "guidance",
        "text": "Never put Figma or \"Fig\" in your own company, product, domain or handle",
        "prov": "published",
        "source": "https://www.figma.com/using-the-figma-brand/"
      },
      {
        "id": "two-tone",
        "kind": "guidance",
        "text": "Section heads: a black claim sentence, then a grey (#757575) explanation at the same size",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      }
    ],
    "approved": [
      "works with Figma",
      "built using the Figma platform",
      "Tom's plugin for Figma design",
      "Clara's tutorials for FigJam"
    ],
    "banned": [
      "Tom's Figma plugin",
      "Clara's FigJam tutorials",
      "Figma's (possessive, except the company)",
      "to figma (as a verb)"
    ]
  },
  "spec": {
    "page": {
      "source": "https://www.figma.com/",
      "date": "2026-10-29",
      "prov": "observed",
      "nav": {
        "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."
      },
      "sections": [
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
          ]
        },
        {
          "name": "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"
      },
      "dark_ground": {
        "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"
      },
      "settled": [
        "Two-tone heads: Inter 330 -0.45px (any -0.66px is the real face, reference only).",
        "Line heights: 16/22.4 for feature titles, descriptions and text links; 16/23.2 for nav labels and footer links.",
        "Arrow on hover: only the nav \"Get started for free\" and the hero \"Get started\" reveal the arrow; the outro bar never shows one.",
        "Phone tools-grid tiles: 187x234.",
        "Quote: text box 901 wide at x 41 desktop, 357 at x 17 phone (measured 2026-10-30)."
      ]
    },
    "bands": [
      {
        "label": "Nav",
        "ground": "#FFFFFF",
        "content": "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",
        "anatomy": [
          "#D6D6D6 1px hairline via box-shadow",
          "buttons radius 8, 16px labels"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Hero: The full-stack creative canvas",
        "ground": "#FFFFFF",
        "content": "hero",
        "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",
        "anatomy": [
          "56/56 h1 in 3 lines",
          "black 16px-radius button with 30px label",
          "36px pause circle at x 960, y 808"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "AI-native canvas",
        "ground": "#FFFFFF",
        "content": "split media + feature",
        "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",
        "anatomy": [
          "grey continuation #757575",
          "feature: 16px glyph, title, grey description, text link"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "One workspace",
        "ground": "#FFFFFF",
        "content": "centered media + two features",
        "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",
        "anatomy": [
          "video on #F3FFE3 field baked in"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Powerfully expressive",
        "ground": "#FFFFFF",
        "content": "full-bleed grid",
        "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",
        "anatomy": [
          "6 stills + 6 videos",
          "pause circles on videos"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Figma Make",
        "ground": "#FFFFFF",
        "content": "centered heading + full-width media",
        "desktop": "y 4443-5556: heading x 269; video 1360x765 x 40 y 4671; link y 5452",
        "phone": "video full-bleed 390x219 y 4317",
        "anatomy": [
          "#CAFFF9 field baked into the video"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Proof",
        "ground": "#FFFFFF",
        "content": "quote + stat + logo marquee",
        "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",
        "anatomy": [
          "54px dashed #00B6FF avatar ring",
          "95% at 88px",
          "13 black logos scroll left"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Outro CTA",
        "ground": "#FFFFFF",
        "content": "cta",
        "desktop": "y 6216-6616: centered 44px h2 y 6296; black bar 1360x136 radius 24 y 6401",
        "phone": "bar 358x117 y 5669",
        "anatomy": [
          "56px white label"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Explore templates",
        "ground": "#FFFFFF",
        "content": "carousel",
        "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",
        "anatomy": [
          "10 slides, square corners",
          "text-link captions"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "label": "Footer",
        "ground": "#000000",
        "content": "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",
        "anatomy": [
          "mono heads #999999",
          "links white, Inter 300 antialiased",
          "no copyright line"
        ],
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      }
    ],
    "layout": {
      "container_max": 1360,
      "page_margin": {
        "desktop": 40,
        "phone": 16,
        "note": "content box 1360px at x 40-1400 at 1440. Footer alone uses 60px side margins (1320 wide); phone footer 24px"
      },
      "nav_height": 78,
      "nav_margin": {
        "desktop": 40,
        "phone": 16
      },
      "section_padding": {
        "desktop": 80,
        "phone": 40,
        "note": "every <section> in <main> has padding 80px 0 (40px 0 on phones); the gap between two bands is therefore 160px (80 bottom + 80 top). Footer: padding-top 120 desktop, 80 phone; bottom 120 desktop, 48 phone"
      },
      "columns": 12,
      "column_width": 98.67,
      "gutter": 16,
      "columns_phone": 1,
      "gutter_phone": 16,
      "column_xs": [
        40,
        154.67,
        269.33,
        384,
        498.67,
        613.33,
        728,
        842.67,
        957.33,
        1072,
        1186.67,
        1301.33
      ],
      "spans": {
        "three_col": 328,
        "six_col": 672,
        "eight_col": 901,
        "nine_col": 1016,
        "four_up": {
          "width": 328,
          "gutter": 16,
          "xs": [
            40,
            384,
            728,
            1072
          ]
        }
      },
      "heading_block": {
        "width": 901,
        "left": "x 40 (start-aligned bands) or x 269 (centered 8-column bands: One workspace, Start with design context, Ideas no longer)",
        "note": "h2 lead + grey continuation share one 901px block"
      },
      "text_to_media_gap": {
        "desktop": 40,
        "phone": 40,
        "note": "heading block bottom to media top is 40px in every band (e.g. 1126 -> 1166, 2986 -> 3026)"
      },
      "media_to_link_gap": 16,
      "full_bleed_grid": {
        "width": 1440,
        "tile": [
          348,
          435
        ],
        "gutter": 16,
        "xs": [
          0,
          364,
          728,
          1092
        ],
        "row_pitch": 451,
        "note": "the 12-tile tools grid ignores the 40px margin and runs edge to edge; phone: 2 columns of 187, gutter 16, row pitch 250"
      },
      "media_radius": 0,
      "note": "Every image, video and tile is square-cornered. Radius appears only on controls: 8px nav buttons, 16px hero button, 24px outro bar, 4px badges, full circles on 36px icon buttons.",
      "prov": "observed",
      "source": "https://www.figma.com/",
      "date": "2026-10-29",
      "nav_height_detail": {
        "desktop": 78,
        "phone": 78
      }
    },
    "type": [
      {
        "role": "Hero headline (h1)",
        "face": "display",
        "size": {
          "desktop": 56,
          "phone": 36
        },
        "line_height": 1,
        "tracking_px": -1.7,
        "weight": 350,
        "note": "56/56 desktop in 3 lines inside a 328px (3-column) box (\"The full-stack / creative / canvas\"); 36/36 on phones, 2 lines across 358px. figmaSans wdth 96",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -1.25px (observed)",
        "face_note": "Inter stand-in, final recipe (measured: real line 307px wide, ink 12.2/px; Inter 350 -1.7px = 308px, 12.4; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Stat numeral",
        "face": "display",
        "size": {
          "desktop": 88,
          "phone": 72
        },
        "line_height": 1,
        "tracking_px": -2.7,
        "weight": 350,
        "note": "\"95%\" 88/88 desktop, 72/72 phone; wdth 96",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -1.25px (observed)",
        "face_note": "Inter stand-in, final recipe (our reading: same optical setting as the 56px h1, tracking scaled to 88px; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Outro bar label",
        "face": "display",
        "size": {
          "desktop": 56,
          "phone": 36
        },
        "line_height": 1,
        "tracking_px": -1.7,
        "weight": 350,
        "note": "\"Get started\" inside the full-width black bar; white",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -1.25px (observed)",
        "face_note": "Inter stand-in, final recipe (our reading: same as the 56px h1; white on black, so antialiased; 2026-10-30). real_figma_sans is reference only: never use those numbers.",
        "smoothing": "-webkit-font-smoothing: antialiased"
      },
      {
        "role": "Section headline large (h2)",
        "face": "display",
        "size": {
          "desktop": 44,
          "phone": 32
        },
        "line_height": 1.1,
        "tracking_px": -0.66,
        "weight": 340,
        "note": "44/48.4 desktop, 32/35.2 phone: The products you love..., Ideas no longer..., Explore what you can do... Also the pull quote (44/48.4, 32/35.2)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -0.66px (observed)",
        "face_note": "Inter stand-in, final recipe (measured: quote line 1 real 828px wide, ink 9.42; Inter 340 -0.66px = 824px, 9.45; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Section headline (h2, two-tone)",
        "face": "display",
        "size": {
          "desktop": 30,
          "phone": 24
        },
        "line_height": 1.2,
        "tracking_px": -0.45,
        "weight": 330,
        "note": "30/36 desktop, 24/28.8 phone: black lead sentence then #757575 continuation sentence at identical size, as one paragraph block 901px wide",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -0.66px (observed)",
        "face_note": "Inter stand-in, final recipe (measured: \"Move fast...\" real 669px, ink 6.19; Inter 330 -0.45px = 670px, 6.14; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Hero button label",
        "face": "display",
        "size": {
          "desktop": 30,
          "phone": 24
        },
        "line_height": 1.2,
        "tracking_px": -0.45,
        "weight": 330,
        "note": "\"Get started\" in the 224x84 hero button (195x77 on phones)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking -0.66px (observed)",
        "face_note": "Inter stand-in, final recipe (our reading: same as the 30px heads; white on black, so antialiased; 2026-10-30). real_figma_sans is reference only: never use those numbers.",
        "smoothing": "-webkit-font-smoothing: antialiased"
      },
      {
        "role": "Dropdown big link",
        "face": "display",
        "size": {
          "desktop": 24,
          "phone": 24
        },
        "line_height": 1.3,
        "tracking_px": -0.3,
        "weight": 320,
        "note": "Solutions/Resources/Community dropdown links, rows 39px apart; phone menu rows 62px apart",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking 0px (observed)",
        "face_note": "Inter stand-in, final recipe (our reading: interpolated between the measured 30px (330) and 16px (300) settings; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Body / feature title / link",
        "face": "body",
        "size": {
          "desktop": 16,
          "phone": 16
        },
        "line_height": 1.4,
        "tracking_px": -0.12,
        "weight": 300,
        "note": "16/22.4: feature titles (h3, black), feature descriptions (#757575), text links (underlined), quote name and role, nav labels (16/23.2), button labels",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking 0px (observed)",
        "face_note": "Inter stand-in, final recipe (measured: \"Your built-in creative collaborator\" real 239px, ink 2.94; Inter 300 -0.12px = 240px, 2.93; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Small",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 14
        },
        "line_height": 1.45,
        "tracking_px": 0,
        "weight": 300,
        "note": "14/20.3, wdth 100: \"1 of 10\" carousel counter, \"Based on data from March 2025.\" footnote (#757575)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 400, tracking 0px (observed)",
        "face_note": "Inter stand-in, final recipe (our reading: same as 16px body; 2026-10-30). real_figma_sans is reference only: never use those numbers."
      },
      {
        "role": "Footer link",
        "face": "body",
        "size": {
          "desktop": 16,
          "phone": 22
        },
        "line_height": 1.45,
        "tracking_px": -0.5,
        "weight": 300,
        "note": "White #FFFFFF (not grey), 16/23.2, rows 37.3px apart; phones 22/29.7, rows 41.7px apart. Inter 300 -0.5px with -webkit-font-smoothing: antialiased (figma.com sets antialiased on body, observed 2026-10-30). The light, slightly grey look in the reference comes from the thin weight plus antialiasing, never from a grey color.",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaSans weight 320, tracking -0.12px (observed)",
        "face_note": "Inter stand-in, final recipe (measured: \"Figma Design\" real 93px, ink 3.02 (white on black); Inter 300 -0.5px antialiased = 93px, 3.03; 2026-10-30). real_figma_sans is reference only: never use those numbers.",
        "smoothing": "-webkit-font-smoothing: antialiased"
      },
      {
        "role": "Mono label",
        "face": "mono",
        "size": {
          "desktop": 16,
          "phone": 16
        },
        "line_height": 1.3,
        "tracking_px": 0.48,
        "weight": 400,
        "case": "uppercase",
        "note": "figmaMono 16/20.8 +0.48px (+0.64px phone) uppercase: footer column heads in white 60% (#999999). Dropdown group labels: 14px uppercase #757575",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaMono tracking 0.48px (observed)"
      },
      {
        "role": "Badge",
        "face": "mono",
        "size": {
          "desktop": 12,
          "phone": 12
        },
        "line_height": 1,
        "tracking_px": 0.6,
        "weight": 400,
        "case": "uppercase",
        "note": "NEW / BETA: 12/12 +0.6px white on #292929, padding 4.5px 8px, radius 4, 39x21, 8px after the link label",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "real_figma_sans": "figmaMono tracking 0.6px (observed)"
      }
    ],
    "components": {
      "nav_cta": {
        "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",
        "states": {
          "hover": {
            "css": {
              "background-color": "#262626"
            },
            "extra": "label slides left and a 20px arrow-right fades in at the right edge (opacity 0 -> 1, 0.18s ease-out); button width unchanged"
          },
          "focus": {
            "css": {
              "outline": "2px dashed #000000",
              "outline-offset": "4px"
            }
          }
        },
        "transition": "background 0.18s ease-out, box-shadow 0.18s ease-out",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "nav_secondary": {
        "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",
        "states": {
          "hover": {
            "css": {
              "box-shadow": "inset 0 0 0 1px #999999"
            },
            "extra": "arrow-right fades in like the CTA"
          },
          "focus": {
            "css": {
              "outline": "2px dashed #000000",
              "outline-offset": "4px"
            }
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "nav_link": {
        "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",
        "states": {
          "hover": {
            "css": {
              "text-decoration": "underline"
            },
            "extra": "1px underline under the label only, ~4px offset"
          },
          "open": {
            "extra": "chevron rotates 180deg, label stays underlined, panel drops below the bar"
          },
          "focus": {
            "css": {
              "outline": "2px dashed #000000",
              "outline-offset": "4px"
            }
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "hero_button": {
        "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",
        "states": {
          "hover": {
            "css": {
              "background-color": "#262626"
            },
            "extra": "36px arrow-right fades in to the right of the label, label shifts left"
          },
          "focus": {
            "css": {
              "outline": "2px dashed #000000",
              "outline-offset": "4px"
            }
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "outro_bar": {
        "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",
        "states": {
          "hover": {
            "css": {
              "background-color": "#262626"
            }
          },
          "focus": {
            "css": {
              "outline": "2px dashed #000000",
              "outline-offset": "4px"
            }
          }
        },
        "transition": "background, border-radius, box-shadow 0.18s ease-out",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "text_link": {
        "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "media_pause": {
        "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)",
        "states": {
          "toggled": {
            "extra": "glyph becomes play"
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "carousel_button": {
        "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",
        "states": {
          "hover": {
            "css": {
              "box-shadow": "inset 0 0 0 1px #999999"
            }
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "marquee_pause": {
        "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)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "footer_social": {
        "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "footer_badge": {
        "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)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "footer_link": {
        "fill": "none",
        "text": "#FFFFFF",
        "radius": 0,
        "height": 18,
        "font_size": 16,
        "weight": 300,
        "use": "every footer link",
        "states": {
          "hover": {
            "css": {
              "text-decoration": "underline"
            },
            "extra": "1px underline, offset 4.5px"
          },
          "focus": {
            "css": {
              "outline": "2px dashed #FFFFFF",
              "outline-offset": "4px"
            }
          }
        },
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29",
        "tracking_px": -0.5,
        "smoothing": "-webkit-font-smoothing: antialiased",
        "note": "Inter 300 -0.5px antialiased, white; real figmaSans wght 320 (reference only)"
      },
      "feature_item": {
        "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "quote": {
        "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.",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "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": {
        "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      "template_card": {
        "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      }
    },
    "responsive": {
      "measured_at": [
        390,
        1440
      ],
      "rows": [
        {
          "what": "hero headline",
          "values": {
            "390": "36px / 36px, 2 lines",
            "1440": "56px / 56px, 3 lines in 328px"
          }
        },
        {
          "what": "two-tone section heading",
          "values": {
            "390": "24px / 28.8px",
            "1440": "30px / 36px"
          }
        },
        {
          "what": "solo heading, quote",
          "values": {
            "390": "32px / 35.2px",
            "1440": "44px / 48.4px"
          }
        },
        {
          "what": "stat numeral",
          "values": {
            "390": "72px",
            "1440": "88px"
          }
        },
        {
          "what": "side margin",
          "values": {
            "390": "16px (footer 24px)",
            "1440": "40px (footer 60px)"
          }
        },
        {
          "what": "band padding",
          "values": {
            "390": "40px top and bottom",
            "1440": "80px top and bottom"
          }
        },
        {
          "what": "hero",
          "values": {
            "390": "stacked: h1, media 358x431, button 195x77 centered",
            "1440": "three zones: h1 | media 581x700 | button 224x84"
          }
        },
        {
          "what": "media width",
          "values": {
            "390": "358 inset (AI canvas) or 390 full-bleed (One workspace, Make)",
            "1440": "901 / 1131 / 1360"
          }
        },
        {
          "what": "tools grid",
          "values": {
            "390": "2 columns 187x233, 6 rows",
            "1440": "4 columns 348x435, 3 rows, full bleed"
          }
        },
        {
          "what": "features",
          "values": {
            "390": "stacked under the media",
            "1440": "beside (AI canvas) or 2-up under (One workspace)"
          }
        },
        {
          "what": "template cards",
          "values": {
            "390": "265 wide",
            "1440": "328 wide"
          }
        },
        {
          "what": "nav",
          "values": {
            "390": "mark, Get started for free, menu button",
            "1440": "mark, 5 items, Log in, Contact sales, Get started for free"
          }
        },
        {
          "what": "footer links",
          "values": {
            "390": "22px / 29.7px, one column",
            "1440": "16px / 23.2px, 4 columns"
          }
        }
      ],
      "prov": "observed",
      "source": "https://www.figma.com/",
      "date": "2026-10-29"
    },
    "motion": [
      {
        "name": "button-hover",
        "easing": "ease-out",
        "duration_ms": 180,
        "use": "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "link-arrow-nudge",
        "easing": "ease-out",
        "duration_ms": 180,
        "use": "text links: the trailing arrow translates right on hover (transform 0.18s ease-out)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "hero-collage-loop",
        "use": "Vimeo 1202887330, 8s muted loop of overlapping artboards. Resting state = poster hero-collage-poster.jpg; card swaps are animation only",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "section-videos",
        "use": "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "stat-count-up",
        "use": "\"95%\" counts up from a lower number when scrolled into view (reference caught 81%). Resting/final state: 95%. Animation only",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "logo-marquee",
        "use": "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",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "name": "dropdown",
        "use": "nav panels drop below the 78px bar; chevron rotates 180deg; the page behind dims",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      }
    ],
    "signature": [
      {
        "id": "two-tone-heading",
        "name": "Black statement, grey continuation",
        "where": "every section heading on the homepage except the three 44px solo headlines",
        "spec": "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.",
        "dont": "No subtitle in a smaller size, no bold lead-in, no color other than black and 54% black",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "one-weight-type",
        "name": "One light weight, size does the work",
        "where": "whole page",
        "spec": "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.",
        "dont": "Never bold or semibold, never italic, never all-caps sans (caps only in the mono)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "square-media-round-controls",
        "name": "Square media, rounded black controls",
        "where": "all media and buttons",
        "spec": "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.",
        "dont": "No rounded image cards, no drop shadows, no colored buttons, no gradients",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "oversized-get-started",
        "name": "Giant Get started",
        "where": "hero and outro",
        "spec": "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.",
        "dont": "No paired secondary button next to them, no arrow at rest (the arrow appears only on hover)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "product-video-everywhere",
        "name": "Product UI as autoplaying video",
        "where": "hero, AI canvas, One workspace, tools grid, Make",
        "spec": "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).",
        "dont": "No device mockups or browser chrome added in CSS, no captions on the media",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "mono-meta",
        "name": "Uppercase mono for meta labels",
        "where": "footer heads, dropdown group labels, NEW/BETA badges",
        "spec": "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.",
        "dont": "Never mono for headlines or body",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "edge-to-edge-grid",
        "name": "Full-bleed 4x3 tools grid",
        "where": "Powerfully expressive band",
        "spec": "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.",
        "dont": "Do not inset the grid to the 1360 container, no gaps wider than 16",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "white-page-black-footer",
        "name": "All-white page, one black footer",
        "where": "page grounds",
        "spec": "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).",
        "dont": "No grey or pastel CSS section grounds (those belong to the guide page, not the homepage)",
        "prov": "observed",
        "source": "https://www.figma.com/",
        "date": "2026-10-29"
      },
      {
        "id": "logo-outer-edge",
        "name": "Logo on the outer edge with clear space equal to its height",
        "where": "every layout that carries the wordmark or icon",
        "spec": "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.",
        "dont": "Never centre the mark in a crowded composition, never colour the wordmark",
        "prov": "published",
        "source": "https://static.figma.com/uploads/6645755656177435f83e10b48d9947645b55a033 p.4"
      }
    ],
    "how": "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).",
    "voices": {
      "homepage": "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.",
      "guide": "The brand guideline page (using-the-figma-brand) is the campaign/brand voice and uses tinted section grounds (e.g. a pale green band); keep those grounds scoped to brand/campaign pages, never the homepage bands.",
      "precedence": "Where the guide and the site disagree, the guide is brand law; this spec records how the homepage applies it."
    },
    "prov": "observed",
    "source": "https://www.figma.com/",
    "date": "2026-10-29",
    "icons": {
      "style": "24px single-weight line glyphs (arrow-right, chevron, pause/play, globe, social) in black on white or white on #3D3D3D circles; the three feature icons are small black pictograms",
      "files": "study.slot_assets icon.*",
      "prov": "observed",
      "source": "https://www.figma.com/",
      "date": "2026-10-29"
    },
    "wayfinding": {
      "nav": [
        "Products",
        "Solutions",
        "Community",
        "Resources",
        "Pricing"
      ],
      "nav_dropdowns": {
        "Products": "chevron, opens mega panel",
        "Solutions": "chevron, opens mega panel",
        "Community": "chevron, opens panel",
        "Resources": "chevron, opens mega panel",
        "Pricing": "plain link https://www.figma.com/pricing/"
      },
      "dropdown_contents": {
        "Products": [
          {
            "label": "What you can do in figma",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Design and explore",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/design-explore/"
          },
          {
            "label": "Build and ship products",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/build-ship/"
          },
          {
            "label": "Explore all products",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Figma Design",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/design/"
          },
          {
            "label": "Design and prototype in one place",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/design/"
          },
          {
            "label": "Figma Make",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/make/"
          },
          {
            "label": "Prompt to code anything you can imagine",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/make/"
          },
          {
            "label": "Figma Weave",
            "style": "figmaSans 16px #000000",
            "href": "https://weave.figma.com/?utm_source=figma&utm_medium=web&utm_campaign=nav"
          },
          {
            "label": "AI workflows for imagery, video, audio, and more",
            "style": "figmaSans 16px #757575",
            "href": "https://weave.figma.com/?utm_source=figma&utm_medium=web&utm_campaign=nav"
          },
          {
            "label": "Dev Mode",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/dev-mode/"
          },
          {
            "label": "Translate designs into code",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/dev-mode/"
          },
          {
            "label": "Figma Motion",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/motion/"
          },
          {
            "label": "New",
            "style": "figmaMono 14px uppercase #000000",
            "href": "https://www.figma.com/motion/"
          },
          {
            "label": "Animate your designs",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/motion/"
          },
          {
            "label": "Figma Specs",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/specs/"
          },
          {
            "label": "Beta",
            "style": "figmaMono 14px uppercase #000000",
            "href": "https://www.figma.com/specs/"
          },
          {
            "label": "Capture intent and share context",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/specs/"
          },
          {
            "label": "FigJam",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/figjam/"
          },
          {
            "label": "Collaborate with a digital whiteboard",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/figjam/"
          },
          {
            "label": "Figma Slides",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/slides/"
          },
          {
            "label": "Co-create presentations",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/slides/"
          },
          {
            "label": "Figma Draw",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/draw/"
          },
          {
            "label": "Illustrate with advanced vector tools",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/draw/"
          },
          {
            "label": "Figma Sites",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/sites/"
          },
          {
            "label": "Beta",
            "style": "figmaMono 14px uppercase #000000",
            "href": "https://www.figma.com/sites/"
          },
          {
            "label": "Publish fully responsive websites",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/sites/"
          },
          {
            "label": "Figma Buzz",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/buzz/"
          },
          {
            "label": "Beta",
            "style": "figmaMono 14px uppercase #000000",
            "href": "https://www.figma.com/buzz/"
          },
          {
            "label": "Produce on-brand assets at scale",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/buzz/"
          },
          {
            "label": "Additional product resources",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "AI workflows",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/ai/"
          },
          {
            "label": "Release notes",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/release-notes/"
          },
          {
            "label": "Downloads",
            "style": "figmaSans 16px #000000",
            "href": "https://www.figma.com/downloads/"
          }
        ],
        "Solutions": [
          {
            "label": "Use cases",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Design systems",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/design-systems/"
          },
          {
            "label": "Prototyping",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/prototyping/"
          },
          {
            "label": "UX design",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/ux-design-tool/"
          },
          {
            "label": "Web design",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/web-design/"
          },
          {
            "label": "Wireframing",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/wireframe-tool/"
          },
          {
            "label": "Online whiteboard",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/figjam/online-whiteboard/"
          },
          {
            "label": "Agile",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/figjam/agile-workflows/"
          },
          {
            "label": "Strategic planning",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/figjam/strategic-planning/"
          },
          {
            "label": "Brainstorming",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/figjam/brainstorming-tool/"
          },
          {
            "label": "Diagramming",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/figjam/diagramming-tool/"
          },
          {
            "label": "Product development",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/product-development/"
          },
          {
            "label": "Web development",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/web-development/"
          },
          {
            "label": "Design handoff",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/design-handoff/"
          },
          {
            "label": "See all solutions",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/solutions/"
          },
          {
            "label": "Roles",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Design",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/designers/"
          },
          {
            "label": "Engineering",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/engineers/"
          },
          {
            "label": "Product managers",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/product-managers/"
          },
          {
            "label": "Organizations",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Enterprise",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/enterprise/"
          },
          {
            "label": "Education",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/education/"
          },
          {
            "label": "Government",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/government/"
          }
        ],
        "Community": [
          {
            "label": "Events",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/events-and-webinars/#upcoming-events"
          },
          {
            "label": "Learn best practices at virtual events",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/events-and-webinars/#upcoming-events"
          },
          {
            "label": "User groups",
            "style": "figmaSans 24px #000000",
            "href": "https://friends.figma.com/"
          },
          {
            "label": "Join a local Friends of Figma group",
            "style": "figmaSans 16px #757575",
            "href": "https://friends.figma.com/"
          },
          {
            "label": "Customer stories",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/customers/"
          },
          {
            "label": "Read about leading product teams",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/customers/"
          }
        ],
        "Resources": [
          {
            "label": "Shortcut: The Figma blog",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/blog/"
          },
          {
            "label": "Stories about how products take shape—and shape our world",
            "style": "figmaSans 16px #757575",
            "href": "https://www.figma.com/blog/"
          },
          {
            "label": "Get started",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Plugins",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/community/plugins"
          },
          {
            "label": "UI kits",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/community/category/ui-kits"
          },
          {
            "label": "Icons",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/community/category/icons"
          },
          {
            "label": "Widgets",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/community/widgets"
          },
          {
            "label": "Templates",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/templates/"
          },
          {
            "label": "Tools",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/tools/"
          },
          {
            "label": "Partners",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/partners/"
          },
          {
            "label": "See all",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/community"
          },
          {
            "label": "Learn",
            "style": "figmaMono 14px uppercase #757575",
            "href": ""
          },
          {
            "label": "Best practices",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/best-practices/"
          },
          {
            "label": "Reports & insights",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/reports/"
          },
          {
            "label": "Resource library",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/resource-library/"
          },
          {
            "label": "Demos",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/demo/"
          },
          {
            "label": "Webinars",
            "style": "figmaSans 24px #000000",
            "href": "https://www.figma.com/events-and-webinars/#on-demand"
          },
          {
            "label": "Help center",
            "style": "figmaSans 24px #000000",
            "href": "https://help.figma.com/hc/en-us"
          },
          {
            "label": "Figma Support",
            "style": "figmaSans 24px #000000",
            "href": "https://help.figma.com/hc/en-us/requests/new"
          }
        ]
      },
      "utility": [
        "Log in",
        "Contact sales",
        "Get started for free"
      ],
      "utility_hrefs": [
        "https://www.figma.com/login",
        "https://www.figma.com/contact/",
        "https://www.figma.com/signup"
      ],
      "phone_nav": {
        "bar": [
          "Figma mark",
          "Get started for free",
          "Open navigation menu (icon button)"
        ],
        "menu": [
          "Products",
          "Solutions",
          "Community",
          "Resources",
          "Pricing",
          "Log in"
        ],
        "menu_footer_buttons": [
          "Get started",
          "Contact sales"
        ],
        "note": "full-screen white sheet: 24px rows 62px apart with #D6D6D6 rules between, down-arrow on the four dropdown rows, close X top-right; a Google One Tap prompt overlaid the sheet bottom in the capture (third-party, not part of the page)"
      },
      "skip_link": "Skip to main content (visually hidden, href #main)",
      "footer_columns": [
        {
          "title": "PRODUCT",
          "title_as_rendered": "PRODUCT",
          "title_source_case": "Product",
          "links": [
            "Figma Design",
            "Figma Make",
            "Figma Weave [NEW badge]",
            "Dev Mode",
            "Figma Motion [NEW badge]",
            "Figma Specs [BETA badge]",
            "FigJam",
            "Figma Slides",
            "Figma Draw",
            "Figma Sites [BETA badge]",
            "Figma Buzz [BETA badge]",
            "Figma agent",
            "Design and explore",
            "Build and ship products",
            "AI workflows",
            "Release notes",
            "Downloads"
          ],
          "hrefs": [
            "https://www.figma.com/design/",
            "https://www.figma.com/make/",
            "https://weave.figma.com/",
            "https://www.figma.com/dev-mode/",
            "https://www.figma.com/motion/",
            "https://www.figma.com/specs/",
            "https://www.figma.com/figjam/",
            "https://www.figma.com/slides/",
            "https://www.figma.com/draw/",
            "https://www.figma.com/sites/",
            "https://www.figma.com/buzz/",
            "https://www.figma.com/agent/",
            "https://www.figma.com/design-explore/",
            "https://www.figma.com/build-ship/",
            "https://www.figma.com/ai/",
            "https://www.figma.com/release-notes/",
            "https://www.figma.com/downloads/"
          ]
        },
        {
          "title": "PLANS",
          "title_as_rendered": "PLANS",
          "title_source_case": "Plans",
          "links": [
            "Pricing",
            "Enterprise",
            "Organization",
            "Professional"
          ],
          "hrefs": [
            "https://www.figma.com/pricing/",
            "https://www.figma.com/enterprise/",
            "https://www.figma.com/organization/",
            "https://www.figma.com/professional/"
          ]
        },
        {
          "title": "USE CASES",
          "title_as_rendered": "USE CASES",
          "title_source_case": "Use cases",
          "links": [
            "UI design",
            "UX design",
            "Wireframing",
            "Diagramming",
            "Prototyping",
            "Brainstorming",
            "Presentation Maker",
            "Online whiteboard",
            "Strategic planning",
            "Mind mapping",
            "AI website generator",
            "AI design generator",
            "AI app builder",
            "AI UI generator",
            "Weave AI tool"
          ],
          "hrefs": [
            "https://www.figma.com/ui-design-tool/",
            "https://www.figma.com/ux-design-tool/",
            "https://www.figma.com/wireframe-tool/",
            "https://www.figma.com/figjam/diagramming-tool/",
            "https://www.figma.com/prototyping/",
            "https://www.figma.com/figjam/brainstorming-tool/",
            "https://www.figma.com/presentation-maker/",
            "https://www.figma.com/figjam/online-whiteboard/",
            "https://www.figma.com/figjam/strategic-planning/",
            "https://www.figma.com/figjam/mind-map/",
            "https://www.figma.com/solutions/ai-website-generator/",
            "https://www.figma.com/solutions/ai-design-generator/",
            "https://www.figma.com/solutions/ai-app-builder/",
            "https://www.figma.com/solutions/ai-ui-generator/",
            "https://www.figma.com/solutions/figma-ai-tool-weave/"
          ]
        },
        {
          "title": "RESOURCES",
          "title_as_rendered": "RESOURCES",
          "title_source_case": "Resources",
          "links": [
            "Blog",
            "Best practices",
            "Gradient Library",
            "Gradient Generator",
            "GIF maker",
            "Color wheel",
            "Colors",
            "Color picker",
            "Font Library",
            "Templates",
            "Developers",
            "Integrations",
            "Affiliate program",
            "Resource library",
            "Reports and insights",
            "Support",
            "Status",
            "Legal and privacy",
            "Modern slavery statement",
            "Climate disclosure statement",
            "Impressum"
          ],
          "hrefs": [
            "https://www.figma.com/blog/",
            "https://www.figma.com/best-practices/",
            "https://www.figma.com/gradients/",
            "https://www.figma.com/gradient-generator/",
            "https://www.figma.com/gif-maker/",
            "https://www.figma.com/color-wheel/",
            "https://www.figma.com/colors/",
            "https://www.figma.com/color-picker/",
            "https://www.figma.com/fonts/",
            "https://www.figma.com/templates/",
            "https://www.figma.com/developers",
            "https://www.figma.com/product-integrations/",
            "https://www.figma.com/affiliate-program/",
            "https://www.figma.com/resource-library/",
            "https://www.figma.com/reports/",
            "https://help.figma.com/hc/en-us",
            "https://status.figma.com/",
            "https://www.figma.com/legal/",
            "https://static.figma.com/uploads/35bc6db4415269cfeace41c8c4637945a85732b2.pdf",
            "https://static.figma.com/uploads/d2a204b5cc4d64ff539fcd445d0ddedab7dc00f6",
            "https://www.figma.com/legal/impressum/"
          ]
        },
        {
          "title": "COMPANY",
          "title_as_rendered": "COMPANY",
          "title_source_case": "Company",
          "links": [
            "Events",
            "Customers",
            "Careers",
            "Newsroom",
            "Brand assets"
          ],
          "hrefs": [
            "https://www.figma.com/events/",
            "https://www.figma.com/customers/",
            "https://www.figma.com/careers/",
            "https://www.figma.com/newsroom/",
            "https://www.figma.com/using-the-figma-brand/"
          ]
        }
      ],
      "footer_column_layout": "desktop: PRODUCT column also holds PLANS beneath it (x 510); USE CASES x 750; RESOURCES x 990; COMPANY x 1230. Phone: one column in the order PRODUCT, PLANS, USE CASES, RESOURCES, COMPANY",
      "legal": [
        "Legal and privacy",
        "Modern slavery statement",
        "Climate disclosure statement",
        "Impressum"
      ],
      "legal_note": "No separate legal row and no copyright line anywhere on the page; the legal links sit inside the RESOURCES column. No postal address or phone number on the homepage",
      "social": [
        {
          "label": "X",
          "href": "https://x.com/figma"
        },
        {
          "label": "YouTube",
          "href": "https://www.youtube.com/figmadesign"
        },
        {
          "label": "Instagram",
          "href": "https://www.instagram.com/figma"
        },
        {
          "label": "Facebook",
          "href": "https://www.facebook.com/figmadesign"
        }
      ],
      "language": {
        "label": "English",
        "anatomy": "globe icon 22px + \"English\" 16px white + 20px caret, transparent button 118x39 at x 60 (desktop) / x 24 (phone), last item in the footer"
      },
      "homepage_links": [
        "Explore Figma's agent",
        "Explore design tools",
        "Explore build tools",
        "Explore Figma Design",
        "Explore Figma Make",
        "Browse all templates",
        "UI Kits",
        "Websites",
        "Social media",
        "Mobile apps",
        "Presentations",
        "Wireframes",
        "Illustrations",
        "Portfolios",
        "Web ads",
        "Icons",
        "Get started (hero)",
        "Get started (outro bar)"
      ],
      "prov": "observed",
      "source": "https://www.figma.com/",
      "date": "2026-10-29"
    },
    "breakpoints": {
      "all": [
        480,
        560,
        768,
        960,
        1024,
        1280,
        1440,
        1920
      ],
      "phone_max": 559,
      "prov": "observed",
      "source": "https://www.figma.com/",
      "date": "2026-10-29",
      "note": "min-width media queries in the homepage CSS on 2026-10-29, most used: 1024 (44 rules), 480 (29), 960 (18), 1280 (17); one max-width 559 phone query"
    }
  },
  "system": {
    "fixed": [
      "Wordmark black or white",
      "Icon colors never changed",
      "One light weight of Figma Sans",
      "Square media, black buttons"
    ],
    "flex": "Color scheme, primitives and composition move in campaign work.",
    "traits": [
      {
        "is": "Plain-spoken",
        "not": "Hyped",
        "text": "Section heads state a claim and explain it in grey.",
        "prov": "observed",
        "source": "https://www.figma.com/"
      },
      {
        "is": "Collaborative",
        "not": "Solo genius",
        "text": "Teammates and agents in one space; the identity was made by the whole team.",
        "prov": "published",
        "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/"
      },
      {
        "is": "Playful in campaign",
        "not": "Playful in UI",
        "text": "Jumbo primitives and neon schemes stay in brand work; the product page stays black and white.",
        "prov": "inferred",
        "why": "Compare the refresh post imagery with the homepage."
      },
      {
        "is": "Crafted",
        "not": "Decorated",
        "text": "Motion principles: craft, interactivity, freeform.",
        "prov": "published",
        "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/"
      }
    ]
  },
  "proportion": {
    "note": "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%).",
    "source": "https://www.figma.com/",
    "parts": [
      {
        "name": "White bands",
        "hex": "#FFFFFF",
        "n": 74
      },
      {
        "name": "Product imagery grid",
        "n": 15
      },
      {
        "name": "Black footer",
        "hex": "#000000",
        "n": 11
      }
    ],
    "prov": "observed"
  },
  "tone_by_state": {
    "note": "Two voices. The homepage is plain and product-led; the brand language (primitives, schemes, billboards) is louder. Levels are our reading.",
    "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/",
    "states": [
      {
        "state": "Homepage and product pages",
        "level": 1
      },
      {
        "state": "Campaigns, events and community",
        "level": 4
      }
    ]
  },
  "formats": [
    {
      "format": "Landing page",
      "level": 1,
      "must": "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",
      "flex": "which product sections follow the hero and what media fills them"
    },
    {
      "format": "Deck",
      "level": 2,
      "must": "White slides, one light weight, black wordmark on the outer edge, product imagery square",
      "flex": "one color scheme for section dividers"
    },
    {
      "format": "Social",
      "level": 3,
      "must": "Jumbo primitives in one scheme, wordmark black or white",
      "flex": "composition move: overlap, reveal, cluster"
    },
    {
      "format": "Event / out of home",
      "level": 4,
      "must": "Primitives at billboard scale, short two-word line",
      "flex": "scheme and activation state"
    },
    {
      "format": "Email",
      "level": 1,
      "must": "White, black type, one black button, square product image",
      "flex": "one primitive accent"
    }
  ],
  "checks": [
    {
      "name": "Logo hidden",
      "text": "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."
    },
    {
      "name": "Swap test",
      "text": "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."
    }
  ],
  "examples": [
    {
      "chapter": "color",
      "do": {
        "ground": "paper",
        "text": "Get started",
        "button": true
      },
      "do_caption": "The one call to action: a solid black button with white text on white.",
      "dont": {
        "ground": "paper",
        "text": "Get started",
        "ink": "accent_secondary"
      },
      "dont_caption": "Purple text or buttons: on figma.com brand color lives in imagery, not UI."
    },
    {
      "chapter": "logo",
      "do": {
        "ground": "paper",
        "text": "Figma"
      },
      "do_caption": "Black wordmark on white, clear space equal to its height.",
      "dont": {
        "ground": "paper",
        "text": "Figma Edu"
      },
      "dont_caption": "Never connect the wordmark to other words."
    },
    {
      "chapter": "voice",
      "do": {
        "ground": "paper",
        "text": "Tom's plugin for Figma design"
      },
      "do_caption": "Say what works with Figma.",
      "dont": {
        "ground": "paper",
        "text": "Tom's Figma plugin"
      },
      "dont_caption": "Implies Figma made or endorses it."
    },
    {
      "chapter": "type",
      "do": {
        "ground": "paper",
        "text": "Move fast in the right direction."
      },
      "do_caption": "One light weight, sentence case; a grey sentence follows.",
      "dont": {
        "ground": "paper",
        "text": "MOVE FAST IN THE RIGHT DIRECTION"
      },
      "dont_caption": "No bold, no all-caps sans."
    },
    {
      "chapter": "logo",
      "do": {
        "ground": "night",
        "text": "Figma",
        "ink": "on_night"
      },
      "do_caption": "White wordmark on black.",
      "dont": {
        "ground": "accent_secondary",
        "text": "Figma",
        "ink": "on_night"
      },
      "dont_caption": "Wordmark on a color ground: use approved grounds that pass APCA."
    }
  ],
  "make_it_yours": {
    "note": "Everything above transfers. These are Figma's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
    "replace": [
      "identity",
      "purpose",
      "positioning",
      "messaging.pillars",
      "messaging.proof_points",
      "messaging.taglines",
      "messaging.boilerplate"
    ],
    "reference": {
      "purpose": {
        "mission": {
          "label": "Not published on the public brand pages",
          "text": "The homepage implies it: help teams move from idea to shipped product together.",
          "prov": "inferred",
          "why": "No mission statement on using-the-figma-brand or in the Brand Book PDF."
        },
        "story": {
          "text": "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.",
          "prov": "published",
          "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/"
        },
        "values": []
      },
      "positioning": {
        "statement": {
          "text": "Figma presents itself as the full-stack creative canvas: one place where teammates and AI agents design, build and ship together.",
          "prov": "observed",
          "source": "https://www.figma.com/",
          "date": "2026-10-29"
        },
        "category": {
          "text": "Collaborative design and product-development platform: Figma Design, Make, Weave, Dev Mode, Motion, Specs, FigJam, Slides, Draw, Sites, Buzz (footer Product column).",
          "prov": "observed",
          "source": "https://www.figma.com/",
          "date": "2026-10-29"
        },
        "audience": {
          "text": "Whole product teams, not only designers: Figma says only about a third of its users identify as designers.",
          "prov": "published",
          "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/"
        },
        "promise": {
          "text": "Go from idea to shipped product in one shared space, with your team and your agents.",
          "prov": "inferred",
          "why": "Paraphrase of the hero H1 and the two section heads that follow it (AI-native canvas, one workspace from WIP to ship)."
        },
        "differentiators": [
          {
            "text": "Multiplayer: teammates and AI agents in the same file with shared context",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          },
          {
            "text": "95% of the Fortune 500 uses Figma (Figma's figure, based on March 2025 data)",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          }
        ]
      },
      "messaging": {
        "taglines": [
          {
            "text": "The full-stack creative canvas",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "where": "homepage H1",
            "date": "2026-10-29"
          },
          {
            "text": "Make. Believe.",
            "prov": "published",
            "source": "https://www.figma.com/blog/figma-on-figma-evolving-our-visual-language/",
            "where": "billboard shown in the 2024 visual-language launch post"
          }
        ],
        "attributes": [
          "plain",
          "declarative",
          "collaborative",
          "craft-minded"
        ],
        "pillars": [
          {
            "name": "Design",
            "claim": "Design anything you can imagine: ideas into apps, websites and products (homepage feature).",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          },
          {
            "name": "Build",
            "claim": "Build with intention: tools that take you all the way to production (homepage feature).",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          },
          {
            "name": "AI-native",
            "claim": "Teammates and AI agents work in the same space with shared context (homepage section).",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          },
          {
            "name": "Proof",
            "claim": "The products you love are designed in Figma: customer quote, 95% of the Fortune 500, a logo marquee.",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          }
        ],
        "proof_points": [
          {
            "text": "95% of the Fortune 500 uses Figma (based on data from March 2025)",
            "prov": "observed",
            "source": "https://www.figma.com/",
            "date": "2026-10-29"
          }
        ],
        "key_messages": [],
        "boilerplate": {
          "text": "Not published on the public brand pages.",
          "prov": "inferred",
          "why": "Neither using-the-figma-brand nor the Brand Book PDF carries a company boilerplate."
        }
      }
    }
  }
}