Shopify PolarisShopify Polaris
为长时间运营工作设计：中性灰底、8px 圆角、清晰的状态色与帮助性文案，信息密度与可扫读性平衡。
典型场景电商后台 · 商家管理 · 运营工具
编号87
年代Shopify Polaris, current
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
为长时间运营工作设计：中性灰底、8px 圆角、清晰的状态色与帮助性文案，信息密度与可扫读性平衡。
关键词
shopify polarismerchant admincommercecheckoutweb componentsapp home
别名
PolarisPolaris Web Components
效果与动效
Purposeful admin feedback and restrained transitions
设计系统变量
--color-primary--color-surface--color-on-surface--radius-control--motion-duration--focus-ring配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Shopify admin semantic tokens and merchant brand accents
辅色 / Secondary
System semantic tokens; product brand accents
强调色在页面底色上的对比度约 4.4:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Shopify admin apps
- merchant tools
- checkout
- customer accounts
- POS
- and extensions
避开 / Do Not Use For
- Generic marketing sites or products outside Shopify surfaces
框架兼容
custom
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向中Medium
渲染成本中animation / blur
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Use official tokens and components
- preserve platform conventions
- test keyboard, contrast, zoom, motion preferences, and responsive behavior
CSS / 技术关键词
design tokens, semantic color, component states, focus-visible, reduced motion
AI 提示词
Design a Shopify Polaris merchant workflow using official web components, admin-native hierarchy, clear actions, semantic status feedback, and consistent commerce patterns. Keep scope tied to Shopify surfaces.