Shopify 设计系统规范实战：暗色电影感 + 霓虹绿电商界面的完整 Design Token 体系

人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载导读本文完整解析 xiaobei 仓库design-full技能内置设计系统库中的 Shopify 设计规范design-systems/shopify.md覆盖视觉主题、色彩 Token、字体层级、组件样式、布局网格、层级系统、护栏规则与响应式策略八大段落。读完本文你将能直接把这套「电商后台即任务控制中心」的暗色设计语言落成可运行的 HTML/CSS 页面并理解它如何与design-full pick的自动化匹配机制pick.sh、index.json协作为电商平台、商业服务与 SaaS 落地页产出风格一致的视觉方案。一、它在仓库中的定位设计系统库的 ecommerce 一员这套规范并非孤立文档而是design-full平面设计全案技能内置的 14 套品牌设计系统之一。在 index.json 中Shopify 条目的元数据定义如下字段值idshopifycategoryecommercekeywords暗色、霓虹绿、超轻字体、电商、电影感colorPrimary#008060darkModetruebestFor电商平台、商业服务、SaaS 落地页fileshopify.md使用方式非常简单在design-full工作流 Step 3设计系统选取运行design-full pick 风格描述如design-full pick 电商暗色电影感pick.sh 会以 Python 脚本按关键词加权打分keyword 命中 3、category 命中 2、name 命中 5、描述通用匹配 1排序输出匹配结果并给出 ⭐ 匹配度与首选推荐供 Agent 读取design-systems/shopify.md生成任务的DESIGN.md后续所有 HTML/CSS 的:roottoken 均以本文规范为准。整个技能的工作流骨架init 建工作区 → brief 确认 → pick 选系统 → 素材 → 编写 → 视觉 review → 归档定义在 SKILL.md。二、视觉主题与氛围dark-first 的电商控制中心Shopify 的设计语言是暗色优先、电影感强烈的。界面被塑造成一个「商务控制中心」深色表面、超细字重的锐利排版以及像终端光标一样刺破暗面的霓虹绿点缀。摄影风格戏剧化且情绪化商品与商家以高对比度、影棚级布光呈现。整体印象是一个严肃做事的平台——现代、强大、毫不掩饰的商业感。核心气质暗色表面占主导亮色模式存在但处于次要地位展示级标题使用超轻字重300甚至 200——轻盈而非厚重霓虹绿#008060只做外科手术式的点缀永远功能性绝不装饰性电影感摄影深阴影 戏剧化布光暗色表面上的慷慨留白以「色彩分层」营造纵深不靠阴影技巧表面哑光、平整纵深来自背景色分层而非 box-shadow微交互快速响应150ms–200ms让平台显得迅捷电商数据密度通过清晰的层级消化而非视觉噪音氛围关键词dark-commerce、neon-green、cinematic、ultra-light type、platform-power、merchant-centric、terminal-sharp设计人格把商家店铺当作任务关键型仪表盘来对待的商业平台。自信、高效并带有恰到好处的视觉戏剧感以显得高级。三、色彩系统与角色分工Token 化语义色色彩是全套规范中信息量最大的部分全部以 CSS 自定义属性Token语义化命名任何界面状态都能映射到明确的色值。3.1 暗色模式主目标TokenHex角色--color-bg#0B1215最深层背景所有表面的画布--color-surface#111820一级表面面板、侧边栏、主内容区--color-surface-elevated#1A232B抬升表面卡片、下拉框--color-surface-overlay#222D38覆盖表面模态框、弹层--color-surface-hover#1E2A35可交互表面的悬停填充--color-text-primary#E3E8EB标题、正文、主标签--color-text-secondary#8B9DA7描述、说明、次级信息--color-text-tertiary#5C6F7A禁用文本、占位符、元数据--color-text-inverse#FFFFFF强调色背景上的文字--color-accent#008060主强调色CTA、激活态、链接、焦点环--color-accent-hover#009A73强调色悬停态--color-accent-active#006B4F强调色按下/激活态--color-accent-subtlergba(0, 128, 96, 0.12)幽灵强调选中行、悬停淡染--color-accent-glowrgba(0, 128, 96, 0.25)焦点态光晕环--color-separator#1E2A35区块与面板之间的边框--color-separator-subtle#162029表面内部的发丝线分隔--color-success#008060完成态与强调绿共用--color-success-surfacergba(0, 128, 96, 0.10)成功背景淡染--color-warning#FFC453警示、待处理、需关注--color-warning-surfacergba(255, 196, 83, 0.10)警示背景淡染--color-error#E43E3E错误、破坏性操作、校验失败--color-error-surfacergba(228, 62, 62, 0.10)错误背景淡染--color-info#5BA4CF信息徽章、中性高亮--color-info-surfacergba(91, 164, 207, 0.10)信息背景淡染3.2 亮色模式变体TokenHex角色--color-bg#F6F7F8页面背景--color-surface#FFFFFF卡片/区块填充--color-surface-elevated#FFFFFF抬升卡片、模态框--color-surface-hover#F1F2F3悬停态填充--color-text-primary#1A1F25标题、正文--color-text-secondary#637381说明、描述--color-text-tertiary#919BA3禁用、占位符--color-text-inverse#FFFFFF强调色背景上的文字--color-accent#008060主强调色与暗色相同--color-accent-hover#006B4F悬停浅底上加深--color-accent-active#005A42按下态--color-accent-subtlergba(0, 128, 96, 0.08)幽灵强调淡染--color-separator#E1E3E5边框、分隔线--color-separator-subtle#F1F2F3发丝分隔线--color-success#008060与强调色相同--color-warning#D4860A浅底上的深警示--color-error#D72B2B浅底上的深错误--color-info#2E6EA6浅底上的深信息3.3 品牌扩展色名称Hex用途Shopify Green#008060主品牌色与强调色一致Shopify Green Light#95D7B2仅装饰性插画、数据可视化Shopify Green Dark#004E3A按下态、深层强调Polar Night 1#0B1215最暗暗色表面Polar Night 2#111820标准暗色表面Snow Storm#E3E8EB暗色上的最亮文字色彩角色铁律--color-accent只用于交互元素按钮、链接、激活态、焦点环绝不做装饰性用途--color-success与强调色同绿状态传达依赖「颜色 文字/图标」双通道绝不只靠颜色。四、字体系统超轻字重的层级阶梯字体栈-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif展示字仅 Hero 区同一字体栈、字重 200–300营造超轻电影感。等宽字体SF Mono, Fira Code, Menlo, Consolas, monospace——用于订单号、折扣码、API Key 等数据性文本。4.1 字号阶梯Type ScaleToken尺寸字重Tracking行高用途--text-heroclamp(2.75rem, 5vw 0.5rem, 4.5rem)300 (light)-0.025em1.1Hero 标题、splash 区--text-headline-lgclamp(2rem, 3vw 0.5rem, 2.5rem)300-0.02em1.15区块标题、功能标题--text-headlineclamp(1.5rem, 1.5vw 0.5rem, 1.75rem)400-0.015em1.2子区块标题--text-title1.125rem(18px)500-0.01em1.3卡片标题、模态框头--text-subtitle1rem(16px)50001.4副标题、强调正文--text-body0.875rem(14px)40001.5默认正文--text-body-sm0.8125rem(13px)4000.01em1.5紧凑正文、表格单元格--text-caption0.75rem(12px)4000.02em1.4说明、元数据、时间戳--text-overline0.6875rem(11px)6000.06em1.3标签、overline全大写--text-data1.5rem(24px)500-0.01em1.2仪表盘指标、大数字4.2 字体使用规则Hero 与区块标题用 300light——这是 Shopify 的签名气质除非 64px 的超大展示字绝不使用 200正文永远 400小字号下 300 会不可读禁止正文用 300Tracking 随字号增大渐进收紧hero: -0.025em → body: 0正文最大行宽measure640px仪表盘指标用--text-data并开启 tabular-nums 字体特性保证列对齐标签与 overline 一律大写 宽 trackingUI 文本禁用斜体斜体只保留给长文编辑内容五、组件样式规范从按钮到数据表的完整 Token 应用5.1 按钮Primary强调绿background: var(--color-accent); color: var(--color-text-inverse); padding: 8px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; border: none; cursor: pointer; transition: background 150ms ease, box-shadow 150ms ease;Hovervar(--color-accent-hover)Activevar(--color-accent-active)scale(0.98)Focusbox-shadow: 0 0 0 2px var(--color-accent-glow)Disabledopacity: 0.4无指针事件Loading文字替换为 16px、var(--color-text-inverse)色的 spinnerSecondary描边background: transparent; color: var(--color-text-primary); padding: 8px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--color-separator);Hoverbackground: var(--color-surface-hover)边框变亮Activebackground: var(--color-surface-elevated)Focusbox-shadow: 0 0 0 2px var(--color-accent-glow)Tertiary幽灵background: transparent; color: var(--color-text-secondary); padding: 8px 12px; border-radius: 8px; font-size: 0.875rem; font-weight: 400; border: none;Hoverbackground: var(--color-surface-hover)文字变--color-text-primaryDestructive破坏性background: var(--color-error); color: var(--color-text-inverse); /* 形状与尺寸同 Primary */Hover#C93232次级破坏按钮为--color-error文字 边框的描边样式Large CTAHeropadding: 12px 28px; font-size: 1rem; font-weight: 500; border-radius: 10px;Icon Button32px × 32px正方形border-radius: 8px图标 16px、色--color-text-secondaryHoverbackground: var(--color-surface-hover)5.2 卡片background: var(--color-surface-elevated); border-radius: 12px; padding: 20px; border: 1px solid var(--color-separator); box-shadow: none;Hover可交互卡片border-color: var(--color-accent)且 30% 透明度选中border-color: var(--color-accent)background: var(--color-accent-subtle)指标卡左上大数字--text-data、下方标签--text-caption、右侧 sparkline 或 delta商品卡顶部图片border-radius: 8px标题--text-body字重 500价格--text-body-sm--color-text-secondary默认态卡片一律无 box-shadow5.3 输入框文本输入background: var(--color-surface); border: 1px solid var(--color-separator); border-radius: 8px; padding: 8px 12px; font-size: 0.875rem; color: var(--color-text-primary); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;Focusborder-color: var(--color-accent)box-shadow: 0 0 0 2px var(--color-accent-glow)Placeholdervar(--color-text-tertiary)Errorborder-color: var(--color-error)下方 12px 处显示--color-error错误消息Disabledopacity: 0.5cursor: not-allowed前缀/后缀槽--color-text-tertiary图标或文字内部以border-left/border-right分隔搜索输入border-radius: 980px; /* 药丸形 */ padding: 8px 12px 8px 36px; /* 预留放大镜图标 */Select / Dropdown基础样式同文本输入下拉面板--color-surface-overlay背景、8px圆角、1px边框--color-separator下拉阴影0 8px 24px rgba(0, 0, 0, 0.4)选中项--color-accent-subtle背景 --color-accent文字悬停项--color-surface-hover背景5.4 导航侧边栏背景--color-surface#111820宽度240px可折叠为56px纯图标模式右边框1px solid var(--color-separator)条目高36px内边距0 12px圆角8px条目文字--color-text-secondary、14px、字重 400激活项背景--color-accent-subtle、文字--color-accent、字重 500悬停项背景--color-surface-hover、文字--color-text-primary分组标签--color-text-tertiary、11px、字重 600、0.06em字距、大写Shopify logo顶部 28px 的--color-accent标记应用名--text-subtitle字重 500顶栏 / Command Bar背景--color-surfaceborder-bottom: 1px solid var(--color-separator)高度56px居中搜索栏药丸形输入--color-text-tertiary占位文案 Search your store...面包屑--color-text-secondary、14px以--color-text-tertiary的 chevron 分隔操作按钮右对齐5.5 徽章 / 状态标签border-radius: 980px药丸形padding: 2px 8px字体 12px、字重 500变体Default--color-surface-hover背景 --color-text-secondary文字Success--color-success-surface背景 --color-success文字Warning--color-warning-surface背景 --color-warning文字Error--color-error-surface背景 --color-error文字Info--color-info-surface背景 --color-info文字5.6 数据表表头行--color-surface-hover背景、--text-overline样式标签、滚动时 sticky行高48px单元格文字--text-body-sm13px行悬停--color-surface-hover背景行选中--color-accent-subtle背景不用斑马纹悬停态已足够列间无边框仅横向分隔线1px solid var(--color-separator-subtle)六、布局原则紧凑高效的商务节奏6.1 间距刻度Token值用途--space-14px紧凑内联间隙、图标到标签--space-28px相关元素之间、紧凑内边距--space-312px表单字段间、列表项间--space-416px区块内边距、卡片内部间隙--space-520px卡片内边距、舒适间距--space-624px主要区块分隔--space-832px页面级纵向节奏--space-1040px区块分隔线--space-1248pxHero 级间距--space-1664px最大区块间隙6.2 网格内容最大宽度1200px侧边栏 主内容布局侧边栏固定240px主内容填充剩余主内容区内的管理内容最大宽度960px保证可读性栏间距 Gutter16px卡片网格≥1200px 三列、≥768px 两列、以下单列网格 gap16px6.3 留白哲学暗色表面本身承担分隔工作过度留白没有必要区块纵向内边距32px–48px紧凑效率优先于奢侈呼吸感标题与正文之间8px–12px紧凑节奏正文与 CTA 之间16px–20px兄弟卡片之间16px边缘内边距移动端16px、桌面端24px–32px内容永远不触碰视口边缘6.4 内容节奏Hero 区暗色电影感背景 商品摄影或平台插画。超轻标题字重 300 短副标题 绿色 CTA。内容左对齐不居中。功能区块堆叠或交替布局。--text-headline标题 正文 可选插画。紧凑纵向节奏。仪表盘区块一行指标卡随后数据表或图表。密集但可读。CTA 区块常置于略浅一档的暗色表面。粗体标题 单个绿色按钮。七、深度与层级用背景色分层代替阴影Shopify 的纵深完全由背景色分层表达而非阴影。最暗表面是画布每一级抬升都是略浅一档的暗色。7.1 暗色模式 Elevation 层级Level背景边框阴影用途0 (canvas)#0B1215无无根背景1 (surface)#1118201px solid #1E2A35无面板、侧边栏、主内容2 (raised)#1A232B1px solid #1E2A35无卡片、列表项、区块3 (overlay)#222D381px solid #2A38450 4px 16px rgba(0,0,0,0.3)下拉框、弹层4 (floating)#2A38451px solid #3345550 8px 32px rgba(0,0,0,0.4)模态框、命令面板7.2 强调光晕Accent Glow霓虹绿在聚焦或高亮时产生轻微光晕强化「终端光标」感焦点环box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.25)激活 CTA 光晕仅 Herobox-shadow: 0 0 20px rgba(0, 128, 96, 0.2)静止态卡片、徽章、导航条目上绝不使用光晕7.3 遮罩模态背板rgba(0, 0, 0, 0.6)backdrop-filter: blur(4px)Toast 通知surface level 3固定右下角8px间隙堆叠7.4 圆角刻度Token值用途--radius-sm4px小徽章、内联标签--radius-md8px按钮、输入框、导航项--radius-lg12px卡片、模态容器--radius-xl16px大功能卡、图片容器--radius-pill980px搜索栏、状态徽章、药丸八、Dos and Donts设计护栏清单DoHero 与区块标题用字重 300——这是 Shopify 的签名视觉--color-accent#008060只用于交互元素按钮、链接、激活态、焦点环保持表面哑光平整背景色偏移比阴影更能干净地表达层级选中/悬停淡染用--color-accent-subtle——提供语境而不制造视觉噪音仪表盘指标与价格列使用 tabular-nums 保持对齐默认正文 14px。Shopify 是数据密集的管理界面16px 正文对数据富集表面过大交互状态变化用150ms ease动画速度即效率的信号订单号、折扣码、API Key 使用等宽字体超轻标题搭配常规字重副标题制造最大对比以暗色模式为主设计目标亮色是变体而非反过来营销/Hero 区可用全出血电影感摄影但管理后台 UI 中的摄影要克制且有目的只用 1px 边框。除焦点环外绝不 2px 或 3pxDont不要为装饰性元素分隔线、背景填充、非交互图标使用--color-accent永远不要给文字加渐变低于 48px 的文字不要用字重 200——会不可读不要用字重 700bold。600 是上限且只保留给标签与小号大写不要给静止态卡片或列表项加 box-shadow阴影只保留给遮罩与弹层矩形内容卡圆角不要大于12px禁止 20px 或 24px 圆角卡不要居中段落、表单布局或仪表盘内容一律左对齐表格不要斑马纹行悬停已足够不要动画width、height、top、left、margin只用transform和opacity不要只用颜色传达状态配合文字标签或图标如绿点 Active不要在卡片背景上用装饰渐变Hero 区的微妙径向光晕是唯一例外不要在导航标签、按钮文字、状态指示器中使用 emoji不要在同一视图中混用亮暗表面而无清晰视觉分隔边框或间距九、响应式行为从手机到宽屏的降级策略9.1 断点名称最小宽度布局行为mobile0单列、侧边栏隐藏汉堡菜单、卡片堆叠、底部抽屉式模态tablet768px可选侧边栏、2 列卡片网格、并排表单desktop1024px完整侧边栏、2–3 列网格、标准模态覆盖层wide1200px强制最大内容宽度、3 列卡片网格9.2 适配规则侧边栏1024px以下隐藏由汉堡菜单覆盖层替代。覆盖层从左侧滑入transform: translateX200ms ease背景--color-surface导航项桌面端文字 图标768px以下侧边栏折叠时仅图标卡片768px以下全宽、768px双列、1200px三列顶栏768px以下搜索栏收为仅图标标题省略号截断数据表移动端转为堆叠卡片列表每行变成「标签-值」对卡片关键列状态、金额保留为紧凑行表单始终单列、顶部对齐标签移动端输入全宽、桌面端最大480px模态移动端全屏含 safe-area 内边距、桌面端居中覆盖仪表盘指标移动端纵向堆叠、桌面端横向排列字号768px以下 Hero 从流式缩放降为2rem32px正文任何尺寸都保持14px——移动端绝不缩小正文9.3 间距刻度移动 vs 桌面上下文移动端桌面端区块纵向内边距24px32px–48px卡片内边距16px20px边缘外边距16px24px–32px区块间间隙24px32px–48px卡片网格间隙12px16px侧边栏宽度隐藏240px9.4 触控目标移动端所有交互元素最小44px × 44px点击目标间距至少8px移动端按钮全宽或最小120px宽9.5 暗色模式处理暗色为默认。使用prefers-color-scheme: light激活亮色变体所有色彩 Token 同步切换。模式切换应即时完成色彩交换不加动画。商品影像在两种模式下可保持一致——只有 UI 表面切换。十、落地实践从规范到 DESIGN.md 与 HTML/CSS在design-full工作流中应用本规范的标准路径是Step 1design-full init 任务名建立工作区目录结构design_assets/YYYY-MM-DD-任务名/含brief.md、source/、output/由 init.sh 生成并确认 brief。Step 3design-full pick 电商平台暗色电影感从内置库匹配到 Shopifyindex.json中colorPrimary: #008060、darkMode: true把本规范写入任务DESIGN.md。Step 5严格以本规范的 CSS 变量命名体系定义:roottoken——--color-*语义色、--text-*字号阶梯、--space-*间距刻度、--radius-*圆角、--duration-normal动效全部落成 CSS Custom Properties见 SKILL.md 的 CSS 设计 Token 规范一节页面语义化标签header/main/section/footer按min-width: 768px / 1024px断点做响应式。Step 6对照brief.md与DESIGN.md用视觉模型逐项 review风格一致性、组件规范遵循度、响应式表现、交互状态完整性最多 3 轮修正。Step 7产出归档到output/更新index.md品牌色等核心信息同步至 MEMORY.md 的 Brand Assets。一个可直接参考的暗色模式 token 定义骨架如下:root { /* 语义色彩 */ --color-bg: #0B1215; --color-surface: #111820; --color-surface-elevated: #1A232B; --color-surface-overlay: #222D38; --color-surface-hover: #1E2A35; --color-text-primary: #E3E8EB; --color-text-secondary: #8B9DA7; --color-text-tertiary: #5C6F7A; --color-accent: #008060; --color-accent-hover: #009A73; --color-accent-active: #006B4F; --color-accent-subtle: rgba(0, 128, 96, 0.12); --color-accent-glow: rgba(0, 128, 96, 0.25); /* 字号阶梯 */ --text-hero: clamp(2.75rem, 5vw 0.5rem, 4.5rem); --text-headline: clamp(1.5rem, 1.5vw 0.5rem, 1.75rem); --text-body: 0.875rem; --text-data: 1.5rem; /* 间距系统 */ --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-12: 48px; /* 圆角与动效 */ --radius-md: 8px; --radius-lg: 12px; --duration-fast: 150ms; }使用前提提醒本规范面向电商平台、商业服务与 SaaS 落地页场景若任务风格描述偏向其他方向如开发者工具的 Vercel、知识管理的 Notion应通过design-full pick匹配对应设计系统完整 14 套列表见 index.json而非强行套用暗色电影感。pick.sh的评分机制会优先推荐bestFor字段与需求最贴近的系统帮助 Agent 在「尊重品牌约束」与「适配设计系统」之间取得一致。赞分享人工智能AI Agent大模型AI 应用媒体生成【免费下载链接】xiaobei为OPC/中小微企业量身打造的自媒体获客智能体项目地址https://gitcode.com/gh_mirrors/wi/xiaobei点击查看免费下载相关推荐OpenDesign Shopify 设计系统实战指南黑暗电影感、超轻可变字体与霓虹绿强调的完整落地规范OpenDesign Shopify 设计系统实战指南黑暗电影感、超轻可变字体与霓虹绿强调的完整落地规范 导读 本文基于 OpenDesign 仓库中 desAI 应用人工智能AI 技能设计系统媒体生成Open Design 中的 Shopify 风格设计系统实战指南深色优先电影感电商界面规范Open Design 中的 Shopify 风格设计系统实战指南深色优先电影感电商界面规范 本文以 Open Design 仓库内置的 Shopify 设计AI 应用人工智能AI 技能设计系统媒体生成Open Design 中 Shopify 设计系统实战暗色电影感电商界面的令牌化还原指南Open Design 中 Shopify 设计系统实战暗色电影感电商界面的令牌化还原指南 导读 本文以 open design 仓库中 DESIGN uk.AI 应用人工智能AI 技能设计系统媒体生成上一篇Bash命令行翻译工具终极指南5个Awesome Bash翻译脚本推荐下一篇DictaLM 2.0常见问题解答新手必知的10个关键问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考