{
  "id": "cloudflare",
  "version": "1.0.0",
  "name": "Cloudflare",
  "description": "Cloudflare, Inc. is a global edge-network and security company whose products span CDN, DNS, DDoS protection, zero-trust networking, and developer-platform services (Workers, R2, D1). The visual identity is built around a single signature color — Cloudflare Orange (#F38020) — paired with a dual-orange gradient and a restrained neutral palette that keeps technical density legible. The voice is engineering-first: measured, technical, optimistic about the open web, and quietly insistent on speed and security as table stakes rather than features.\n",
  "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"
  },
  "tags": [
    "tech",
    "edge-network",
    "security",
    "infrastructure",
    "cloudflare"
  ],
  "palette": {
    "ref": "cloudflare@1.0.0",
    "swatches": [
      {
        "id": "cloudflare-orange",
        "name": "Cloudflare Orange",
        "value": "#F38020",
        "description": "Primary brand color. The signature Cloudflare orange used on the cloud-and-line corporate mark and across primary CTAs.\n",
        "aliases": []
      },
      {
        "id": "marketing-orange",
        "name": "Marketing Orange",
        "value": "#FBAD41",
        "description": "Lighter orange used in marketing materials and the dual-orange gradient that anchors many Cloudflare hero compositions.\n",
        "aliases": []
      },
      {
        "id": "cloudflare-black",
        "name": "Cloudflare Black",
        "value": "#222222",
        "description": "Near-black used for primary text and dark surfaces.",
        "aliases": []
      },
      {
        "id": "cloudflare-dark-gray",
        "name": "Cloudflare Dark Gray",
        "value": "#404041",
        "description": "Secondary dark surface; wordmark fill alternative.",
        "aliases": []
      },
      {
        "id": "cloudflare-gray",
        "name": "Cloudflare Gray",
        "value": "#808080",
        "description": "Mid gray used for secondary text and inactive UI.",
        "aliases": []
      },
      {
        "id": "cloudflare-light-gray",
        "name": "Cloudflare Light Gray",
        "value": "#D9D9D9",
        "description": "Subtle dividers, borders, and quiet card surfaces.",
        "aliases": []
      },
      {
        "id": "cloudflare-off-white",
        "name": "Cloudflare Off-White",
        "value": "#F6F6F6",
        "description": "Page-level background tint, lighter than card surfaces.",
        "aliases": []
      },
      {
        "id": "cloudflare-white",
        "name": "Cloudflare White",
        "value": "#FFFFFF",
        "description": "Base background and reversed text on the orange mark.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "cloudflare-white",
          "surface": "cloudflare-off-white",
          "surface-elevated": "cloudflare-white",
          "text-primary": "cloudflare-black",
          "text-secondary": "cloudflare-dark-gray",
          "text-tertiary": "cloudflare-gray",
          "primary": "cloudflare-orange",
          "primary-hover": "marketing-orange",
          "accent": "marketing-orange",
          "accent-hover": "cloudflare-orange",
          "warning": "marketing-orange",
          "warning-hover": "cloudflare-orange",
          "error": "cloudflare-orange",
          "success": "cloudflare-gray"
        }
      },
      "dark": {
        "roles": {
          "background": "cloudflare-black",
          "surface": "cloudflare-dark-gray",
          "surface-elevated": "cloudflare-gray",
          "text-primary": "cloudflare-white",
          "text-secondary": "cloudflare-light-gray",
          "text-tertiary": "cloudflare-gray",
          "primary": "cloudflare-orange",
          "primary-hover": "marketing-orange",
          "accent": "marketing-orange",
          "accent-hover": "cloudflare-orange",
          "warning": "marketing-orange",
          "warning-hover": "cloudflare-orange",
          "error": "cloudflare-orange",
          "success": "cloudflare-light-gray"
        }
      }
    }
  },
  "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": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "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"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "cloudflare-orange",
      "on-identity": "cloudflare-white",
      "primary": "cloudflare-orange",
      "primary-hover": "marketing-orange",
      "accent": "marketing-orange",
      "background": "cloudflare-white",
      "surface": "cloudflare-off-white",
      "text-primary": "cloudflare-black",
      "text-secondary": "cloudflare-dark-gray"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "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
    }
  ]
}