{
  "id": "svelte",
  "version": "1.0.0",
  "name": "Svelte",
  "description": "Svelte is a UI framework that compiles components to small, imperative JavaScript at build time — no runtime virtual DOM, no diffing, just direct DOM updates. The brand voice is sharp, technical, and unapologetic about being a compiler-first framework. The visual identity is a single flame mark in Svelte Orange (#FF3E00), high-energy against either light or dark canvases, with no two-tone or gradient treatment.\n",
  "provenance": {
    "source": "https://github.com/sveltejs/branding",
    "license": "MIT",
    "attribution": "Svelte is MIT-licensed; the official brand assets repository (github.com/sveltejs/branding) publishes the flame logo under the project's MIT terms with conditions of use that prohibit false endorsement and require accuracy. The flame orange (#FF3E00) is the SVG fill value in the canonical logo files and is verified against the simple-icons project. This atom encodes the published rules; no logos are bundled.\n",
    "importedDate": "2026-05-18",
    "notes": "The sveltejs/branding repository publishes the flame mark in multiple aspect ratios (horizontal, vertical, square, logotype, cutout). The shape of the flame is the brand; any treatment that alters its silhouette is forbidden.\n"
  },
  "tags": [
    "svelte",
    "framework",
    "javascript",
    "compiler",
    "orange",
    "open-source"
  ],
  "palette": {
    "ref": "svelte@1.0.0",
    "swatches": [
      {
        "id": "svelte-orange",
        "name": "Svelte Orange",
        "value": "#FF3E00",
        "description": "Primary brand color — the fill of the Svelte flame mark.\n",
        "aliases": []
      },
      {
        "id": "svelte-orange-dark",
        "name": "Svelte Orange Dark",
        "value": "#D63300",
        "description": "Darker orange used for hover states and shadowed accents.\n",
        "aliases": []
      },
      {
        "id": "svelte-orange-bright",
        "name": "Svelte Orange Bright",
        "value": "#FF6E40",
        "description": "Brighter orange used on dark surfaces for legibility.\n",
        "aliases": []
      },
      {
        "id": "svelte-black",
        "name": "Svelte Black",
        "value": "#13151A",
        "description": "Dark-mode page canvas.",
        "aliases": []
      },
      {
        "id": "svelte-charcoal",
        "name": "Svelte Charcoal",
        "value": "#222226",
        "description": "Elevated dark surface.",
        "aliases": []
      },
      {
        "id": "svelte-gray",
        "name": "Svelte Gray",
        "value": "#676778",
        "description": "Mid neutral.",
        "aliases": []
      },
      {
        "id": "svelte-light-gray",
        "name": "Svelte Light Gray",
        "value": "#D5D5D5",
        "description": "Hairline borders.",
        "aliases": []
      },
      {
        "id": "svelte-off-white",
        "name": "Svelte Off-White",
        "value": "#F4F4F4",
        "description": "Subtle layered surface.",
        "aliases": []
      },
      {
        "id": "svelte-white",
        "name": "Svelte White",
        "value": "#FFFFFF",
        "description": "Page canvas in light mode.",
        "aliases": []
      },
      {
        "id": "svelte-success",
        "name": "Svelte Success",
        "value": "#40B22E",
        "description": "Status success color.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "svelte-white",
          "surface": "svelte-off-white",
          "surface-elevated": "svelte-white",
          "text-primary": "svelte-black",
          "text-secondary": "svelte-gray",
          "text-tertiary": "svelte-light-gray",
          "primary": "svelte-orange",
          "primary-hover": "svelte-orange-dark",
          "accent": "svelte-orange-dark",
          "accent-hover": "svelte-orange",
          "warning": "svelte-orange",
          "warning-hover": "svelte-orange-dark",
          "error": "svelte-orange-dark",
          "success": "svelte-success"
        }
      },
      "dark": {
        "roles": {
          "background": "svelte-black",
          "surface": "svelte-charcoal",
          "surface-elevated": "svelte-charcoal",
          "text-primary": "svelte-white",
          "text-secondary": "svelte-light-gray",
          "text-tertiary": "svelte-gray",
          "primary": "svelte-orange-bright",
          "primary-hover": "svelte-orange",
          "accent": "svelte-orange",
          "accent-hover": "svelte-orange-bright",
          "warning": "svelte-orange-bright",
          "warning-hover": "svelte-orange",
          "error": "svelte-orange",
          "success": "svelte-success"
        }
      }
    }
  },
  "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": "svelte-orange",
      "on-identity": "svelte-white",
      "primary": "svelte-orange",
      "primary-hover": "svelte-orange-dark",
      "accent": "svelte-orange-dark",
      "accent-hover": "svelte-orange",
      "background": "svelte-white",
      "surface": "svelte-off-white",
      "text-primary": "svelte-black",
      "text-secondary": "svelte-gray"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "The sveltejs/branding repository's conditions of use forbid alterations that imply false endorsement and require accurate reproduction. Modifying the flame silhouette, applying gradients or drop shadows, or recoloring it changes the documented mark.\n",
      "treatments": [
        "flame-shape-modified",
        "recolored",
        "rotated",
        "skewed",
        "stretched",
        "gradient-fill",
        "drop-shadow",
        "on-busy-photo"
      ]
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.identity",
      "severity": "error",
      "rationale": "Svelte Orange (#FF3E00) is the single canonical mark color. The darker and brighter variants in this palette are for hover states and dark-surface legibility only — they are not approved mark fills.\n",
      "allowed": [
        "svelte-orange"
      ],
      "forbidden": [
        "svelte-orange-dark",
        "svelte-orange-bright"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Svelte Black (#13151A) on Svelte White exceeds 18:1 — well above the WCAG AA threshold for body text.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "warning",
      "rationale": "Svelte Orange (#FF3E00) on White sits around 4.1:1 — clears AA-large for headlines and clears AA for body text on most renderings. Consumers should verify against the actual font weight.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "recommendation",
      "rationale": "svelte.dev 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": "compositionConstraint",
      "target": "roles.colors.identity",
      "severity": "recommendation",
      "rationale": "The flame canonically sits on white or near-black. Pairing the canonical orange directly with the brighter variant creates a visually unstable orange- on-orange composition.\n",
      "pairsWith": [
        "svelte-white",
        "svelte-black"
      ],
      "doesNotPairWith": [
        "svelte-orange-bright"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. svelte.dev's documentation surfaces are designed AA-compliant; consumers must not derive intermediate stops that defeat that property.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "contextRestriction",
      "target": "trademark.use",
      "severity": "error",
      "rationale": "The sveltejs/branding repository's conditions of use require that any logo usage not imply that the Svelte project is sponsoring or endorsing the consumer's product.\n",
      "forbiddenContexts": [
        "implied-endorsement",
        "product-name-prefix"
      ]
    }
  ]
}