{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Framer",
  "meta": {
    "name": "Framer",
    "description": "A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster.",
    "theme": "dark"
  },
  "color": {
    "primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "accent-blue": {
      "$value": "#0099ff",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "ink": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-muted": {
      "$value": "#999999",
      "$type": "color",
      "$description": "Use for the ink muted role."
    },
    "canvas": {
      "$value": "#090909",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-1": {
      "$value": "#141414",
      "$type": "color",
      "$description": "Use for the surface 1 role."
    },
    "surface-2": {
      "$value": "#1c1c1c",
      "$type": "color",
      "$description": "Use for the surface 2 role."
    },
    "hairline": {
      "$value": "#262626",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#1a1a1a",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "inverse-canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the inverse canvas role."
    },
    "inverse-ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the inverse ink role."
    },
    "gradient-magenta": {
      "$value": "#d44df0",
      "$type": "color",
      "$description": "Use for the gradient magenta role."
    },
    "gradient-violet": {
      "$value": "#6a4cf5",
      "$type": "color",
      "$description": "Use for the gradient violet role."
    },
    "gradient-orange": {
      "$value": "#ff7a3d",
      "$type": "color",
      "$description": "Use for the gradient orange role."
    },
    "gradient-coral": {
      "$value": "#ff5577",
      "$type": "color",
      "$description": "Use for the gradient coral role."
    },
    "semantic-success": {
      "$value": "#22c55e",
      "$type": "color",
      "$description": "Use for the semantic success role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "GT Walsheim Framer Medium",
        "fontSize": "110px",
        "fontWeight": 500,
        "lineHeight": 0.85,
        "letterSpacing": "-5.5px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "GT Walsheim Medium",
        "fontSize": "85px",
        "fontWeight": 500,
        "lineHeight": 0.95,
        "letterSpacing": "-4.25px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "GT Walsheim Medium",
        "fontSize": "62px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": "-3.1px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "GT Walsheim Medium",
        "fontSize": "32px",
        "fontWeight": 500,
        "lineHeight": 1.13,
        "letterSpacing": "-1.0px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "headline": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "22px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for headline."
    },
    "subhead": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "24px",
        "fontWeight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "-0.01px"
      },
      "$type": "typography",
      "$description": "Typography style for subhead."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "-0.18px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "15px",
        "fontWeight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "-0.15px"
      },
      "$type": "typography",
      "$description": "Typography style for body."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "-0.14px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "13px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": "-0.13px"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "micro": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": "-0.12px"
      },
      "$type": "typography",
      "$description": "Typography style for micro."
    },
    "button": {
      "$value": {
        "fontFamily": "Inter Variable",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1,
        "letterSpacing": "-0.14px"
      },
      "$type": "typography",
      "$description": "Typography style for button."
    }
  },
  "spacing": {
    "hair": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Spacing step hair."
    },
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "15px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "30px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "10px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "15px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "xxl": {
      "$value": "30px",
      "$type": "dimension",
      "$description": "Border radius xxl."
    },
    "pill": {
      "$value": "100px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.framer.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}