{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Spacex-Inspired",
  "meta": {
    "name": "Spacex-Inspired",
    "description": "An inspired interpretation of Spasex's design language — a mission-oriented aerospace brand built on pure black canvas, full-bleed photographic and video heroes of rockets and Mars landscapes, and uppercase D-DIN display type set in tight vertical leading. UI chrome is intentionally minimal a single ghost outlined pill button per band, all-caps eyebrow microtext, and a fixed top nav over photography. The system is unapologetically austere — black, white, and the imagery itself.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "on-primary-mute": {
      "$value": "#f0f0fa",
      "$type": "color",
      "$description": "Use for the on primary mute role."
    },
    "canvas-night": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the canvas night role."
    },
    "canvas-night-soft": {
      "$value": "#0a0a0a",
      "$type": "color",
      "$description": "Use for the canvas night soft role."
    },
    "canvas-light": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas light role."
    },
    "canvas-cool": {
      "$value": "#f0f0fa",
      "$type": "color",
      "$description": "Use for the canvas cool role."
    },
    "hairline-on-dark": {
      "$value": "#3a3a3f",
      "$type": "color",
      "$description": "Use for the hairline on dark role."
    },
    "hairline-on-light": {
      "$value": "#e0e0e8",
      "$type": "color",
      "$description": "Use for the hairline on light role."
    },
    "link-on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the link on dark role."
    },
    "link-blue-fallback": {
      "$value": "#0000ee",
      "$type": "color",
      "$description": "Use for the link blue fallback role."
    },
    "ink-mute": {
      "$value": "#5a5a5f",
      "$type": "color",
      "$description": "Use for the ink mute role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif",
        "fontSize": "80px",
        "fontWeight": 700,
        "lineHeight": 0.95,
        "letterSpacing": "1.6px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif",
        "fontSize": "60px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": "1.2px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "D-DIN-Bold, Arial Narrow, Arial, Verdana, sans-serif",
        "fontSize": "48px",
        "fontWeight": 700,
        "lineHeight": 1.25,
        "letterSpacing": "0.96px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "D-DIN, Arial, Verdana, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.7,
        "letterSpacing": "0.32px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "D-DIN, Arial, Verdana, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0.32px"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "button-cap": {
      "$value": {
        "fontFamily": "D-DIN, Arial, Verdana, sans-serif",
        "fontSize": "13.008px",
        "fontWeight": 700,
        "lineHeight": 0.94,
        "letterSpacing": "1.17px"
      },
      "$type": "typography",
      "$description": "Typography style for button cap."
    },
    "micro-cap": {
      "$value": {
        "fontFamily": "D-DIN, Arial, Verdana, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 2,
        "letterSpacing": "0.96px"
      },
      "$type": "typography",
      "$description": "Typography style for micro cap."
    },
    "caption": {
      "$value": {
        "fontFamily": "D-DIN, Arial, Verdana, sans-serif",
        "fontSize": "13.008px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    }
  },
  "spacing": {
    "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": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "18px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "huge": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step huge."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "pill": {
      "$value": "32px",
      "$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.spacex.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}