{
  "name": "Webflow",
  "version": 1,
  "meta": {
    "source": "github",
    "repo": "feimacode/open-design-agent-kit",
    "package": "claude-design-systems/webflow",
    "upstream": "open-design-v0.24.1",
    "synced": "2026-10-22"
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      }
    ],
    "tokens": [
      {
        "name": "bg",
        "value": "#ffffff",
        "usage": "Page background — defines the brand canvas."
      },
      {
        "name": "surface",
        "value": "#ffffff",
        "usage": "Card / lifted container background."
      },
      {
        "name": "surface-warm",
        "value": "{surface}",
        "usage": "Tertiary surface tier (kami warm-sand)."
      },
      {
        "name": "fg",
        "value": "#080808",
        "usage": "Primary text on `bg` and `surface`."
      },
      {
        "name": "fg-2",
        "value": "#363636",
        "usage": "Secondary text on `bg` and `surface`."
      },
      {
        "name": "muted",
        "value": "#5a5a5a",
        "usage": "Subtext and captions on `bg` and `surface`."
      },
      {
        "name": "meta",
        "value": "#ababab",
        "usage": "Tertiary FG / metadata tier (kami stone)."
      },
      {
        "name": "border",
        "value": "#d8d8d8",
        "usage": "Default border / card edge."
      },
      {
        "name": "border-soft",
        "value": "#ebebeb",
        "usage": "Inner row separator that should not visually compete."
      },
      {
        "name": "accent",
        "value": "#146ef5",
        "usage": "Brand accent. ≤2 visible uses per screen (lint enforced)."
      },
      {
        "name": "accent-on",
        "value": "#ffffff",
        "usage": "Text and icons on `accent` fills."
      },
      {
        "name": "accent-hover",
        "value": "#0055d4",
        "usage": "Hover state for elements using --accent as bg."
      },
      {
        "name": "accent-active",
        "value": "#0e59c8",
        "usage": "Active state for elements using --accent as bg."
      },
      {
        "name": "success",
        "value": "#00d722",
        "usage": "Success state."
      },
      {
        "name": "warn",
        "value": "#ffae13",
        "usage": "Warning state."
      },
      {
        "name": "danger",
        "value": "#ee1d36",
        "usage": "Danger state."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
      "body": "\"WF Visual Sans Variable\", \"Inter\", Arial, system-ui, sans-serif",
      "mono": "\"Inconsolata\", ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "text-xl",
            "fontSize": "24px",
            "lineHeight": 1.04,
            "letterSpacing": "-0.01em",
            "usage": "Type scale step — H2."
          },
          {
            "name": "text-2xl",
            "fontSize": "32px",
            "lineHeight": 1.04,
            "letterSpacing": "-0.01em",
            "usage": "Type scale step — section title."
          },
          {
            "name": "text-3xl",
            "fontSize": "56px",
            "lineHeight": 1.04,
            "letterSpacing": "-0.01em",
            "usage": "Type scale step — H1."
          },
          {
            "name": "text-4xl",
            "fontSize": "80px",
            "lineHeight": 1.04,
            "letterSpacing": "-0.01em",
            "usage": "Type scale step — display / hero."
          }
        ]
      },
      {
        "name": "Text",
        "family": "body",
        "styles": [
          {
            "name": "text-xs",
            "fontSize": "12px",
            "lineHeight": 1.6,
            "usage": "Type scale step — extra small (≈11–12px)."
          },
          {
            "name": "text-sm",
            "fontSize": "14px",
            "lineHeight": 1.6,
            "usage": "Type scale step — small (≈12–14px)."
          },
          {
            "name": "text-base",
            "fontSize": "16px",
            "lineHeight": 1.6,
            "usage": "Type scale step — body baseline."
          },
          {
            "name": "text-lg",
            "fontSize": "20px",
            "lineHeight": 1.6,
            "usage": "Type scale step — H3 / featured body."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Base spacing — 4px tier."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Base spacing — 8px tier."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Base spacing — 12px tier."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Base spacing — 16px tier."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Base spacing — 20px tier."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Base spacing — 24px tier."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Base spacing — 32px tier."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Base spacing — 48px tier."
      },
      {
        "name": "section-y-desktop",
        "value": "96px",
        "usage": "Vertical padding between sections — desktop."
      },
      {
        "name": "section-y-tablet",
        "value": "64px",
        "usage": "Vertical padding between sections — tablet."
      },
      {
        "name": "section-y-phone",
        "value": "48px",
        "usage": "Vertical padding between sections — phone."
      },
      {
        "name": "container-max",
        "value": "1200px",
        "usage": "Max content container width."
      },
      {
        "name": "container-gutter-desktop",
        "value": "24px",
        "usage": "Container side gutter — desktop."
      },
      {
        "name": "container-gutter-tablet",
        "value": "16px",
        "usage": "Container side gutter — tablet."
      },
      {
        "name": "container-gutter-phone",
        "value": "12px",
        "usage": "Container side gutter — phone."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "4px",
        "usage": "Small radius — buttons, inputs, chips."
      },
      {
        "name": "radius-md",
        "value": "4px",
        "usage": "Medium radius — cards, modals."
      },
      {
        "name": "radius-lg",
        "value": "8px",
        "usage": "Large radius — featured containers."
      },
      {
        "name": "radius-pill",
        "value": "9999px",
        "usage": "Pill radius — avatars, badges."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "elev-flat",
        "value": "none",
        "usage": "No elevation."
      },
      {
        "name": "elev-ring",
        "value": "0 0 0 1px #d8d8d8",
        "usage": "Hairline ring (1px box-shadow border)."
      },
      {
        "name": "elev-raised",
        "value": "0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09)",
        "usage": "Raised surface (blur or whisper)."
      },
      {
        "name": "focus-ring",
        "value": "0 0 0 3px rgba(20, 110, 245, 0.3)",
        "usage": "Keyboard focus indicator."
      }
    ]
  },
  "typeMetrics": {
    "note": "Line heights and tracking from the Open Design token contract.",
    "tokens": [
      {
        "name": "leading-body",
        "value": "1.6",
        "usage": "Line-height for reading body."
      },
      {
        "name": "leading-tight",
        "value": "1.04",
        "usage": "Line-height for headings."
      },
      {
        "name": "tracking-display",
        "value": "-0.01em",
        "usage": "Letter-spacing applied to display sizes."
      }
    ]
  }
}