{
  "$description": "Design tokens for zachblevins.com, generated from css/styles.css. $value is Light and the 390 frame; $extensions carry Dark and the 768 and 1200 steps.",
  "$extensions": {
    "source": "https://zachblevins.com/css/styles.css",
    "guide": "https://zachblevins.com/design-system.md",
    "figmaLibrary": "u7Woeg2PGHsjKAyaGKuKf2",
    "breakpoints": {
      "tablet": 768,
      "desktop": 1200
    }
  },
  "color": {
    "semantic": {
      "ink": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "Brand/Primary/1000",
        "$extensions": {
          "css": "--c-ink",
          "dark": "#0e0f10"
        }
      },
      "white": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "",
        "$extensions": {
          "css": "--c-white",
          "dark": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": "#d7ff38",
        "$description": "Brand/Secondary/50",
        "$extensions": {
          "css": "--c-accent",
          "dark": "#d7ff38"
        }
      },
      "bg": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "Background/Default/Primary",
        "$extensions": {
          "css": "--c-bg",
          "dark": "#0e0f10"
        }
      },
      "bg-hover": {
        "$type": "color",
        "$value": "#0e0f100d",
        "$description": "Background/Default/Primary Hover: Ink/050, Chalk/050 in Dark",
        "$extensions": {
          "css": "--c-bg-hover",
          "dark": "#ffffff0d"
        }
      },
      "text": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "Typography/Default/Primary",
        "$extensions": {
          "css": "--c-text",
          "dark": "#ffffff"
        }
      },
      "text-2": {
        "$type": "color",
        "$value": "#0e0f10bf",
        "$description": "Typography/Default/Secondary",
        "$extensions": {
          "css": "--c-text-2",
          "dark": "#ffffffb2"
        }
      },
      "text-3": {
        "$type": "color",
        "$value": "#0e0f1099",
        "$description": "Typography/Default/Tertiary",
        "$extensions": {
          "css": "--c-text-3",
          "dark": "#ffffff80"
        }
      },
      "link": {
        "$type": "color",
        "$value": "#0e0f10e5",
        "$description": "Opacity/900, both modes",
        "$extensions": {
          "css": "--c-link",
          "dark": "#ffffffe5"
        }
      },
      "line": {
        "$type": "color",
        "$value": "#e7e7e7",
        "$description": "Border/Default/Primary",
        "$extensions": {
          "css": "--c-line",
          "dark": "#ffffff1a"
        }
      },
      "overlay": {
        "$type": "color",
        "$value": "#0e0f100d",
        "$description": "Opacity/050, Button/Background/Tertiary",
        "$extensions": {
          "css": "--c-overlay",
          "dark": "#ffffff0d"
        }
      },
      "nav": {
        "$type": "color",
        "$value": "#0e0f101a",
        "$description": "Background/Default/Nav: Ink/100 here, Chalk/100 in Dark",
        "$extensions": {
          "css": "--c-nav",
          "dark": "#ffffff1a"
        }
      },
      "overlay-hover": {
        "$type": "color",
        "$value": "#0e0f1026",
        "$description": "Opacity/150, Button/Background/Tertiary Hover",
        "$extensions": {
          "css": "--c-overlay-hover",
          "dark": "#ffffff26"
        }
      },
      "overlay-press": {
        "$type": "color",
        "$value": "#0e0f101a",
        "$description": "Opacity/100, Button/Background/Tertiary Pressed",
        "$extensions": {
          "css": "--c-overlay-press",
          "dark": "#ffffff1a"
        }
      },
      "blanket": {
        "$type": "color",
        "$value": "#ffffffb2",
        "$description": "Background/Utilities/Blanket, under the nav and menu tints",
        "$extensions": {
          "css": "--c-blanket",
          "dark": "#0e0f10b2"
        }
      },
      "menu-flat": {
        "$type": "color",
        "$value": "#e7e7e7",
        "$description": "",
        "$extensions": {
          "css": "--c-menu-flat",
          "dark": "#262728"
        }
      },
      "menu-glass": {
        "$type": "color",
        "$value": "rgb(222 222 222 / 0.73)",
        "$description": "",
        "$extensions": {
          "css": "--c-menu-glass",
          "dark": "rgb(47 48 49 / 0.73)"
        }
      },
      "btn-icon": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "Icon/Button/Tertiary + Ghost",
        "$extensions": {
          "css": "--c-btn-icon",
          "dark": "#d7ff38"
        }
      },
      "btn-primary": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "Button/Background/Primary",
        "$extensions": {
          "css": "--c-btn-primary",
          "dark": "#ffffff"
        }
      },
      "btn-primary-hover": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "Button/Background/Primary Hover",
        "$extensions": {
          "css": "--c-btn-primary-hover",
          "dark": "#e7e7e7"
        }
      },
      "btn-primary-fg": {
        "$type": "color",
        "$value": "#ffffffcc",
        "$description": "Button/Typography/Primary",
        "$extensions": {
          "css": "--c-btn-primary-fg",
          "dark": "#0e0f10"
        }
      },
      "btn-primary-fg-hover": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "Button/Typography/Primary Hover",
        "$extensions": {
          "css": "--c-btn-primary-fg-hover",
          "dark": "#0e0f10"
        }
      },
      "btn-primary-fg-pressed": {
        "$type": "color",
        "$value": "#d7ff38",
        "$description": "Button/Typography/Primary Pressed",
        "$extensions": {
          "css": "--c-btn-primary-fg-pressed",
          "dark": "#0e0f10"
        }
      },
      "btn-primary-icon": {
        "$type": "color",
        "$value": "#d7ff38",
        "$description": "Icon/Button/Primary",
        "$extensions": {
          "css": "--c-btn-primary-icon",
          "dark": "#0e0f10"
        }
      },
      "selector": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "nav underline, Icon/Button/Ghost",
        "$extensions": {
          "css": "--c-selector",
          "dark": "#d7ff38"
        }
      },
      "caret": {
        "$type": "color",
        "$value": "#0e0f10",
        "$description": "nav chevron, Icon/Button/Tertiary",
        "$extensions": {
          "css": "--c-caret",
          "dark": "#d7ff38"
        }
      },
      "danger-text": {
        "$type": "color",
        "$value": "#c22826",
        "$description": "Typography/Danger/Primary",
        "$extensions": {
          "css": "--c-danger-text",
          "dark": "#fdc1ba"
        }
      },
      "danger-border": {
        "$type": "color",
        "$value": "#c22826",
        "$description": "Border/Danger/Primary",
        "$extensions": {
          "css": "--c-danger-border",
          "dark": "#fc655a"
        }
      },
      "on-dark": {
        "$type": "color",
        "$value": "#ffffffcc",
        "$description": "Button/Typography/Primary",
        "$extensions": {
          "css": "--c-on-dark",
          "dark": "#ffffffcc"
        }
      },
      "on-dark-3": {
        "$type": "color",
        "$value": "#ffffff33",
        "$description": "Chalk/200, footer legal line",
        "$extensions": {
          "css": "--c-on-dark-3",
          "dark": "#ffffff33"
        }
      },
      "dim": {
        "$type": "color",
        "$value": "#0e0f10cc",
        "$description": "",
        "$extensions": {
          "css": "--c-dim",
          "dark": "#0e0f10cc"
        }
      }
    },
    "opacity": {
      "000": {
        "$type": "color",
        "$value": "#0e0f1000",
        "$extensions": {
          "css": "--op-000",
          "dark": "#ffffff00"
        }
      },
      "050": {
        "$type": "color",
        "$value": "#0e0f100d",
        "$extensions": {
          "css": "--op-050",
          "dark": "#ffffff0d"
        }
      },
      "100": {
        "$type": "color",
        "$value": "#0e0f101a",
        "$extensions": {
          "css": "--op-100",
          "dark": "#ffffff1a"
        }
      },
      "150": {
        "$type": "color",
        "$value": "#0e0f1026",
        "$extensions": {
          "css": "--op-150",
          "dark": "#ffffff26"
        }
      },
      "200": {
        "$type": "color",
        "$value": "#0e0f1033",
        "$extensions": {
          "css": "--op-200",
          "dark": "#ffffff33"
        }
      },
      "250": {
        "$type": "color",
        "$value": "#0e0f1040",
        "$extensions": {
          "css": "--op-250",
          "dark": "#ffffff40"
        }
      },
      "300": {
        "$type": "color",
        "$value": "#0e0f104d",
        "$extensions": {
          "css": "--op-300",
          "dark": "#ffffff4d"
        }
      },
      "350": {
        "$type": "color",
        "$value": "#0e0f1059",
        "$extensions": {
          "css": "--op-350",
          "dark": "#ffffff59"
        }
      },
      "400": {
        "$type": "color",
        "$value": "#0e0f1066",
        "$extensions": {
          "css": "--op-400",
          "dark": "#ffffff66"
        }
      },
      "450": {
        "$type": "color",
        "$value": "#0e0f1073",
        "$extensions": {
          "css": "--op-450",
          "dark": "#ffffff73"
        }
      },
      "500": {
        "$type": "color",
        "$value": "#0e0f1080",
        "$extensions": {
          "css": "--op-500",
          "dark": "#ffffff80"
        }
      },
      "550": {
        "$type": "color",
        "$value": "#0e0f108c",
        "$extensions": {
          "css": "--op-550",
          "dark": "#ffffff8c"
        }
      },
      "600": {
        "$type": "color",
        "$value": "#0e0f1099",
        "$extensions": {
          "css": "--op-600",
          "dark": "#ffffff99"
        }
      },
      "650": {
        "$type": "color",
        "$value": "#0e0f10a6",
        "$extensions": {
          "css": "--op-650",
          "dark": "#ffffffa6"
        }
      },
      "700": {
        "$type": "color",
        "$value": "#0e0f10b2",
        "$extensions": {
          "css": "--op-700",
          "dark": "#ffffffb2"
        }
      },
      "750": {
        "$type": "color",
        "$value": "#0e0f10bf",
        "$extensions": {
          "css": "--op-750",
          "dark": "#ffffffbf"
        }
      },
      "800": {
        "$type": "color",
        "$value": "#0e0f10cc",
        "$extensions": {
          "css": "--op-800",
          "dark": "#ffffffcc"
        }
      },
      "850": {
        "$type": "color",
        "$value": "#0e0f10d9",
        "$extensions": {
          "css": "--op-850",
          "dark": "#ffffffd9"
        }
      },
      "900": {
        "$type": "color",
        "$value": "#0e0f10e5",
        "$extensions": {
          "css": "--op-900",
          "dark": "#ffffffe5"
        }
      },
      "950": {
        "$type": "color",
        "$value": "#0e0f10f2",
        "$extensions": {
          "css": "--op-950",
          "dark": "#fffffff2"
        }
      },
      "1000": {
        "$type": "color",
        "$value": "#0e0f10",
        "$extensions": {
          "css": "--op-1000",
          "dark": "#ffffff"
        }
      }
    },
    "primitive": {
      "black-000": {
        "$type": "color",
        "$value": "#0e0f1000",
        "$extensions": {
          "css": "--ds-black-000"
        }
      },
      "black-050": {
        "$type": "color",
        "$value": "#0e0f100d",
        "$extensions": {
          "css": "--ds-black-050"
        }
      },
      "black-100": {
        "$type": "color",
        "$value": "#0e0f101a",
        "$extensions": {
          "css": "--ds-black-100"
        }
      },
      "black-150": {
        "$type": "color",
        "$value": "#0e0f1026",
        "$extensions": {
          "css": "--ds-black-150"
        }
      },
      "black-200": {
        "$type": "color",
        "$value": "#0e0f1033",
        "$extensions": {
          "css": "--ds-black-200"
        }
      },
      "black-250": {
        "$type": "color",
        "$value": "#0e0f1040",
        "$extensions": {
          "css": "--ds-black-250"
        }
      },
      "black-300": {
        "$type": "color",
        "$value": "#0e0f104d",
        "$extensions": {
          "css": "--ds-black-300"
        }
      },
      "black-350": {
        "$type": "color",
        "$value": "#0e0f1059",
        "$extensions": {
          "css": "--ds-black-350"
        }
      },
      "black-400": {
        "$type": "color",
        "$value": "#0e0f1066",
        "$extensions": {
          "css": "--ds-black-400"
        }
      },
      "black-450": {
        "$type": "color",
        "$value": "#0e0f1073",
        "$extensions": {
          "css": "--ds-black-450"
        }
      },
      "black-500": {
        "$type": "color",
        "$value": "#0e0f1080",
        "$extensions": {
          "css": "--ds-black-500"
        }
      },
      "black-550": {
        "$type": "color",
        "$value": "#0e0f108c",
        "$extensions": {
          "css": "--ds-black-550"
        }
      },
      "black-600": {
        "$type": "color",
        "$value": "#0e0f1099",
        "$extensions": {
          "css": "--ds-black-600"
        }
      },
      "black-650": {
        "$type": "color",
        "$value": "#0e0f10a6",
        "$extensions": {
          "css": "--ds-black-650"
        }
      },
      "black-700": {
        "$type": "color",
        "$value": "#0e0f10b2",
        "$extensions": {
          "css": "--ds-black-700"
        }
      },
      "black-750": {
        "$type": "color",
        "$value": "#0e0f10bf",
        "$extensions": {
          "css": "--ds-black-750"
        }
      },
      "black-800": {
        "$type": "color",
        "$value": "#0e0f10cc",
        "$extensions": {
          "css": "--ds-black-800"
        }
      },
      "black-850": {
        "$type": "color",
        "$value": "#0e0f10d9",
        "$extensions": {
          "css": "--ds-black-850"
        }
      },
      "black-900": {
        "$type": "color",
        "$value": "#0e0f10e5",
        "$extensions": {
          "css": "--ds-black-900"
        }
      },
      "black-950": {
        "$type": "color",
        "$value": "#0e0f10f2",
        "$extensions": {
          "css": "--ds-black-950"
        }
      },
      "black-1000": {
        "$type": "color",
        "$value": "#0e0f10",
        "$extensions": {
          "css": "--ds-black-1000"
        }
      },
      "white-000": {
        "$type": "color",
        "$value": "#ffffff00",
        "$extensions": {
          "css": "--ds-white-000"
        }
      },
      "white-050": {
        "$type": "color",
        "$value": "#ffffff0d",
        "$extensions": {
          "css": "--ds-white-050"
        }
      },
      "white-100": {
        "$type": "color",
        "$value": "#ffffff1a",
        "$extensions": {
          "css": "--ds-white-100"
        }
      },
      "white-150": {
        "$type": "color",
        "$value": "#ffffff26",
        "$extensions": {
          "css": "--ds-white-150"
        }
      },
      "white-200": {
        "$type": "color",
        "$value": "#ffffff33",
        "$extensions": {
          "css": "--ds-white-200"
        }
      },
      "white-250": {
        "$type": "color",
        "$value": "#ffffff40",
        "$extensions": {
          "css": "--ds-white-250"
        }
      },
      "white-300": {
        "$type": "color",
        "$value": "#ffffff4d",
        "$extensions": {
          "css": "--ds-white-300"
        }
      },
      "white-350": {
        "$type": "color",
        "$value": "#ffffff59",
        "$extensions": {
          "css": "--ds-white-350"
        }
      },
      "white-400": {
        "$type": "color",
        "$value": "#ffffff66",
        "$extensions": {
          "css": "--ds-white-400"
        }
      },
      "white-450": {
        "$type": "color",
        "$value": "#ffffff73",
        "$extensions": {
          "css": "--ds-white-450"
        }
      },
      "white-500": {
        "$type": "color",
        "$value": "#ffffff80",
        "$extensions": {
          "css": "--ds-white-500"
        }
      },
      "white-550": {
        "$type": "color",
        "$value": "#ffffff8c",
        "$extensions": {
          "css": "--ds-white-550"
        }
      },
      "white-600": {
        "$type": "color",
        "$value": "#ffffff99",
        "$extensions": {
          "css": "--ds-white-600"
        }
      },
      "white-650": {
        "$type": "color",
        "$value": "#ffffffa6",
        "$extensions": {
          "css": "--ds-white-650"
        }
      },
      "white-700": {
        "$type": "color",
        "$value": "#ffffffb2",
        "$extensions": {
          "css": "--ds-white-700"
        }
      },
      "white-750": {
        "$type": "color",
        "$value": "#ffffffbf",
        "$extensions": {
          "css": "--ds-white-750"
        }
      },
      "white-800": {
        "$type": "color",
        "$value": "#ffffffcc",
        "$extensions": {
          "css": "--ds-white-800"
        }
      },
      "white-850": {
        "$type": "color",
        "$value": "#ffffffd9",
        "$extensions": {
          "css": "--ds-white-850"
        }
      },
      "white-900": {
        "$type": "color",
        "$value": "#ffffffe5",
        "$extensions": {
          "css": "--ds-white-900"
        }
      },
      "white-950": {
        "$type": "color",
        "$value": "#fffffff2",
        "$extensions": {
          "css": "--ds-white-950"
        }
      },
      "white-1000": {
        "$type": "color",
        "$value": "#ffffff",
        "$extensions": {
          "css": "--ds-white-1000"
        }
      },
      "brand-50": {
        "$type": "color",
        "$value": "#f3f3f3",
        "$extensions": {
          "css": "--ds-brand-50"
        }
      },
      "brand-100": {
        "$type": "color",
        "$value": "#e7e7e7",
        "$extensions": {
          "css": "--ds-brand-100"
        }
      },
      "brand-200": {
        "$type": "color",
        "$value": "#cfcfcf",
        "$extensions": {
          "css": "--ds-brand-200"
        }
      },
      "brand-300": {
        "$type": "color",
        "$value": "#b7b7b7",
        "$extensions": {
          "css": "--ds-brand-300"
        }
      },
      "brand-400": {
        "$type": "color",
        "$value": "#9f9f9f",
        "$extensions": {
          "css": "--ds-brand-400"
        }
      },
      "brand-500": {
        "$type": "color",
        "$value": "#868787",
        "$extensions": {
          "css": "--ds-brand-500"
        }
      },
      "brand-600": {
        "$type": "color",
        "$value": "#6e6f70",
        "$extensions": {
          "css": "--ds-brand-600"
        }
      },
      "brand-700": {
        "$type": "color",
        "$value": "#565758",
        "$extensions": {
          "css": "--ds-brand-700"
        }
      },
      "brand-800": {
        "$type": "color",
        "$value": "#3e3f40",
        "$extensions": {
          "css": "--ds-brand-800"
        }
      },
      "brand-900": {
        "$type": "color",
        "$value": "#262728",
        "$extensions": {
          "css": "--ds-brand-900"
        }
      },
      "brand-1000": {
        "$type": "color",
        "$value": "#0e0f10",
        "$extensions": {
          "css": "--ds-brand-1000"
        }
      },
      "accent-50": {
        "$type": "color",
        "$value": "#d7ff38",
        "$extensions": {
          "css": "--ds-accent-50"
        }
      },
      "red-200": {
        "$type": "color",
        "$value": "#fdc1ba",
        "$extensions": {
          "css": "--ds-red-200"
        }
      },
      "red-500": {
        "$type": "color",
        "$value": "#fc655a",
        "$extensions": {
          "css": "--ds-red-500"
        }
      },
      "red-700": {
        "$type": "color",
        "$value": "#c22826",
        "$extensions": {
          "css": "--ds-red-700"
        }
      }
    }
  },
  "type": {
    "f-display": {
      "$type": "fontFamily",
      "$value": "\"Clash Display\", \"Inter\", -apple-system, BlinkMacSystemFont, sans-serif",
      "$extensions": {
        "css": "--f-display"
      }
    },
    "f-sans": {
      "$type": "fontFamily",
      "$value": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
      "$extensions": {
        "css": "--f-sans"
      }
    },
    "f-mono": {
      "$type": "fontFamily",
      "$value": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, monospace",
      "$extensions": {
        "css": "--f-mono"
      }
    },
    "fs-hero": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--fs-hero",
        "768": "4.5rem"
      }
    },
    "lh-hero": {
      "$type": "dimension",
      "$value": "3rem",
      "$extensions": {
        "css": "--lh-hero",
        "768": "5rem"
      }
    },
    "title-min": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "the ramp's floor at this width",
      "$extensions": {
        "css": "--title-min",
        "1200": "6.1875rem"
      }
    },
    "title-ramp": {
      "$type": "other",
      "$value": "min(11.28vw, 7.8125rem)",
      "$extensions": {
        "css": "--title-ramp",
        "768": "min(calc(80px + (100vw - 768px) * 0.037), 7.8125rem)",
        "1200": "6.1875rem"
      }
    },
    "title-scale": {
      "$type": "other",
      "$value": "1",
      "$description": "the height rules' only lever",
      "$extensions": {
        "css": "--title-scale"
      }
    },
    "fs-page-title": {
      "$type": "other",
      "$value": "max(var(--title-min), calc(var(--title-ramp) * var(--title-scale)))",
      "$extensions": {
        "css": "--fs-page-title"
      }
    },
    "lh-page-title": {
      "$type": "other",
      "$value": "1.18",
      "$extensions": {
        "css": "--lh-page-title",
        "768": "1.1",
        "1200": "1.0808"
      }
    },
    "lead-max": {
      "$type": "dimension",
      "$value": "768px",
      "$extensions": {
        "css": "--lead-max",
        "1200": "1064px"
      }
    },
    "fs-lead": {
      "$type": "dimension",
      "$value": "1rem",
      "$extensions": {
        "css": "--fs-lead",
        "768": "1.375rem",
        "1200": "1.5rem"
      }
    },
    "lh-lead": {
      "$type": "dimension",
      "$value": "1.875rem",
      "$extensions": {
        "css": "--lh-lead",
        "768": "2.375rem",
        "1200": "2.5rem"
      }
    },
    "fs-card-lg": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--fs-card-lg",
        "768": "2rem"
      }
    },
    "lh-card-lg": {
      "$type": "dimension",
      "$value": "2.25rem",
      "$extensions": {
        "css": "--lh-card-lg",
        "768": "2.5rem"
      }
    },
    "fs-card": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--fs-card"
      }
    },
    "lh-card": {
      "$type": "dimension",
      "$value": "2.25rem",
      "$extensions": {
        "css": "--lh-card"
      }
    },
    "fs-body": {
      "$type": "dimension",
      "$value": "0.875rem",
      "$extensions": {
        "css": "--fs-body",
        "768": "1rem"
      }
    },
    "lh-body": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--lh-body",
        "768": "1.875rem"
      }
    },
    "ps-lead": {
      "$type": "dimension",
      "$value": "0.75rem",
      "$description": "Title Body paragraph spacing",
      "$extensions": {
        "css": "--ps-lead",
        "768": "0.875rem",
        "1200": "1rem"
      }
    },
    "fs-intro": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--fs-intro",
        "1200": "3rem"
      }
    },
    "lh-intro": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--lh-intro",
        "1200": "3.5rem"
      }
    },
    "fs-skill-title": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--fs-skill-title",
        "1200": "2rem"
      }
    },
    "lh-skill-title": {
      "$type": "dimension",
      "$value": "2.25rem",
      "$extensions": {
        "css": "--lh-skill-title",
        "1200": "2.5rem"
      }
    },
    "fs-cta": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--fs-cta",
        "768": "2rem",
        "1200": "2.5rem"
      }
    },
    "lh-cta": {
      "$type": "dimension",
      "$value": "2.25rem",
      "$extensions": {
        "css": "--lh-cta",
        "768": "2.5rem",
        "1200": "3rem"
      }
    },
    "fw-cta": {
      "$type": "fontWeight",
      "$value": "500",
      "$extensions": {
        "css": "--fw-cta",
        "768": "600"
      }
    },
    "fs-quote2": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--fs-quote2",
        "1200": "2.5rem"
      }
    },
    "lh-quote2": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--lh-quote2",
        "1200": "3rem"
      }
    },
    "fs-stat2": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--fs-stat2",
        "768": "2.5rem",
        "1200": "3rem"
      }
    },
    "lh-stat2": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--lh-stat2",
        "768": "3rem",
        "1200": "3.5rem"
      }
    },
    "fs-stat-label": {
      "$type": "dimension",
      "$value": "1.25rem",
      "$extensions": {
        "css": "--fs-stat-label",
        "768": "1.5rem"
      }
    },
    "lh-stat-label": {
      "$type": "dimension",
      "$value": "1.875rem",
      "$extensions": {
        "css": "--lh-stat-label",
        "768": "2.125rem"
      }
    },
    "fs-strip-value": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--fs-strip-value",
        "768": "2.5rem",
        "1200": "3rem"
      }
    },
    "lh-strip-value": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--lh-strip-value",
        "768": "3rem",
        "1200": "3.5rem"
      }
    },
    "fs-strip-label": {
      "$type": "dimension",
      "$value": "1.25rem",
      "$extensions": {
        "css": "--fs-strip-label",
        "768": "1.5rem"
      }
    },
    "lh-strip-label": {
      "$type": "dimension",
      "$value": "1.875rem",
      "$extensions": {
        "css": "--lh-strip-label",
        "768": "2.125rem"
      }
    },
    "ps-quote": {
      "$type": "dimension",
      "$value": "1.25rem",
      "$description": "Title Header/SM paragraph spacing",
      "$extensions": {
        "css": "--ps-quote",
        "1200": "1.5rem"
      }
    },
    "fs-h3": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--fs-h3",
        "768": "2rem",
        "1200": "2.5rem"
      }
    },
    "lh-h3": {
      "$type": "dimension",
      "$value": "2.25rem",
      "$extensions": {
        "css": "--lh-h3",
        "768": "2.5rem",
        "1200": "3rem"
      }
    },
    "fs-skill": {
      "$type": "dimension",
      "$value": "1.125rem",
      "$extensions": {
        "css": "--fs-skill",
        "768": "1.25rem",
        "1200": "2rem"
      }
    },
    "lh-skill": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--lh-skill",
        "768": "1.875rem",
        "1200": "2.5rem"
      }
    },
    "fs-stat": {
      "$type": "dimension",
      "$value": "3rem",
      "$extensions": {
        "css": "--fs-stat",
        "768": "4rem",
        "1200": "4.5rem"
      }
    },
    "lh-stat": {
      "$type": "dimension",
      "$value": "3.5rem",
      "$extensions": {
        "css": "--lh-stat",
        "768": "4.5rem",
        "1200": "5rem"
      }
    }
  },
  "layout": {
    "page-max": {
      "$type": "dimension",
      "$value": "1440px",
      "$description": "widest a page's content (and a bleed figure) gets",
      "$extensions": {
        "css": "--page-max"
      }
    },
    "pad": {
      "$type": "dimension",
      "$value": "1.125rem",
      "$extensions": {
        "css": "--pad",
        "768": "2rem",
        "1200": "4rem"
      }
    },
    "scroll-edge": {
      "$type": "dimension",
      "$value": "3rem",
      "$extensions": {
        "css": "--scroll-edge"
      }
    },
    "nav-pad-y": {
      "$type": "dimension",
      "$value": "1.125rem",
      "$extensions": {
        "css": "--nav-pad-y",
        "768": "1.5rem"
      }
    },
    "nav-h": {
      "$type": "other",
      "$value": "calc(40px + 2 * var(--nav-pad-y) + var(--safe-t))",
      "$extensions": {
        "css": "--nav-h"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "4px",
      "$extensions": {
        "css": "--radius"
      }
    },
    "band-y": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "block padding of a page band",
      "$extensions": {
        "css": "--band-y",
        "768": "3.5rem",
        "1200": "5rem"
      }
    },
    "band-gap": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "rhythm between items inside a band",
      "$extensions": {
        "css": "--band-gap",
        "768": "3.5rem",
        "1200": "5rem"
      }
    },
    "rule-space": {
      "$type": "dimension",
      "$value": "2rem",
      "$description": "divider line → its label",
      "$extensions": {
        "css": "--rule-space",
        "768": "3.5rem",
        "1200": "5rem"
      }
    },
    "hero-foot-gap": {
      "$type": "other",
      "$value": "calc(var(--band-gap) * 1.5)",
      "$extensions": {
        "css": "--hero-foot-gap"
      }
    },
    "arcade-end": {
      "$type": "dimension",
      "$value": "4rem",
      "$description": "404 hero → footer, Figma 390 and 768",
      "$extensions": {
        "css": "--arcade-end",
        "1200": "6.5rem"
      }
    },
    "grid-gap": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--grid-gap",
        "1200": "3rem"
      }
    },
    "grid-row-gap": {
      "$type": "dimension",
      "$value": "3.5rem",
      "$extensions": {
        "css": "--grid-row-gap",
        "1200": "5rem"
      }
    },
    "card-text-pr": {
      "$type": "dimension",
      "$value": "1.125rem",
      "$description": "Figma project details: 18 on phones, 32 at 768, 2 from 1200",
      "$extensions": {
        "css": "--card-text-pr",
        "768": "2rem",
        "1200": "0.125rem"
      }
    },
    "footer-pad-y": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--footer-pad-y",
        "768": "3.5rem"
      }
    },
    "footer-pad-b": {
      "$type": "dimension",
      "$value": "2rem",
      "$description": "Space/1400",
      "$extensions": {
        "css": "--footer-pad-b",
        "768": "3.5rem"
      }
    },
    "footer-gap": {
      "$type": "dimension",
      "$value": "2rem",
      "$extensions": {
        "css": "--footer-gap",
        "768": "3.5rem",
        "1200": "5rem"
      }
    },
    "footer-cta-gap": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--footer-cta-gap",
        "768": "3rem"
      }
    },
    "cta-h": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "medium button on phones and tablets",
      "$extensions": {
        "css": "--cta-h",
        "1200": "56px"
      }
    },
    "cta-pad-x": {
      "$type": "dimension",
      "$value": "1.25rem",
      "$description": "every button, Space/500",
      "$extensions": {
        "css": "--cta-pad-x"
      }
    },
    "cta-icon": {
      "$type": "dimension",
      "$value": "22px",
      "$extensions": {
        "css": "--cta-icon",
        "1200": "24px"
      }
    },
    "label-gap": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "section label → its content (Figma: 40 / 56 / 48)",
      "$extensions": {
        "css": "--label-gap",
        "768": "3.5rem",
        "1200": "3rem"
      }
    },
    "step-gap": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$description": "step number → step text",
      "$extensions": {
        "css": "--step-gap",
        "768": "2rem",
        "1200": "3rem"
      }
    },
    "contact-btn-px": {
      "$type": "dimension",
      "$value": "1.125rem",
      "$extensions": {
        "css": "--contact-btn-px",
        "768": "2rem",
        "1200": "1.5rem"
      }
    },
    "split-gap": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--split-gap",
        "768": "2rem",
        "1200": "3rem"
      }
    },
    "aside-gap": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$extensions": {
        "css": "--aside-gap",
        "768": "3.5rem",
        "1200": "4rem"
      }
    },
    "meta-gap": {
      "$type": "dimension",
      "$value": "0.5rem",
      "$description": "phones: space-between does the spacing, so the three facts Figma sets on one row still fit",
      "$extensions": {
        "css": "--meta-gap",
        "768": "1.5rem",
        "1200": "3rem"
      }
    },
    "panel-gap": {
      "$type": "dimension",
      "$value": "1rem",
      "$extensions": {
        "css": "--panel-gap",
        "768": "1.75rem",
        "1200": "2rem"
      }
    },
    "panel-row-gap": {
      "$type": "dimension",
      "$value": "0.25rem",
      "$description": "icon sits above the text at 390",
      "$extensions": {
        "css": "--panel-row-gap",
        "768": "1rem",
        "1200": "1.5rem"
      }
    },
    "panel-icon-pad": {
      "$type": "dimension",
      "$value": "0.5rem",
      "$extensions": {
        "css": "--panel-icon-pad",
        "1200": "1rem"
      }
    },
    "panel-icon": {
      "$type": "dimension",
      "$value": "16px",
      "$extensions": {
        "css": "--panel-icon",
        "768": "24px"
      }
    },
    "process-gap": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "heading over a card row (DSW \"Process\")",
      "$extensions": {
        "css": "--process-gap",
        "768": "3.5rem",
        "1200": "3rem"
      }
    },
    "cards-gap": {
      "$type": "dimension",
      "$value": "2.5rem",
      "$description": "the same, where the 1200 frame tightens to 24",
      "$extensions": {
        "css": "--cards-gap",
        "768": "3.5rem",
        "1200": "1.5rem"
      }
    },
    "skill-gap": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--skill-gap",
        "768": "2rem",
        "1200": "2.5rem"
      }
    },
    "card-pad": {
      "$type": "dimension",
      "$value": "1.5rem",
      "$extensions": {
        "css": "--card-pad",
        "768": "2rem",
        "1200": "3rem"
      }
    },
    "marquee-tile": {
      "$type": "dimension",
      "$value": "95px",
      "$extensions": {
        "css": "--marquee-tile",
        "768": "152px",
        "1200": "200px"
      }
    },
    "sb-thumb": {
      "$type": "other",
      "$value": "var(--ds-brand-300)",
      "$extensions": {
        "css": "--sb-thumb"
      }
    },
    "sb-thumb-hover": {
      "$type": "other",
      "$value": "var(--ds-brand-400)",
      "$extensions": {
        "css": "--sb-thumb-hover"
      }
    },
    "sb-track": {
      "$type": "other",
      "$value": "transparent",
      "$extensions": {
        "css": "--sb-track"
      }
    }
  },
  "motion": {
    "marquee-duration": {
      "$type": "duration",
      "$value": "32s",
      "$extensions": {
        "css": "--marquee-duration",
        "768": "52s",
        "1200": "68s"
      }
    },
    "ease": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.22, 0.61, 0.36, 1)",
      "$extensions": {
        "css": "--ease"
      }
    },
    "dur": {
      "$type": "duration",
      "$value": "220ms",
      "$extensions": {
        "css": "--dur"
      }
    },
    "dur-fast": {
      "$type": "duration",
      "$value": "150ms",
      "$description": "glyph swaps and the quickest fades",
      "$extensions": {
        "css": "--dur-fast"
      }
    },
    "dur-short": {
      "$type": "duration",
      "$value": "200ms",
      "$description": "exits, and small things arriving",
      "$extensions": {
        "css": "--dur-short"
      }
    },
    "dur-slow": {
      "$type": "duration",
      "$value": "300ms",
      "$description": "what the reader opens: scrim, notice, picture",
      "$extensions": {
        "css": "--dur-slow"
      }
    },
    "dur-long": {
      "$type": "duration",
      "$value": "400ms",
      "$description": "explanatory motion: the process map, the edge blur",
      "$extensions": {
        "css": "--dur-long"
      }
    },
    "dur-light": {
      "$type": "duration",
      "$value": "500ms",
      "$description": "statement words sharpening, the process map's nodes",
      "$extensions": {
        "css": "--dur-light"
      }
    },
    "dur-enter": {
      "$type": "duration",
      "$value": "550ms",
      "$description": "the load-in, block by block and word by word",
      "$extensions": {
        "css": "--dur-enter"
      }
    },
    "dur-reveal": {
      "$type": "duration",
      "$value": "600ms",
      "$description": "blocks rising in as they scroll into view",
      "$extensions": {
        "css": "--dur-reveal"
      }
    },
    "dur-settle": {
      "$type": "duration",
      "$value": "900ms",
      "$description": "the slowest arrivals: the About photo, the hatch",
      "$extensions": {
        "css": "--dur-settle"
      }
    },
    "dur-menu-in": {
      "$type": "duration",
      "$value": "240ms",
      "$extensions": {
        "css": "--dur-menu-in"
      }
    },
    "dur-menu-out": {
      "$type": "duration",
      "$value": "180ms",
      "$extensions": {
        "css": "--dur-menu-out"
      }
    },
    "press-dur": {
      "$type": "duration",
      "$value": "160ms",
      "$extensions": {
        "css": "--press-dur"
      }
    },
    "press-ease": {
      "$type": "other",
      "$value": "ease-out",
      "$extensions": {
        "css": "--press-ease"
      }
    },
    "arrow-rotate": {
      "$type": "other",
      "$value": "45deg",
      "$extensions": {
        "css": "--arrow-rotate"
      }
    },
    "arrow-dur": {
      "$type": "duration",
      "$value": "260ms",
      "$extensions": {
        "css": "--arrow-dur"
      }
    },
    "arrow-ease": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.22, 1, 0.36, 1)",
      "$extensions": {
        "css": "--arrow-ease"
      }
    },
    "ease-out-expo": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)",
      "$extensions": {
        "css": "--ease-out-expo"
      }
    },
    "ease-enter": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.33, 1, 0.68, 1)",
      "$extensions": {
        "css": "--ease-enter"
      }
    },
    "ease-overshoot": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
      "$description": "the sun's rays and the menu X",
      "$extensions": {
        "css": "--ease-overshoot"
      }
    }
  },
  "device": {
    "safe-t": {
      "$type": "other",
      "$value": "env(safe-area-inset-top, 0px)",
      "$extensions": {
        "css": "--safe-t"
      }
    },
    "safe-r": {
      "$type": "other",
      "$value": "env(safe-area-inset-right, 0px)",
      "$extensions": {
        "css": "--safe-r"
      }
    },
    "safe-b": {
      "$type": "other",
      "$value": "env(safe-area-inset-bottom, 0px)",
      "$extensions": {
        "css": "--safe-b"
      }
    },
    "safe-l": {
      "$type": "other",
      "$value": "env(safe-area-inset-left, 0px)",
      "$extensions": {
        "css": "--safe-l"
      }
    }
  }
}