{
  "$description": "PB.fit — portable token contract. Values with strengthened control borders are documentation adaptations, not a claim that production uses this JSON.",
  "name": "PB.fit",
  "provenance": {
    "source": "PB.FIT / styles.css · ui-components.js · components.html",
    "commit": "d80a208",
    "status": "Extracted foundations; React demonstration port",
    "dark": "Existing product mode"
  },
  "primitive": {
    "space": {
      "0": {
        "$type": "dimension",
        "$value": "0px"
      },
      "1": {
        "$type": "dimension",
        "$value": "4px"
      },
      "2": {
        "$type": "dimension",
        "$value": "8px"
      },
      "3": {
        "$type": "dimension",
        "$value": "12px"
      },
      "4": {
        "$type": "dimension",
        "$value": "16px"
      },
      "5": {
        "$type": "dimension",
        "$value": "20px"
      },
      "6": {
        "$type": "dimension",
        "$value": "24px"
      },
      "8": {
        "$type": "dimension",
        "$value": "32px"
      },
      "10": {
        "$type": "dimension",
        "$value": "40px"
      },
      "12": {
        "$type": "dimension",
        "$value": "48px"
      },
      "16": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "size": {
      "control": {
        "$type": "dimension",
        "$value": "44px"
      },
      "compact": {
        "$type": "dimension",
        "$value": "36px"
      }
    },
    "font": {
      "size": {
        "caption": {
          "$type": "dimension",
          "$value": "12px"
        },
        "label": {
          "$type": "dimension",
          "$value": "14px"
        },
        "body": {
          "$type": "dimension",
          "$value": "16px"
        },
        "title": {
          "$type": "dimension",
          "$value": "24px"
        },
        "display": {
          "$type": "dimension",
          "$value": "40px"
        }
      },
      "weight": {
        "regular": {
          "$type": "number",
          "$value": 400
        },
        "medium": {
          "$type": "number",
          "$value": 500
        },
        "strong": {
          "$type": "number",
          "$value": 600
        }
      },
      "leading": {
        "body": {
          "$type": "number",
          "$value": 1.5
        },
        "title": {
          "$type": "number",
          "$value": 1.15
        }
      },
      "family": {
        "body": {
          "$type": "fontFamily",
          "$value": "Inter, system-ui, sans-serif"
        }
      }
    },
    "motion": {
      "fast": {
        "$type": "duration",
        "$value": "160ms"
      },
      "ease": {
        "$type": "cubicBezier",
        "$value": "cubic-bezier(.2,.8,.2,1)"
      }
    },
    "color": {
      "paper": {
        "$type": "color",
        "$value": "#f4f4f0"
      },
      "surface": {
        "$type": "color",
        "$value": "#fbfbf8"
      },
      "ink": {
        "$type": "color",
        "$value": "#111214"
      },
      "muted": {
        "$type": "color",
        "$value": "#62666b"
      },
      "line": {
        "$type": "color",
        "$value": "#7a7e84"
      },
      "blue": {
        "$type": "color",
        "$value": "#002fa7"
      },
      "blue-dark": {
        "$type": "color",
        "$value": "#2452ff"
      },
      "blue-ink": {
        "$type": "color",
        "$value": "#7899ff"
      },
      "blue-soft": {
        "$type": "color",
        "$value": "#e3e8f4"
      },
      "night": {
        "$type": "color",
        "$value": "#08090a"
      },
      "night-surface": {
        "$type": "color",
        "$value": "#17181b"
      },
      "night-muted": {
        "$type": "color",
        "$value": "#afb3bc"
      },
      "night-line": {
        "$type": "color",
        "$value": "#707680"
      },
      "night-soft": {
        "$type": "color",
        "$value": "#17213f"
      },
      "white": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "good": {
        "$type": "color",
        "$value": "#28763e"
      },
      "good-dark": {
        "$type": "color",
        "$value": "#6fb67e"
      },
      "danger": {
        "$type": "color",
        "$value": "#a94a4a"
      },
      "danger-dark": {
        "$type": "color",
        "$value": "#f09b9b"
      }
    },
    "radius": {
      "surface": {
        "$type": "dimension",
        "$value": "18px"
      },
      "action": {
        "$type": "dimension",
        "$value": "999px"
      }
    }
  },
  "modes": {
    "light": {
      "color": {
        "canvas": {
          "$type": "color",
          "$value": "{primitive.color.paper}"
        },
        "surface": {
          "$type": "color",
          "$value": "{primitive.color.surface}"
        },
        "text": {
          "$type": "color",
          "$value": "{primitive.color.ink}"
        },
        "muted": {
          "$type": "color",
          "$value": "{primitive.color.muted}"
        },
        "border": {
          "$type": "color",
          "$value": "{primitive.color.line}"
        },
        "action": {
          "$type": "color",
          "$value": "{primitive.color.blue}"
        },
        "onAction": {
          "$type": "color",
          "$value": "{primitive.color.white}"
        },
        "link": {
          "$type": "color",
          "$value": "{primitive.color.blue}"
        },
        "subtle": {
          "$type": "color",
          "$value": "{primitive.color.blue-soft}"
        },
        "focus": {
          "$type": "color",
          "$value": "{primitive.color.blue}"
        },
        "success": {
          "$type": "color",
          "$value": "{primitive.color.good}"
        },
        "danger": {
          "$type": "color",
          "$value": "{primitive.color.danger}"
        }
      },
      "font": {
        "body": {
          "$type": "fontFamily",
          "$value": "{primitive.font.family.body}"
        }
      },
      "radius": {
        "control": {
          "$type": "dimension",
          "$value": "{primitive.radius.action}"
        },
        "surface": {
          "$type": "dimension",
          "$value": "{primitive.radius.surface}"
        }
      }
    },
    "dark": {
      "color": {
        "canvas": {
          "$type": "color",
          "$value": "{primitive.color.night}"
        },
        "surface": {
          "$type": "color",
          "$value": "{primitive.color.night-surface}"
        },
        "text": {
          "$type": "color",
          "$value": "{primitive.color.paper}"
        },
        "muted": {
          "$type": "color",
          "$value": "{primitive.color.night-muted}"
        },
        "border": {
          "$type": "color",
          "$value": "{primitive.color.night-line}"
        },
        "action": {
          "$type": "color",
          "$value": "{primitive.color.blue-dark}"
        },
        "onAction": {
          "$type": "color",
          "$value": "{primitive.color.white}"
        },
        "link": {
          "$type": "color",
          "$value": "{primitive.color.blue-ink}"
        },
        "subtle": {
          "$type": "color",
          "$value": "{primitive.color.night-soft}"
        },
        "focus": {
          "$type": "color",
          "$value": "{primitive.color.blue-ink}"
        },
        "success": {
          "$type": "color",
          "$value": "{primitive.color.good-dark}"
        },
        "danger": {
          "$type": "color",
          "$value": "{primitive.color.danger-dark}"
        }
      },
      "font": {
        "body": {
          "$type": "fontFamily",
          "$value": "{primitive.font.family.body}"
        }
      },
      "radius": {
        "control": {
          "$type": "dimension",
          "$value": "{primitive.radius.action}"
        },
        "surface": {
          "$type": "dimension",
          "$value": "{primitive.radius.surface}"
        }
      }
    }
  },
  "component": {
    "button": {
      "background": {
        "$type": "color",
        "$value": "{semantic.color.action}"
      },
      "foreground": {
        "$type": "color",
        "$value": "{semantic.color.onAction}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.control}"
      },
      "height": {
        "$type": "dimension",
        "$value": "{primitive.size.control}"
      }
    },
    "field": {
      "border": {
        "$type": "color",
        "$value": "{semantic.color.border}"
      },
      "background": {
        "$type": "color",
        "$value": "{semantic.color.surface}"
      }
    },
    "card": {
      "background": {
        "$type": "color",
        "$value": "{semantic.color.surface}"
      },
      "radius": {
        "$type": "dimension",
        "$value": "{semantic.radius.surface}"
      }
    }
  }
}