{
  "id": "framer",
  "version": "1.0.0",
  "name": "Framer",
  "description": "Framer is a design-to-production website builder — a designer- led canvas that publishes as a real website with components, CMS, animation, and AI surfaces. The brand is dark-first: the canonical canvas is near-black, display type is large and white, and a single saturated Framer Blue (#0055FF) carries the CTAs and accent layer. Where Webflow anchors on white, Framer's identity reads as a black gallery with a single blue spotlight.\n",
  "provenance": {
    "source": "https://www.framer.com/press",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Framer and the Framer logo are trademarks of Framer B.V. The primary brand color Framer Blue (#0055FF) is documented on Framer's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Framer name and mark is governed by Framer's brand-use guidance at framer.com/press.\n",
    "importedDate": "2026-05-18",
    "notes": "Framer's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. Framer is a dark-first brand — the canonical canvas is the near-black surface, and the identity role is set to framer-black so brand-badge surfaces render in the brand's true voice rather than in the blue accent.\n"
  },
  "tags": [
    "saas",
    "no-code",
    "framer",
    "design-tools",
    "dark-first"
  ],
  "palette": {
    "ref": "framer@1.0.0",
    "swatches": [
      {
        "id": "framer-blue",
        "name": "Framer Blue",
        "value": "#0055FF",
        "description": "Signature saturated blue. Primary brand color — used on primary CTAs, the wordmark on light surfaces, and key interactive accents on the dark canvas.\n",
        "aliases": []
      },
      {
        "id": "framer-black",
        "name": "Framer Black",
        "value": "#000000",
        "description": "Canonical dark-mode canvas — the brand's primary surface.",
        "aliases": []
      },
      {
        "id": "framer-white",
        "name": "Framer White",
        "value": "#FFFFFF",
        "description": "Display type on dark canvas; canvas on light mode.",
        "aliases": []
      },
      {
        "id": "framer-canvas-near-black",
        "name": "Framer Canvas Near-Black",
        "value": "#0A0A0A",
        "description": "Authored near-black canvas — used for slight surface differentiation against pure black.",
        "aliases": []
      },
      {
        "id": "framer-surface-dark",
        "name": "Framer Surface Dark",
        "value": "#171717",
        "description": "Authored elevated surface on the dark canvas.",
        "aliases": []
      },
      {
        "id": "framer-surface-elevated-dark",
        "name": "Framer Surface Elevated (Dark)",
        "value": "#262626",
        "description": "Authored modal / popover surface on dark.",
        "aliases": []
      },
      {
        "id": "framer-surface-light",
        "name": "Framer Surface Light",
        "value": "#F4F4F4",
        "description": "Authored panel surface for light mode.",
        "aliases": []
      },
      {
        "id": "framer-text-secondary-dark",
        "name": "Framer Text Secondary (Dark)",
        "value": "#B3B3B3",
        "description": "Authored secondary text on the dark canvas.",
        "aliases": []
      },
      {
        "id": "framer-text-tertiary-dark",
        "name": "Framer Text Tertiary (Dark)",
        "value": "#777777",
        "description": "Authored tertiary / muted text on the dark canvas.",
        "aliases": []
      },
      {
        "id": "framer-text-secondary-light",
        "name": "Framer Text Secondary (Light)",
        "value": "#4A4A4A",
        "description": "Authored secondary text on the light canvas.",
        "aliases": []
      },
      {
        "id": "framer-text-tertiary-light",
        "name": "Framer Text Tertiary (Light)",
        "value": "#878787",
        "description": "Authored tertiary / muted text on the light canvas.",
        "aliases": []
      },
      {
        "id": "framer-blue-hover",
        "name": "Framer Blue Hover",
        "value": "#3370FF",
        "description": "Authored softer Framer Blue for hover / active states.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "framer-white",
          "surface": "framer-surface-light",
          "surface-elevated": "framer-white",
          "text-primary": "framer-black",
          "text-secondary": "framer-text-secondary-light",
          "text-tertiary": "framer-text-tertiary-light",
          "primary": "framer-blue",
          "primary-hover": "framer-blue-hover",
          "accent": "framer-blue",
          "accent-hover": "framer-blue-hover",
          "warning": "framer-blue",
          "warning-hover": "framer-blue-hover",
          "error": "framer-blue",
          "success": "framer-blue"
        }
      },
      "dark": {
        "roles": {
          "background": "framer-black",
          "surface": "framer-surface-dark",
          "surface-elevated": "framer-surface-elevated-dark",
          "text-primary": "framer-white",
          "text-secondary": "framer-text-secondary-dark",
          "text-tertiary": "framer-text-tertiary-dark",
          "primary": "framer-blue",
          "primary-hover": "framer-blue-hover",
          "accent": "framer-blue",
          "accent-hover": "framer-blue-hover",
          "warning": "framer-blue",
          "warning-hover": "framer-blue-hover",
          "error": "framer-blue",
          "success": "framer-blue"
        }
      }
    }
  },
  "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": "framer-black",
      "on-identity": "framer-white",
      "background": "framer-black",
      "surface": "framer-surface-dark",
      "surface-elevated": "framer-surface-elevated-dark",
      "text-primary": "framer-white",
      "text-secondary": "framer-text-secondary-dark",
      "text-tertiary": "framer-text-tertiary-dark",
      "primary": "framer-blue",
      "primary-hover": "framer-blue-hover",
      "accent": "framer-blue",
      "accent-hover": "framer-blue-hover",
      "success": "framer-blue",
      "warning": "framer-blue",
      "error": "framer-blue"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark",
      "severity": "error",
      "rationale": "The Framer mark renders in white on the dark canonical canvas and in black or Framer Blue on light surfaces. Recoloring the mark into off-brand hues violates Framer's brand-use guidance.\n",
      "allowed": [
        "framer-blue",
        "framer-white",
        "framer-black"
      ],
      "forbidden": [
        "any-non-brand-color"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "Framer's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the mark.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "gradient-fill"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "WCAG 2.1 Level AA contrast minimum for body text. Framer White (#FFFFFF) on Framer Black (#000000) clears AA at 21:1.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "variantSelection",
      "target": "logo",
      "severity": "error",
      "rationale": "On the canonical dark canvas (Framer Black), use the light-fill mark variant. Do not place a dark-fill mark on the dark canvas.\n",
      "when": {
        "backgroundColorScheme": "dark"
      },
      "use": "logo-light"
    },
    {
      "type": "variantSelection",
      "target": "logo",
      "severity": "error",
      "rationale": "On light surfaces, use the dark-fill mark variant or the Framer Blue variant. Do not place a white mark on a white canvas.\n",
      "when": {
        "backgroundColorScheme": "light"
      },
      "use": "logo-dark"
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.identity",
      "severity": "error",
      "rationale": "Framer's trademark guidance forbids use of the Framer name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.\n",
      "forbiddenContexts": [
        "product-of-competitor",
        "merchandise",
        "endorsement-implication",
        "company-name-or-domain"
      ]
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "Framer Blue is calibrated to read on the near-black canvas and on white. Pairing it with another saturated hue at the same weight breaks the gallery-quiet voice of the dark-first identity.\n",
      "pairsWith": [
        "framer-black",
        "framer-white"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Framer's marketing surfaces render display headings in the 500–700 band against the dark canvas; lighter weights lose contrast and undermine the bold gallery voice.\n",
      "allowed": [
        "500",
        "600",
        "700"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Framer-skinned surfaces — especially light text on the dark canvas — must hold AA at minimum.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    }
  ]
}