{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "metadata": {
    "name": "Surfaces Public Page Tokens",
    "version": "0.2.0",
    "purpose": "Semantic roles for public pages and reviewable generated-UI examples using the active Simple Slab palette.",
    "accessibility": "Targets WCAG 2.2 AA; proof cyan is a supporting signal and is not used as the only cue."
  },
  "alias": {
    "brandInk": {
      "$type": "color",
      "$value": "#0B0D0E"
    },
    "brandIvory": {
      "$type": "color",
      "$value": "#F7F6F2"
    },
    "brandRule": {
      "$type": "color",
      "$value": "#DAD7CF"
    },
    "proofSignal": {
      "$type": "color",
      "$value": "#00A7C8"
    }
  },
  "theme": {
    "light": {
      "surface": {
        "canvas": {
          "$type": "color",
          "$value": "#F7F6F2"
        },
        "raised": {
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "subtle": {
          "$type": "color",
          "$value": "#F7F6F2"
        }
      },
      "text": {
        "primary": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "secondary": {
          "$type": "color",
          "$value": "#3C4145"
        },
        "subtle": {
          "$type": "color",
          "$value": "#555B60"
        },
        "inverse": {
          "$type": "color",
          "$value": "#F7F6F2"
        }
      },
      "border": {
        "default": {
          "$type": "color",
          "$value": "#DAD7CF"
        },
        "strong": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "subtle": {
          "$type": "color",
          "$value": "#DAD7CF"
        }
      },
      "focus": {
        "ring": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "accent": {
          "$type": "color",
          "$value": "#00A7C8"
        }
      },
      "action": {
        "primaryBackground": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "primaryText": {
          "$type": "color",
          "$value": "#F7F6F2"
        },
        "primaryHover": {
          "$type": "color",
          "$value": "#3C4145"
        },
        "secondaryBackground": {
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "secondaryText": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "secondaryBorder": {
          "$type": "color",
          "$value": "#0B0D0E"
        },
        "secondaryHover": {
          "$type": "color",
          "$value": "#F7F6F2"
        }
      }
    }
  },
  "component": {
    "button": {
      "height": {
        "$type": "dimension",
        "$value": "48px"
      },
      "compactHeight": {
        "$type": "dimension",
        "$value": "40px"
      },
      "radius": {
        "$type": "dimension",
        "$value": "6px"
      },
      "paddingInline": {
        "$type": "dimension",
        "$value": "22px"
      }
    },
    "proofMediaCard": {
      "radius": {
        "$type": "dimension",
        "$value": "8px"
      },
      "imageRatio": {
        "$type": "string",
        "$value": "16 / 10"
      },
      "border": {
        "$type": "color",
        "$value": "#DAD7CF"
      }
    }
  }
}