{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Starbucks",
  "meta": {
    "name": "Starbucks",
    "description": "Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (`#f2f0eb`) and a ceramic off-white (`#edebe9`) — colors that reference actual store materials: the paper napkins, the café walls, the wood finishes — while the signature **Starbucks Green** (`#006241`) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (`#cba258`) appears only around Rewards-status ceremony — not as a general accent.",
    "theme": "light"
  },
  "color": {
    "warm-confident-retail-flagship": {
      "$value": "#f2f0eb",
      "$type": "color",
      "$description": "Use for the warm confident retail flagship role."
    },
    "color-2": {
      "$value": "#edebe9",
      "$type": "color",
      "$description": "Use for the color 2 role."
    },
    "starbucks-green": {
      "$value": "#006241",
      "$type": "color",
      "$description": "Use for the starbucks green role."
    },
    "color-4": {
      "$value": "#cba258",
      "$type": "color",
      "$description": "Use for the color 4 role."
    },
    "color-5": {
      "$value": "#00754A",
      "$type": "color",
      "$description": "Use for the color 5 role."
    },
    "every-card-is-a-distinct-illustrated-photograph-rather-than-a-generated-graphic-12px-card-radius-whisper-soft-shadows-keep-content-cards-flat-plus-hint-of-lift-rem-based-spacing-scale-anchored-at-1-6rem-16px-space-3-stepping-to-6-4rem-64px": {
      "$value": "#1E3932",
      "$type": "color",
      "$description": "Use for the every card is a distinct illustrated photograph rather than a generated graphic 12px card radius whisper soft shadows keep content cards flat plus hint of lift rem based spacing scale anchored at 1 6rem 16px space 3 stepping to 6 4rem 64px role."
    },
    "green-uplift": {
      "$value": "#2b5148",
      "$type": "color",
      "$description": "Use for the green uplift role."
    },
    "green-light": {
      "$value": "#d4e9e2",
      "$type": "color",
      "$description": "Use for the green light role."
    },
    "gold-light": {
      "$value": "#dfc49d",
      "$type": "color",
      "$description": "Use for the gold light role."
    },
    "gold-lightest": {
      "$value": "#faf6ee",
      "$type": "color",
      "$description": "Use for the gold lightest role."
    },
    "white": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the white role."
    },
    "neutral-cool": {
      "$value": "#f9f9f9",
      "$type": "color",
      "$description": "Use for the neutral cool role."
    },
    "black": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the black role."
    },
    "text-black": {
      "$value": "rgba(0, 0, 0, 0.87)",
      "$type": "color",
      "$description": "Use for the text black role."
    },
    "text-black-soft": {
      "$value": "rgba(0, 0, 0, 0.58)",
      "$type": "color",
      "$description": "Use for the text black soft role."
    },
    "text-white": {
      "$value": "rgba(255, 255, 255, 1)",
      "$type": "color",
      "$description": "Use for the text white role."
    },
    "text-white-soft": {
      "$value": "rgba(255, 255, 255, 0.70)",
      "$type": "color",
      "$description": "Use for the text white soft role."
    },
    "rewards-green": {
      "$value": "#33433d",
      "$type": "color",
      "$description": "Use for the rewards green role."
    },
    "red": {
      "$value": "#c82014",
      "$type": "color",
      "$description": "Use for the red role."
    },
    "yellow": {
      "$value": "#fbbc05",
      "$type": "color",
      "$description": "Use for the yellow role."
    },
    "color-21": {
      "$value": "rgba(0,0,0,0.06)",
      "$type": "color",
      "$description": "Use for the color 21 role."
    },
    "color-22": {
      "$value": "rgba(0,0,0,0.90)",
      "$type": "color",
      "$description": "Use for the color 22 role."
    },
    "color-23": {
      "$value": "rgba(255,255,255,0.10)",
      "$type": "color",
      "$description": "Use for the color 23 role."
    },
    "color-24": {
      "$value": "rgba(255,255,255,0.90)",
      "$type": "color",
      "$description": "Use for the color 24 role."
    },
    "serif-on-rewards-script-on-careers-are-deliberate-and-localized-never-mix-them-with-the-primary-sans-within-the-same-surface": {
      "$value": "rgba(0,0,0,0.87)",
      "$type": "color",
      "$description": "Use for the serif on rewards script on careers are deliberate and localized never mix them with the primary sans within the same surface role."
    },
    "color-26": {
      "$value": "rgb(0, 130, 72)",
      "$type": "color",
      "$description": "Use for the color 26 role."
    },
    "color-27": {
      "$value": "rgba(green-light, 0.33)",
      "$type": "color",
      "$description": "Use for the color 27 role."
    },
    "color-28": {
      "$value": "rgba(red, 0.05)",
      "$type": "color",
      "$description": "Use for the color 28 role."
    },
    "color-29": {
      "$value": "rgba(255,255,255,0.70)",
      "$type": "color",
      "$description": "Use for the color 29 role."
    },
    "color-30": {
      "$value": "rgba(0,0,0,0.58)",
      "$type": "color",
      "$description": "Use for the color 30 role."
    }
  },
  "typography": {
    "h1": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "24px",
        "fontWeight": 600,
        "lineHeight": "36px",
        "letterSpacing": "36px"
      },
      "$type": "typography",
      "$description": "Typography style for h1."
    },
    "h2": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "24px",
        "fontWeight": 400,
        "lineHeight": "36px",
        "letterSpacing": "36px"
      },
      "$type": "typography",
      "$description": "Typography style for h2."
    },
    "body-large": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "19px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for body large."
    },
    "space-1": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "0.4rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "4px"
      },
      "$type": "typography",
      "$description": "Typography style for space 1."
    },
    "space-2": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "0.8rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "8px"
      },
      "$type": "typography",
      "$description": "Typography style for space 2."
    },
    "space-3": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "1.6rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "16px"
      },
      "$type": "typography",
      "$description": "Typography style for space 3."
    },
    "space-4": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "2.4rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "24px"
      },
      "$type": "typography",
      "$description": "Typography style for space 4."
    },
    "space-5": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "3.2rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "32px"
      },
      "$type": "typography",
      "$description": "Typography style for space 5."
    },
    "space-6": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "4rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "40px"
      },
      "$type": "typography",
      "$description": "Typography style for space 6."
    },
    "space-7": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "4.8rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "48px"
      },
      "$type": "typography",
      "$description": "Typography style for space 7."
    },
    "space-8": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "5.6rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "56px"
      },
      "$type": "typography",
      "$description": "Typography style for space 8."
    },
    "space-9": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "6.4rem",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "64px"
      },
      "$type": "typography",
      "$description": "Typography style for space 9."
    },
    "12px": {
      "$value": {
        "fontFamily": "Cards, modals, menu-item tiles (--cardBorderRadius)",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 12px."
    },
    "50px": {
      "$value": {
        "fontFamily": "All buttons — full-pill radius (--buttonBorderRadius)",
        "fontSize": "50px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 50px."
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step 4."
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step 8."
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step 12."
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step 16."
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 24."
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 32."
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 40."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    },
    "64": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step 64."
    },
    "80": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step 80."
    }
  },
  "radius": {
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "50px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "7px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "r6": {
      "$value": "14px",
      "$type": "dimension",
      "$description": "Border radius r6."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.starbucks.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}