{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$name": "Werklist Design Tokens",
  "$version": "1.0.0",
  "$updated": "2026-04-21",
  "$owner": "brand@werklist.com",
  "color": {
    "brand": {
      "blue": { "$value": "#1863DC", "$type": "color", "$description": "Werklist Blue — primary CTA fill, focus accent" },
      "blue-dark": { "$value": "#0E4AA8", "$type": "color", "$description": "Primary CTA hover / press" },
      "hero": { "$value": "#030585", "$type": "color", "$description": "Deep hero navy — stat tiles, dark hero emphasis" }
    },
    "neutral": {
      "0": { "$value": "#FFFFFF", "$type": "color" },
      "50": { "$value": "#FAFAFA", "$type": "color" },
      "100": { "$value": "#F4F4F5", "$type": "color" },
      "200": { "$value": "#E5E5E5", "$type": "color" },
      "300": { "$value": "#D1D1D5", "$type": "color" },
      "400": { "$value": "#A0A0A8", "$type": "color" },
      "500": { "$value": "#52525B", "$type": "color" },
      "600": { "$value": "#404048", "$type": "color" },
      "700": { "$value": "#27272A", "$type": "color" },
      "800": { "$value": "#1D2327", "$type": "color" },
      "900": { "$value": "#000000", "$type": "color" }
    },
    "accent": {
      "tan-hover": { "$value": "#F7F7F5", "$type": "color" },
      "tan-cta": { "$value": "#F0F0EE", "$type": "color" },
      "dot-separator": { "$value": "#C4C4C8", "$type": "color" },
      "dot-empty": { "$value": "#D4D4D4", "$type": "color" },
      "near-black-navy": { "$value": "#0B0E1A", "$type": "color" }
    },
    "semantic": {
      "success": { "$value": "#2EBB4E", "$type": "color" },
      "success-deep": { "$value": "#1F8C37", "$type": "color" },
      "warning": { "$value": "#D9950F", "$type": "color" },
      "error": { "$value": "#B91C3A", "$type": "color" },
      "info": { "$value": "#1863DC", "$type": "color" },
      "live": { "$value": "#4ADE80", "$type": "color" }
    }
  },
  "font": {
    "family": {
      "sans": { "$value": "'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif", "$type": "fontFamily" }
    },
    "weight": {
      "light": { "$value": 300, "$type": "fontWeight" },
      "regular": { "$value": 400, "$type": "fontWeight" },
      "medium": { "$value": 500, "$type": "fontWeight" },
      "bold": { "$value": 700, "$type": "fontWeight" },
      "black": { "$value": 900, "$type": "fontWeight" }
    },
    "feature": {
      "default": { "$value": "\"ss01\", \"cv01\", \"cv11\"", "$type": "string" }
    }
  },
  "space": {
    "1": { "$value": "4px", "$type": "dimension" },
    "2": { "$value": "8px", "$type": "dimension" },
    "3": { "$value": "12px", "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "5": { "$value": "20px", "$type": "dimension" },
    "6": { "$value": "24px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" },
    "10": { "$value": "40px", "$type": "dimension" },
    "12": { "$value": "48px", "$type": "dimension" },
    "16": { "$value": "64px", "$type": "dimension" },
    "24": { "$value": "96px", "$type": "dimension" },
    "32": { "$value": "128px", "$type": "dimension" }
  },
  "radius": {
    "image": { "$value": "2px", "$type": "dimension" },
    "checkbox": { "$value": "3px", "$type": "dimension" },
    "card-tight": { "$value": "4px", "$type": "dimension" },
    "card": { "$value": "6px", "$type": "dimension" },
    "input": { "$value": "6px", "$type": "dimension" },
    "button": { "$value": "8px", "$type": "dimension" },
    "cta": { "$value": "10px", "$type": "dimension" },
    "panel": { "$value": "12px", "$type": "dimension" },
    "pill": { "$value": "9999px", "$type": "dimension" }
  },
  "motion": {
    "duration": {
      "instant": { "$value": "100ms" },
      "fast": { "$value": "150ms" },
      "default": { "$value": "200ms" },
      "slow": { "$value": "300ms" }
    },
    "ease": {
      "standard": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)" },
      "entrance": { "$value": "cubic-bezier(0.0, 0.0, 0.2, 1)" }
    }
  },
  "breakpoint": {
    "sm": { "$value": "640px" },
    "md": { "$value": "768px" },
    "lg": { "$value": "1024px" },
    "xl": { "$value": "1280px" },
    "2xl": { "$value": "1536px" }
  }
}