{
  "$description": "Brand: Cloudflare (cloudflare@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette cloudflare@1.0.0",
      "cloudflare-orange": {
        "$value": "#F38020",
        "$type": "color",
        "$description": "Primary brand color. The signature Cloudflare orange used on the cloud-and-line corporate mark and across primary CTAs.\n"
      },
      "marketing-orange": {
        "$value": "#FBAD41",
        "$type": "color",
        "$description": "Lighter orange used in marketing materials and the dual-orange gradient that anchors many Cloudflare hero compositions.\n"
      },
      "cloudflare-black": {
        "$value": "#222222",
        "$type": "color",
        "$description": "Near-black used for primary text and dark surfaces."
      },
      "cloudflare-dark-gray": {
        "$value": "#404041",
        "$type": "color",
        "$description": "Secondary dark surface; wordmark fill alternative."
      },
      "cloudflare-gray": {
        "$value": "#808080",
        "$type": "color",
        "$description": "Mid gray used for secondary text and inactive UI."
      },
      "cloudflare-light-gray": {
        "$value": "#D9D9D9",
        "$type": "color",
        "$description": "Subtle dividers, borders, and quiet card surfaces."
      },
      "cloudflare-off-white": {
        "$value": "#F6F6F6",
        "$type": "color",
        "$description": "Page-level background tint, lighter than card surfaces."
      },
      "cloudflare-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Base background and reversed text on the orange mark."
      }
    }
  },
  "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": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@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"
        },
        "$description": "Available font weights"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "colorChoice",
        "target": "logo.mark.fill",
        "severity": "error",
        "rationale": "Cloudflare's brand guidelines reserve Cloudflare Orange (#F38020) as the canonical mark color. Marketing Orange is a supporting tone for gradients and illustrations, not the primary mark fill.\n",
        "allowed": [
          "cloudflare-orange"
        ],
        "forbidden": [
          "marketing-orange",
          "cloudflare-black",
          "cloudflare-white"
        ]
      },
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "Cloudflare's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the corporate mark. Use only approved variants on backgrounds with sufficient contrast.\n",
        "treatments": [
          "stretched",
          "rotated",
          "recolored",
          "drop-shadow",
          "on-busy-photo"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "WCAG 2.1 Level AA contrast requirement for body text. Cloudflare Black (#222222) on Cloudflare White satisfies this with ~16:1.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "Cloudflare Orange on white is around 3.1:1 — it clears AA-large for headlines and large interactive text but falls short of the AA 4.5 threshold for body-sized text. Use the orange as a headline / CTA color, not for body copy on white.\n",
        "against": "background",
        "minRatio": 3,
        "standard": "WCAG-AA-large"
      },
      {
        "type": "compositionConstraint",
        "target": "roles.colors.primary",
        "severity": "recommendation",
        "rationale": "Cloudflare Orange + Marketing Orange is the canonical dual-orange gradient seen across cloudflare.com hero compositions. Pairing them is consistent with the brand's established voice.\n",
        "pairsWith": [
          "roles.colors.accent"
        ]
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "recommendation",
        "rationale": "Cloudflare's marketing surfaces use Inter for both heading and body, with a clear size differential. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.\n",
        "requires": "body",
        "minSizeRatio": 1.5
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://www.cloudflare.com/brand/",
      "license": "Proprietary — All Rights Reserved",
      "attribution": "Cloudflare and the Cloudflare logo are trademarks of Cloudflare, Inc. All brand colors and identity guidance documented here are derived from Cloudflare's public brand-resource page at cloudflare.com/brand/ and the Cloudflare Brand Guidelines PDF distributed from it.\n",
      "importedDate": "2026-05-17",
      "notes": "Brand-atoms' read of Cloudflare's public guidelines. This file is not an official Cloudflare brand document. No assets (logos, wordmarks) are bundled here — Cloudflare's marks are trademarked and must be retrieved directly from cloudflare.com/brand/ under Cloudflare's stated terms.\n"
    },
    "com.brand-atoms.references": {
      "palette": "cloudflare@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}