Starbucks

Starbucks
难度:
行业风格
Starbucks 效果预览

效果预览

设计规范

由官方品牌资料与该风格提示词推导的关键 token,可复制或配合下方 DESIGN.md 使用。

颜色

  • primary品牌色

    主操作与高亮

  • on-primary推导

    主色上的文字

  • secondary推导

    标签、徽章与次级强调

  • on-secondary推导

    辅色上的文字

  • neutral提示词

    页面底色

  • on-neutral推导

    底色上的文字

  • surface推导

    卡片、面板与浮层

  • on-surface推导

    表面上的文字

  • border推导

    边框与分割线

圆角与形状

推导
sm · 4px
md · 8px
lg · 12px
full

间距

推导
  • sm8px
  • md12px
  • lg24px

阴影与层级

推导

层级由细边框与色调分层表达。

字体

推导
  • Ag

    标题 32px · 粗体

    Inter

  • Ag

    正文 16px · 常规

    Inter

  • Ag

    标签 13px · 中等

    Inter

星巴克是全球咖啡零售品牌,其界面用四层绿色体系(Starbucks、Accent、House、Uplift)各司其职,而不是笼统的「品牌绿」;金色只属于会员等级时刻,绝不作为通用强调;画布是暖中性色(#f2f0eb/#edebe9)而非冷白,呼应咖啡店材质;SoDoSans 以 -0.16px 的紧凑字距作为统一声音,Rewards 区切换衬线、招聘页甚至用马克笔字样写名字。适合零售、会员体系与生活方式品牌。

电商与零售现代极简

提示词模板

基础模板
Design a Starbucks-inspired interface. - Four-tier green brand system (Starbucks / Accent / House / Uplift) each mapped to a distinct surface role — not a single "brand green"; - Gold reserved for Rewards-status moments only; never a general-purpose accent; - Warm-neutral canvas (#f2f0eb / #edebe9) instead of cold white — references café materials; - Custom proprietary typeface (SoDoSans) with tight -0.16px letter-spacing as the universal voice; - Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names. Colors: #006241, #00754A, #1E3932, #2b5148 with #006241 accent. Typography: for Rewards utility zones and hero bands..

变体提示词

📱 移动端
Design a mobile app with Starbucks aesthetics. Use Starbucks color identity with #006241 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Starbucks style. Use Starbucks color identity with #006241 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Starbucks design language. Use Starbucks color identity with #006241 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Starbucks visual identity. Use Starbucks color identity with #006241 accents. Compelling, conversion-focused.

使用示例

Starbucks 应用

Web 端
Build a web app with Starbucks design language and #006241 color system.

Starbucks 仪表板

仪表板
Create a dashboard using Starbucks style with data visualization and for Rewards utility zones and hero bands. typography.

✅ 适合场景

  • 电商场景
  • 零售品牌官网
  • 会员与门店体验页

❌ 不适合场景

  • 冷峻科技界面
  • 实验性反设计

DESIGN.md 文件

符合 design.md 开放格式的设计系统描述,可复制或下载后交给 AI 编程工具使用。

下载