{
  "source": "wiwo.tokens.json",
  "note": "Import mapping for Figma variables. Color values are expressed as source strings; use modes for semantic tokens.",
  "collections": [
    {
      "name": "Wiwo Primitives",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "color/wiwo/blue",
          "type": "COLOR",
          "cssVariable": "--wiwo-blue",
          "description": "Primary brand blue for identity, focus and selection.",
          "value": "#4242FF"
        },
        {
          "name": "color/wiwo/blue700",
          "type": "COLOR",
          "cssVariable": "--wiwo-blue-700",
          "description": "Deep blue for text over lime and selected UI accents.",
          "value": "#2F31D9"
        },
        {
          "name": "color/wiwo/green",
          "type": "COLOR",
          "cssVariable": "--wiwo-green",
          "description": "Action green for primary CTAs, launch states and active progress. Do not use as text over beige or white; use only over dark surfaces, as a fill with ink text, or as non-text data visualization.",
          "value": "#3BFF00"
        },
        {
          "name": "color/wiwo/beige",
          "type": "COLOR",
          "cssVariable": "--wiwo-beige",
          "description": "Primary Wiwo beige for calm product backgrounds and reading surfaces.",
          "value": "#F8FAD7"
        },
        {
          "name": "color/wiwo/beigeAlt",
          "type": "COLOR",
          "cssVariable": "--wiwo-beige-alt",
          "description": "Alternative beige for secondary panels and quiet elevation.",
          "value": "#EDEFDD"
        },
        {
          "name": "color/wiwo/ink",
          "type": "COLOR",
          "cssVariable": "--wiwo-ink",
          "description": "Darkest allowed Wiwo ink. Do not use solid black.",
          "value": "#292929"
        },
        {
          "name": "color/wiwo/white",
          "type": "COLOR",
          "cssVariable": "--white",
          "description": "White for approved blue contrast and utility.",
          "value": "#FFFFFF"
        },
        {
          "name": "color/accent/coral",
          "type": "COLOR",
          "cssVariable": "--accent-coral",
          "description": "",
          "value": "#FF6F61"
        },
        {
          "name": "color/accent/sky",
          "type": "COLOR",
          "cssVariable": "--accent-sky",
          "description": "",
          "value": "#A8C7FA"
        },
        {
          "name": "color/accent/mint",
          "type": "COLOR",
          "cssVariable": "--accent-mint",
          "description": "",
          "value": "#C3ECD0"
        },
        {
          "name": "color/state/ok",
          "type": "COLOR",
          "cssVariable": "--ok",
          "description": "",
          "value": "#0F7A34"
        },
        {
          "name": "color/state/warn",
          "type": "COLOR",
          "cssVariable": "--warn",
          "description": "",
          "value": "#9B6600"
        },
        {
          "name": "color/state/danger",
          "type": "COLOR",
          "cssVariable": "--danger",
          "description": "",
          "value": "#BA1A1A"
        },
        {
          "name": "gradient/primary",
          "type": "STRING",
          "cssVariable": "--wiwo-gradient-primary",
          "description": "Energy, launch, AI and transformation.",
          "value": "linear-gradient(103deg, #3BFF00 0%, #4242FF 85%)"
        },
        {
          "name": "gradient/soft",
          "type": "STRING",
          "cssVariable": "--wiwo-gradient-soft",
          "description": "",
          "value": "linear-gradient(135deg, rgba(59, 255, 0, .34) 0%, rgba(66, 66, 255, .28) 100%)"
        },
        {
          "name": "gradient/dark",
          "type": "STRING",
          "cssVariable": "--wiwo-gradient-dark",
          "description": "",
          "value": "linear-gradient(103deg, #3BFF00 0%, #4242FF 58%, #292929 100%)"
        },
        {
          "name": "gradient/animated",
          "type": "STRING",
          "cssVariable": "--wiwo-gradient-animated",
          "description": "",
          "value": "linear-gradient(103deg, #3BFF00, #6DFF7C, #4242FF, #3BFF00)"
        }
      ]
    },
    {
      "name": "Wiwo Data Viz",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "color/dataViz/primary",
          "type": "COLOR",
          "cssVariable": "--chart-primary",
          "description": "Primary KPI series for revenue, conversion and selected chart focus.",
          "value": "#4242FF"
        },
        {
          "name": "color/dataViz/positive",
          "type": "COLOR",
          "cssVariable": "--chart-positive",
          "description": "Positive performance, growth, completion and active progress.",
          "value": "#3BFF00"
        },
        {
          "name": "color/dataViz/attention",
          "type": "COLOR",
          "cssVariable": "--chart-attention",
          "description": "Secondary attention series for forecast, reach and assisted metrics.",
          "value": "#A8C7FA"
        },
        {
          "name": "color/dataViz/warning",
          "type": "COLOR",
          "cssVariable": "--chart-warning",
          "description": "Warning series for spend pressure, SLA risk and pending review.",
          "value": "#FFB84D"
        },
        {
          "name": "color/dataViz/danger",
          "type": "COLOR",
          "cssVariable": "--chart-danger",
          "description": "Critical series for blockers, drops, errors and negative variance.",
          "value": "#BA1A1A"
        },
        {
          "name": "color/dataViz/neutral",
          "type": "COLOR",
          "cssVariable": "--chart-neutral",
          "description": "Neutral comparison series, baselines and muted inactive values.",
          "value": "#8B8B7A"
        },
        {
          "name": "color/dataViz/purple",
          "type": "COLOR",
          "cssVariable": "--chart-purple",
          "description": "Experimental or AI-assisted series; use sparingly next to Wiwo blue.",
          "value": "#8D7CFF"
        },
        {
          "name": "color/dataViz/mint",
          "type": "COLOR",
          "cssVariable": "--chart-mint",
          "description": "Soft supportive series for cohort overlays and secondary backgrounds.",
          "value": "#C3ECD0"
        }
      ]
    },
    {
      "name": "Wiwo Effects",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "glass/fill",
          "type": "COLOR",
          "cssVariable": "--glass-fill",
          "description": "",
          "value": "rgba(255, 255, 255, .24)"
        },
        {
          "name": "glass/fillStrong",
          "type": "COLOR",
          "cssVariable": "--glass-fill-strong",
          "description": "",
          "value": "rgba(255, 255, 255, .36)"
        },
        {
          "name": "glass/fillDark",
          "type": "COLOR",
          "cssVariable": "--glass-fill-dark",
          "description": "",
          "value": "rgba(41, 41, 41, .34)"
        },
        {
          "name": "glass/stroke",
          "type": "COLOR",
          "cssVariable": "--glass-stroke",
          "description": "",
          "value": "rgba(255, 255, 255, .42)"
        },
        {
          "name": "glass/highlight",
          "type": "COLOR",
          "cssVariable": "--glass-highlight",
          "description": "",
          "value": "rgba(255, 255, 255, .74)"
        },
        {
          "name": "glass/blur",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--glass-blur",
          "description": "",
          "value": "22px"
        },
        {
          "name": "shadow/one",
          "type": "STRING",
          "cssVariable": "--shadow-1",
          "description": "",
          "value": "0 1px 2px rgba(41, 41, 41, .08), 0 8px 28px rgba(41, 41, 41, .08)"
        },
        {
          "name": "shadow/two",
          "type": "STRING",
          "cssVariable": "--shadow-2",
          "description": "",
          "value": "0 18px 42px rgba(41, 41, 41, .16)"
        },
        {
          "name": "shadow/expressive",
          "type": "STRING",
          "cssVariable": "--shadow-expressive",
          "description": "",
          "value": "0 24px 70px rgba(66, 66, 255, .18), 0 8px 28px rgba(41, 41, 41, .12)"
        },
        {
          "name": "shadow/glass",
          "type": "STRING",
          "cssVariable": "--shadow-glass",
          "description": "",
          "value": "0 26px 76px rgba(41, 41, 41, .22), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .2)"
        }
      ]
    },
    {
      "name": "Wiwo Dimensions",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "radius/card",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--radius-card",
          "description": "",
          "value": "8px"
        },
        {
          "name": "radius/control",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--radius-control",
          "description": "",
          "value": "999px"
        },
        {
          "name": "shape/xs",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-xs",
          "description": "",
          "value": "6px"
        },
        {
          "name": "shape/sm",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-sm",
          "description": "",
          "value": "12px"
        },
        {
          "name": "shape/md",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-md",
          "description": "",
          "value": "18px"
        },
        {
          "name": "shape/lg",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-lg",
          "description": "",
          "value": "28px"
        },
        {
          "name": "shape/xl",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-xl",
          "description": "",
          "value": "40px"
        },
        {
          "name": "shape/full",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--shape-full",
          "description": "",
          "value": "999px"
        },
        {
          "name": "space/1",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-1",
          "description": "",
          "value": ".25rem"
        },
        {
          "name": "space/2",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-2",
          "description": "",
          "value": ".5rem"
        },
        {
          "name": "space/3",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-3",
          "description": "",
          "value": ".75rem"
        },
        {
          "name": "space/4",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-4",
          "description": "",
          "value": "1rem"
        },
        {
          "name": "space/5",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-5",
          "description": "",
          "value": "1.5rem"
        },
        {
          "name": "space/6",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-6",
          "description": "",
          "value": "2rem"
        },
        {
          "name": "space/7",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-7",
          "description": "",
          "value": "3rem"
        },
        {
          "name": "space/8",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-8",
          "description": "",
          "value": "4.5rem"
        },
        {
          "name": "space/2-5",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--space-2-5",
          "description": "Intermediate spacing for compact UI groups that need more air than 2 and less than 3.",
          "value": ".625rem"
        }
      ]
    },
    {
      "name": "Wiwo Typography",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "measure/display",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--measure-display",
          "description": "Maximum line measure for large headlines and chapter titles.",
          "value": "12ch"
        },
        {
          "name": "measure/lead",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--measure-lead",
          "description": "Maximum line measure for leads and section summaries.",
          "value": "36ch"
        },
        {
          "name": "measure/body",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--measure-body",
          "description": "Maximum line measure for long body copy.",
          "value": "62ch"
        },
        {
          "name": "typography/fontSystem",
          "type": "STRING",
          "cssVariable": "--font-system",
          "description": "",
          "value": "\"Plus Jakarta Sans\", Arial, sans-serif"
        },
        {
          "name": "typography/fontMono",
          "type": "STRING",
          "cssVariable": "--font-mono",
          "description": "",
          "value": "ui-monospace, SFMono-Regular, Consolas, monospace"
        },
        {
          "name": "typography/weightBody",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--weight-body",
          "description": "",
          "value": "400"
        },
        {
          "name": "typography/weightMeta",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--weight-meta",
          "description": "",
          "value": "500"
        },
        {
          "name": "typography/weightNav",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--weight-nav",
          "description": "",
          "value": "600"
        },
        {
          "name": "typography/weightAction",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--weight-action",
          "description": "",
          "value": "700"
        },
        {
          "name": "typography/weightDisplay",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--weight-display",
          "description": "",
          "value": "800"
        },
        {
          "name": "typography/scaleMinus1",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step--1",
          "description": "",
          "value": "clamp(.82rem, .79rem + .16vw, .92rem)"
        },
        {
          "name": "typography/scale0",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step-0",
          "description": "",
          "value": "clamp(.96rem, .92rem + .24vw, 1.08rem)"
        },
        {
          "name": "typography/scale1",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step-1",
          "description": "",
          "value": "clamp(1.16rem, 1.04rem + .55vw, 1.42rem)"
        },
        {
          "name": "typography/scale2",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step-2",
          "description": "",
          "value": "clamp(1.42rem, 1.16rem + 1.12vw, 2.05rem)"
        },
        {
          "name": "typography/scale3",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step-3",
          "description": "",
          "value": "clamp(2.1rem, 1.54rem + 2.24vw, 3.5rem)"
        },
        {
          "name": "typography/scale4",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--step-4",
          "description": "",
          "value": "clamp(3rem, 2.16rem + 3.6vw, 5.7rem)"
        }
      ]
    },
    {
      "name": "Wiwo Motion",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "motion/easeExpressive",
          "type": "STRING",
          "cssVariable": "--ease-expressive",
          "description": "",
          "value": "cubic-bezier(.2, 0, 0, 1)"
        },
        {
          "name": "motion/easeEmphasized",
          "type": "STRING",
          "cssVariable": "--ease-emphasized",
          "description": "",
          "value": "cubic-bezier(.3, 0, 0, 1)"
        },
        {
          "name": "motion/fast",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--motion-fast",
          "description": "",
          "value": "160ms"
        },
        {
          "name": "motion/medium",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--motion-medium",
          "description": "",
          "value": "280ms"
        },
        {
          "name": "motion/slow",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--motion-slow",
          "description": "",
          "value": "420ms"
        },
        {
          "name": "motion/loop",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--motion-loop",
          "description": "",
          "value": "6800ms"
        }
      ]
    },
    {
      "name": "Wiwo Icons",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "icon/sizeSm",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--icon-size-sm",
          "description": "",
          "value": "18px"
        },
        {
          "name": "icon/sizeMd",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--icon-size-md",
          "description": "",
          "value": "20px"
        },
        {
          "name": "icon/sizeLg",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--icon-size-lg",
          "description": "",
          "value": "24px"
        },
        {
          "name": "icon/stroke",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--icon-stroke",
          "description": "",
          "value": "2"
        }
      ]
    },
    {
      "name": "Wiwo A11y",
      "modes": [
        "default"
      ],
      "variables": [
        {
          "name": "accessibility/disabledOpacity",
          "type": "FLOAT_OR_STRING",
          "cssVariable": "--disabled-opacity",
          "description": "",
          "value": ".48"
        }
      ]
    },
    {
      "name": "Wiwo Semantic",
      "modes": [
        "light",
        "dark"
      ],
      "variables": [
        {
          "name": "ink",
          "type": "COLOR",
          "cssVariable": "--ink",
          "description": "",
          "valuesByMode": {
            "light": "#292929",
            "dark": "#F8FAD7"
          }
        },
        {
          "name": "ink/2",
          "type": "COLOR",
          "cssVariable": "--ink-2",
          "description": "",
          "valuesByMode": {
            "light": "#3F3F3F",
            "dark": "#EDEFDD"
          }
        },
        {
          "name": "surface",
          "type": "COLOR",
          "cssVariable": "--surface",
          "description": "",
          "valuesByMode": {
            "light": "#F8FAD7",
            "dark": "#292929"
          }
        },
        {
          "name": "surface/2",
          "type": "COLOR",
          "cssVariable": "--surface-2",
          "description": "",
          "valuesByMode": {
            "light": "#EDEFDD",
            "dark": "#303030"
          }
        },
        {
          "name": "surface/3",
          "type": "COLOR",
          "cssVariable": "--surface-3",
          "description": "",
          "valuesByMode": {
            "light": "#E8F0FE",
            "dark": "#343434"
          }
        },
        {
          "name": "surface/container/low",
          "type": "COLOR",
          "cssVariable": "--surface-container-low",
          "description": "",
          "valuesByMode": {
            "light": "#F8FAD7",
            "dark": "#303030"
          }
        },
        {
          "name": "surface/container",
          "type": "COLOR",
          "cssVariable": "--surface-container",
          "description": "",
          "valuesByMode": {
            "light": "#EDEFDD",
            "dark": "#363636"
          }
        },
        {
          "name": "surface/container/high",
          "type": "COLOR",
          "cssVariable": "--surface-container-high",
          "description": "",
          "valuesByMode": {
            "light": "#EDEFDD",
            "dark": "#424242"
          }
        },
        {
          "name": "surface/inverse",
          "type": "COLOR",
          "cssVariable": "--surface-inverse",
          "description": "",
          "valuesByMode": {
            "light": "#292929",
            "dark": "#F8FAD7"
          }
        },
        {
          "name": "ink/inverse",
          "type": "COLOR",
          "cssVariable": "--ink-inverse",
          "description": "",
          "valuesByMode": {
            "light": "#F8FAD7",
            "dark": "#292929"
          }
        },
        {
          "name": "muted",
          "type": "COLOR",
          "cssVariable": "--muted",
          "description": "",
          "valuesByMode": {
            "light": "#66645D",
            "dark": "rgba(248, 250, 215, .66)"
          }
        },
        {
          "name": "muted/inverse",
          "type": "COLOR",
          "cssVariable": "--muted-inverse",
          "description": "",
          "valuesByMode": {
            "light": "rgba(248, 250, 215, .74)",
            "dark": "rgba(41, 41, 41, .68)"
          }
        },
        {
          "name": "line",
          "type": "COLOR",
          "cssVariable": "--line",
          "description": "",
          "valuesByMode": {
            "light": "#D8D2C4",
            "dark": "rgba(248, 250, 215, .16)"
          }
        },
        {
          "name": "control/surface",
          "type": "COLOR",
          "cssVariable": "--control-surface",
          "description": "",
          "valuesByMode": {
            "light": "rgba(255, 253, 233, .76)",
            "dark": "rgba(255, 255, 255, .06)"
          }
        },
        {
          "name": "control/surface/hover",
          "type": "COLOR",
          "cssVariable": "--control-surface-hover",
          "description": "",
          "valuesByMode": {
            "light": "#FFFFFF",
            "dark": "rgba(255, 255, 255, .1)"
          }
        },
        {
          "name": "on/accent",
          "type": "COLOR",
          "cssVariable": "--on-accent",
          "description": "",
          "valuesByMode": {
            "light": "#292929",
            "dark": "#292929"
          }
        },
        {
          "name": "error",
          "type": "COLOR",
          "cssVariable": "--error",
          "description": "",
          "valuesByMode": {
            "light": "#BA1A1A",
            "dark": "#FFB4AB"
          }
        },
        {
          "name": "error/soft",
          "type": "COLOR",
          "cssVariable": "--error-soft",
          "description": "",
          "valuesByMode": {
            "light": "rgba(186, 26, 26, .1)",
            "dark": "rgba(255, 180, 171, .14)"
          }
        },
        {
          "name": "focus/ring",
          "type": "COLOR",
          "cssVariable": "--focus-ring",
          "description": "",
          "valuesByMode": {
            "light": "rgba(66, 66, 255, .52)",
            "dark": "rgba(59, 255, 0, .72)"
          }
        },
        {
          "name": "focus/glow",
          "type": "COLOR",
          "cssVariable": "--focus-glow",
          "description": "",
          "valuesByMode": {
            "light": "rgba(66, 66, 255, .16)",
            "dark": "rgba(59, 255, 0, .18)"
          }
        },
        {
          "name": "chart/grid",
          "type": "COLOR",
          "cssVariable": "--chart-grid",
          "description": "",
          "valuesByMode": {
            "light": "rgba(41, 41, 41, .12)",
            "dark": "rgba(248, 250, 215, .16)"
          }
        }
      ]
    }
  ]
}