{
  "$description": "Purvang Mehta, thepurvangmehta.com design tokens. Breakpoints: base (phone), 768, 1200. Generated by build.py from design-system.css.",
  "color": {
    "gray-100": {
      "$type": "color",
      "$value": "#F7F7F7"
    },
    "gray-200": {
      "$type": "color",
      "$value": "#E1E2E3"
    },
    "gray-300": {
      "$type": "color",
      "$value": "#C0C2C4"
    },
    "gray-400-brand": {
      "$type": "color",
      "$value": "#858585"
    },
    "gray-500": {
      "$type": "color",
      "$value": "#575757"
    },
    "gray-600": {
      "$type": "color",
      "$value": "#424242"
    },
    "gray-700": {
      "$type": "color",
      "$value": "#343434"
    },
    "gray-800": {
      "$type": "color",
      "$value": "#242424"
    },
    "gray-900": {
      "$type": "color",
      "$value": "#101010"
    },
    "brand": {
      "$type": "color",
      "$value": "#242424"
    },
    "ink": {
      "$type": "color",
      "$value": "#242424"
    },
    "ink-soft": {
      "$type": "color",
      "$value": "#575757"
    },
    "gray-400": {
      "$type": "color",
      "$value": "#575757"
    },
    "paper": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "surface": {
      "$type": "color",
      "$value": "#F7F7F7"
    },
    "border": {
      "$type": "color",
      "$value": "rgba(34, 42, 53, .10)"
    },
    "positive": {
      "$type": "color",
      "$value": "rgb(76, 217, 175)"
    },
    "negative": {
      "$type": "color",
      "$value": "rgb(192, 54, 44)"
    }
  },
  "space": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    },
    "20": {
      "$type": "dimension",
      "$value": "80px"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px"
    },
    "32": {
      "$type": "dimension",
      "$value": "128px"
    }
  },
  "radius": {
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "8px"
    },
    "md": {
      "$type": "dimension",
      "$value": "12px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "16px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "24px"
    },
    "pill": {
      "$type": "dimension",
      "$value": "1000px"
    }
  },
  "rhythm": {
    "base": {
      "section-y": {
        "$type": "dimension",
        "$value": "64px"
      },
      "head-gap": {
        "$type": "dimension",
        "$value": "32px"
      },
      "gap": {
        "$type": "dimension",
        "$value": "24px"
      },
      "gap-lg": {
        "$type": "dimension",
        "$value": "32px"
      },
      "card-pad": {
        "$type": "dimension",
        "$value": "24px"
      },
      "panel-pad": {
        "$type": "dimension",
        "$value": "32px"
      }
    },
    "768": {
      "section-y": {
        "$type": "dimension",
        "$value": "96px"
      },
      "head-gap": {
        "$type": "dimension",
        "$value": "40px"
      },
      "gap": {
        "$type": "dimension",
        "$value": "32px"
      },
      "gap-lg": {
        "$type": "dimension",
        "$value": "48px"
      },
      "card-pad": {
        "$type": "dimension",
        "$value": "32px"
      },
      "panel-pad": {
        "$type": "dimension",
        "$value": "48px"
      }
    },
    "1200": {
      "section-y": {
        "$type": "dimension",
        "$value": "64px"
      },
      "head-gap": {
        "$type": "dimension",
        "$value": "32px"
      },
      "gap": {
        "$type": "dimension",
        "$value": "24px"
      },
      "gap-lg": {
        "$type": "dimension",
        "$value": "64px"
      },
      "card-pad": {
        "$type": "dimension",
        "$value": "24px"
      },
      "panel-pad": {
        "$type": "dimension",
        "$value": "64px"
      }
    }
  },
  "typography": {
    "base": {
      "display": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "40px",
          "lineHeight": "44px"
        }
      },
      "h1": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "32px",
          "lineHeight": "36px"
        }
      },
      "h2": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "24px",
          "lineHeight": "32px"
        }
      },
      "h3": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "20px",
          "lineHeight": "28px"
        }
      },
      "h4": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 600,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "lead": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "body": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "body-strong": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "small": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "ui": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "caption": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "12px",
          "lineHeight": "16px"
        }
      }
    },
    "768": {
      "display": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "48px",
          "lineHeight": "52px"
        }
      },
      "h1": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "40px",
          "lineHeight": "44px"
        }
      },
      "h2": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "28px",
          "lineHeight": "32px"
        }
      },
      "h3": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "24px",
          "lineHeight": "32px"
        }
      },
      "h4": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 600,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "lead": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "body": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "body-strong": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "small": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "ui": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "caption": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "12px",
          "lineHeight": "16px"
        }
      }
    },
    "1200": {
      "display": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "64px",
          "lineHeight": "72px"
        }
      },
      "h1": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "48px",
          "lineHeight": "52px"
        }
      },
      "h2": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "32px",
          "lineHeight": "36px"
        }
      },
      "h3": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans",
          "fontWeight": 600,
          "fontSize": "20px",
          "lineHeight": "28px"
        }
      },
      "h4": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 600,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "lead": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "18px",
          "lineHeight": "28px"
        }
      },
      "body": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "body-strong": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "16px",
          "lineHeight": "24px"
        }
      },
      "small": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 400,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "ui": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "14px",
          "lineHeight": "20px"
        }
      },
      "caption": {
        "$type": "typography",
        "$value": {
          "fontFamily": "Cal Sans Text UI",
          "fontWeight": 500,
          "fontSize": "12px",
          "lineHeight": "16px"
        }
      }
    }
  },
  "media": {
    "product": {
      "$type": "string",
      "$value": "16:9"
    },
    "portrait": {
      "$type": "string",
      "$value": "1:1"
    }
  }
}