{
  "$description": "Brand: Mozilla (mozilla@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette mozilla@1.0.0",
      "mozilla-black": {
        "$value": "#161616",
        "$type": "color",
        "$description": "Corporate Mozilla identity color — the near-black canvas that anchors the brand. Source: simple-icons mozilla, brand.mozilla.com.\n"
      },
      "firefox-orange": {
        "$value": "#FF7139",
        "$type": "color",
        "$description": "Primary Firefox brand color — the bright orange of the Firefox flame mark.\n"
      },
      "firefox-red": {
        "$value": "#E66000",
        "$type": "color",
        "$description": "Deeper Firefox orange used in the flame gradient and for hover states.\n"
      },
      "firefox-yellow": {
        "$value": "#FFCB39",
        "$type": "color",
        "$description": "Bright yellow used at the tip of the Firefox flame mark.\n"
      },
      "firefox-blue": {
        "$value": "#0060DF",
        "$type": "color",
        "$description": "Firefox Blue used for the globe element behind the fox mark and for product links.\n"
      },
      "firefox-purple": {
        "$value": "#9059FF",
        "$type": "color",
        "$description": "Firefox Purple — supporting accent used in Mozilla product surfaces (e.g. Pocket, Relay).\n"
      },
      "mozilla-dark-canvas": {
        "$value": "#0C0C0D",
        "$type": "color",
        "$description": "Deepest dark-mode canvas."
      },
      "mozilla-charcoal": {
        "$value": "#252525",
        "$type": "color",
        "$description": "Elevated dark surface for cards and panels."
      },
      "mozilla-gray": {
        "$value": "#737373",
        "$type": "color",
        "$description": "Mid neutral for body text."
      },
      "mozilla-light-gray": {
        "$value": "#D7D7DB",
        "$type": "color",
        "$description": "Hairline borders on light canvas."
      },
      "mozilla-off-white": {
        "$value": "#F9F9FA",
        "$type": "color",
        "$description": "Subtle layered surface on light canvas."
      },
      "mozilla-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Page canvas in light mode."
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "Source Code Pro",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → Source Code Pro (source-code-pro@1.0.0)"
      },
      "weight": {
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "The Mozilla wordmark integrates the \"://\" character into the typography — detaching, recoloring, or altering it breaks the brand expression. The Firefox flame mark is defined by its specific silhouette and the orange-yellow gradient; altering either is not permitted.\n",
        "treatments": [
          "wordmark-modified",
          "colon-detached",
          "flame-shape-modified",
          "recolored",
          "rotated",
          "stretched",
          "drop-shadow"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.identity",
        "severity": "error",
        "rationale": "The Mozilla corporate identity color is Mozilla Black; the Firefox sub-brand's primary is Firefox Orange. The supporting Firefox hues (yellow, purple, blue) carry product or accent semantics and must not stand in as the brand identity.\n",
        "allowed": [
          "mozilla-black",
          "firefox-orange"
        ],
        "forbidden": [
          "firefox-yellow",
          "firefox-purple",
          "firefox-blue"
        ]
      },
      {
        "type": "variantSelection",
        "target": "roles.colors.identity",
        "severity": "warning",
        "rationale": "When expressing the Firefox sub-brand specifically (the browser product, the developer relations surface, the Firefox Acorn design system), Firefox Orange (#FF7139) takes the identity role in place of Mozilla Black.\n",
        "when": {
          "subbrand": "firefox"
        },
        "use": "firefox-orange"
      },
      {
        "type": "compositionConstraint",
        "target": "roles.colors.accent",
        "severity": "recommendation",
        "rationale": "The Firefox flame is the canonical orange-yellow-red gradient. Pairing Firefox Orange with its companion yellow and red preserves the brand's documented gradient expression; substituting unrelated hues breaks it.\n",
        "pairsWith": [
          "firefox-yellow",
          "firefox-red"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "Mozilla Black (#161616) on Mozilla White exceeds 17:1 — well above the WCAG AA threshold for body text.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.accent",
        "severity": "warning",
        "rationale": "Firefox Orange (#FF7139) on White sits around 3.3:1 — clears AA-large for headlines but does NOT clear AA for body text. Reserve the orange for large display, the mark fill, and accent use; for body-text foreground, use Firefox Red (#E66000) which clears AA at ~4.5:1.\n",
        "against": "background",
        "minRatio": 3,
        "standard": "WCAG-AA-large"
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "recommendation",
        "rationale": "Mozilla and Firefox surfaces use a humanist sans for both heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.\n",
        "requires": "body",
        "minSizeRatio": 1.5
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Mozilla's privacy- and accessibility-first mission is reinforced by AA compliance on all consumer surfaces.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "contextRestriction",
        "target": "trademark.use",
        "severity": "error",
        "rationale": "Mozilla's trademark policy forbids product names that imply Mozilla or Firefox endorsement, and reserves the use of the Firefox mark in extension marketing for add-ons published through addons.mozilla.org or with prior approval.\n",
        "forbiddenContexts": [
          "product-name-prefix",
          "implied-endorsement",
          "browser-extension-marketing-without-approval"
        ]
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://brand.mozilla.com/",
      "license": "Proprietary — All Rights Reserved",
      "attribution": "Mozilla and Firefox are trademarks of the Mozilla Foundation, used by the Mozilla Corporation. Brand colors documented here are the values published on the Mozilla Brand Portal (brand.mozilla.com) and verified against the simple-icons project: Mozilla Black #161616 (corporate near-black); Firefox Orange #FF7139 (the flame mark primary). The Mozilla and Firefox marks are not redistributed by this atom.\n",
      "importedDate": "2026-05-18",
      "notes": "Mozilla and Firefox share a brand ecosystem but maintain distinct expressions. The Mozilla corporate mark is the \"::\" wordmark on near-black; the Firefox product mark is the fox-circling-globe on the orange-yellow flame gradient. This atom encodes both layers: `identity` points at Mozilla Black (the corporate canvas), while the supporting palette carries the full Firefox flame gradient and product family.\n"
    },
    "com.brand-atoms.references": {
      "palette": "mozilla@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "source-code-pro@1.0.0"
      }
    }
  }
}