{
  "$description": "Brand: Telegram — dark mode",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette telegram@1.0.0",
      "telegram-blue": {
        "$value": "#0088CC",
        "$type": "color",
        "$description": "Signature Telegram sky-blue — the brand's primary color, used on the paper-plane mark, primary CTAs, links across the marketing site, and the outgoing-message bubble.\n"
      },
      "telegram-blue-dark": {
        "$value": "#006699",
        "$type": "color",
        "$description": "Pressed / active variant of Telegram Blue — used on the hover and pressed states of primary buttons.\n"
      },
      "telegram-blue-100": {
        "$value": "#E5F1FA",
        "$type": "color",
        "$description": "Pale tint — used as a hover wash and link-highlight surface."
      },
      "telegram-blue-300": {
        "$value": "#3CA1EB",
        "$type": "color",
        "$description": "Mid-light blue — used in illustration and link-hover states."
      },
      "telegram-blue-400": {
        "$value": "#30AAFD",
        "$type": "color",
        "$description": "Bright blue accent — the brightest blue used on the marketing surface."
      },
      "telegram-blue-500": {
        "$value": "#2481CC",
        "$type": "color",
        "$description": "Telegram's \"Apple-app store\" blue tone — used in promotional iconography."
      },
      "telegram-blue-600": {
        "$value": "#1C93E3",
        "$type": "color",
        "$description": "Deeper marketing accent blue."
      },
      "telegram-blue-700": {
        "$value": "#1A8AD5",
        "$type": "color",
        "$description": "Header accent blue — used on the marketing-site nav highlight."
      },
      "telegram-blue-800": {
        "$value": "#1482D1",
        "$type": "color",
        "$description": "Deep accent — used on the marketing-site button-hover."
      },
      "telegram-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Pure white — primary surface on the marketing site and light-mode chat canvas."
      },
      "telegram-surface-light": {
        "$value": "#F7F7F7",
        "$type": "color",
        "$description": "Light-mode elevated surface — the chat-list rail on the iOS client."
      },
      "telegram-border-light": {
        "$value": "#E6E6E6",
        "$type": "color",
        "$description": "Quiet divider on the marketing-site surface."
      },
      "telegram-text-on-light": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Primary text on the marketing-site and light-mode chat canvas."
      },
      "telegram-text-secondary-light": {
        "$value": "#7D7F81",
        "$type": "color",
        "$description": "Secondary text on light-mode surfaces."
      },
      "telegram-canvas-dark": {
        "$value": "#212429",
        "$type": "color",
        "$description": "Deep slate — Telegram's dark-mode chat canvas tone (the \"Night\" theme baseline), captured from the deployed telegram.org dark-mode stylesheet.\n"
      },
      "telegram-surface-dark": {
        "$value": "#262A2E",
        "$type": "color",
        "$description": "Dark-mode elevated surface — chat-list rail and top bar."
      },
      "telegram-surface-dark-elevated": {
        "$value": "#33373D",
        "$type": "color",
        "$description": "Dark-mode deepest-elevated surface."
      },
      "telegram-text-on-dark": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text on the dark-mode canvas."
      },
      "telegram-text-secondary-dark": {
        "$value": "#84888C",
        "$type": "color",
        "$description": "Secondary text and timestamps on the dark canvas."
      },
      "telegram-surface-dark-deep": {
        "$value": "#1E1E1E",
        "$type": "color",
        "$description": "Deepest dark surface — used as the chat-input background."
      }
    },
    "roles": {
      "$description": "Semantic color roles (dark mode) mapped to palette swatches",
      "background": {
        "$value": "{color.swatches.telegram-canvas-dark}",
        "$type": "color",
        "$description": "background role → Telegram Canvas Dark"
      },
      "surface": {
        "$value": "{color.swatches.telegram-surface-dark}",
        "$type": "color",
        "$description": "surface role → Telegram Surface Dark"
      },
      "surface-elevated": {
        "$value": "{color.swatches.telegram-surface-dark-elevated}",
        "$type": "color",
        "$description": "surface-elevated role → Telegram Surface Dark Elevated"
      },
      "text-primary": {
        "$value": "{color.swatches.telegram-text-on-dark}",
        "$type": "color",
        "$description": "text-primary role → Telegram Text on Dark"
      },
      "text-secondary": {
        "$value": "{color.swatches.telegram-text-secondary-dark}",
        "$type": "color",
        "$description": "text-secondary role → Telegram Text Secondary Dark"
      },
      "text-tertiary": {
        "$value": "{color.swatches.telegram-text-secondary-dark}",
        "$type": "color",
        "$description": "text-tertiary role → Telegram Text Secondary Dark"
      },
      "primary": {
        "$value": "{color.swatches.telegram-blue-300}",
        "$type": "color",
        "$description": "primary role → Telegram Blue 300"
      },
      "primary-hover": {
        "$value": "{color.swatches.telegram-blue-400}",
        "$type": "color",
        "$description": "primary-hover role → Telegram Blue 400"
      },
      "accent": {
        "$value": "{color.swatches.telegram-blue-300}",
        "$type": "color",
        "$description": "accent role → Telegram Blue 300"
      },
      "accent-hover": {
        "$value": "{color.swatches.telegram-blue-400}",
        "$type": "color",
        "$description": "accent-hover role → Telegram Blue 400"
      },
      "warning": {
        "$value": "{color.swatches.telegram-blue-400}",
        "$type": "color",
        "$description": "warning role → Telegram Blue 400"
      },
      "warning-hover": {
        "$value": "{color.swatches.telegram-blue-700}",
        "$type": "color",
        "$description": "warning-hover role → Telegram Blue 700"
      },
      "error": {
        "$value": "{color.swatches.telegram-blue-dark}",
        "$type": "color",
        "$description": "error role → Telegram Blue Dark"
      },
      "success": {
        "$value": "{color.swatches.telegram-blue-300}",
        "$type": "color",
        "$description": "success role → Telegram Blue 300"
      },
      "border": {
        "$value": "{color.swatches.telegram-surface-dark-elevated}",
        "$type": "color",
        "$description": "border role → Telegram Surface Dark Elevated"
      },
      "brand-overrides": {
        "$description": "Brand-level role overrides (take precedence over palette role mappings)",
        "identity": {
          "$value": "{color.swatches.telegram-blue}",
          "$type": "color",
          "$description": "Brand role identity → Telegram Blue"
        },
        "on-identity": {
          "$value": "{color.swatches.telegram-white}",
          "$type": "color",
          "$description": "Brand role on-identity → Telegram White"
        },
        "background": {
          "$value": "{color.swatches.telegram-white}",
          "$type": "color",
          "$description": "Brand role background → Telegram White"
        },
        "surface": {
          "$value": "{color.swatches.telegram-surface-light}",
          "$type": "color",
          "$description": "Brand role surface → Telegram Surface Light"
        },
        "surface-elevated": {
          "$value": "{color.swatches.telegram-white}",
          "$type": "color",
          "$description": "Brand role surface-elevated → Telegram White"
        },
        "text-primary": {
          "$value": "{color.swatches.telegram-text-on-light}",
          "$type": "color",
          "$description": "Brand role text-primary → Telegram Text on Light"
        },
        "text-secondary": {
          "$value": "{color.swatches.telegram-text-secondary-light}",
          "$type": "color",
          "$description": "Brand role text-secondary → Telegram Text Secondary Light"
        },
        "primary": {
          "$value": "{color.swatches.telegram-blue}",
          "$type": "color",
          "$description": "Brand role primary → Telegram Blue"
        },
        "primary-hover": {
          "$value": "{color.swatches.telegram-blue-800}",
          "$type": "color",
          "$description": "Brand role primary-hover → Telegram Blue 800"
        },
        "accent": {
          "$value": "{color.swatches.telegram-blue}",
          "$type": "color",
          "$description": "Brand role accent → Telegram Blue"
        },
        "accent-hover": {
          "$value": "{color.swatches.telegram-blue-700}",
          "$type": "color",
          "$description": "Brand role accent-hover → Telegram Blue 700"
        },
        "mark": {
          "$value": "{color.swatches.telegram-blue}",
          "$type": "color",
          "$description": "Brand role mark → Telegram Blue"
        },
        "success": {
          "$value": "{color.swatches.telegram-blue}",
          "$type": "color",
          "$description": "Brand role success → Telegram Blue"
        },
        "warning": {
          "$value": "{color.swatches.telegram-blue-400}",
          "$type": "color",
          "$description": "Brand role warning → Telegram Blue 400"
        },
        "error": {
          "$value": "{color.swatches.telegram-blue-dark}",
          "$type": "color",
          "$description": "Brand role error → Telegram Blue Dark"
        }
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Roboto",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Roboto (roboto@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Roboto",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Roboto (roboto@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$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"
      }
    }
  }
}