{
  "id": "react",
  "version": "1.0.0",
  "name": "React",
  "description": "React is a JavaScript library for building user interfaces — a componentized, declarative model that has become the de facto default for modern web UIs and the foundation of the React Native cross-platform stack. The brand voice is pragmatic, technical, and reference-quality: the docs surface (react.dev) is the brand. Visually the identity is dark-first — the atom-orbit logo's React Cyan (#61DAFB) reads against a near-black canvas (#23272F), and the docs supplement the cyan with a documentation blue ramp (#149ECA / #58C4DC) for AA-compliant links.\n",
  "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"
  },
  "tags": [
    "react",
    "library",
    "javascript",
    "meta",
    "cyan",
    "dark-first",
    "open-source"
  ],
  "palette": {
    "ref": "react@1.0.0",
    "swatches": [
      {
        "id": "react-cyan",
        "name": "React Cyan",
        "value": "#61DAFB",
        "description": "Canonical React logo color — the cyan of the atom-orbit mark used since the original Facebook open-source release.\n",
        "aliases": []
      },
      {
        "id": "react-blue-50",
        "name": "React Blue 50",
        "value": "#087EA4",
        "description": "link / brand color on light surfaces.",
        "aliases": []
      },
      {
        "id": "react-blue-40",
        "name": "React Blue 40",
        "value": "#149ECA",
        "description": "docs link color on light surfaces.",
        "aliases": []
      },
      {
        "id": "react-blue-30",
        "name": "React Blue 30",
        "value": "#58C4DC",
        "description": "link / brand color on dark surfaces.",
        "aliases": []
      },
      {
        "id": "react-blue-80",
        "name": "React Blue 80",
        "value": "#043849",
        "description": "deep blue used for hover states on light surfaces.",
        "aliases": []
      },
      {
        "id": "react-blue-10",
        "name": "React Blue 10",
        "value": "#E6F7FF",
        "description": "highlight tint on light surfaces.",
        "aliases": []
      },
      {
        "id": "gray-95",
        "name": "Gray 95",
        "value": "#16181D",
        "description": "deepest dark-mode background.",
        "aliases": []
      },
      {
        "id": "gray-90",
        "name": "Gray 90",
        "value": "#23272F",
        "description": "primary dark canvas (wash-dark / primary).",
        "aliases": []
      },
      {
        "id": "gray-80",
        "name": "Gray 80",
        "value": "#343A46",
        "description": "dark-mode borders and card surfaces.",
        "aliases": []
      },
      {
        "id": "gray-70",
        "name": "Gray 70",
        "value": "#404756",
        "description": "secondary text on dark surfaces.",
        "aliases": []
      },
      {
        "id": "gray-60",
        "name": "Gray 60",
        "value": "#4E5769",
        "description": "tertiary text.",
        "aliases": []
      },
      {
        "id": "gray-50",
        "name": "Gray 50",
        "value": "#5E687E",
        "description": "muted text.",
        "aliases": []
      },
      {
        "id": "gray-30",
        "name": "Gray 30",
        "value": "#99A1B3",
        "description": "tertiary text on dark.",
        "aliases": []
      },
      {
        "id": "gray-10",
        "name": "Gray 10",
        "value": "#EBECF0",
        "description": "light-mode borders and dividers.",
        "aliases": []
      },
      {
        "id": "gray-5",
        "name": "Gray 5",
        "value": "#F6F7F9",
        "description": "light-mode card surfaces.",
        "aliases": []
      },
      {
        "id": "react-white",
        "name": "React White",
        "value": "#FFFFFF",
        "description": "light-mode page canvas (wash).",
        "aliases": []
      },
      {
        "id": "yellow-50",
        "name": "Yellow 50",
        "value": "#C76A15",
        "description": "docs warning amber.",
        "aliases": []
      },
      {
        "id": "red-50",
        "name": "Red 50",
        "value": "#A6423A",
        "description": "docs danger red.",
        "aliases": []
      },
      {
        "id": "green-50",
        "name": "Green 50",
        "value": "#388F7F",
        "description": "docs success teal-green.",
        "aliases": []
      },
      {
        "id": "purple-50",
        "name": "Purple 50",
        "value": "#575FB7",
        "description": "docs accent purple.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "react-white",
          "surface": "gray-5",
          "surface-elevated": "react-white",
          "text-primary": "gray-90",
          "text-secondary": "gray-70",
          "text-tertiary": "gray-50",
          "primary": "react-blue-50",
          "primary-hover": "react-blue-80",
          "accent": "react-cyan",
          "accent-hover": "react-blue-40",
          "warning": "yellow-50",
          "warning-hover": "yellow-50",
          "error": "red-50",
          "success": "green-50"
        }
      },
      "dark": {
        "roles": {
          "background": "gray-90",
          "surface": "gray-80",
          "surface-elevated": "gray-70",
          "text-primary": "react-white",
          "text-secondary": "gray-30",
          "text-tertiary": "gray-50",
          "primary": "react-blue-30",
          "primary-hover": "react-blue-40",
          "accent": "react-cyan",
          "accent-hover": "react-blue-30",
          "warning": "yellow-50",
          "warning-hover": "yellow-50",
          "error": "red-50",
          "success": "green-50"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "source-code-pro@1.0.0",
      "family": "Source Code Pro",
      "classification": "monospace",
      "source": {
        "kind": "google-fonts",
        "family": "Source Code Pro",
        "url": "https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
      },
      "fallbackStack": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "react-cyan",
      "on-identity": "gray-90",
      "primary": "react-blue-50",
      "primary-hover": "react-blue-80",
      "accent": "react-cyan",
      "accent-hover": "react-blue-40",
      "background": "gray-90",
      "surface": "gray-80",
      "text-primary": "react-white",
      "text-secondary": "gray-30"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "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"
      ]
    }
  ]
}