{
  "id": "vuejs",
  "version": "1.0.0",
  "name": "Vue.js",
  "description": "Vue.js is a progressive JavaScript framework for building user interfaces — incrementally adoptable, template-driven, and designed to \"scale between a library and a framework.\" The brand voice is approachable, pragmatic, and community-driven: created by Evan You, stewarded today by a small core team and a broad contributor base. Visually, the two-tone Vue chevron pairs Vue Green (#4FC08D) over Vue Navy (#35495E) as the core identity.\n",
  "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"
  },
  "tags": [
    "vuejs",
    "vue",
    "framework",
    "javascript",
    "green",
    "open-source"
  ],
  "palette": {
    "ref": "vuejs@1.0.0",
    "swatches": [
      {
        "id": "vue-green",
        "name": "Vue Green",
        "value": "#4FC08D",
        "description": "Primary brand color — the lighter top chevron of the Vue mark and the project's identity green.\n",
        "aliases": []
      },
      {
        "id": "vue-green-dark",
        "name": "Vue Green Dark",
        "value": "#42B883",
        "description": "Secondary brand green — the darker bottom chevron of the mark; also the hover state on Vue Green.\n",
        "aliases": []
      },
      {
        "id": "vue-navy",
        "name": "Vue Navy",
        "value": "#35495E",
        "description": "Companion dark color — used as body text on light surfaces and as the dark-mode canvas anchor.\n",
        "aliases": []
      },
      {
        "id": "vue-navy-light",
        "name": "Vue Navy Light",
        "value": "#476582",
        "description": "Lighter navy used for secondary text and dividers.",
        "aliases": []
      },
      {
        "id": "vue-black",
        "name": "Vue Black",
        "value": "#1A1A1A",
        "description": "Deep canvas for dark-mode page background.",
        "aliases": []
      },
      {
        "id": "vue-charcoal",
        "name": "Vue Charcoal",
        "value": "#242424",
        "description": "Elevated dark surface.",
        "aliases": []
      },
      {
        "id": "vue-gray",
        "name": "Vue Gray",
        "value": "#7E7E7E",
        "description": "Mid neutral.",
        "aliases": []
      },
      {
        "id": "vue-light-gray",
        "name": "Vue Light Gray",
        "value": "#D5D5D5",
        "description": "Hairline borders.",
        "aliases": []
      },
      {
        "id": "vue-off-white",
        "name": "Vue Off-White",
        "value": "#F6F6F7",
        "description": "Subtle layered surface.",
        "aliases": []
      },
      {
        "id": "vue-white",
        "name": "Vue White",
        "value": "#FFFFFF",
        "description": "Page canvas in light mode.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "vue-white",
          "surface": "vue-off-white",
          "surface-elevated": "vue-white",
          "text-primary": "vue-navy",
          "text-secondary": "vue-navy-light",
          "text-tertiary": "vue-gray",
          "primary": "vue-green",
          "primary-hover": "vue-green-dark",
          "accent": "vue-navy",
          "accent-hover": "vue-navy-light",
          "warning": "vue-green-dark",
          "warning-hover": "vue-green",
          "error": "vue-green-dark",
          "success": "vue-green"
        }
      },
      "dark": {
        "roles": {
          "background": "vue-black",
          "surface": "vue-charcoal",
          "surface-elevated": "vue-navy",
          "text-primary": "vue-white",
          "text-secondary": "vue-light-gray",
          "text-tertiary": "vue-gray",
          "primary": "vue-green",
          "primary-hover": "vue-green-dark",
          "accent": "vue-navy-light",
          "accent-hover": "vue-light-gray",
          "warning": "vue-green-dark",
          "warning-hover": "vue-green",
          "error": "vue-green-dark",
          "success": "vue-green"
        }
      }
    }
  },
  "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": "source-code-pro@1.0.0",
      "family": "Source Code Pro",
      "classification": "monospace",
      "source": {
        "kind": "google-fonts",
        "family": "Source Code Pro",
        "url": "https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
      },
      "fallbackStack": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "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"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "vue-green",
      "on-identity": "vue-white",
      "primary": "vue-green",
      "primary-hover": "vue-green-dark",
      "accent": "vue-navy",
      "accent-hover": "vue-navy-light",
      "background": "vue-white",
      "surface": "vue-off-white",
      "text-primary": "vue-navy",
      "text-secondary": "vue-navy-light"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "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"
      ]
    }
  ]
}