{
  "schema": "brand-kit@2",
  "palette": {
    "paper": "#FAFAFA",
    "surface": "#FFF1F8",
    "ink": "#000000",
    "ink_muted": "#414141",
    "accent": "#00D230",
    "on_accent": "#000000",
    "accent_secondary": "#FF97E2",
    "night": "#161616",
    "on_night": "#FFFFFF",
    "extras": [
      {
        "name": "strong-white",
        "hex": "#FFFFFF",
        "role": "Page ground on mozilla.org (nav, products, editorial and news bands) and all type on dark grounds",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "orange",
        "hex": "#FF9456",
        "role": "Grassroots pop",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "orange-plus-1",
        "hex": "#FAF0E6",
        "role": "Story grid band ground on the homepage",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "green-plus-1",
        "hex": "#D6FFCD",
        "role": "Tint ground (guide)",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "green-minus-1",
        "hex": "#28733F",
        "role": "Shade for focused-range pieces",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "green-minus-2",
        "hex": "#022611",
        "role": "Nav link hover text on mozilla.org; deep ground in the guide",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "pink-minus-1",
        "hex": "#AE49EC",
        "role": "Shade for focused-range pieces",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "pink-minus-2",
        "hex": "#210340",
        "role": "Deep ground",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "orange-minus-1",
        "hex": "#FF453F",
        "role": "Shade for focused-range pieces",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "orange-minus-2",
        "hex": "#330505",
        "role": "Deep ground",
        "prov": "published",
        "source": "https://brand.mozilla.com/document/231#/-/color"
      },
      {
        "name": "light-mid-gray",
        "hex": "#E8E8E8",
        "role": "The 2px bottom border of the white nav",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "mid-gray",
        "hex": "#B3B3B3",
        "role": "Footer column headings on #161616",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "dark-mid-gray",
        "hex": "#6D6D6D",
        "role": "News list metadata (type, topic, author) on phones",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "report-yellow",
        "hex": "#FEFEBB",
        "role": "Ground of the State of Mozilla report artwork (inside the image on the homepage); use only to rebuild that one feature",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "footer-icon-gray",
        "hex": "#7F7F7F",
        "role": "Rendered color of the footer social icons (white at 45% opacity on #161616)",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      }
    ]
  },
  "typography": {
    "display": {
      "family": "Mozilla Headline",
      "weight": 600,
      "tracking": -0.01,
      "line_height": 1,
      "fallback_stack": "\"Helvetica Neue\", Arial, sans-serif",
      "google_fonts": "Mozilla+Headline:wght@400;600"
    },
    "body": {
      "family": "Mozilla Text",
      "weight": 400,
      "line_height": 1.25,
      "scale": 1,
      "fallback_stack": "\"Helvetica Neue\", Arial, sans-serif",
      "google_fonts": "Mozilla+Text:wght@400;600;700"
    },
    "calibration": "mozilla.org loads static woff2 files for Mozilla Text 400, 600 and 700 only (Headline 400 and 600), sets body { -webkit-font-smoothing: antialiased }, letter-spacing normal on all text, no optical sizing. Its CSS asks for weight 500 on section intros, but no 500 file exists, so browsers render them at 400. Load the same weights and smoothing, and set intros at 400: a 500 from the variable font renders visibly heavier than the live site (observed 2026-10-29)"
  },
  "style": {
    "button_shape": "square",
    "motion": "global curve cubic-bezier(0.68, 0, 0.12, 1) over 0.8s; Fearless, Optimistic and Insightful easings for bold, welcoming or deliberate moves"
  },
  "voice": {
    "tone": [
      "Passionate",
      "Welcoming",
      "No bullsh*t"
    ],
    "notes": [
      "Relatable expertise with a dash of wit.",
      "Talk about technology in human terms so people can understand it and act.",
      "Humor is allowed to win attention or aid understanding, never to punch down.",
      "The voice moves along one spectrum: serious for governments, expressive for grassroots.",
      "Mozilla's \"we\" is bigger than Mozilla: reclaiming the internet is something everyone does together."
    ],
    "rules": [
      {
        "id": "headline-case",
        "kind": "headline_case",
        "value": "sentence"
      },
      {
        "id": "plain-language",
        "kind": "guidance",
        "text": "Plain language; avoid jargon"
      },
      {
        "id": "spell-out-acronyms",
        "kind": "guidance",
        "text": "Spell out acronyms and initialisms at first use"
      },
      {
        "id": "impact-not-grandstanding",
        "kind": "guidance",
        "text": "Start and end with real, tangible impact, not intellectual grandstanding"
      },
      {
        "id": "no-fluff",
        "kind": "guidance",
        "text": "Cut to the chase; say what needs saying without fluff"
      },
      {
        "id": "translatable",
        "kind": "guidance",
        "text": "Keep phrases and concepts easy to translate"
      },
      {
        "id": "sign-off",
        "kind": "guidance",
        "text": "Use the brand promise as a sign-off: Reclaim the internet with us"
      },
      {
        "id": "internet-not-web",
        "kind": "prefer",
        "term": "internet",
        "over": [
          "web"
        ],
        "prov": "published"
      },
      {
        "id": "contractions",
        "kind": "guidance",
        "text": "Use contractions",
        "prov": "published"
      },
      {
        "id": "oxford-comma",
        "kind": "guidance",
        "text": "No Oxford comma unless it prevents confusion",
        "prov": "published"
      },
      {
        "id": "dates",
        "kind": "guidance",
        "text": "Dates as YYYY-MM-DD in data, documents and reports; on web pages and event copy write them as the site does, \"Oct. 28–30\" (abbreviated month with a period, en dash ranges)",
        "prov": "published"
      },
      {
        "id": "spelling",
        "kind": "spelling",
        "value": "en-US",
        "prov": "published"
      },
      {
        "id": "cta-case",
        "kind": "guidance",
        "text": "Sentence case for calls to action and buttons too",
        "prov": "published"
      },
      {
        "id": "web-invitation",
        "kind": "guidance",
        "text": "On web pages, invitation and reassurance outweigh opposition: at most one oppositional line per section, and the hero welcomes rather than attacks",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      }
    ]
  },
  "spec": {
    "source": "https://www.mozilla.org/en-US/",
    "how": "computed styles, stylesheet rules and bounding boxes at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29 (consent banner not shown in this region)",
    "provenance": "observed",
    "layout": {
      "page_margin": {
        "desktop": 32,
        "phone": 16,
        "tablet": 24
      },
      "section_padding": {
        "desktop": 64,
        "phone": 32,
        "tablet": 64
      },
      "band_step_height": {
        "desktop": 90,
        "phone": 40
      },
      "hero_text_max": 912,
      "nav_height": 56,
      "card_gap": 16,
      "two_up_card_width_at_1440": 680,
      "three_up_card_width_at_1440": 448,
      "gutter": 16,
      "gutter_phone": 8,
      "columns": 12,
      "columns_phone": 1,
      "container_max": 1440
    },
    "type": [
      {
        "role": "Hero headline",
        "face": "display",
        "size": {
          "desktop": 128,
          "tablet": 80,
          "phone": 48
        },
        "line_height": 1,
        "tracking_px": -1.28,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Section headline",
        "face": "display",
        "size": {
          "desktop": 80,
          "tablet": 64,
          "phone": 32
        },
        "line_height": 1,
        "tracking_px": -0.8,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Card title",
        "face": "display",
        "size": {
          "desktop": 32,
          "tablet": 24,
          "phone": 24
        },
        "line_height": 1.1,
        "tracking_px": -0.32,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Year label",
        "face": "display",
        "size": {
          "desktop": 48,
          "tablet": 32,
          "phone": 24
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Call-to-action link",
        "face": "display",
        "size": {
          "desktop": 32,
          "tablet": 24,
          "phone": 18
        },
        "line_height": 1.1,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Hero subline",
        "id": "lead",
        "face": "body",
        "size": {
          "desktop": 24,
          "tablet": 32,
          "phone": 18
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed",
        "note": "Weight 400. 32px at 768-1023 then 24px from 1024 is a real jump in their CSS."
      },
      {
        "role": "Section intro",
        "face": "body",
        "size": {
          "desktop": 24,
          "tablet": 24,
          "phone": 18
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed",
        "note": "CSS says 500 but the site loads no 500 file, so it renders at 400. Set 400. The one bold intro (Story grid) is an inline <b> at 700."
      },
      {
        "role": "Product name",
        "face": "body",
        "size": {
          "desktop": 24,
          "tablet": 24,
          "phone": 18
        },
        "line_height": 1,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Nav link",
        "face": "body",
        "size": {
          "desktop": 18,
          "tablet": 18,
          "phone": 16
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Body",
        "face": "body",
        "size": {
          "desktop": 18,
          "tablet": 18,
          "phone": 16
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed"
      },
      {
        "role": "Muted description",
        "face": "body",
        "size": {
          "desktop": 18,
          "tablet": 18,
          "phone": 14
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed"
      },
      {
        "role": "Tile description",
        "face": "body",
        "size": {
          "desktop": 16,
          "tablet": 16,
          "phone": 14
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed"
      },
      {
        "role": "Text link",
        "face": "body",
        "size": {
          "desktop": 18,
          "tablet": 18,
          "phone": 14
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Tag",
        "face": "body",
        "size": {
          "desktop": 14,
          "tablet": 14,
          "phone": 14
        },
        "line_height": 1.25,
        "tracking_px": 0,
        "weight": 700,
        "prov": "observed"
      },
      {
        "role": "Footer heading",
        "face": "display",
        "size": {
          "desktop": 16,
          "tablet": 16,
          "phone": 14
        },
        "line_height": 1.1,
        "tracking_px": -0.16,
        "weight": 600,
        "prov": "observed"
      },
      {
        "role": "Legal",
        "face": "body",
        "size": {
          "desktop": 14,
          "tablet": 14,
          "phone": 12
        },
        "line_height": 1.5,
        "tracking_px": 0,
        "weight": 400,
        "prov": "observed"
      }
    ],
    "components": {
      "button_primary": {
        "fill": "night",
        "text": "on_night",
        "ring_px": 2,
        "ring": "ink",
        "radius": 0,
        "height": 40,
        "padding_x": 16,
        "font_size": 16,
        "weight": 600,
        "states": {
          "hover": {
            "css": {
              "background-color": "#FFFFFF",
              "color": "#000000"
            },
            "measured": {
              "fill": "#FFFFFF",
              "text": "#000000",
              "border": "2px solid #FFFFFF",
              "transition": "background-color, border-color, color 0.1s"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/",
            "also": [
              "https://www.firefox.com/en-US/"
            ]
          },
          "focus": {
            "css": {
              "background-color": "#FFFFFF",
              "color": "#000000",
              "box-shadow": "0 0 0 2px rgba(0, 144, 237, 0.5)",
              "outline-offset": "4px"
            },
            "measured": {
              "fill": "#FFFFFF",
              "text": "#000000",
              "box_shadow": "0 0 0 2px rgba(0,144,237,0.5)",
              "outline": "browser default auto ring, offset 4px"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/",
            "also": [
              "https://www.firefox.com/en-US/"
            ]
          },
          "active": {
            "css": {
              "background-color": "#FFFFFF",
              "color": "#000000"
            },
            "measured": {
              "note": "Protocol base: :active = :hover (white fill, black text)"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/",
            "also": [
              "https://www.firefox.com/en-US/"
            ]
          },
          "disabled": {
            "css": {
              "opacity": "0.6",
              "pointer-events": "none"
            },
            "measured": {
              "opacity": 0.6,
              "pointer_events": "none"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/",
            "also": [
              "https://www.firefox.com/en-US/"
            ]
          }
        },
        "note": "Square #161616 button, 40px, 2px ring. mozilla.org's homepage shows it only on dark (the footer Sign Up and Donate, see button_on_dark); on light grounds the ring is black. It inverts on hover. There is no green button on mozilla.org."
      },
      "cta_link": {
        "face": "display",
        "text": "ink",
        "underline_px": 2,
        "weight": 600,
        "font_size": "18px under 768, 24px at 768-1311, 32px from 1312",
        "line_height": 1.1,
        "anatomy": "Mozilla Headline 600 link, no box. The underline is a background: linear-gradient(to right, currentColor 0 33%, transparent 33% 66%, currentColor 66% 100%), background-size 400% 2px, background-repeat no-repeat, background-position left 100% top 100% at rest. Hover moves it to left 0% over 0.8s cubic-bezier(0.5, 0, 0, 1), so the line wipes out through the gap and back in. Text color never changes. Hero CTA sits left under the subline; every section-end CTA is right-aligned (text-align end).",
        "note": "One easing for every UI hover on mozilla.org: cubic-bezier(0.5, 0, 0, 1). The 0.68/0.12 global curve is for brand animation, not links.",
        "states": {
          "hover": {
            "css": {
              "background-position": "left 0% top 100%",
              "transition": "background-position 0.8s cubic-bezier(0.5, 0, 0, 1)"
            },
            "measured": {
              "underline": "background-position 100% to 0% over 0.8s cubic-bezier(0.5, 0, 0, 1)",
              "color": "unchanged"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          },
          "focus": {
            "css": {
              "outline": "auto",
              "outline-offset": "4px"
            },
            "measured": {
              "outline": "browser default ring, offset 4px",
              "color": "unchanged"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          }
        },
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "pill_label": {
        "fill": "paper",
        "text": "ink",
        "radius": 0,
        "height": 32,
        "padding_x": 8,
        "font_size": 14,
        "weight": 700,
        "anatomy": "The tile tag: #FAFAFA box, 32px tall, 8px side padding, Mozilla Text 14px 700 black, square corners, absolutely placed 8px from the top-left corner of the tile image. Live HTML over the image, never baked into it.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "card": {
        "fill": "none",
        "radius": 0,
        "shadow": "none",
        "border": "none",
        "anatomy": "Gallery tile, no box: image (order 1) with optional tag at 8,8; 16px gap; title Mozilla Headline 32px/35.2px 600 (24px under 1024); 4px gap; description Mozilla Text 16px/20px 400 black (14px on phones); 16px gap; text link Mozilla Text 18px 600 underlined (14px on phones). Title underlines on hover. Two-up tiles 680px wide with a 2:1 image (680x340); three-up tiles 448px with a square image (448x448); on phones every image is 2:1 (358x179). 16px gutter, 64px row gap (32px on phones).",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "button_secondary": {
        "fill": "none",
        "text": "ink",
        "ring_px": 2,
        "ring": "ink",
        "radius": 0,
        "states": {
          "hover": {
            "css": {
              "background-color": "#161616",
              "color": "#FFFFFF",
              "border": "2px solid #000000"
            },
            "measured": {
              "fill": "#161616",
              "text": "#FFFFFF",
              "border": "2px solid #000000"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          },
          "focus": {
            "css": {
              "border": "2px solid #0060DF",
              "box-shadow": "0 0 0 2px rgba(0, 144, 237, 0.5)"
            },
            "measured": {
              "border": "#0060DF",
              "box_shadow": "0 0 0 2px rgba(0,144,237,0.5)"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          }
        },
        "note": "Light-ground outline button (Protocol base); not on the homepage. Hover fills #161616 with white text."
      },
      "button_on_dark": {
        "fill": "night",
        "text": "on_night",
        "ring_px": 2,
        "ring": "on_night",
        "radius": 0,
        "height": 40,
        "padding_x": 16,
        "font_size": 16,
        "weight": 600,
        "anatomy": "Footer Sign Up Now and Donate: #161616 fill, 2px #FFFFFF border, white Mozilla Text 16px 600, 40px tall, square. Donate carries a 16px heart icon 8px before the label. Hover inverts to white fill, black text in 0.1s.",
        "states": {
          "hover": {
            "css": {
              "background-color": "#FFFFFF",
              "color": "#000000"
            },
            "measured": {
              "fill": "#FFFFFF",
              "text": "#000000",
              "border": "2px solid #FFFFFF",
              "transition": "background-color, border-color, color 0.1s"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          }
        },
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "product_row": {
        "height_desktop": 76,
        "height_phone": "93 (2-line description) or 111 (3-line)",
        "icon_px": 32,
        "arrow_px": 18,
        "anatomy": "Full-bleed link row on a 12-column grid. 24px top and bottom padding (16px on phones), 32px side padding (16px). Rows are separated by a 2px #FAFAFA rule inset 32px from each edge (rows overlap by 2px so rules never double). Left: the product's own colored logo, 32px, vertically centered. Name in Mozilla Text 24px 600 black with 48px left indent, columns 1-3 (331px). Description in Mozilla Text 18px/22.5px 400 #414141, columns 4-11, one line. Right: an 18px black arrow-right icon in a 32px box, 32px from the edge. Hover: row fills #FAFAFA and the arrow slides 24px right (to 8px from the edge), both 0.3s cubic-bezier(0.5, 0, 0, 1). Phone: name 18px over description 14px/17.5px, both indented 48px, arrow 16px from the edge. The list starts 64px below the intro at 1440, 32px at 390.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "news_row": {
        "height_desktop": 66,
        "icon_px": 32,
        "anatomy": "A table-like list: a 12px label row (Type, Author(s), Topic, Intro), then rows 66px tall split by the same 2px #FAFAFA inset rule. Columns: a 32px square icon (#00D230 with a black glasses glyph for articles, #FF97E2 with a play glyph for video), type 16px 700, author 16px 400, topic 16px 700, intro 16px 400, all black. Hover fills the row #FAFAFA. Phone: a 181px card per item: icon and type (#6D6D6D) top left, topic top right, the intro as an 18px 700 line, author bottom right in #6D6D6D.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "media_frame": {
        "radius": 0,
        "border": "none",
        "shadow": "none",
        "anatomy": "Images are plain rectangles: square corners, no border, no shadow, no overlay text and no pixel-cut corners on the homepage. Ratios: festival photo 2:1 (564x282), two-up tiles 2:1 (680x340), story tiles 1:1 (448x448), report artwork 1376x515 (about 2.67:1); all 2:1 on phones.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "pause_button": {
        "fill": "night",
        "height": 32,
        "radius": 0,
        "anatomy": "Top right of the hero, 64px below the nav (32px on phones): 136x32 box, #161616 fill, 1px #414141 border, 14px pause icon, \"Pause animation\" Mozilla Text 12px 600 white, 8px padding. Hover inverts to white fill, black text (0.3s). Required because the flag animation loops forever.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/",
        "text": "on_night",
        "ring_px": 1,
        "ring": "#414141",
        "padding_x": 8,
        "font_size": 12,
        "weight": 600,
        "states": {
          "hover": {
            "css": {
              "background-color": "#FFFFFF",
              "color": "#000000"
            },
            "measured": {
              "fill": "#FFFFFF",
              "text": "#000000",
              "border": "1px solid #FFFFFF",
              "transition": "background-color, border-color 0.3s"
            },
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/"
          }
        }
      },
      "newsletter_field": {
        "height": 40,
        "radius": 0,
        "anatomy": "Footer email input: label \"Your email address:\" Mozilla Text 14px 600 white above; field 40px tall, #414141 fill, 2px #FFFFFF border, white text; full width of the right half (680px) on desktop, full width on phones; the button sits 32px below (24px on phones).",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      "language_select": {
        "height": 40,
        "radius": 0,
        "anatomy": "Footer language picker: 256x40, #161616 fill, 2px #FAFAFA border, globe icon left, white caret right, Mozilla Text 16px 600 white. Full width on phones.",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      }
    },
    "signature": [
      {
        "id": "pixel-step-edges",
        "name": "Pixel-stepped band edges",
        "where": "once on the mozilla.org homepage: the bottom of the #161616 hero, biting into the #FFFFFF products band (observed 2026-10-29). Every other band meets the next on a straight edge",
        "spec": "a strip 90px tall (40px under 768) with the page's background below and the upper band's color drawn in it by clip-path: polygon(0 60%, 25% 60%, 25% 100%, 60% 100%, 60% 50%, 80% 50%, 80% 0, 0 0). Four flat runs, left to right, as a share of width and of strip depth: 0-25% drops 60%, 25-60% drops 100%, 60-80% drops 50%, 80-100% drops 0. So the dark shape sags in the left-middle and lifts toward the right. At 1440: runs 360, 504, 288, 288px at depths 54, 90, 45, 0px, strip at y 728-818. At 390: runs 97.5, 136.5, 78, 78px at depths 24, 40, 20, 0px, strip at y 557-597. Three steps, no jitter, no small teeth, same shape at every width. The example's \"step: 12\" is only the stair size in px of our book thumbnail, not Mozilla geometry",
        "once": "once per page, under the hero",
        "example": {
          "ground": "night",
          "text": "Bands meet on a stepped, pixel edge",
          "edge": "pixel-step",
          "edge_to": "paper",
          "step": 12
        },
        "dont_example": {
          "ground": "night",
          "text": "Bands meet on a soft gradient fade",
          "edge": "gradient",
          "edge_to": "paper"
        },
        "dont": "blend bands with gradients, waves or curves, or cut many small random teeth; the edge is three broad square steps; the animated hero flag follows the same rule: orthogonal pixel steps, never skewed"
      },
      {
        "id": "underlined-headline-link",
        "name": "The call to action is an underlined headline",
        "where": "the end of the hero and of each section",
        "spec": "Mozilla Headline 600 (18px phone, 24px at 768-1311, 32px from 1312), strong black or strong white, a 2px underline drawn as a background gradient that wipes out and back in on hover over 0.8s cubic-bezier(0.5, 0, 0, 1); no box. Left under the hero subline; right-aligned at the end of every other section",
        "once": "one per band",
        "example": {
          "ground": "night",
          "text": "Read the full report",
          "mark": "Read the full report",
          "mark_style": "underline",
          "mark_color": "on_night",
          "underline_px": 2,
          "weight": 600
        },
        "dont_example": {
          "ground": "paper",
          "text": "Read the full report",
          "mark": "full report",
          "mark_style": "color"
        },
        "dont": "color the link green or pink: their guide says don't use colored text"
      },
      {
        "id": "green-pop",
        "name": "Black and white, with a pop of green",
        "where": "every \"Governments\" piece",
        "spec": "about 45% black, 45% white, 10% green (the guide's ratio for \"Governments\" pieces). On the mozilla.org homepage green is only the animated hero flag (216x253px) and the 32px news icons. Green is allowed for buttons but marked limited use; never green text",
        "once": "green stays small",
        "example": {
          "ground": "night",
          "text": "Take back your feed",
          "mark": "",
          "mark_style": "none"
        },
        "dont_example": {
          "ground": "accent",
          "text": "Take back your feed",
          "mark": "",
          "mark_style": "none"
        },
        "dont": "flood a Governments piece with green: there, bright tones are pops only (Grassroots pieces may run 60% color)"
      }
    ],
    "bands": [
      {
        "ground": "#FFFFFF",
        "content": "nav",
        "label": "White nav, 56px, sticky: black lockup left, two centered links",
        "desktop": "#FFFFFF bar 55px plus a 2px #E8E8E8 bottom border; lockup 100x24 at x 32, y 16; \"Products\" and \"About us\" centered on the page",
        "phone": "54px: lockup 113x31 at x 16; an underlined \"Menu\" text button at the right edge",
        "anatomy": [
          "No buttons and no CTA in the nav",
          "Links: Mozilla Text 18px 600 black, 24px padding each side, hover #022611"
        ]
      },
      {
        "ground": "night",
        "content": "hero",
        "label": "#161616 hero: two-line 128px headline left, regular 24px subline, underlined link, green flag animating at right",
        "headline": "Your headline, set large and left",
        "mark": "",
        "mark_style": "none",
        "cta": "link",
        "desktop": "671px tall at 1440. Text in columns 1-8 (max 912px); headline top at y 169 (112px below the nav); flag 216x253px centered in columns 10-11 (x 1076-1292); 128px bottom padding",
        "phone": "503px: pause button, headline 48px, subline 18px, link 18px, then the flag 100x123 right-aligned below the text",
        "anatomy": [
          "Pause animation button top right, 136x32",
          "Headline 128px/1 600 white, two lines",
          "Subline 24px/30px weight 400 white, 16px below the headline, two lines",
          "CTA 32px Headline link 64px below the subline"
        ]
      },
      {
        "ground": "#FFFFFF",
        "content": "edge",
        "label": "Stepped pixel edge: 90px strip, three broad steps (40px on phones)",
        "desktop": "y 728-818. Dark runs 0-360px down 54px, 360-864 down 90px, 864-1152 down 45px, 1152-1440 none",
        "phone": "y 557-597. Dark runs 0-97.5px down 24px, 97.5-234 down 40px, 234-312 down 20px, 312-390 none",
        "anatomy": [
          "clip-path: polygon(0 60%, 25% 60%, 25% 100%, 60% 100%, 60% 50%, 80% 50%, 80% 0, 0 0) on a #161616 layer over #FFFFFF"
        ]
      },
      {
        "ground": "#FFFFFF",
        "content": "cards",
        "label": "White band: 80px headline, 24px regular intro, seven full-width product rows, right-aligned link",
        "desktop": "978px. Headline at the top of 64px padding; intro max 912px; rows start 64px below the intro; 7 rows of 76px; link 64px below",
        "phone": "969px. Headline 32px; rows start 32px below the intro; rows 93-111px with the description under the name",
        "anatomy": [
          "Product row: 32px colored icon, name 24px 600, muted #414141 description 18px, arrow right",
          "Rows separated by 2px #FAFAFA rules inset 32px",
          "\"Explore our products\" CTA link right-aligned"
        ]
      },
      {
        "ground": "surface",
        "content": "split",
        "label": "Pink +1 band: headline and copy left, 2:1 photo right, link right under the photo",
        "headline": "Join the gathering",
        "mark": "",
        "mark_style": "none",
        "desktop": "477px, shallow. Headline columns 1-6 (680px) 80px two lines; body 18px; photo columns 8-12, 564x282, top-aligned with the headline; \"Join us\" right-aligned 32px below the photo",
        "phone": "599px: headline 32px, body 16px, photo 358x179, link right",
        "anatomy": [
          "Body is two short paragraphs: the pitch, then a one-line date and place",
          "No tag, no button, no frame on the photo"
        ]
      },
      {
        "ground": "#FFFFFF",
        "content": "cards",
        "label": "White band: 80px headline, two editorial tiles 680px wide with 2:1 images",
        "desktop": "821px. Two tiles 680x340 images, 16px gutter, title 32px, description 16px, text link 18px underlined",
        "phone": "Stacked, images 358x179, 32px apart",
        "anatomy": [
          "Tile images are artwork: a flat green halftone report cover and a multicolor magazine pattern",
          "No tags on these two tiles"
        ]
      },
      {
        "ground": "night",
        "content": "text",
        "label": "#161616 report feature: headline, intro, full-width yellow bitmap artwork, year label left and link right",
        "headline": "Read the yearly report",
        "mark": "Read the yearly report",
        "mark_style": "underline",
        "desktop": "1030px. Headline 80px/88px; intro 24px weight 400 max 912px; artwork 1376x515 full content width with 64px above and below; footer row: \"2025\" Headline 48px left, 32px CTA link right",
        "phone": "507px: headline 32px, artwork 358x134, year 24px and link right-aligned",
        "anatomy": [
          "Artwork: #FEFEBB field, mostly clear; \"Choose / Your / Future\" in three enormous black Headline lines; sparse pixel clusters held to the corners",
          "Followed by a flat 90px #161616 strip, then a straight edge into the next band"
        ]
      },
      {
        "ground": "#FAF0E6",
        "content": "cards",
        "label": "Orange +1 band: 80px headline, bold intro, 3x2 grid of square-image story tiles",
        "desktop": "1591px. Tiles 448px with 448x448 images, 16px gutter, 64px row gap; #FAFAFA tag at 8,8 on each image",
        "phone": "One column; images become 2:1 (358x179)",
        "anatomy": [
          "Intro here is bold (700), the only bold intro on the page",
          "Tile: tag, square image, title 32px, description 16px, text link 18px underlined"
        ]
      },
      {
        "ground": "#FFFFFF",
        "content": "list",
        "label": "White band: 32px heading, an editorial news table of exactly 11 compact 66px rows under 12px column labels",
        "desktop": "981px. 12px label row, then 66px rows: icon, type, author, topic, intro",
        "phone": "Each row becomes a 181px card",
        "anatomy": [
          "33px label row (Type, Author(s), Topic, Intro) in 12px",
          "11 rows x 66px, 2px #FAFAFA rules inset 32px",
          "Icons: 32px squares, #00D230 for articles, #FF97E2 for video"
        ]
      },
      {
        "ground": "night",
        "content": "footer",
        "label": "#161616 footer: newsletter, three link columns, socials, donate and language, legal, full-width white wordmark",
        "desktop": "1013px. 64px top padding; wordmark 1376x288 at the bottom, 32px from the page bottom",
        "phone": "1333px, everything stacked; wordmark 358x75",
        "anatomy": [
          "Rules between rows: 2px #414141",
          "Column headings Mozilla Headline 16px 600 #B3B3B3; links Mozilla Text 16px white"
        ]
      }
    ],
    "responsive": {
      "measured_at": [
        390,
        768,
        1024,
        1440
      ],
      "source": "https://www.mozilla.org/en-US/",
      "date": "2026-10-28",
      "rows": [
        {
          "what": "hero headline size",
          "values": {
            "390": "48px / lh 1 / -0.48px",
            "768": "80px / lh 1 / -0.8px",
            "1024": "80px / lh 1 / -0.8px",
            "1440": "128px / lh 1 / -1.28px"
          }
        },
        {
          "what": "section headline size",
          "values": {
            "390": "32px",
            "768": "64px",
            "1024": "64px",
            "1440": "80px"
          }
        },
        {
          "what": "body size",
          "values": {
            "390": "16px (token --text-body-md; not measured on an element)",
            "768": "18px (token)",
            "1024": "18px / 22.5px",
            "1440": "18px / 22.5px"
          }
        },
        {
          "what": "hero subline size (weight 400)",
          "values": {
            "390": "18px / 22.5px",
            "768": "32px / 40px (their CSS; real)",
            "1024": "24px / 30px",
            "1440": "24px / 30px"
          }
        },
        {
          "what": "section intro size (renders 400; CSS says 500 with no 500 file)",
          "values": {
            "390": "18px / 22.5px",
            "768": "24px / 30px",
            "1024": "24px / 30px",
            "1440": "24px / 30px"
          }
        },
        {
          "what": "cta link size",
          "values": {
            "390": "18px",
            "768": "24px",
            "1024": "24px",
            "1440": "32px"
          }
        },
        {
          "what": "page margin",
          "values": {
            "390": "16px",
            "768": "24px",
            "1024": "24px",
            "1440": "32px"
          }
        },
        {
          "what": "section padding",
          "values": {
            "390": "32px top/bottom",
            "768": "64px",
            "1024": "64px",
            "1440": "64px"
          }
        },
        {
          "what": "container max width",
          "values": {
            "390": "1440px",
            "768": "1440px",
            "1024": "1440px",
            "1440": "1440px"
          }
        },
        {
          "what": "grid columns",
          "values": {
            "390": "1 (gallery tiles 358px)",
            "768": "2 (354px)",
            "1024": "2 (482px)",
            "1440": "12-col grid: 2-up tiles 680px, then 3-up 448px"
          }
        },
        {
          "what": "gutter",
          "values": {
            "390": "8px (row gap 32px)",
            "768": "12px (row gap 64px)",
            "1024": "12px (row gap 64px)",
            "1440": "16px (row gap 64px)"
          }
        },
        {
          "what": "card title / tile description",
          "values": {
            "390": "24px / 14px",
            "768": "24px / 16px",
            "1024": "32px / 16px",
            "1440": "32px / 16px"
          }
        },
        {
          "what": "product row (name / description)",
          "values": {
            "390": "18px / 14px, stacked, 93-111px rows",
            "768": "24px / 18px",
            "1024": "24px / 18px, side by side",
            "1440": "24px / 18px, 76px rows"
          }
        }
      ],
      "prov": "observed"
    },
    "breakpoints": {
      "all": [
        768,
        1312
      ],
      "phone_max": 767
    },
    "motion": [
      {
        "name": "global",
        "easing": "cubic-bezier(0.68, 0, 0.12, 1)",
        "duration_ms": 800,
        "use": "brand animation (the flag planting, the wordmark building, illustration). Not UI hovers: those use ui-hover",
        "prov": "published",
        "source": "https://brand.mozilla.com/"
      },
      {
        "name": "ui-hover",
        "easing": "cubic-bezier(0.5, 0, 0, 1)",
        "duration_ms": 300,
        "use": "every UI hover on mozilla.org: row fills and arrow nudges at 0.3s, the CTA underline wipe at 0.8s on the same curve",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "flag-wave",
        "easing": "linear",
        "duration_ms": 1200,
        "use": "the hero flag: 11 SVG frames cross-fade in a 1.2s infinite loop, each frame 0.1s after the last; a Pause animation button stops it",
        "prov": "observed",
        "source": "https://www.mozilla.org/en-US/"
      },
      {
        "name": "fearless-in",
        "easing": "cubic-bezier(0.59, 0, 0.59, 0)",
        "duration_ms": 400,
        "use": "Fearless moments, entering",
        "prov": "published",
        "source": "https://brand.mozilla.com/"
      },
      {
        "name": "fearless-out",
        "easing": "cubic-bezier(0, 0.66, 0.33, 1)",
        "use": "Fearless moments, leaving",
        "prov": "published",
        "source": "https://brand.mozilla.com/"
      },
      {
        "name": "insightful-in",
        "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
        "duration_ms": 330,
        "use": "Insightful moments, entering",
        "prov": "published",
        "source": "https://brand.mozilla.com/"
      },
      {
        "name": "insightful-out",
        "easing": "cubic-bezier(0.64, 0, 0.78, 0)",
        "use": "Insightful moments, leaving",
        "prov": "published",
        "source": "https://brand.mozilla.com/"
      }
    ],
    "icons": {
      "grid": "16×16",
      "stroke": "1.5pt",
      "sizes": [
        {
          "name": "s",
          "px": 16
        },
        {
          "name": "m",
          "px": 24
        },
        {
          "name": "l",
          "px": 32
        },
        {
          "name": "xl",
          "px": 40
        }
      ],
      "prov": "published",
      "source": "https://brand.mozilla.com/"
    },
    "page": {
      "source": "https://www.mozilla.org/en-US/",
      "date": "2026-10-29",
      "prov": "observed",
      "nav": {
        "summary": "A quiet white bar: black lockup at left, two links centered, nothing else",
        "ground": "#FFFFFF with a 2px #E8E8E8 bottom border",
        "page_ground": "#FFFFFF (--color-strong-white) for the nav and every white band. Not --color-paper (#FAFAFA), which is for tags, row hovers, print and decks",
        "height": "57px including the border at 1440 (55 + 2); 54px at 390",
        "logo": "primary lockup, black SVG, 100x24px at x 32, y 16 (113x31 at x 16 on phones). Top left, not the guide's preferred right corner",
        "links": "2 (\"Products\", \"About us\"), each opens a dropdown; Mozilla Text 18px/22.5px 600 #000000, 24px side padding, the pair centered on the page (x 593-847 at 1440); hover color #022611",
        "actions": "none: no button, no download, no green",
        "sticky": "yes, position sticky at top 0",
        "phone": "lockup left and a \"Menu\" text button right: Mozilla Text 16px 600, underlined 1px with 2px offset, 32px tall, no box, no icon; when open it becomes a 20px close icon"
      },
      "hero": {
        "summary": "A #161616 band with a two-line 128px headline, a regular-weight subline and one underlined link, and the small green flag animating in empty space at right",
        "desktop": "12 columns, 32px margins, 16px gutters (100px columns at 1440). Hero top y 57, height 671. Pause button top right at y 121. Headline top y 169, columns 1-8 (912px max); subline 16px below; CTA 64px below the subline (y 563). Flag column 10-11: the visible flag is 216x253px at x 1076, y 264, centered on the text block. About 60% of the band is empty dark space. 128px bottom padding, then the stepped edge",
        "phone": "Order: pause button (right), headline, subline, CTA, then the flag 100x123px right-aligned 32px below the CTA. Everything else left. 16px margins, 32px top padding",
        "media": "the flag symbol in #00D230, an inline SVG animation (11 frames, 1.2s loop), no photo, no frame. The flag keeps its pixel construction in every frame: square cells and orthogonal steps only, the wave is a step change between frames, never a skew, rotation, curve or easing between shapes",
        "type": "headline Mozilla Headline 128px/128px 600 white, -1.28px tracking (48px on phones, 80px at 768-1311); subline Mozilla Text 24px/30px weight 400 white, two balanced lines (18px/22.5px on phones)",
        "cta": "one underlined Headline link, \"Learn about us\" pattern, 32px (18px on phones), to /en-US/about/. No button",
        "proof": "none in the hero",
        "headline_breaks": "h1 measure 912px at 1440 (columns 1-8), 358px at 390; text-wrap: balance. Break before \"to\": \"Welcome / to Mozilla\" at both widths, two lines. Rule: two lines, the name on the second line, never split; keep line 1 short (one or two words). Subline: text-wrap: balance, measure 912px, two even lines at 1440 (break after \"defend\"), three at 390"
      },
      "sections": [
        {
          "name": "Products",
          "summary": "The product list right under the hero: headline, intro, seven compact full-width rows, a right-aligned link to all products",
          "ground": "#FFFFFF",
          "desktop": "band 978px, 64px padding; headline 80px; intro 24px/30px weight 400 (CSS 500, renders 400) max 912px; 64px to the rows; seven 76px rows; CTA 64px below the last row",
          "phone": "headline 32px, intro 18px/22.5px weight 400; the first row starts 32px below the intro at 390 (64px at 1440); rows 93-111px with the description under the name, CTA 18px right",
          "anatomy": [
            "Row: colored product logo 32px, name 24px 600 black, description 18px 400 #414141 in one line, black arrow right",
            "Rule between rows: 2px #FAFAFA inset 32px; hover fills #FAFAFA and nudges the arrow",
            "The rows are links to each product's own site"
          ],
          "components": "product_row, cta_link",
          "rows": [
            "Firefox, the web browser. Their words: \"Get the gold standard for browsing with speed, privacy and control.\"",
            "Thunderbird, the email app from MZLA. Their words: \"Go chaos-free with one app for all your emails, calendars and contacts.\"",
            "Mozilla VPN. Their words: \"Keep your location and online adventures private\"",
            "Mozilla Monitor, data-breach alerts. Their words: \"Get a heads-up if your personal info is at risk\"",
            "Firefox Relay, email and phone masks. Their words: \"Mask your email and phone number\"",
            "0DIN, AI security. Their words: \"finding and fixing GenAI vulnerabilities before attackers do\"",
            "Tabstack, a developer API. Their words: \"Reliably automate web tasks with a simple developer-focused API.\""
          ],
          "also_named": [
            "Mozilla.ai: our reading, Mozilla's AI company building open-source tools; its site leads \"Empowering Developers with Trustworthy AI\" (their words)",
            "Mozilla Ventures: our reading, Mozilla's fund for early-stage startups. Their words: \"Pitch your company to Mozilla Ventures and secure funding\"",
            "Mozilla Data Collective. Their words: \"rebuilding the AI data ecosystem with communities at the center\"",
            "Mozilla Foundation: our reading, the not-for-profit at the center of the project; the footer asks for donations to it",
            "Mozilla Festival (MozFest). Their words: \"imagine a tech future worth building\"",
            "State of Mozilla: our reading, the yearly report; their words \"an invitation to choose a different future together\"",
            "Nothing Personal. Their words: \"Our new magazine for independent thinkers, technologists, and creatives\"",
            "Otari. Their words: \"eliminates the complexity of managing multiple AI providers\"",
            "Owners, Not Renters (0nr). Their words: \"Join our new Open Source AI community.\""
          ],
          "links_to": "\"Explore our products\" to /en-US/products/; each row to the product's own site (firefox.com, thunderbird.net, 0din.ai, tabstack.ai) or its mozilla.org page",
          "headline_breaks": "80px headline, measure 1376px, one line (\"Love the internet again\"); at 390 it still fits one line at 32px. Intro: balance, measure 912px, two even lines (break mid-sentence, after \"put you in\"), three at 390",
          "images": "no images: each product's own 32px colored logo"
        },
        {
          "name": "Festival split",
          "summary": "A shallow two-column band on Pink +1: event pitch left, a 2:1 crowd photo right",
          "ground": "#FFF1F8",
          "desktop": "477px tall. Headline columns 1-6 (680px), 80px, two lines; body Mozilla Text 18px/22.5px 400, two paragraphs (pitch, then date and place); photo columns 8-12 at 564x282, top-aligned with the headline; \"Join us\" CTA right-aligned 32px below the photo",
          "phone": "headline 32px, body 16px/20px, photo 358x179 after the body, CTA right",
          "anatomy": [
            "No tag, no button, no photo frame",
            "The photo is people mid-cheer at the event, cropped 2:1"
          ],
          "components": "media_frame, cta_link",
          "links_to": "\"Join us\" to mozillafoundation.org",
          "headline_breaks": "measure 680px (columns 1-6) at 1440, 358px at 390; text-wrap: balance. \"Get wild at / Mozilla Festival\" at both widths: break before the event name, keep the name on one line",
          "images": "one candid photo of people at the event (crowd, cheering), 2:1, no green, no illustration"
        },
        {
          "name": "Editorial two-up",
          "summary": "A headline and two wide tiles: one report, one magazine",
          "ground": "#FFFFFF",
          "desktop": "821px. Headline 80px two lines; 64px below, two 680px tiles with 2:1 images (680x340), 16px apart",
          "phone": "stacked tiles, 358x179 images, 32px row gap, titles 24px",
          "anatomy": [
            "Tile: image, title Headline 32px 600, description 16px, text link 18px 600 underlined (\"Read the report\", \"Read Now\")",
            "Images are flat artwork, not photos"
          ],
          "components": "card",
          "links_to": "stateofopensource.ai and the Nothing Personal page on mozillafoundation.org",
          "headline_breaks": "measure 1376px but balanced into two lines of about 22 characters: \"Explore issues shaping / the future of the internet\"; three lines at 390 (\"Explore issues / shaping the future / of the internet\"). Tile titles one line (680px measure)",
          "images": "left: a flat-color report cover (#00D230 ground, black halftone sphere, black Headline title); right: the magazine's multicolor typographic pattern (\"NP.\" tiles). Two different kinds of art; never two dithered illustrations side by side"
        },
        {
          "name": "Report feature",
          "summary": "The large yellow bitmap report feature on #161616",
          "ground": "#161616",
          "desktop": "1030px. Headline 80px/88px white; intro 24px/30px weight 400 (CSS 500, renders 400) white, max 912px; artwork 1376x515 across the full content width, 64px above and below; bottom row: \"2025\" in Mozilla Headline 48px 600 at left, \"Read the report\" CTA 32px at right",
          "phone": "headline 32px, intro 18px, artwork 358x134, year 24px and CTA right-aligned",
          "anatomy": [
            "Artwork (1376x515, about 2.67:1): a flat #FEFEBB field, mostly clear. The title \"Choose / Your / Future\" stacked in three enormous black Mozilla Headline lines (each about 110px tall, about 21% of the artwork height), tight leading, the block about 560px wide, sitting just left of center with lines staggered right. Sparse black pixel clusters held to the corners only: a dense dither top left, a large cluster mid-right, a few loose dots bottom left, plus a faint 4-cell outline grid at the bottom-left edge. Nothing in the middle but the title",
            "After it a flat 90px #161616 strip and a straight edge to the next band (no visible steps)"
          ],
          "components": "media_frame, cta_link",
          "links_to": "\"Read the report\" to stateof.mozilla.org",
          "headline_breaks": "one line, measure 1376px. Intro uses normal wrap (not balance), measure 912px: three lines at 1440, five at 390",
          "images": "the yellow \"Choose Your Future\" report artwork (see anatomy); the only bitmap art on the page"
        },
        {
          "name": "Story grid",
          "summary": "Three columns of square-image story tiles on Orange +1",
          "ground": "#FAF0E6",
          "desktop": "1591px. Headline 80px; intro 24px/30px bold 700, max 912px; 3x2 grid of 448px tiles with 448x448 images, 16px gutter, 64px row gap",
          "phone": "one column, images 2:1 (358x179), titles 24px",
          "anatomy": [
            "Each image carries a #FAFAFA tag (Product, Impact, Program, Event) 8px from its top-left corner, as live HTML",
            "Title 32px, description 16px, text link 18px underlined (\"Join today\", \"Read more\")",
            "Mix photos of people with product artwork"
          ],
          "components": "card, pill_label",
          "links_to": "each tile to its own site (Data Collective, Ventures at mozilla.vc, Otari, a newsletter, a press article, a video)",
          "headline_breaks": "one line, 1376px. Intro balance, 912px, two lines; tile titles one line in 448px (keep titles under about 28 characters)",
          "images": "six square cards, mixed on purpose: about half photos of people (an over-the-shoulder table shot, a stage portrait under colored light, a founder pitching), half product artwork (a wordmark on black, a logo on a soft gradient). No globes, no green-dominant art, no two conference stages next to each other"
        },
        {
          "name": "News list",
          "summary": "A dense editorial news table, not cards: exactly 11 compact rows under a row of small column labels",
          "ground": "#FFFFFF",
          "desktop": "981px band, 64px padding. Heading Mozilla Headline 32px/32px 600 at y +64. 64px below: a 33px label row (Type, Author(s), Topic, Intro) in Mozilla Text 12px/15px 400 black, 8px vertical padding. Then 11 rows, each 66px tall (16px top and bottom padding), separated by 2px #FAFAFA rules inset 32px from both page edges. Columns on the 12-col grid: icon 32x32 at x 35; Type x 123 (77px) 16px/20px 700; Author x 232 (172px) 16px 400; Topic x 436 (191px) 16px 700; Intro x 659 (746px) 16px 400, one line. Whole row is a link; hover fills #FAFAFA over 0.3s cubic-bezier(0.5, 0, 0, 1)",
          "phone": "heading 16px; label row hidden; each item a 181px card: icon 32px and type (#6D6D6D 16px) top left, topic top right (#6D6D6D), intro 18px/22.5px 700 black below, author bottom right #6D6D6D; 2px rules between cards",
          "anatomy": [
            "11 rows of 66px plus a 33px label row, nothing else in the band: no images, no button, no CTA",
            "Content-type icons: 32px squares, #00D230 with a black glasses glyph (Article), #FF97E2 with a black arrow glyph (Video)",
            "Labels 12px; rows 16px; Type and Topic bold 700, Author and Intro regular 400",
            "Rules: 2px #FAFAFA, so pale they nearly vanish on #FFFFFF"
          ],
          "components": "news_row",
          "links_to": "each row to the outside article or video",
          "headline_breaks": "heading 32px one line in 1376px; one line at 390 (16px)",
          "images": "no images: 32px colored squares carrying a small black content-type glyph (glasses for articles on #00D230, arrow for video on #FF97E2)"
        }
      ],
      "footer": {
        "summary": "A #161616 footer that closes on the wordmark set nearly full width",
        "ground": "#161616",
        "anatomy": [
          "64px top padding, 32px side margins",
          "Newsletter row: white flag symbol 40x47 at left; promise text Mozilla Text 16px/20.8px 600 white beside it (columns 2-5); right half (680px): label 14px 600, 40px #414141 email field with a 2px white border, then the Sign Up Now button 32px below; a 2px #414141 rule under the row",
          "Links row: three columns 273px wide (Company 5 links, Support 4, Developers 5); headings Mozilla Headline 16px 600 #B3B3B3; links Mozilla Text 16px/20px 400 white, 28px apart",
          "Socials at the far right: \"Follow @Mozilla\" then five icons (Bluesky, Instagram, LinkedIn, TikTok, Spotify), \"Follow @Firefox\" then four. Each is a white 16px glyph in a 24px box, 4px apart, at opacity 0.45, so it renders #7F7F7F on #161616 (subdued grey, not white); hover opacity 1",
          "Actions row, right-aligned: Donate button 133x40 with a heart icon, language select 256x40. At 1440 there is no rule above this row (32px of plain #161616 after the link columns) and a 2px #414141 rule 32px below it. On phones a 2px #414141 rule does sit above it (the bottom of the socials block)",
          "Legal row: left paragraph Mozilla Text 14px/21px (donate line, copyright 1998-2026, Creative Commons licence), right two lines of 14px 600 underlined links (Website Privacy Notice, Cookies, Legal, Community Participation Guidelines, About this site)",
          "The white wordmark alone, no flag (wordmark-white.svg, 300x63 viewBox), width 100% of the content: 1376x288px at 1440, 358x75 at 390; 32px from the page bottom (16px on phones)"
        ],
        "phone": "stacked: symbol and text, full-width field and button, link columns two-up then one, socials in rows, full-width Donate and language select, legal 12px/18px, wordmark 358x75"
      },
      "dark_ground": {
        "secondary_button": "button_on_dark: #161616 fill, 2px #FFFFFF border, white 16px 600 text, 40px; hover white fill, black text",
        "link": "white; the CTA underline is white; footer links are white without underline, legal links white underlined",
        "muted_text": "#B3B3B3 for footer headings only; body text on dark stays #FFFFFF",
        "hairline": "2px #414141",
        "logo_on_dark": "white flag symbol and white wordmark in the footer; the green flag is used only in the hero animation",
        "input": "#414141 fill, 2px #FFFFFF border",
        "icons": "social glyphs white at opacity 0.45 (#7F7F7F rendered); hover opacity 1"
      }
    }
  },
  "system": {
    "fixed": [
      "The wordmark and flag symbol",
      "Strong black and white type with a green pop",
      "Mozilla Headline and Mozilla Text",
      "The pixel grid"
    ],
    "flex": "The Governments-to-Grassroots spectrum: the same parts run from restrained (mostly black, white and green) to loud (60% color, multi-pop, fearless motion), chosen by audience.",
    "traits": [
      {
        "is": "Passionate",
        "text": "Activist techies talking to everyday people with infectious, relatable energy (paraphrase).",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      },
      {
        "is": "Welcoming",
        "text": "Warm; technology in human terms; humor allowed but 'we never punch down'.",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      },
      {
        "is": "No Bullsh*t",
        "text": "\"We don’t sugarcoat the truth.\" Tell it like it is, in language people understand.",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      },
      {
        "is": "Fearless",
        "text": "Personality: unconventional, takes on hard topics (paraphrase).",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      },
      {
        "is": "Optimistic",
        "text": "Personality: never stops pushing for better; challenges the status quo (paraphrase).",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      },
      {
        "is": "Insightful",
        "text": "Personality: connects the dots; deliberate, clear and considerate (paraphrase).",
        "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
        "prov": "published"
      }
    ]
  },
  "proportion": {
    "note": "Published ratio for primary (Governments) work. Grassroots pieces flip it: 20% black, 20% white, 60% color.",
    "source": "https://brand.mozilla.com/document/231#/-/color",
    "parts": [
      {
        "name": "Black",
        "hex": "#161616",
        "n": 45
      },
      {
        "name": "White",
        "hex": "#FAFAFA",
        "n": 45
      },
      {
        "name": "Green",
        "hex": "#00D230",
        "n": 10
      }
    ],
    "prov": "published"
  },
  "tone_by_state": {
    "note": "One voice on a two-ended spectrum. Mozilla publishes the two ends; the levels are our reading of them.",
    "source": "https://brand.mozilla.com/document/240#/-/voice-tone",
    "states": [
      {
        "state": "Grassroots: community, events, podcasts",
        "level": 4
      },
      {
        "state": "Governments: policy, advocacy, professional",
        "level": 1
      }
    ]
  },
  "formats": [
    {
      "format": "Deck",
      "level": 2,
      "must": "Black and white slides, left-aligned Headline, green only on the ask",
      "flex": "one illustration style for the whole deck"
    },
    {
      "format": "Landing page",
      "level": 1,
      "must": "White 56px nav, #161616 hero with a 128px two-line headline and the green flag, one stepped edge, product rows, underlined headline links, #161616 footer ending in the full-width wordmark",
      "flex": "which tint bands (Pink +1, Orange +1) and editorial modules follow the products"
    },
    {
      "format": "Proposal page",
      "level": 1,
      "must": "Governments end: 45/45/10, underlined headline link as the next step",
      "flex": "a pixel-framed photo at the top"
    },
    {
      "format": "Ad",
      "level": 3,
      "must": "Headline in strong black or white, logo in a corner",
      "flex": "a hero Pixelgram"
    },
    {
      "format": "Social post",
      "level": 5,
      "must": "Grassroots: 60% color, black or white fields between pops",
      "flex": "multi-pop color and Bitmap illustration"
    },
    {
      "format": "Email",
      "level": 1,
      "must": "Black and white, one green button",
      "flex": "none"
    },
    {
      "format": "Error message",
      "level": 0,
      "must": "Plain language, black on white, no pixel effects",
      "flex": "none"
    }
  ],
  "checks": [
    {
      "name": "Logo hidden",
      "text": "Cover the logo. It should still read as Mozilla: mostly black and white, one green pop, a huge left-aligned Headline, and a pixel edge somewhere."
    },
    {
      "name": "Swap test",
      "text": "Put another nonprofit's logo on it. If the pixel grid, the giveaway type and the no-bullsh*t line don't feel out of place, it's generic, and it goes back."
    }
  ],
  "examples": [
    {
      "chapter": "color",
      "do": {
        "ground": "paper",
        "text": "Get the app",
        "button": true
      },
      "do_caption": "The default call to action: the square #161616 button, or the underlined headline link. Green buttons are allowed but limited use.",
      "dont": {
        "ground": "paper",
        "text": "Your privacy, protected",
        "ink": "accent"
      },
      "dont_caption": "Green text on white: their guide says no colored text."
    },
    {
      "chapter": "color",
      "do": {
        "ground": "night",
        "text": "Mostly black and white",
        "ink": "on_night"
      },
      "do_caption": "About 45% black, 45% white, 10% green.",
      "dont": {
        "ground": "accent",
        "text": "A page flooded green",
        "ink": "ink"
      },
      "dont_caption": "In Governments pieces bright tones are pops; only Grassroots pieces run 60% color."
    },
    {
      "chapter": "voice",
      "do": {
        "ground": "paper",
        "text": "We don't sell your data. Here's how we make money."
      },
      "do_caption": "Tell it like it is, in words people use.",
      "dont": {
        "ground": "paper",
        "text": "Leveraging privacy-first synergies to empower stakeholders."
      },
      "dont_caption": "Jargon and fluff: the guide asks for plain language and no grandstanding."
    },
    {
      "chapter": "type",
      "do": {
        "ground": "paper",
        "text": "Take back your internet",
        "font": "display",
        "weight": 600
      },
      "do_caption": "Mozilla Headline, left-aligned, sentence case.",
      "dont": {
        "ground": "paper",
        "text": "TAKE BACK YOUR INTERNET",
        "font": "body",
        "weight": 700
      },
      "dont_caption": "All caps in Mozilla Text: wrong face for a headline, and caps are less accessible."
    },
    {
      "chapter": "logo",
      "do": {
        "ground": "night",
        "text": "Logo in strong white on black",
        "ink": "on_night"
      },
      "do_caption": "Strong black or strong white only, anchored in a corner.",
      "dont": {
        "ground": "accent_secondary",
        "text": "Logo recolored pink",
        "ink": "on_night"
      },
      "dont_caption": "Don't stray from strong black or white, and don't compromise contrast."
    }
  ],
  "make_it_yours": {
    "note": "Everything above transfers. These are Mozilla'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": {
          "text": "Our mission is to ensure the internet is a global public resource, open and accessible for all. (Opening sentence quoted from the guide's Mission block; the guide goes on to describe an internet where people shape their own experience and are empowered, safe and independent.)",
          "prov": "published",
          "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
        },
        "story": {
          "text": "a global community working together since 1998 so the internet benefits everyone, best known for creating Firefox. The 2007 Manifesto (10 principles) and the 2017 Pledge for a Healthy Internet (4 commitments) guide what Mozilla builds and funds and how its community works. Today the Mozilla Project spans the Foundation, Mozilla Corporation (Firefox), MZLA (Thunderbird), Mozilla Ventures, Mozilla.ai and Mozilla Data Collective.",
          "prov": "published",
          "source": "https://www.mozilla.org/en-US/about/",
          "paraphrase": true
        },
        "values": [
          {
            "name": "Internet as a public resource",
            "means": "Manifesto principle 2: the internet must remain open and accessible (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "Security and privacy are fundamental",
            "means": "Principle 4: privacy and security must not be treated as optional (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "Individual agency",
            "means": "Principle 5: people must be able to shape the internet and their own experience of it (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "Free and open source software",
            "means": "Principle 7: open source promotes the internet as a public resource (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "Transparent community process",
            "means": "Principle 8: community-based processes build participation, accountability and trust (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "Balance profit with public benefit",
            "means": "Principle 9: commercial involvement is welcome, but must be balanced with public benefit (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "name": "An inclusive, civil internet",
            "means": "2017 Pledge commitments: an internet for all peoples that promotes civil discourse, critical thinking and collaboration (paraphrase).",
            "prov": "published",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          }
        ]
      },
      "positioning": {
        "statement": {
          "text": "Mozilla is the people’s platform, where everyone can control their internet.",
          "prov": "published",
          "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
        },
        "category": {
          "text": "Nonprofit-led family of organizations: an activist organization that builds products, funds and advocates for a better internet (paraphrase of the brand promise).",
          "prov": "published",
          "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
        },
        "audience": {
          "text": "Four key audiences: Developers, Users, Policymakers, Communities.",
          "prov": "published",
          "source": "https://brand.mozilla.com/document/241#/-/about-mozilla-s-brand"
        },
        "problem": {
          "text": "Power over the internet, and now AI, is consolidating in big tech; people have lost control of their data and experience (paraphrase of mozilla.org homepage and State of Mozilla copy, which names Big AI companies consolidating power).",
          "prov": "observed",
          "source": "https://www.mozilla.org/en-US/",
          "source_note": "2026-10-28"
        },
        "promise": {
          "text": "Put control of the internet back in the hands of the people using it, and invite them to reclaim it together, keeping it easy, safe and free (paraphrase).",
          "prov": "published",
          "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
        },
        "differentiators": [
          {
            "text": "Nonprofit ownership and independence: a new nonprofit stewards Mozilla for the long term; Firefox described as always independent, unlike big tech.",
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/about/",
            "also": [
              "https://blog.mozilla.org/en/firefox/come-back-to-firefox/"
            ]
          },
          {
            "text": "Advocates, builds and funds: policy voice + products + philanthropic and venture capital under one name.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
          },
          {
            "text": "Open source by default, including open-source AI tools.",
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "text": "Users choose whether AI features appear in Firefox.",
            "prov": "observed",
            "source": "https://blog.mozilla.org/en/firefox/come-back-to-firefox/"
          }
        ],
        "alternatives": [
          {
            "text": "Big tech platforms and browsers (named generically as 'big tech' / 'Big AI companies'; Mozilla does not name competitors on these pages).",
            "prov": "inferred",
            "source": "https://www.mozilla.org/en-US/",
            "why": "Homepage lines 'Break free from big tech' and the State of Mozilla blurb set big tech as the alternative; no named competitor appears."
          }
        ]
      },
      "messaging": {
        "taglines": [
          {
            "text": "Reclaim the internet with us",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/who-we-are",
            "where": "Brand promise as sign-off; also printed on branded water bottle (rebrand launch post)"
          },
          {
            "text": "Internet for people, not profit",
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/",
            "where": "mozilla.org page title",
            "source_note": "2026-10-28"
          },
          {
            "text": "Guard the Open Internet",
            "prov": "observed",
            "source": "https://www.mozilla.org/en-US/about/",
            "where": "About page H1",
            "source_note": "2026-10-28"
          },
          {
            "text": "Now more than ever: come back to Firefox.",
            "prov": "observed",
            "source": "https://blog.mozilla.org/en/firefox/come-back-to-firefox/",
            "where": "Sign-off of the Oct 2026 Firefox campaign announcement (Firefox brand, not the Mozilla masterbrand)"
          }
        ],
        "attributes": [
          "passionate",
          "welcoming",
          "no bullsh*t",
          "fearless",
          "optimistic",
          "insightful"
        ],
        "key_messages": [],
        "boilerplate": {
          "text": "The Mozilla Project is a global community, working together since 1998, that believes openness, innovation and opportunity keep the internet healthy. Its organizations include the Mozilla Foundation, Mozilla Corporation (Firefox), MZLA (Thunderbird), Mozilla Ventures, Mozilla.ai and Mozilla Data Collective.",
          "prov": "published",
          "source": "https://www.mozilla.org/en-US/about/",
          "paraphrase": true
        },
        "pillars": [
          {
            "name": "Control",
            "claim": "You control your internet, data and AI.",
            "prov": "inferred",
            "source": "https://www.mozilla.org/en-US/",
            "why": "Recurs in positioning ('control their internet'), the homepage ('put you in control') and the Firefox campaign; Mozilla does not publish named pillars.",
            "proof": [
              "p-privacy",
              "p-ai-choice"
            ]
          },
          {
            "name": "Open",
            "claim": "Open source and an open, public-resource internet.",
            "prov": "inferred",
            "source": "https://www.mozilla.org/en-US/about/manifesto/",
            "why": "Mission and Manifesto principles 2 and 7; not published as a pillar.",
            "proof": [
              "p-manifesto",
              "p-opensource-ai"
            ]
          },
          {
            "name": "Independent / not for profit",
            "claim": "Not big tech, not extracting from people.",
            "prov": "inferred",
            "source": "https://www.mozilla.org/en-US/about/",
            "why": "Page title 'not profit', nonprofit steward story, Firefox 'always independent' quote.",
            "proof": [
              "p-since-1998",
              "p-nonprofit"
            ]
          },
          {
            "name": "Together",
            "claim": "Reclaiming is collective, not something Mozilla does for you.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/who-we-are",
            "proof": [
              "p-mozfest",
              "p-community"
            ]
          }
        ],
        "proof_points": [
          {
            "id": "p-since-1998",
            "kind": "other",
            "text": "Community working together since 1998.",
            "source": "https://www.mozilla.org/en-US/about/"
          },
          {
            "id": "p-manifesto",
            "kind": "other",
            "text": "Mozilla Manifesto (2007, 10 principles) plus Pledge for a Healthy Internet (2017).",
            "source": "https://www.mozilla.org/en-US/about/manifesto/"
          },
          {
            "id": "p-nonprofit",
            "kind": "other",
            "text": "A new nonprofit created to steward Mozilla for the long term (About page tile).",
            "source": "https://www.mozilla.org/en-US/about/"
          },
          {
            "id": "p-privacy",
            "kind": "other",
            "text": "Firefox has built-in tracking protections and open source code anyone can see (paraphrase).",
            "source": "https://blog.mozilla.org/en/firefox/come-back-to-firefox/"
          },
          {
            "id": "p-ai-choice",
            "kind": "other",
            "text": "Firefox lets you decide if AI features appear and how they behave (paraphrase).",
            "source": "https://blog.mozilla.org/en/firefox/come-back-to-firefox/"
          },
          {
            "id": "p-opensource-ai",
            "kind": "other",
            "text": "Open Source AI Is Winning: inaugural annual survey/report; cross-portfolio open source AI strategy ('owners, not renters').",
            "source": "https://www.mozilla.org/en-US/"
          },
          {
            "id": "p-mozfest",
            "kind": "other",
            "text": "Mozilla Festival, Barcelona, Oct. 28–30 (2026), eight tracks.",
            "source": "https://www.mozilla.org/en-US/"
          },
          {
            "id": "p-community",
            "kind": "other",
            "text": "Global community of volunteers, fellows and contributors; Foundation homepage spotlights named community members.",
            "source": "https://www.mozillafoundation.org/en/"
          }
        ],
        "claim_boundaries": [
          {
            "text": "Mozilla doesn't claim to reclaim the internet for people; the guide frames it as something everyone does together.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/who-we-are"
          },
          {
            "text": "Avoid buzzwords, hype and technical jargon; explain essential technical terms.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/voice-tone"
          },
          {
            "text": "Humor never punches down; nothing crass, sarcastic or mean.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/voice-tone"
          },
          {
            "text": "Lead with tangible impact, not intellectual grandstanding.",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/voice-tone"
          },
          {
            "text": "Say 'internet', not 'web' (lowercase internet).",
            "prov": "published",
            "source": "https://brand.mozilla.com/document/240#/-/voice-tone"
          },
          {
            "text": "No hard numbers for impact stats on the Foundation homepage were readable in this check; don't quote counts without a source.",
            "prov": "observed",
            "source": "https://www.mozillafoundation.org/en/",
            "source_note": "2026-10-28"
          }
        ]
      }
    }
  }
}