{
  "$description": "OpenClaw community design proposal; Claw Sans 0.7; not official upstream tokens.",
  "brand": {
    "red": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9686274509803922,
          0.0196078431372549,
          0.08235294117647059
        ],
        "alpha": 1,
        "hex": "#F70515"
      }
    },
    "black": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0,
          0.0,
          0.0
        ],
        "alpha": 1,
        "hex": "#000000"
      }
    },
    "white": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1.0,
          1.0,
          1.0
        ],
        "alpha": 1,
        "hex": "#FFFFFF"
      }
    },
    "ocean": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0784313725490196,
          0.3686274509803922,
          0.5215686274509804
        ],
        "alpha": 1,
        "hex": "#145E85"
      }
    },
    "rose": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8980392156862745,
          0.6666666666666666,
          0.7843137254901961
        ],
        "alpha": 1,
        "hex": "#E5AAC8"
      }
    }
  },
  "themes": {
    "light": {
      "canvas": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725490196078431,
            0.9803921568627451,
            0.9803921568627451
          ],
          "alpha": 1,
          "hex": "#F8FAFA"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            1.0,
            1.0
          ],
          "alpha": 1,
          "hex": "#FFFFFF"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.08235294117647059,
            0.12941176470588237,
            0.15294117647058825
          ],
          "alpha": 1,
          "hex": "#152127"
        }
      },
      "text-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333333333333333,
            0.38823529411764707,
            0.4196078431372549
          ],
          "alpha": 1,
          "hex": "#55636B"
        }
      },
      "action": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.08235294117647059,
            0.12941176470588237,
            0.15294117647058825
          ],
          "alpha": 1,
          "hex": "#152127"
        }
      },
      "on-action": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            1.0,
            1.0
          ],
          "alpha": 1,
          "hex": "#FFFFFF"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8156862745098039,
            0.8470588235294118,
            0.8627450980392157
          ],
          "alpha": 1,
          "hex": "#D0D8DC"
        }
      },
      "control-border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5137254901960784,
            0.5882352941176471,
            0.6235294117647059
          ],
          "alpha": 1,
          "hex": "#83969F"
        }
      },
      "focus": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.10588235294117647,
            0.39215686274509803,
            0.5372549019607843
          ],
          "alpha": 1,
          "hex": "#1B6489"
        }
      },
      "brand-text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7490196078431373,
            0.023529411764705882,
            0.08235294117647059
          ],
          "alpha": 1,
          "hex": "#BF0615"
        }
      },
      "error": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7058823529411765,
            0.13725490196078433,
            0.20392156862745098
          ],
          "alpha": 1,
          "hex": "#B42334"
        }
      },
      "shell": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176470588235294,
            0.9450980392156862,
            0.9607843137254902
          ],
          "alpha": 1,
          "hex": "#EAF1F5"
        }
      }
    },
    "dark": {
      "canvas": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.06666666666666667,
            0.10196078431372549,
            0.12549019607843137
          ],
          "alpha": 1,
          "hex": "#111A20"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.09019607843137255,
            0.1411764705882353,
            0.17254901960784313
          ],
          "alpha": 1,
          "hex": "#17242C"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294117647058824,
            0.9529411764705882,
            0.9607843137254902
          ],
          "alpha": 1,
          "hex": "#EDF3F5"
        }
      },
      "text-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6901960784313725,
            0.7529411764705882,
            0.792156862745098
          ],
          "alpha": 1,
          "hex": "#B0C0CA"
        }
      },
      "action": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294117647058824,
            0.9529411764705882,
            0.9607843137254902
          ],
          "alpha": 1,
          "hex": "#EDF3F5"
        }
      },
      "on-action": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.06666666666666667,
            0.10196078431372549,
            0.12549019607843137
          ],
          "alpha": 1,
          "hex": "#111A20"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.23529411764705882,
            0.3137254901960784,
            0.36470588235294116
          ],
          "alpha": 1,
          "hex": "#3C505D"
        }
      },
      "control-border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.44313725490196076,
            0.5333333333333333,
            0.5764705882352941
          ],
          "alpha": 1,
          "hex": "#718893"
        }
      },
      "focus": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5450980392156862,
            0.788235294117647,
            0.9294117647058824
          ],
          "alpha": 1,
          "hex": "#8BC9ED"
        }
      },
      "brand-text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            0.5882352941176471,
            0.6274509803921569
          ],
          "alpha": 1,
          "hex": "#FF96A0"
        }
      },
      "error": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            0.615686274509804,
            0.6862745098039216
          ],
          "alpha": 1,
          "hex": "#FF9DAF"
        }
      },
      "shell": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1450980392156863,
            0.2235294117647059,
            0.26666666666666666
          ],
          "alpha": 1,
          "hex": "#253944"
        }
      }
    },
    "textured": {
      "canvas": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137254901960784,
            0.9137254901960784,
            0.9137254901960784
          ],
          "alpha": 1,
          "hex": "#E9E9E9"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            1.0,
            1.0
          ],
          "alpha": 0.9490196078431372,
          "hex": "#FFFFFF"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.12549019607843137,
            0.12549019607843137,
            0.12549019607843137
          ],
          "alpha": 1,
          "hex": "#202020"
        }
      },
      "textSecondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3254901960784314,
            0.3254901960784314,
            0.3254901960784314
          ],
          "alpha": 1,
          "hex": "#535353"
        }
      },
      "action": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1411764705882353,
            0.1411764705882353,
            0.1411764705882353
          ],
          "alpha": 1,
          "hex": "#242424"
        }
      },
      "onAction": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1.0,
            1.0,
            1.0
          ],
          "alpha": 1,
          "hex": "#FFFFFF"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7254901960784313,
            0.7254901960784313,
            0.7254901960784313
          ],
          "alpha": 1,
          "hex": "#B9B9B9"
        }
      },
      "controlBorder": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4588235294117647,
            0.4588235294117647,
            0.4588235294117647
          ],
          "alpha": 1,
          "hex": "#757575"
        }
      },
      "focus": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.27058823529411763,
            0.27058823529411763,
            0.27058823529411763
          ],
          "alpha": 1,
          "hex": "#454545"
        }
      },
      "brandText": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7490196078431373,
            0.023529411764705882,
            0.08235294117647059
          ],
          "alpha": 1,
          "hex": "#BF0615"
        }
      },
      "shell": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294117647058824,
            0.9294117647058824,
            0.9294117647058824
          ],
          "alpha": 1,
          "hex": "#EDEDED"
        }
      }
    }
  },
  "space": {
    "4": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "8": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "12": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "16": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "24": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "32": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "48": {
      "$type": "dimension",
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "64": {
      "$type": "dimension",
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "target": {
    "$type": "dimension",
    "$value": {
      "value": 44,
      "unit": "px"
    }
  },
  "radius-control": {
    "$type": "dimension",
    "$value": {
      "value": 10,
      "unit": "px"
    }
  },
  "radius-panel": {
    "$type": "dimension",
    "$value": {
      "value": 12,
      "unit": "px"
    }
  },
  "motion": {
    "feedback": {
      "$type": "duration",
      "$value": {
        "value": 120,
        "unit": "ms"
      }
    },
    "local": {
      "$type": "duration",
      "$value": {
        "value": 180,
        "unit": "ms"
      }
    },
    "surface": {
      "$type": "duration",
      "$value": {
        "value": 240,
        "unit": "ms"
      }
    }
  },
  "font": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "OpenClaw Display",
        "system-ui",
        "sans-serif"
      ],
      "$description": "Expressive brand accent; fixed logo uses supplied SVG."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Claw Sans",
        "system-ui",
        "sans-serif"
      ]
    },
    "code": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Consolas",
        "monospace"
      ]
    },
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Claw Sans",
        "system-ui",
        "sans-serif"
      ]
    }
  },
  "materials": {
    "$description": "Web material proposal; native implementations use platform APIs.",
    "glassBlur": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "surfaceRadius": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "fallback": "Solid surface for reduced transparency, increased contrast or unsupported blur."
  },
  "texturedMaterial": {
    "$description": "Colourless polished shell glass. Neutral reflections and shallow relief in atmosphere and chrome; pale reading surfaces with dark text. Static web approximation, not physical refraction.",
    "blur": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "saturation": {
      "$type": "number",
      "$value": 1
    },
    "spring": {
      "$type": "cubicBezier",
      "$value": [
        0.22,
        1.35,
        0.42,
        1
      ]
    },
    "settle": {
      "$type": "duration",
      "$value": {
        "value": 380,
        "unit": "ms"
      }
    },
    "hoverLift": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "pressScale": {
      "$type": "number",
      "$value": 0.985
    }
  },
  "typography": {
    "$description": "Claw Sans 0.7 web role endpoints. See responsive notes for fluid titles. The font includes upright/italic300\u2013700; Light for large text only. Title size clamp(2.5rem,4.6vw,4rem), mobile clamp(2.125rem,7.5vw,2.75rem). Section clamp(1.75rem,3vw,2.25rem), mobile1.75rem. Mobile lead1.0625rem. Tracking is relative to actual size in CSS.",
    "title": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 4,
          "unit": "rem"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.08,
          "unit": "rem"
        },
        "lineHeight": 1.16
      }
    },
    "section": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 2.25,
          "unit": "rem"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.03375,
          "unit": "rem"
        },
        "lineHeight": 1.25
      }
    },
    "heading": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 1.25,
          "unit": "rem"
        },
        "fontWeight": 600,
        "letterSpacing": {
          "value": -0.00625,
          "unit": "rem"
        },
        "lineHeight": 1.35
      }
    },
    "lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 1.125,
          "unit": "rem"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.0,
          "unit": "rem"
        },
        "lineHeight": 1.6
      }
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 1.0625,
          "unit": "rem"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.0,
          "unit": "rem"
        },
        "lineHeight": 1.65
      }
    },
    "compactTitle": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 1,
          "unit": "rem"
        },
        "fontWeight": 600,
        "letterSpacing": {
          "value": 0,
          "unit": "rem"
        },
        "lineHeight": 1.45
      }
    },
    "label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 0.875,
          "unit": "rem"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": 0.0,
          "unit": "rem"
        },
        "lineHeight": 1.4
      }
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 0.8125,
          "unit": "rem"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.0,
          "unit": "rem"
        },
        "lineHeight": 1.5
      }
    },
    "eyebrow": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Claw Sans",
        "fontSize": {
          "value": 0.75,
          "unit": "rem"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": 0.045,
          "unit": "rem"
        },
        "lineHeight": 1.5
      }
    }
  }
}