{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Shopifi-Inspired",
  "meta": {
    "name": "Shopifi-Inspired",
    "description": "An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks. The marketing-hero and product-narrative pages live on near-black canvases with full-bleed photography of merchants, giant Neue Haas Grotesk display type at thin weights, and a single black-pill CTA stroked in white. The transactional pages (pricing, signup, dashboards) flip to a cream-mint canvas with pastel aloe and pistachio greens, the same pill button vocabulary, and Inter for UI body. The two tracks share typographic DNA but diverge sharply in canvas polarity — and that choice is the brand.",
    "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-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "canvas-night": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the canvas night role."
    },
    "canvas-night-elevated": {
      "$value": "#0a0a0a",
      "$type": "color",
      "$description": "Use for the canvas night elevated role."
    },
    "canvas-light": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas light role."
    },
    "canvas-cream": {
      "$value": "#fbfbf5",
      "$type": "color",
      "$description": "Use for the canvas cream role."
    },
    "surface-elevated-dark": {
      "$value": "#1e2c31",
      "$type": "color",
      "$description": "Use for the surface elevated dark role."
    },
    "shade-30": {
      "$value": "#d4d4d8",
      "$type": "color",
      "$description": "Use for the shade 30 role."
    },
    "shade-40": {
      "$value": "#a1a1aa",
      "$type": "color",
      "$description": "Use for the shade 40 role."
    },
    "shade-50": {
      "$value": "#71717a",
      "$type": "color",
      "$description": "Use for the shade 50 role."
    },
    "shade-60": {
      "$value": "#52525b",
      "$type": "color",
      "$description": "Use for the shade 60 role."
    },
    "shade-70": {
      "$value": "#3f3f46",
      "$type": "color",
      "$description": "Use for the shade 70 role."
    },
    "hairline-light": {
      "$value": "#e4e4e7",
      "$type": "color",
      "$description": "Use for the hairline light role."
    },
    "hairline-dark": {
      "$value": "#1e2c31",
      "$type": "color",
      "$description": "Use for the hairline dark role."
    },
    "aloe-10": {
      "$value": "#c1fbd4",
      "$type": "color",
      "$description": "Use for the aloe 10 role."
    },
    "pistachio-10": {
      "$value": "#d4f9e0",
      "$type": "color",
      "$description": "Use for the pistachio 10 role."
    },
    "link-cool-1": {
      "$value": "#9dabad",
      "$type": "color",
      "$description": "Use for the link cool 1 role."
    },
    "link-cool-2": {
      "$value": "#9797a2",
      "$type": "color",
      "$description": "Use for the link cool 2 role."
    },
    "link-cool-3": {
      "$value": "#bdbdca",
      "$type": "color",
      "$description": "Use for the link cool 3 role."
    },
    "link-mint": {
      "$value": "#99b3ad",
      "$type": "color",
      "$description": "Use for the link mint role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "96px",
        "fontWeight": 330,
        "lineHeight": 1,
        "letterSpacing": "2.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "70px",
        "fontWeight": 330,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "55px",
        "fontWeight": 330,
        "lineHeight": 1.16,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "48px",
        "fontWeight": 330,
        "lineHeight": 1.14,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "heading-xl": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "28px",
        "fontWeight": 500,
        "lineHeight": 1.28,
        "letterSpacing": "0.42px"
      },
      "$type": "typography",
      "$description": "Typography style for heading xl."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "24px",
        "fontWeight": 400,
        "lineHeight": 1.14,
        "letterSpacing": "0.36px"
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif",
        "fontSize": "18px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": "0.72px"
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "18px",
        "fontWeight": 550,
        "lineHeight": 1.56,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "16px",
        "fontWeight": 420,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "16px",
        "fontWeight": 550,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "caption": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.49,
        "letterSpacing": "0.28px"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "micro": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "13px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": "-0.13px"
      },
      "$type": "typography",
      "$description": "Typography style for micro."
    },
    "eyebrow-cap": {
      "$value": {
        "fontFamily": "Inter Variable, Inter, Helvetica, Arial, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": "0.72px"
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow cap."
    },
    "code": {
      "$value": {
        "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$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": "64px",
      "$type": "dimension",
      "$description": "Spacing step huge."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "5px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.shopify.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}