{
  "$description": "Brand: Framer (framer@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette framer@1.0.0",
      "framer-blue": {
        "$value": "#0055FF",
        "$type": "color",
        "$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"
      },
      "framer-black": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Canonical dark-mode canvas — the brand's primary surface."
      },
      "framer-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Display type on dark canvas; canvas on light mode."
      },
      "framer-canvas-near-black": {
        "$value": "#0A0A0A",
        "$type": "color",
        "$description": "Authored near-black canvas — used for slight surface differentiation against pure black."
      },
      "framer-surface-dark": {
        "$value": "#171717",
        "$type": "color",
        "$description": "Authored elevated surface on the dark canvas."
      },
      "framer-surface-elevated-dark": {
        "$value": "#262626",
        "$type": "color",
        "$description": "Authored modal / popover surface on dark."
      },
      "framer-surface-light": {
        "$value": "#F4F4F4",
        "$type": "color",
        "$description": "Authored panel surface for light mode."
      },
      "framer-text-secondary-dark": {
        "$value": "#B3B3B3",
        "$type": "color",
        "$description": "Authored secondary text on the dark canvas."
      },
      "framer-text-tertiary-dark": {
        "$value": "#777777",
        "$type": "color",
        "$description": "Authored tertiary / muted text on the dark canvas."
      },
      "framer-text-secondary-light": {
        "$value": "#4A4A4A",
        "$type": "color",
        "$description": "Authored secondary text on the light canvas."
      },
      "framer-text-tertiary-light": {
        "$value": "#878787",
        "$type": "color",
        "$description": "Authored tertiary / muted text on the light canvas."
      },
      "framer-blue-hover": {
        "$value": "#3370FF",
        "$type": "color",
        "$description": "Authored softer Framer Blue for hover / active states."
      }
    }
  },
  "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",
        "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"
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.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"
    },
    "com.brand-atoms.references": {
      "palette": "framer@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}