{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "Cowork UI Kit v0.5.0 — W3C Design Token Format export. Source: tokens/foundation.css + tokens/semantic.css. Brands as theme sets.",
  "$metadata": {
    "version": "0.5.0",
    "generated": "2026-05-20T04:59:12.815Z",
    "source": [
      "tokens/foundation.css",
      "tokens/semantic.css",
      "brands/*.brand.css"
    ],
    "tokenSets": [
      "core",
      "semantic",
      "brand/a-kryphan",
      "brand/ai-tools",
      "brand/annhien",
      "brand/betterbuy",
      "brand/haogood",
      "brand/khi",
      "brand/xanh"
    ]
  },
  "color": {
    "success": {
      "$type": "color",
      "$value": "hsl(158 64% 27%)",
      "$description": "Status success — WCAG AA on white + on cream"
    },
    "danger": {
      "$type": "color",
      "$value": "hsl(0 75% 44%)",
      "$description": "Status danger / error"
    },
    "warning": {
      "$type": "color",
      "$value": "hsl(38 92% 28%)",
      "$description": "Status warning"
    },
    "info": {
      "$type": "color",
      "$value": "hsl(195 86% 30%)",
      "$description": "Status informational"
    },
    "warm-bg": {
      "$type": "color",
      "$value": "hsl(40 50% 96%)",
      "$description": "Warm aesthetic — page background (cream)"
    },
    "warm-surface": {
      "$type": "color",
      "$value": "hsl(40 50% 98%)",
      "$description": "Warm — card surface (lighter than bg)"
    },
    "warm-surface-2": {
      "$type": "color",
      "$value": "hsl(40 50% 94%)",
      "$description": "Warm — page accent / linen"
    },
    "warm-border": {
      "$type": "color",
      "$value": "hsl(40 50% 87%)",
      "$description": "Warm — divider border"
    },
    "dark-bg": {
      "$type": "color",
      "$value": "hsl(240 20% 5%)",
      "$description": "Dark aesthetic — page background (near-black)"
    },
    "dark-surface": {
      "$type": "color",
      "$value": "hsl(240 20% 9%)",
      "$description": "Dark — card surface"
    },
    "dark-surface-2": {
      "$type": "color",
      "$value": "hsl(240 20% 12%)",
      "$description": "Dark — page accent surface"
    },
    "dark-border": {
      "$type": "color",
      "$value": "hsl(240 20% 18%)",
      "$description": "Dark — divider border"
    },
    "dark-violet": {
      "$type": "color",
      "$value": "hsl(252 100% 68%)",
      "$description": "Dark accent violet"
    },
    "dark-cyan": {
      "$type": "color",
      "$value": "hsl(188 86% 53%)",
      "$description": "Dark accent cyan"
    },
    "dark-emerald": {
      "$type": "color",
      "$value": "hsl(158 84% 39%)",
      "$description": "Dark accent emerald"
    },
    "dark-amber": {
      "$type": "color",
      "$value": "hsl(38 92% 50%)",
      "$description": "Dark accent amber"
    }
  },
  "space": {
    "0": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "Spacing 0 — no gap"
    },
    "1": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Spacing 1 — base unit (×1)"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Spacing 2 — base unit (×2)"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Spacing 3"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Spacing 4 — default group gap"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "Spacing 5"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Spacing 6 — card padding"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Spacing 8"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Spacing 10"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "Spacing 12 — section spacing"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px",
      "$description": "Spacing 16"
    },
    "20": {
      "$type": "dimension",
      "$value": "80px",
      "$description": "Spacing 20"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px",
      "$description": "Spacing 24"
    },
    "32": {
      "$type": "dimension",
      "$value": "128px",
      "$description": "Spacing 32 — hero blocks"
    }
  },
  "radius": {
    "none": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "No rounding"
    },
    "xs": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Badge, chip"
    },
    "sm": {
      "$type": "dimension",
      "$value": "6px",
      "$description": "Input, small button"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Default button, card"
    },
    "lg": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Card, modal"
    },
    "xl": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Hero card, sheet"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Bottom sheet, large card"
    },
    "3xl": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Extra-rounded surfaces"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px",
      "$description": "Pill, avatar (circular)"
    }
  },
  "border": {
    "0": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "No border"
    },
    "1": {
      "$type": "dimension",
      "$value": "1px",
      "$description": "Default border"
    },
    "2": {
      "$type": "dimension",
      "$value": "1.5px",
      "$description": "Emphasized — input focus, selected"
    },
    "3": {
      "$type": "dimension",
      "$value": "2px",
      "$description": "Heavy — error state, active selection"
    },
    "4": {
      "$type": "dimension",
      "$value": "3px",
      "$description": "Indicator bars"
    }
  },
  "typography": {
    "font-family": {
      "sans": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "Inter Fallback",
          "system-ui",
          "-apple-system",
          "sans-serif"
        ],
        "$description": "Default sans-serif (body, UI)"
      },
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Plus Jakarta Sans",
          "Inter",
          "Inter Fallback",
          "sans-serif"
        ],
        "$description": "Display heading"
      },
      "serif": {
        "$type": "fontFamily",
        "$value": [
          "Source Serif 4",
          "Source Serif 4 Fallback",
          "Lora",
          "Georgia",
          "serif"
        ],
        "$description": "Editorial serif (VN diacritic friendly)"
      },
      "serif-heavy": {
        "$type": "fontFamily",
        "$value": [
          "Source Serif 4",
          "Source Serif 4 Fallback",
          "Fraunces",
          "Lora",
          "Georgia",
          "serif"
        ],
        "$description": "Heavy editorial serif"
      },
      "mono": {
        "$type": "fontFamily",
        "$value": [
          "IBM Plex Mono",
          "ui-monospace",
          "SFMono-Regular",
          "monospace"
        ],
        "$description": "Monospace (code, data tables)"
      }
    },
    "font-size": {
      "xs": {
        "$type": "dimension",
        "$value": "12px",
        "$description": "WCAG min — caption/legal"
      },
      "sm": {
        "$type": "dimension",
        "$value": "14px",
        "$description": "Small body"
      },
      "md": {
        "$type": "dimension",
        "$value": "16px",
        "$description": "Base body — 1rem"
      },
      "lg": {
        "$type": "dimension",
        "$value": "20px",
        "$description": "Large body / small heading (×1.25)"
      },
      "xl": {
        "$type": "dimension",
        "$value": "24px",
        "$description": "H5 (×1.5)"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "30px",
        "$description": "H4 (×1.875)"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "36px",
        "$description": "H3 (×2.25)"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "48px",
        "$description": "H2 (×3)"
      },
      "5xl": {
        "$type": "dimension",
        "$value": "60px",
        "$description": "H1 (×3.75)"
      },
      "6xl": {
        "$type": "dimension",
        "$value": "72px",
        "$description": "Display (×4.5)"
      },
      "7xl": {
        "$type": "dimension",
        "$value": "96px",
        "$description": "Hero display (×6)"
      },
      "8xl": {
        "$type": "dimension",
        "$value": "128px",
        "$description": "Mega display (×8)"
      }
    },
    "line-height": {
      "tight": {
        "$type": "number",
        "$value": 1.1,
        "$description": "Display heading"
      },
      "snug": {
        "$type": "number",
        "$value": 1.25,
        "$description": "Heading"
      },
      "normal": {
        "$type": "number",
        "$value": 1.5,
        "$description": "Body default"
      },
      "relaxed": {
        "$type": "number",
        "$value": 1.65,
        "$description": "Long-form body"
      },
      "loose": {
        "$type": "number",
        "$value": 1.75,
        "$description": "Editorial long-form"
      }
    },
    "letter-spacing": {
      "tighter": {
        "$type": "dimension",
        "$value": "-0.05em",
        "$description": "Display tight tracking"
      },
      "tight": {
        "$type": "dimension",
        "$value": "-0.025em",
        "$description": "Heading"
      },
      "normal": {
        "$type": "dimension",
        "$value": "0em",
        "$description": "Default body"
      },
      "wide": {
        "$type": "dimension",
        "$value": "0.05em",
        "$description": "Eyebrow / labels"
      },
      "wider": {
        "$type": "dimension",
        "$value": "0.1em",
        "$description": "All-caps labels"
      },
      "widest": {
        "$type": "dimension",
        "$value": "0.2em",
        "$description": "Heavy emphasis caps"
      }
    }
  },
  "shadow": {
    "xs": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.04)",
        "offsetX": "0px",
        "offsetY": "1px",
        "blur": "2px",
        "spread": "0px"
      },
      "$description": "Subtle elevation"
    },
    "sm": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.05)",
        "offsetX": "0px",
        "offsetY": "2px",
        "blur": "4px",
        "spread": "0px"
      },
      "$description": "Small elevation"
    },
    "md": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.06)",
        "offsetX": "0px",
        "offsetY": "4px",
        "blur": "12px",
        "spread": "0px"
      },
      "$description": "Default card/button"
    },
    "lg": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.08)",
        "offsetX": "0px",
        "offsetY": "8px",
        "blur": "24px",
        "spread": "0px"
      },
      "$description": "Dropdown, popover"
    },
    "xl": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.10)",
        "offsetX": "0px",
        "offsetY": "16px",
        "blur": "48px",
        "spread": "0px"
      },
      "$description": "Modal, drawer"
    },
    "2xl": {
      "$type": "shadow",
      "$value": {
        "color": "hsl(28 8% 20% / 0.14)",
        "offsetX": "0px",
        "offsetY": "24px",
        "blur": "64px",
        "spread": "0px"
      },
      "$description": "Command palette, toast"
    }
  },
  "duration": {
    "instant": {
      "$type": "duration",
      "$value": "0ms",
      "$description": "No transition"
    },
    "fast": {
      "$type": "duration",
      "$value": "120ms",
      "$description": "Micro feedback (hover, tap)"
    },
    "normal": {
      "$type": "duration",
      "$value": "200ms",
      "$description": "Default transition"
    },
    "slow": {
      "$type": "duration",
      "$value": "320ms",
      "$description": "Modal, drawer"
    },
    "slower": {
      "$type": "duration",
      "$value": "480ms",
      "$description": "Page transition"
    }
  },
  "easing": {
    "linear": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        1,
        1
      ],
      "$description": "Linear motion"
    },
    "out": {
      "$type": "cubicBezier",
      "$value": [
        0.32,
        0.72,
        0,
        1
      ],
      "$description": "iOS-like decelerate strong"
    },
    "out-soft": {
      "$type": "cubicBezier",
      "$value": [
        0.4,
        0,
        0.2,
        1
      ],
      "$description": "Material standard"
    },
    "in-out": {
      "$type": "cubicBezier",
      "$value": [
        0.65,
        0,
        0.35,
        1
      ],
      "$description": "Balanced"
    },
    "bounce": {
      "$type": "cubicBezier",
      "$value": [
        0.68,
        -0.55,
        0.265,
        1.55
      ],
      "$description": "Spring-like overshoot"
    },
    "spring": {
      "$type": "cubicBezier",
      "$value": [
        0.5,
        1.5,
        0.5,
        1
      ],
      "$description": "Snappy overshoot"
    }
  },
  "z-index": {
    "base": {
      "$type": "number",
      "$value": 0,
      "$description": "Default stacking"
    },
    "raised": {
      "$type": "number",
      "$value": 10,
      "$description": "Card hover"
    },
    "dropdown": {
      "$type": "number",
      "$value": 30,
      "$description": "Dropdown panel"
    },
    "sticky": {
      "$type": "number",
      "$value": 40,
      "$description": "Sticky header"
    },
    "fixed": {
      "$type": "number",
      "$value": 50,
      "$description": "Fixed nav"
    },
    "overlay": {
      "$type": "number",
      "$value": 60,
      "$description": "Backdrop"
    },
    "modal": {
      "$type": "number",
      "$value": 70,
      "$description": "Modal/drawer"
    },
    "toast": {
      "$type": "number",
      "$value": 80,
      "$description": "Toast"
    },
    "tooltip": {
      "$type": "number",
      "$value": 90,
      "$description": "Tooltip"
    }
  },
  "brand": {
    "a-kryphan": {
      "$description": "A-Kryphan — Personal blog charcoal",
      "primary": {
        "$type": "color",
        "$value": "hsl(220 15% 30%)",
        "$description": "A-Kryphan — Personal blog charcoal — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(220 15% 20%)",
        "$description": "A-Kryphan — Personal blog charcoal — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(220 15% 25%)",
        "$description": "A-Kryphan — Personal blog charcoal — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(30 30% 60%)",
        "$description": "A-Kryphan — Personal blog charcoal — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(42 60% 75%)",
        "$description": "A-Kryphan — Personal blog charcoal — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "A-Kryphan — Personal blog charcoal — text on primary fill"
      }
    },
    "ai-tools": {
      "$description": "AI Tools — Cross-brand violet (dark)",
      "primary": {
        "$type": "color",
        "$value": "hsl(252 85% 70%)",
        "$description": "AI Tools — Cross-brand violet (dark) — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(252 85% 60%)",
        "$description": "AI Tools — Cross-brand violet (dark) — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(252 85% 65%)",
        "$description": "AI Tools — Cross-brand violet (dark) — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(180 80% 55%)",
        "$description": "AI Tools — Cross-brand violet (dark) — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(145 65% 55%)",
        "$description": "AI Tools — Cross-brand violet (dark) — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "hsl(0 0% 10%)",
        "$description": "AI Tools — Cross-brand violet (dark) — text on primary fill"
      }
    },
    "annhien": {
      "$description": "An Nhien — Trầm hương agarwood",
      "primary": {
        "$type": "color",
        "$value": "hsl(28 40% 38%)",
        "$description": "An Nhien — Trầm hương agarwood — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(28 40% 28%)",
        "$description": "An Nhien — Trầm hương agarwood — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(28 40% 33%)",
        "$description": "An Nhien — Trầm hương agarwood — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(38 55% 60%)",
        "$description": "An Nhien — Trầm hương agarwood — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(24 70% 70%)",
        "$description": "An Nhien — Trầm hương agarwood — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "An Nhien — Trầm hương agarwood — text on primary fill"
      }
    },
    "betterbuy": {
      "$description": "BetterBuy — DTC coral",
      "primary": {
        "$type": "color",
        "$value": "hsl(12 50% 60%)",
        "$description": "BetterBuy — DTC coral — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(12 50% 50%)",
        "$description": "BetterBuy — DTC coral — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(12 50% 55%)",
        "$description": "BetterBuy — DTC coral — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(175 35% 50%)",
        "$description": "BetterBuy — DTC coral — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(38 80% 65%)",
        "$description": "BetterBuy — DTC coral — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "BetterBuy — DTC coral — text on primary fill"
      }
    },
    "haogood": {
      "$description": "HaoGood Group — NZL deep navy",
      "primary": {
        "$type": "color",
        "$value": "hsl(220 55% 35%)",
        "$description": "HaoGood Group — NZL deep navy — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(220 55% 25%)",
        "$description": "HaoGood Group — NZL deep navy — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(220 55% 30%)",
        "$description": "HaoGood Group — NZL deep navy — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(42 80% 55%)",
        "$description": "HaoGood Group — NZL deep navy — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(200 60% 65%)",
        "$description": "HaoGood Group — NZL deep navy — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "HaoGood Group — NZL deep navy — text on primary fill"
      }
    },
    "khi": {
      "$description": "KHI Wellness — Pilates sage",
      "primary": {
        "$type": "color",
        "$value": "hsl(140 25% 38%)",
        "$description": "KHI Wellness — Pilates sage — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(140 25% 28%)",
        "$description": "KHI Wellness — Pilates sage — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(140 25% 33%)",
        "$description": "KHI Wellness — Pilates sage — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(38 50% 65%)",
        "$description": "KHI Wellness — Pilates sage — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(165 35% 75%)",
        "$description": "KHI Wellness — Pilates sage — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "KHI Wellness — Pilates sage — text on primary fill"
      }
    },
    "xanh": {
      "$description": "Xanh Marketing — Skincare green",
      "primary": {
        "$type": "color",
        "$value": "hsl(142 45% 45%)",
        "$description": "Xanh Marketing — Skincare green — primary brand color"
      },
      "primary-deep": {
        "$type": "color",
        "$value": "hsl(142 45% 35%)",
        "$description": "Xanh Marketing — Skincare green — primary darker (active/hover)"
      },
      "primary-hover": {
        "$type": "color",
        "$value": "hsl(142 45% 40%)",
        "$description": "Xanh Marketing — Skincare green — primary hover"
      },
      "accent": {
        "$type": "color",
        "$value": "hsl(38 60% 65%)",
        "$description": "Xanh Marketing — Skincare green — secondary accent"
      },
      "highlight": {
        "$type": "color",
        "$value": "hsl(90 40% 72%)",
        "$description": "Xanh Marketing — Skincare green — tertiary highlight"
      },
      "primary-on": {
        "$type": "color",
        "$value": "Canvas",
        "$description": "Xanh Marketing — Skincare green — text on primary fill"
      }
    }
  }
}