{
  "$description": "Brand: React (react@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette react@1.0.0",
      "react-cyan": {
        "$value": "#61DAFB",
        "$type": "color",
        "$description": "Canonical React logo color — the cyan of the atom-orbit mark used since the original Facebook open-source release.\n"
      },
      "react-blue-50": {
        "$value": "#087EA4",
        "$type": "color",
        "$description": "link / brand color on light surfaces."
      },
      "react-blue-40": {
        "$value": "#149ECA",
        "$type": "color",
        "$description": "docs link color on light surfaces."
      },
      "react-blue-30": {
        "$value": "#58C4DC",
        "$type": "color",
        "$description": "link / brand color on dark surfaces."
      },
      "react-blue-80": {
        "$value": "#043849",
        "$type": "color",
        "$description": "deep blue used for hover states on light surfaces."
      },
      "react-blue-10": {
        "$value": "#E6F7FF",
        "$type": "color",
        "$description": "highlight tint on light surfaces."
      },
      "gray-95": {
        "$value": "#16181D",
        "$type": "color",
        "$description": "deepest dark-mode background."
      },
      "gray-90": {
        "$value": "#23272F",
        "$type": "color",
        "$description": "primary dark canvas (wash-dark / primary)."
      },
      "gray-80": {
        "$value": "#343A46",
        "$type": "color",
        "$description": "dark-mode borders and card surfaces."
      },
      "gray-70": {
        "$value": "#404756",
        "$type": "color",
        "$description": "secondary text on dark surfaces."
      },
      "gray-60": {
        "$value": "#4E5769",
        "$type": "color",
        "$description": "tertiary text."
      },
      "gray-50": {
        "$value": "#5E687E",
        "$type": "color",
        "$description": "muted text."
      },
      "gray-30": {
        "$value": "#99A1B3",
        "$type": "color",
        "$description": "tertiary text on dark."
      },
      "gray-10": {
        "$value": "#EBECF0",
        "$type": "color",
        "$description": "light-mode borders and dividers."
      },
      "gray-5": {
        "$value": "#F6F7F9",
        "$type": "color",
        "$description": "light-mode card surfaces."
      },
      "react-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "light-mode page canvas (wash)."
      },
      "yellow-50": {
        "$value": "#C76A15",
        "$type": "color",
        "$description": "docs warning amber."
      },
      "red-50": {
        "$value": "#A6423A",
        "$type": "color",
        "$description": "docs danger red."
      },
      "green-50": {
        "$value": "#388F7F",
        "$type": "color",
        "$description": "docs success teal-green."
      },
      "purple-50": {
        "$value": "#575FB7",
        "$type": "color",
        "$description": "docs accent purple."
      }
    }
  },
  "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 React atom mark is a Meta trademark; recoloring, rotating, or compositing it with a product's own logo implies endorsement and is not permitted. Use the mark monochrome or in canonical React Cyan only.\n",
        "treatments": [
          "stretched",
          "rotated",
          "recolored",
          "drop-shadow",
          "on-busy-photo",
          "composite-with-product-logo"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.identity",
        "severity": "warning",
        "rationale": "React Cyan (#61DAFB) is the canonical logo color across the project's history and packaging. The docs-site blue ramp (#087EA4 / #149ECA / #58C4DC) carries link / interactive semantics on react.dev and should not be used as the mark fill.\n",
        "allowed": [
          "react-cyan"
        ],
        "forbidden": [
          "react-blue-50",
          "react-blue-40",
          "react-blue-30"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "White on Gray-90 (#23272F) exceeds 12:1 — well above the WCAG AA threshold for body text. The react.dev dark theme uses this pair as its primary text contrast.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.accent",
        "severity": "warning",
        "rationale": "React Cyan (#61DAFB) on Gray-90 sits around 8.5:1 — clears AA for body text on dark surfaces. On light surfaces it does NOT clear AA; use the docs blue ramp (Blue 50 #087EA4) for interactive links on light backgrounds instead.\n",
        "against": "background",
        "minRatio": 3,
        "standard": "WCAG-AA-large"
      },
      {
        "type": "variantSelection",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "The react.dev docs document Blue 50 (#087EA4) as the AA-compliant link color on light surfaces. Use this token for primary interactive elements in light mode rather than React Cyan.\n",
        "when": {
          "mode": "light"
        },
        "use": "react-blue-50"
      },
      {
        "type": "variantSelection",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "The react.dev docs document Blue 30 (#58C4DC) as the AA-compliant link color on dark surfaces. Use this token for primary interactive elements in dark mode.\n",
        "when": {
          "mode": "dark"
        },
        "use": "react-blue-30"
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "recommendation",
        "rationale": "react.dev uses a single sans for heading and body with modest size differential. Maintain at least a 1.25× heading-to-body ratio to preserve hierarchy.\n",
        "requires": "body",
        "minSizeRatio": 1.25
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. react.dev's color token system is designed to satisfy AA on both light and dark canvases; consumers must not derive intermediate stops that defeat the AA property.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.identity",
        "severity": "warning",
        "rationale": "React Cyan is the mark color — a thin accent against dark canvas. Using it as a large background fill compromises the dark-first brand voice; reserve it for the logo and small-glyph accents.\n",
        "forbiddenContexts": [
          "background-fill",
          "large-marketing-block"
        ]
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://react.dev/",
      "license": "MIT",
      "attribution": "React is MIT-licensed; the react.dev codebase (github.com/reactjs/react.dev) is MIT-licensed. The React logo (atom orbiting an electron) is a trademark of Meta Platforms, Inc. — historically released by Facebook under BSD/Patents and now widely used across the ecosystem. Brand palette values are captured verbatim from the react.dev `colors.js` module on main; the React Cyan identity (#61DAFB) is verified against the simple-icons project.\n",
      "importedDate": "2026-05-18",
      "notes": "react.dev does not publish a standalone brand-guidelines document; the colors.js module on the docs repository is the canonical source. Meta's broader brand uses Optimistic Display for marketing — that family is not in the catalog, so this atom substitutes Inter (catalog) for both heading and body roles, in keeping with the open-source spirit of the React project.\n"
    },
    "com.brand-atoms.references": {
      "palette": "react@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "source-code-pro@1.0.0"
      }
    }
  }
}