{
  "$description": "motionhub's brand in the W3C Design Tokens Format (DTCG 2025.10): paper and ink, one vermilion for the mark. The source of brand/tokens.css (node tools/brand.mjs), the logo files (brand/source/build-logo.py) and the site's look.",
  "color": {
    "$type": "color",
    "light": {
      "bg": { "$value": { "colorSpace": "srgb", "components": [0.9529, 0.9333, 0.8941], "hex": "#F3EEE4" }, "$description": "page ground: paper" },
      "surface": { "$value": { "colorSpace": "srgb", "components": [0.9843, 0.9725, 0.949], "hex": "#FBF8F2" }, "$description": "inputs, code, panels that sit on the paper" },
      "surface-2": { "$value": { "colorSpace": "srgb", "components": [0.9176, 0.8863, 0.8314], "hex": "#EAE2D4" }, "$description": "selected and hover" },
      "line": { "$value": { "colorSpace": "srgb", "components": [0.8667, 0.8275, 0.7647], "hex": "#DDD3C3" }, "$description": "borders and rules" },
      "text": { "$value": { "colorSpace": "srgb", "components": [0.1647, 0.149, 0.1333], "hex": "#2A2622" }, "$description": "ink: headings and primary buttons" },
      "text-2": { "$value": { "colorSpace": "srgb", "components": [0.2902, 0.2706, 0.2431], "hex": "#4A453E" }, "$description": "body copy" },
      "muted": { "$value": { "colorSpace": "srgb", "components": [0.4196, 0.3922, 0.3529], "hex": "#6B645A" }, "$description": "labels, counts and captions" },
      "mark": { "$value": { "colorSpace": "srgb", "components": [0.8863, 0.2667, 0.1686], "hex": "#E2442B" }, "$description": "the logo, and nothing else" },
      "like": { "$value": { "colorSpace": "srgb", "components": [0.7608, 0.2902, 0.2], "hex": "#C24A33" }, "$description": "a given like, and nothing else" },
      "accent": { "$value": { "colorSpace": "srgb", "components": [0.7686, 0.2196, 0.1216], "hex": "#C4381F" }, "$description": "the one call to action a page has, and nothing else" },
      "on-accent": { "$value": { "colorSpace": "srgb", "components": [0.9843, 0.9725, 0.949], "hex": "#FBF8F2" }, "$description": "text on accent" }
    },
    "dark": {
      "bg": { "$value": { "colorSpace": "srgb", "components": [0.102, 0.0902, 0.0784], "hex": "#1A1714" }, "$description": "page ground" },
      "surface": { "$value": { "colorSpace": "srgb", "components": [0.1333, 0.1176, 0.102], "hex": "#221E1A" }, "$description": "inputs, code, panels" },
      "surface-2": { "$value": { "colorSpace": "srgb", "components": [0.1725, 0.1529, 0.1333], "hex": "#2C2722" }, "$description": "selected and hover" },
      "line": { "$value": { "colorSpace": "srgb", "components": [0.2314, 0.2039, 0.1765], "hex": "#3B342D" }, "$description": "borders and rules" },
      "text": { "$value": { "colorSpace": "srgb", "components": [0.9451, 0.9216, 0.8784], "hex": "#F1EBE0" }, "$description": "headings and primary buttons" },
      "text-2": { "$value": { "colorSpace": "srgb", "components": [0.8275, 0.7922, 0.7373], "hex": "#D3CABC" }, "$description": "body copy" },
      "muted": { "$value": { "colorSpace": "srgb", "components": [0.6588, 0.6196, 0.5647], "hex": "#A89E90" }, "$description": "labels, counts and captions" },
      "mark": { "$value": { "colorSpace": "srgb", "components": [1, 0.4157, 0.302], "hex": "#FF6A4D" }, "$description": "the logo, and nothing else" },
      "like": { "$value": { "colorSpace": "srgb", "components": [1, 0.4784, 0.3686], "hex": "#FF7A5E" }, "$description": "a given like, and nothing else" },
      "accent": { "$value": { "colorSpace": "srgb", "components": [1.0, 0.4157, 0.302], "hex": "#FF6A4D" }, "$description": "the one call to action a page has, and nothing else" },
      "on-accent": { "$value": { "colorSpace": "srgb", "components": [0.102, 0.0902, 0.0784], "hex": "#1A1714" }, "$description": "text on accent" }
    }
  },
  "font": {
    "$type": "fontFamily",
    "ui": { "$value": ["Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "system-ui", "sans-serif"], "$description": "everything but code: Latin and figures in Inter (served by the site); Chinese in Noto Sans SC where installed, else the system's own" },
    "mono": { "$value": ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"], "$description": "commands, file names, versions, hex values" },
    "wordmark": { "$value": ["Instrument Serif", "serif"], "$description": "the wordmark only, shipped as outlines in the logo files; never set as text" }
  },
  "weight": {
    "$type": "fontWeight",
    "regular": { "$value": 400 },
    "medium": { "$value": 500 },
    "semibold": { "$value": 600 }
  },
  "size": {
    "$type": "dimension",
    "xs": { "$value": { "value": 12, "unit": "px" }, "$description": "small labels, counts" },
    "sm": { "$value": { "value": 13, "unit": "px" }, "$description": "secondary text, tables" },
    "base": { "$value": { "value": 14, "unit": "px" }, "$description": "body" },
    "md": { "$value": { "value": 16, "unit": "px" }, "$description": "section headings" },
    "lg": { "$value": { "value": 20, "unit": "px" }, "$description": "page headings" },
    "xl": { "$value": { "value": 26, "unit": "px" }, "$description": "a motion's name" },
    "xxl": { "$value": { "value": 30, "unit": "px" }, "$description": "a docs page's title" }
  },
  "radius": {
    "$type": "dimension",
    "sm": { "$value": { "value": 4, "unit": "px" }, "$description": "badges, keys" },
    "md": { "$value": { "value": 6, "unit": "px" }, "$description": "posters, selects" },
    "lg": { "$value": { "value": 8, "unit": "px" }, "$description": "inputs, buttons, code" },
    "xl": { "$value": { "value": 10, "unit": "px" }, "$description": "panels" },
    "pill": { "$value": { "value": 999, "unit": "px" }, "$description": "filter chips" }
  }
}