{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Webflow-Inspired",
  "meta": {
    "name": "Webflow-Inspired",
    "description": "An inspired interpretation of Webflow's design language — a visual web development platform whose surface contrasts a deep near-black `#080808` primary against a generous white canvas, broken by a five-stop chromatic accent system (purple / pink / blue / orange / green) that maps to the brand's product categories, and anchored by the proprietary WF Visual Sans family used at restrained 500 / 600 weights with negative tracking.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#080808",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#080808",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-strong": {
      "$value": "#222222",
      "$type": "color",
      "$description": "Use for the ink strong role."
    },
    "body": {
      "$value": "#363636",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "body-mid": {
      "$value": "#5a5a5a",
      "$type": "color",
      "$description": "Use for the body mid role."
    },
    "mute": {
      "$value": "#898989",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "mute-soft": {
      "$value": "#ababab",
      "$type": "color",
      "$description": "Use for the mute soft role."
    },
    "hairline": {
      "$value": "#d8d8d8",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "accent-purple": {
      "$value": "#7a3dff",
      "$type": "color",
      "$description": "Use for the accent purple role."
    },
    "accent-pink": {
      "$value": "#ed52cb",
      "$type": "color",
      "$description": "Use for the accent pink role."
    },
    "accent-blue": {
      "$value": "#3b89ff",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "accent-blue-deep": {
      "$value": "#006acc",
      "$type": "color",
      "$description": "Use for the accent blue deep role."
    },
    "accent-blue-info": {
      "$value": "#146ef5",
      "$type": "color",
      "$description": "Use for the accent blue info role."
    },
    "accent-orange": {
      "$value": "#ff6b00",
      "$type": "color",
      "$description": "Use for the accent orange role."
    },
    "accent-green": {
      "$value": "#00d722",
      "$type": "color",
      "$description": "Use for the accent green role."
    },
    "accent-yellow": {
      "$value": "#ffae13",
      "$type": "color",
      "$description": "Use for the accent yellow role."
    },
    "accent-red": {
      "$value": "#ee1d36",
      "$type": "color",
      "$description": "Use for the accent red role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "80px",
        "fontWeight": 600,
        "lineHeight": "83.2px",
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "56px",
        "fontWeight": 600,
        "lineHeight": "58.24px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "44.8px",
        "fontWeight": 600,
        "lineHeight": "46.6px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "32px",
        "fontWeight": 500,
        "lineHeight": "41.6px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "display-sm": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": "31.2px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display sm."
    },
    "display-xs": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": "28px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display xs."
    },
    "eyebrow-uppercase": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": 500,
        "lineHeight": "19.5px",
        "letterSpacing": "1.5px"
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow uppercase."
    },
    "eyebrow-uppercase-sm": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": "12px",
        "letterSpacing": "0.6px"
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow uppercase sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "28.8px",
        "fontWeight": 400,
        "lineHeight": "46.08px",
        "letterSpacing": "-0.288px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": "25.6px",
        "letterSpacing": "-0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-md-strong": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "25.6px",
        "letterSpacing": "-0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for body md strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": "22.4px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": "22.4px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "caption": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "12.8px",
        "fontWeight": 550,
        "lineHeight": "15.36px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "caption-mono": {
      "$value": {
        "fontFamily": "WFVisualSans-Mono, Inconsolata, ui-monospace, SFMono-Regular, Menlo, monospace",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": "18px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption mono."
    },
    "button-md": {
      "$value": {
        "fontFamily": "WF Visual Sans Variable, Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "25.6px",
        "letterSpacing": "-0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 2xl."
    },
    "3xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 3xl."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://webflow.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}