{
  "$description": "Brand: Vue.js (vuejs@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette vuejs@1.0.0",
      "vue-green": {
        "$value": "#4FC08D",
        "$type": "color",
        "$description": "Primary brand color — the lighter top chevron of the Vue mark and the project's identity green.\n"
      },
      "vue-green-dark": {
        "$value": "#42B883",
        "$type": "color",
        "$description": "Secondary brand green — the darker bottom chevron of the mark; also the hover state on Vue Green.\n"
      },
      "vue-navy": {
        "$value": "#35495E",
        "$type": "color",
        "$description": "Companion dark color — used as body text on light surfaces and as the dark-mode canvas anchor.\n"
      },
      "vue-navy-light": {
        "$value": "#476582",
        "$type": "color",
        "$description": "Lighter navy used for secondary text and dividers."
      },
      "vue-black": {
        "$value": "#1A1A1A",
        "$type": "color",
        "$description": "Deep canvas for dark-mode page background."
      },
      "vue-charcoal": {
        "$value": "#242424",
        "$type": "color",
        "$description": "Elevated dark surface."
      },
      "vue-gray": {
        "$value": "#7E7E7E",
        "$type": "color",
        "$description": "Mid neutral."
      },
      "vue-light-gray": {
        "$value": "#D5D5D5",
        "$type": "color",
        "$description": "Hairline borders."
      },
      "vue-off-white": {
        "$value": "#F6F6F7",
        "$type": "color",
        "$description": "Subtle layered surface."
      },
      "vue-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Page canvas in light mode."
      }
    }
  },
  "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": [
          "Source Code Pro",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → Source Code Pro (source-code-pro@1.0.0)"
      },
      "weight": {
        "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"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.rules": [
      {
        "type": "forbiddenTreatment",
        "target": "logo",
        "severity": "error",
        "rationale": "The Vue chevron mark is defined by its two-tone composition (Vue Green over Vue Navy). Recoloring either chevron, flattening to a single tone, or otherwise altering the geometry breaks the documented brand identity.\n",
        "treatments": [
          "flipped",
          "rotated",
          "stretched",
          "recolored",
          "single-tone-when-two-tone-required",
          "drop-shadow",
          "on-busy-photo"
        ]
      },
      {
        "type": "compositionConstraint",
        "target": "logo",
        "severity": "error",
        "rationale": "The canonical chevron pairing is Vue Green over Vue Navy. Substituting the deeper green or a neutral gray for either chevron is not part of the documented brand identity.\n",
        "pairsWith": [
          "vue-green",
          "vue-navy"
        ],
        "doesNotPairWith": [
          "vue-green-dark",
          "vue-light-gray"
        ]
      },
      {
        "type": "colorChoice",
        "target": "roles.colors.identity",
        "severity": "error",
        "rationale": "Vue Green and Vue Navy are the two identity colors; everything else in the palette is supporting tone.\n",
        "allowed": [
          "vue-green",
          "vue-navy"
        ]
      },
      {
        "type": "contrastRatio",
        "target": "text-primary",
        "severity": "error",
        "rationale": "Vue Navy (#35495E) on Vue White exceeds 9:1 — well above the WCAG AA threshold for body text. vuejs.org's typography sits on this pair.\n",
        "against": "background",
        "minRatio": 4.5,
        "standard": "WCAG-AA"
      },
      {
        "type": "contrastRatio",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "Vue Green (#4FC08D) on Vue White sits around 2.4:1 — does NOT clear AA-large for headlines. Reserve Vue Green for large display contexts, dark backgrounds, or pair with Vue Navy as a foreground for AA compliance.\n",
        "against": "background",
        "minRatio": 3,
        "standard": "WCAG-AA-large"
      },
      {
        "type": "fontPairing",
        "target": "typography.heading",
        "severity": "recommendation",
        "rationale": "vuejs.org uses a single sans for heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy.\n",
        "requires": "body",
        "minSizeRatio": 1.5
      },
      {
        "type": "accessibilityRequirement",
        "target": "*",
        "severity": "error",
        "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Vue Green is the brand accent; Vue Navy is the AA-compliant foreground for body text. Consumers must not pair Vue Green with white for fine text.\n",
        "standard": "WCAG-AA",
        "criterion": "1.4.3"
      },
      {
        "type": "contextRestriction",
        "target": "roles.colors.primary",
        "severity": "warning",
        "rationale": "Vue Green on a white background does not clear AA for body text; use it as headlines, accents, or on dark surfaces, not as a fine-text foreground on white.\n",
        "forbiddenContexts": [
          "body-text-on-light"
        ]
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.provenance": {
      "source": "https://vuejs.org/",
      "license": "MIT",
      "attribution": "Vue.js is MIT-licensed; the Vue chevron logo and the \"Vue.js\" word mark are copyright Yuxi (Evan) You and the Vue.js contributors. Brand colors documented here are the canonical Vue Green (#4FC08D) and Navy (#35495E) — the fill values of the two-tone chevron mark, verified against the simple-icons project. This atom encodes the published brand voice; no logos are bundled.\n",
      "importedDate": "2026-05-18",
      "notes": "Vue does not publish a dedicated brand-guidelines document on vuejs.org; the canonical color pairing is the SVG fill in the official logo files distributed via the Vue.js repositories and the simple-icons project. The brand intent draws from the project's About page and the historical \"Design Principles\" documentation.\n"
    },
    "com.brand-atoms.references": {
      "palette": "vuejs@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "source-code-pro@1.0.0"
      }
    }
  }
}