OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文以 OpenDesign 仓库中 design-systems/shopify/DESIGN-ja.md 为核心骨架结合仓库内已落地的tokens.css、components.html、design-tokens.json等实现文件展开。读完本文你将掌握 Shopify 风格「暗色优先 超细大字号 霓虹绿点缀」设计系统的完整色板、字体层级、组件规格、布局节奏与响应式策略并能在 OpenDesign 的 Agent 生成流程中直接复用它——包括可复制的组件提示词模板与可验证的 Token 契约。1. 视觉主题与氛围黑暗本身即舞台Shopify.com 的设计语言可以被概括为一座「暗色优先的数字剧场」——电商平台被包装成一场电影首映礼。整个体验构建在带有深林绿底色的近黑色表面上#02090A、#061A1C、#102620营造的不是 SaaS 营销页的冷冰冰而是科技大会限量发布会的夜场氛围如同坐在暗厅第一排被温暖而包裹的奢侈黑暗环绕。这套视觉语言的六条核心特征对应仓库 manifest 中的 Design Highlights见 design-systems/shopify/manifest.json暗色优先深林绿底色teal undertone的暗色设计绝非纯黑超细大字号96px 纪念碑级规模的极细显示字体字重 330营造幽玄感霓虹绿#36F4A4黑暗画布上唯一的高能量强调色全胶囊按钮9999px 圆角作为主要交互形态多层阴影通过多层级 box-shadow 构建照片级景深融入黑暗的产品截图产品截图嵌入暗色 UI 上下文与周围黑暗融为一体锌基中性色阶用于文本层级冷暖平衡。2. 色彩系统克制的色彩即纪律主色Primary颜色色值用途Shopify 白#FFFFFF暗色表面的主文本、按钮填充、高对比元素Shopify 黑#000000页面背景、白按钮上的文本、最大对比基准对应 token--color-shade-100次色与强调色Secondary Accent颜色色值用途霓虹绿#36F4A4签名强调色——焦点环、交互高亮、激活态指示电光般生物发光芦荟#C1FBD4装饰性背景、氛围卡片的柔和绿洗--color-aloe-10开心果#D4F9E0最浅的绿调用于微妙的表面区分--color-pistachio-10表面与背景Surface Background颜色色值用途Void虚空#000000根页面背景——真正黑追求最大深度深绿松石Deep Teal#02090A卡片表面、内容容器——带绿底的近黑暗森林Dark Forest#061A1C区块背景具有明确的绿色个性森林Forest#102620抬升的暗表面、头部背景——最暖的暗调暗卡片边框#1E2C31暗表面上的卡片边框微妙的边界定义中性色与文本Zinc 色阶名称色值用途Shade-30#D4D4D8最亮的中性色暗处几乎不可见的边框--color-shade-30弱化文本#A1A1AA次级文本、元数据、说明——「安静的声音」Shade-50#71717A三级文本、时间戳、最低优先级信息--color-shade-50Shade-60#52525B禁用文本、装饰性中性色--color-shade-60Shade-70#3F3F46微妙分隔线、几乎不可见的 UI 边界--color-shade-70亮色边框#E4E4E7亮表面边框罕见——仅亮色模式的模态框语义化链接色Link Muted#9797A2带下划线装饰的弱化链接Link Sage#9DABAD带绿松石调的弱化链接Link Lavender#BDBDCA更亮的链接变体Link Mint#99B3AD主题区块的绿色调链接变体渐变系统暗绿松石洗#102620中心向#02090A边缘的径向渐变——用于产品展示背景绿色氛围Hero 区块背后带微弱绿调的环绕渐变无需实色即可制造景深聚光灯聚焦的高亮区域向黑色渐隐——模拟 keynote 舞台追光。源码落地Token 如何约束色彩纪律在仓库中以上色彩被规范化为 design-systems/shopify/tokens.css 的:root变量。注意几个关键的Schema 决策文件头注释与 token 定义均已写明--bg: #000000void 根背景--surface: #02090a卡片--surface-warm: #061a1c区块背景--fg: #ffffff与--fg-2: #ffffff相同——暗色画布上不做第二墨色分层--accent: #36f4a4被注释明确标注为「Neon Green is precious」——只用于焦点环与关键强调高亮永不填充大面积表面并配套--accent-on: #000000保证对比度交互态还预留了--accent-hover: #2de097与--accent-active: color-mix(in oklab, var(--accent), black 14%)语义色--success直接复用霓虹绿#36f4a4--warn: #eab308、--danger: #dc2626。在 design-systems/shopify/design-tokens.json 中可以看到这些 token 被分级为A1-identity品牌身份、A1-structure结构、B-slot槽位、A2衍生四层共 56 个 tokenscore: 100、grade: excellent且每个 token 都带sources行号回指tokens.css形成可审计的契约。3. 字体系统在尺度上低语字体家族显示字体DisplayNeueHaasGrotesk——Helvetica 的进化继任者可变字体。回退栈为 Helvetica、Arial、sans-serif启用 OpenTypess03Stylistic Set 3独特的字形替代可用字重 330、360、400、500、750。用于所有标题、Hero 文本、大型显示元素。正文字体BodyInter-Variable回退 Helvetica、Arial、sans-serif同样启用ss03可用字重 400、420、450、500、550。用于正文、链接、按钮、UI 元素。等宽字体Monoui-monospace回退 SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New。用于代码片段、数据标签、技术内容。在 design-systems/shopify/tokens.css 中三个字体栈被定义为--font-display、--font-body、--font-mono而components.html的body规则通过font-feature-settings: ss03全局启用字形特性并叠加-webkit-font-smoothing: antialiased。完整层级表角色字号字重行高字距备注Display XL96px4001.00—NeueHaasGroteskHero 标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调显示Display XL Tracked96px4001.002.4pxNeueHaasGrotesk加宽显示Display Light96px3300.96—NeueHaasGrotesk幽玄显示Heading 170px3301.00—区块标题Heading 255px3301.16—子区块Heading 348px3301.14—功能标题Heading 432px3601.140.32px卡片标题Heading 528px5001.280.42px小标题Heading 624px4001.140.36px次要标题Body Large20px5001.400.3px引子段落Body18px4001.56—标准正文Body Medium18px5501.56—强调正文Body Small16px4001.50—紧凑正文Body Small Medium16px4201.50—轻微强调Button16px4001.50—CTA 文本Nav Link18px5001.250.72px导航项Caption14px5001.490.28px元数据Caption Medium14px5501.490.28px强调说明Overline15.36px4001.501.54px宽字距标签Micro13px5001.50-0.13px紧凑小字Label12px4001.200.72px大写标签Code16px4001.50—大写、代码块Code Small12px4001.33—大写、行内代码排版原则Shopify 的排版是可变字体精度的教科书显示层几乎全部由 330–400 字重构成——如同被投影到暗背景上的光线羽毛般轻盈。这与多数 SaaS 的粗重路线截然相反别人在呐喊Shopify 在尺度上低语。96px 字重 330 的标题制造了「巨大尺寸 × 纤细笔画」的反差。ss03让特定字符如 a、g 与部分数字呈现更精致的替代字形将 Shopify 的排版与普通 Helvetica Neue 区分开。Inter Variable 用 420、550 这类介于传统档位之间的字重让每段文本都获得精确的视觉重量。在实现层design-systems/shopify/components.html 将字阶收敛为 token--text-xs: 12px、--text-sm: 14px、--text-base: 18px、--text-lg: 20px、--text-xl: 32px、--text-2xl: 48px、--text-3xl: 70px、--text-4xl: 96px行高 token 为--leading-body: 1.56、--leading-tight: 1.00显示层字距--tracking-display: 0em较小的 NeueHaasGrotesk 尺寸处存在正向字距 0.32–2.4px由组件内联设置。4. 组件样式规格按钮主按钮白色填充背景白#FFFFFF文本黑#000000边框2px solid transparent圆角全胶囊 9999px内边距12px 26px 12px 16px左右不对称——右侧更宽以求视觉平衡悬停轻微降低不透明度或背景偏移焦点2px#36F4A4霓虹绿轮廓环过渡all 200ms ease。次按钮幽灵/描边背景透明文本白#FFFFFF边框2px solid 白圆角全胶囊内边距同主按钮悬停填充白色、文本变黑焦点2px 霓虹绿。徽章/标签中性填充背景rgba(255,255,255,0.2)磨砂玻璃文本白无边框圆角 4px内边距 12px 16px字体 16px 常规。卡片与容器背景暗色页面用深绿松石#02090A边框1px solid#1E2C31——几乎不可见的边界圆角标准卡 8px、特色卡 12px、顶部圆角卡 20px 20px 0 0阴影多层级静止态为rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px叠加rgba(255,255,255,0.03) 0px 1px 0px inset——内嵌白高光制造顶部边缘微光悬停阴影扩散、卡片略微变亮过渡box-shadow 300ms ease、transform 200ms ease。实现上design-systems/shopify/tokens.css 用--elev-raised一个 token 封装了整个阴影栈components.html中.card直接引用box-shadow: var(--elev-raised)悬停仅切换 box-shadow 与 200ms ease 过渡。输入框与表单背景透明或暗森林#061A1C文本白边框1px solid#3F3F46Shade-70圆角8px内边距12px 16px焦点2px solid#36F4A4霓虹绿焦点环占位符Shade-50#71717A过渡border-color 200ms ease。在components.html中.field input:focus同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)::placeholder使用--metatoken。导航背景透明浮于暗色 Hero 之上滚动后变为森林#102620高度约 64px左侧Shopify 字标 LogoSVG暗背景白中/右18px/500 NeueHaasGrotesk 白色导航链接字距 0.72pxCTA右侧白色胶囊按钮「Start for free」次级 CTA 为白描边幽灵按钮悬停链接变弱化文本#A1A1AA或加下划线移动端汉堡菜单 全屏暗色遮罩过渡滚动时背景 300ms ease。图片处理产品截图嵌入暗色 UI 上下文融入周围黑暗管理后台预览置于带微妙卡边框的暗背景上宽高比灵活——Hero 图约 16:9特色图自由所有图片置于暗容器内、无亮边框/无相框带暗色占位表面的懒加载。信任指标醒目展示统计数字如「15」年、「150M」买家数字以 NeueHaasGrotesk 显示级呈现components.html中.stat-number使用--text-3xl70px weight 750 ss03合作伙伴/开发者生态专区融入页面流的暗色主题客户证言。5. 布局原则间距系统8px 基准Token值用途space-14px紧凑行内间隙space-28px基准单位、图标间隙space-312px卡片内边距、紧凑外边距space-416px标准元素内边距space-524px卡片间隙、区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064pxHero 区块内边距、大间隙注意tokens.css 中实际声明的间距 token 为--space-1/2/3/4/5/6/8/12值 4/8/12/16/24/28/36/64px并额外提供区块节奏 token--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——与文档的剧场式留白哲学一一对应。网格与容器最大容器宽约 1280px居中Hero全宽、边缘到边缘的暗背景 居中文本特色区块文本与产品截图的 2 列布局统计区块大数字横向排布水平内边距桌面 64px、平板 32px、移动 16px网格间隙主要内容块间 24–32px。components.html中.container使用max-width: var(--container-max)1280pxmargin-inline: auto.hero-grid桌面为1fr 1fr两列、1023px 以下坍缩为单列.stats-grid桌面三列、639px 以下单列。留白哲学剧场节奏区块之间以 80–120px 的纯黑呼吸空间分隔产生「演示文稿」而非「网页」的节奏——每个内容块都是 keynote 滚动中的独立「幻灯片」。区块内间距更紧凑、更具意图性与广袤虚空形成焦点密度对比。宏留白与微精度的反差构成了网站的电影感韵律。圆角刻度值语境4px标签、徽章、微元素8px标准卡片、输入框、视频容器12px特色卡、图片容器、按钮非胶囊20px顶部圆角卡20px 20px 0 0、模态头部340px大型圆角装饰元素9999px胶囊按钮、胶囊徽章、导航元素Token 侧对应--radius-sm: 9999px胶囊——所有 CTA 按钮、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。6. 深度与高度层级处理用途基准无阴影、暗表面默认页面背景微妙rgba(0,0,0,0.1) 0px 0px 0px 1px 内嵌白辉光静止卡片中等多层1px 环 2px 4px 8px 阴影栈抬升卡、特色区块高rgba(0,0,0,0.25) 0px 25px 50px -12px模态、下拉、遮罩焦点0px 0px 0px 2px #36F4A4键盘焦点环霓虹绿为什么这套阴影体系异常讲究不用单一值阴影而是堆叠多层——1px 环做边界定义2/4/8px 渐进模糊模拟自然光衰减rgba(255,255,255,0.03)内嵌白辉光模拟顶部照明的玻璃表面。在暗背景上阴影从已暗的表面再向暗处推进因此更接近「环境光遮蔽」而非传统抬升——卡片不是浮起而是微微沉入表面。装饰性深度暗绿松石渐变Hero 与产品展示后的环境径向洗聚光灯效果向黑渐隐的亮中心制造 keynote 式舞台光边缘辉光内嵌 box-shadow 在暗卡片上形成微妙的亮色边缘绿色氛围光晕背景渐变中极淡的绿调呼应品牌强调色。7. 应该做与不应该做应该做Do用暗绿松石-黑的表面层级Void → Deep Teal → Dark Forest → Forest构建深度显示字体保持 330–400 字重——幽玄的轻盈是这个设计的签名霓虹绿#36F4A4只用于焦点态与关键强调高亮所有主 CTA 按钮使用 9999px 圆角——全胶囊不可妥协卡片高度使用多层级阴影系统——单阴影会显得扁平所有文本保持ss03OpenType 特性——这是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——角色不混用区块间制造戏剧性间距80px以营造电影节奏。不应该做Dont暗背景上的文本不要用纯黑#000000——只用白#FFFFFF不引入暖色橙、红、黄——调色板严格限定为冷色绿、绿松石、中性NeueHaasGrotesk 正文不用 500 以上字重——重字重破坏幽玄感大面积表面不应用绿色强调——霓虹绿只做小而精的高亮交互元素不用锐角0px——一切都要圆润不添加亮色背景——暗色主题是根本性的不是可选项不用单层 box-shadow——堆叠式才是系统正文行高不超过 1.56——Shopify 的文本相对紧凑同一尺寸/角色下不混用 NeueHaasGrotesk 与 Inter——字重刻度不同标题不用 0 以下的字距——Shopify 标题保持中性或正向追踪。8. 响应式行为断点名称宽度主要变化移动640px单列、汉堡导航、显示文本缩放至 48px、16px 内边距平板640–1024px两列网格开始、显示文本 70px、32px 内边距桌面1024–1440px完整布局、展开导航、96px 显示、64px 内边距大桌面1440px最大宽容器居中、区块间距增大触摸目标最小触摸目标 44×44pxWCAG AAA胶囊按钮最低 48px 高度 充裕水平内边距导航链接44px 触摸区卡片表面若可链接则整卡可点。折叠策略导航全横向链接 → 1024px 以下汉堡菜单Logo 与 CTA 按钮保持可见Hero96px 显示 → 平板 70px → 移动 48px保持单列居中特色区块文本图片两列 → 768px 以下堆叠单列统计横向行 → 移动端垂直堆叠区块内边距随视口收窄按 64px → 40px → 24px → 16px 递减卡片网格 → 堆叠移动端保持全宽。components.html的实现与此完全同步media (max-width: 1023px)切换容器内边距为--container-gutter-tablet、区块纵向为--section-y-tabletmedia (max-width: 639px)再切换为--container-gutter-phone/--section-y-phone。图片行为产品截图暗容器内响应式、保持宽高比Hero 图所有断点全宽、暗占位懒加载管理 UI 预览等比缩放移动端可能裁切所有图片使用 CDN 与响应式 srcset。9. Agent 提示词指南让生成器直接复刻快速颜色参考主 CTAShopify 白#FFFFFF页面背景Void 黑#000000卡片表面深绿松石#02090A区块背景暗森林#061A1C抬升背景森林#102620强调色霓虹绿#36F4A4正文白#FFFFFF弱化文本#A1A1AA暗边框#1E2C31。组件提示词示例可直接用于生成器Hero「在纯黑#000000背景上创建 96px/330 NeueHaasGrotesk 白色标题、20px/500 的 #A1A1AA 副标题以及两个胶囊按钮白色填充 9999px 圆角 2px 白描边幽灵的 Hero 区块」特色卡「在深绿松石#02090A上设计带 1px #1E2C31 边框、12px 圆角、多层阴影1px 环 2/4/8px 模糊、10% 黑内含 32px/360 白色标题与 18px/400 #A1A1AA 正文的卡片」统计区「在暗森林#061A1C上构建 96px/750 白色数字NeueHaasGrotesk、16px/400 #A1A1AA 说明标签、统计块间 64px 充裕间距的统计区块」导航「创建透明背景滚动时变为 #102620、左侧白色 Shopify 徽标、18px/500 白导航链接0.72px 字距、右侧白色胶囊『Start for free』按钮的吸顶导航」徽章「设计磨砂玻璃背景 rgba(255,255,255,0.2)、4px 圆角、12px 16px 内边距、16px 白字的标签——浮于暗卡片表面之上」迭代指南改善由该系统生成、已存在的画面时一次只聚焦一个组件引用本文档的具体颜色名与十六进制码记住这是暗色优先设计——亮表面是例外而非规则显示文本永远保持羽毛般轻盈字重 330–400——显重就降字重霓虹绿#36F4A4是稀缺资源——仅用于焦点与强调克制使用暗表面层级黑 → 深绿松石 → 暗森林 → 森林制造微妙景深阴影必须多层——单个box-shadow值无法复现 Shopify 卡片质感所有文本都应启用ss03OpenType 特性保证排版一致性。10. 在 OpenDesign 中的落地与验证路径该设计系统在仓库中不是孤立的文档而是一套完整的、可被 Agent 消费的包结构见 design-systems/shopify/manifest.json 与 design-systems/shopify/USAGE.md。建议的阅读顺序是先读 USAGE.md 理解包契约读 DESIGN.md英文原版视觉意图本日文版为同源翻译理解约束与反模式将 tokens.css 粘贴进产物第一个style块再写组件 CSS用 components.manifest.json 查看紧凑组件清单35 个选择器、15 个类、22 个元素覆盖 buttons / inputs / cards / links / icons / typography / layout 七组其中 badges 与 keyboard 组未使用需要精确选择器或状态时打开 components.html需要视觉抽查时查看 preview/colors.html、preview/typography.html、preview/spacing.htmlsource/token-contract.report.json 与 design-tokens.json 作为审计证据确认 56 个 token 全部有源码背书、无「未声明引用」。使用纪律USAGE.md 明确要求保持 schema token 名不变跨品牌切换才可靠主操作、链接、焦点态及唯一视觉焦点用--accent复用 components.manifest.json 中的组件组不要自创控件在复制的:roottoken 块之外避免裸 hex 值不要脱离tokens.css自行重定义 Tailwind 或 design-token 值不声称拥有原始上游证据——本包基于仓库内置的 curated fixture不添加components.html或 DESIGN 文档中未出现的组件配方。结语从「看得到」到「写得出来」Shopify 这套设计语言的高明之处在于它的每一个「感觉」都能被精确定位为可复用的参数——暗色不是#000而是四层表面轻盈不是玄学而是 330 字重质感不是滤镜而是五段阴影栈克制不是风格而是「霓虹绿只在焦点环出现」的硬规则。配合 OpenDesign 仓库中的 token 契约与参考组件无论是人工实现还是 Agent 生成都能稳定复现这套「夜晚的产品发布会」美学。如果你要在暗色电商落地页、SaaS 营销站或产品发布型页面中追求这种电影感直接套用本文的色板、层级表与提示词即可上手。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenDesign 中的 Shopify 设计系统实战：暗色优先的影院式电商界面设计指南
OpenDesign 中的 Shopify 设计系统实战暗色优先的影院式电商界面设计指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文以 OpenDesign 仓库中 design-systems/shopify/DESIGN-ja.md 为核心骨架结合仓库内已落地的tokens.css、components.html、design-tokens.json等实现文件展开。读完本文你将掌握 Shopify 风格「暗色优先 超细大字号 霓虹绿点缀」设计系统的完整色板、字体层级、组件规格、布局节奏与响应式策略并能在 OpenDesign 的 Agent 生成流程中直接复用它——包括可复制的组件提示词模板与可验证的 Token 契约。1. 视觉主题与氛围黑暗本身即舞台Shopify.com 的设计语言可以被概括为一座「暗色优先的数字剧场」——电商平台被包装成一场电影首映礼。整个体验构建在带有深林绿底色的近黑色表面上#02090A、#061A1C、#102620营造的不是 SaaS 营销页的冷冰冰而是科技大会限量发布会的夜场氛围如同坐在暗厅第一排被温暖而包裹的奢侈黑暗环绕。这套视觉语言的六条核心特征对应仓库 manifest 中的 Design Highlights见 design-systems/shopify/manifest.json暗色优先深林绿底色teal undertone的暗色设计绝非纯黑超细大字号96px 纪念碑级规模的极细显示字体字重 330营造幽玄感霓虹绿#36F4A4黑暗画布上唯一的高能量强调色全胶囊按钮9999px 圆角作为主要交互形态多层阴影通过多层级 box-shadow 构建照片级景深融入黑暗的产品截图产品截图嵌入暗色 UI 上下文与周围黑暗融为一体锌基中性色阶用于文本层级冷暖平衡。2. 色彩系统克制的色彩即纪律主色Primary颜色色值用途Shopify 白#FFFFFF暗色表面的主文本、按钮填充、高对比元素Shopify 黑#000000页面背景、白按钮上的文本、最大对比基准对应 token--color-shade-100次色与强调色Secondary Accent颜色色值用途霓虹绿#36F4A4签名强调色——焦点环、交互高亮、激活态指示电光般生物发光芦荟#C1FBD4装饰性背景、氛围卡片的柔和绿洗--color-aloe-10开心果#D4F9E0最浅的绿调用于微妙的表面区分--color-pistachio-10表面与背景Surface Background颜色色值用途Void虚空#000000根页面背景——真正黑追求最大深度深绿松石Deep Teal#02090A卡片表面、内容容器——带绿底的近黑暗森林Dark Forest#061A1C区块背景具有明确的绿色个性森林Forest#102620抬升的暗表面、头部背景——最暖的暗调暗卡片边框#1E2C31暗表面上的卡片边框微妙的边界定义中性色与文本Zinc 色阶名称色值用途Shade-30#D4D4D8最亮的中性色暗处几乎不可见的边框--color-shade-30弱化文本#A1A1AA次级文本、元数据、说明——「安静的声音」Shade-50#71717A三级文本、时间戳、最低优先级信息--color-shade-50Shade-60#52525B禁用文本、装饰性中性色--color-shade-60Shade-70#3F3F46微妙分隔线、几乎不可见的 UI 边界--color-shade-70亮色边框#E4E4E7亮表面边框罕见——仅亮色模式的模态框语义化链接色Link Muted#9797A2带下划线装饰的弱化链接Link Sage#9DABAD带绿松石调的弱化链接Link Lavender#BDBDCA更亮的链接变体Link Mint#99B3AD主题区块的绿色调链接变体渐变系统暗绿松石洗#102620中心向#02090A边缘的径向渐变——用于产品展示背景绿色氛围Hero 区块背后带微弱绿调的环绕渐变无需实色即可制造景深聚光灯聚焦的高亮区域向黑色渐隐——模拟 keynote 舞台追光。源码落地Token 如何约束色彩纪律在仓库中以上色彩被规范化为 design-systems/shopify/tokens.css 的:root变量。注意几个关键的Schema 决策文件头注释与 token 定义均已写明--bg: #000000void 根背景--surface: #02090a卡片--surface-warm: #061a1c区块背景--fg: #ffffff与--fg-2: #ffffff相同——暗色画布上不做第二墨色分层--accent: #36f4a4被注释明确标注为「Neon Green is precious」——只用于焦点环与关键强调高亮永不填充大面积表面并配套--accent-on: #000000保证对比度交互态还预留了--accent-hover: #2de097与--accent-active: color-mix(in oklab, var(--accent), black 14%)语义色--success直接复用霓虹绿#36f4a4--warn: #eab308、--danger: #dc2626。在 design-systems/shopify/design-tokens.json 中可以看到这些 token 被分级为A1-identity品牌身份、A1-structure结构、B-slot槽位、A2衍生四层共 56 个 tokenscore: 100、grade: excellent且每个 token 都带sources行号回指tokens.css形成可审计的契约。3. 字体系统在尺度上低语字体家族显示字体DisplayNeueHaasGrotesk——Helvetica 的进化继任者可变字体。回退栈为 Helvetica、Arial、sans-serif启用 OpenTypess03Stylistic Set 3独特的字形替代可用字重 330、360、400、500、750。用于所有标题、Hero 文本、大型显示元素。正文字体BodyInter-Variable回退 Helvetica、Arial、sans-serif同样启用ss03可用字重 400、420、450、500、550。用于正文、链接、按钮、UI 元素。等宽字体Monoui-monospace回退 SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New。用于代码片段、数据标签、技术内容。在 design-systems/shopify/tokens.css 中三个字体栈被定义为--font-display、--font-body、--font-mono而components.html的body规则通过font-feature-settings: ss03全局启用字形特性并叠加-webkit-font-smoothing: antialiased。完整层级表角色字号字重行高字距备注Display XL96px4001.00—NeueHaasGroteskHero 标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调显示Display XL Tracked96px4001.002.4pxNeueHaasGrotesk加宽显示Display Light96px3300.96—NeueHaasGrotesk幽玄显示Heading 170px3301.00—区块标题Heading 255px3301.16—子区块Heading 348px3301.14—功能标题Heading 432px3601.140.32px卡片标题Heading 528px5001.280.42px小标题Heading 624px4001.140.36px次要标题Body Large20px5001.400.3px引子段落Body18px4001.56—标准正文Body Medium18px5501.56—强调正文Body Small16px4001.50—紧凑正文Body Small Medium16px4201.50—轻微强调Button16px4001.50—CTA 文本Nav Link18px5001.250.72px导航项Caption14px5001.490.28px元数据Caption Medium14px5501.490.28px强调说明Overline15.36px4001.501.54px宽字距标签Micro13px5001.50-0.13px紧凑小字Label12px4001.200.72px大写标签Code16px4001.50—大写、代码块Code Small12px4001.33—大写、行内代码排版原则Shopify 的排版是可变字体精度的教科书显示层几乎全部由 330–400 字重构成——如同被投影到暗背景上的光线羽毛般轻盈。这与多数 SaaS 的粗重路线截然相反别人在呐喊Shopify 在尺度上低语。96px 字重 330 的标题制造了「巨大尺寸 × 纤细笔画」的反差。ss03让特定字符如 a、g 与部分数字呈现更精致的替代字形将 Shopify 的排版与普通 Helvetica Neue 区分开。Inter Variable 用 420、550 这类介于传统档位之间的字重让每段文本都获得精确的视觉重量。在实现层design-systems/shopify/components.html 将字阶收敛为 token--text-xs: 12px、--text-sm: 14px、--text-base: 18px、--text-lg: 20px、--text-xl: 32px、--text-2xl: 48px、--text-3xl: 70px、--text-4xl: 96px行高 token 为--leading-body: 1.56、--leading-tight: 1.00显示层字距--tracking-display: 0em较小的 NeueHaasGrotesk 尺寸处存在正向字距 0.32–2.4px由组件内联设置。4. 组件样式规格按钮主按钮白色填充背景白#FFFFFF文本黑#000000边框2px solid transparent圆角全胶囊 9999px内边距12px 26px 12px 16px左右不对称——右侧更宽以求视觉平衡悬停轻微降低不透明度或背景偏移焦点2px#36F4A4霓虹绿轮廓环过渡all 200ms ease。次按钮幽灵/描边背景透明文本白#FFFFFF边框2px solid 白圆角全胶囊内边距同主按钮悬停填充白色、文本变黑焦点2px 霓虹绿。徽章/标签中性填充背景rgba(255,255,255,0.2)磨砂玻璃文本白无边框圆角 4px内边距 12px 16px字体 16px 常规。卡片与容器背景暗色页面用深绿松石#02090A边框1px solid#1E2C31——几乎不可见的边界圆角标准卡 8px、特色卡 12px、顶部圆角卡 20px 20px 0 0阴影多层级静止态为rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px叠加rgba(255,255,255,0.03) 0px 1px 0px inset——内嵌白高光制造顶部边缘微光悬停阴影扩散、卡片略微变亮过渡box-shadow 300ms ease、transform 200ms ease。实现上design-systems/shopify/tokens.css 用--elev-raised一个 token 封装了整个阴影栈components.html中.card直接引用box-shadow: var(--elev-raised)悬停仅切换 box-shadow 与 200ms ease 过渡。输入框与表单背景透明或暗森林#061A1C文本白边框1px solid#3F3F46Shade-70圆角8px内边距12px 16px焦点2px solid#36F4A4霓虹绿焦点环占位符Shade-50#71717A过渡border-color 200ms ease。在components.html中.field input:focus同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)::placeholder使用--metatoken。导航背景透明浮于暗色 Hero 之上滚动后变为森林#102620高度约 64px左侧Shopify 字标 LogoSVG暗背景白中/右18px/500 NeueHaasGrotesk 白色导航链接字距 0.72pxCTA右侧白色胶囊按钮「Start for free」次级 CTA 为白描边幽灵按钮悬停链接变弱化文本#A1A1AA或加下划线移动端汉堡菜单 全屏暗色遮罩过渡滚动时背景 300ms ease。图片处理产品截图嵌入暗色 UI 上下文融入周围黑暗管理后台预览置于带微妙卡边框的暗背景上宽高比灵活——Hero 图约 16:9特色图自由所有图片置于暗容器内、无亮边框/无相框带暗色占位表面的懒加载。信任指标醒目展示统计数字如「15」年、「150M」买家数字以 NeueHaasGrotesk 显示级呈现components.html中.stat-number使用--text-3xl70px weight 750 ss03合作伙伴/开发者生态专区融入页面流的暗色主题客户证言。5. 布局原则间距系统8px 基准Token值用途space-14px紧凑行内间隙space-28px基准单位、图标间隙space-312px卡片内边距、紧凑外边距space-416px标准元素内边距space-524px卡片间隙、区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064pxHero 区块内边距、大间隙注意tokens.css 中实际声明的间距 token 为--space-1/2/3/4/5/6/8/12值 4/8/12/16/24/28/36/64px并额外提供区块节奏 token--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——与文档的剧场式留白哲学一一对应。网格与容器最大容器宽约 1280px居中Hero全宽、边缘到边缘的暗背景 居中文本特色区块文本与产品截图的 2 列布局统计区块大数字横向排布水平内边距桌面 64px、平板 32px、移动 16px网格间隙主要内容块间 24–32px。components.html中.container使用max-width: var(--container-max)1280pxmargin-inline: auto.hero-grid桌面为1fr 1fr两列、1023px 以下坍缩为单列.stats-grid桌面三列、639px 以下单列。留白哲学剧场节奏区块之间以 80–120px 的纯黑呼吸空间分隔产生「演示文稿」而非「网页」的节奏——每个内容块都是 keynote 滚动中的独立「幻灯片」。区块内间距更紧凑、更具意图性与广袤虚空形成焦点密度对比。宏留白与微精度的反差构成了网站的电影感韵律。圆角刻度值语境4px标签、徽章、微元素8px标准卡片、输入框、视频容器12px特色卡、图片容器、按钮非胶囊20px顶部圆角卡20px 20px 0 0、模态头部340px大型圆角装饰元素9999px胶囊按钮、胶囊徽章、导航元素Token 侧对应--radius-sm: 9999px胶囊——所有 CTA 按钮、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px。6. 深度与高度层级处理用途基准无阴影、暗表面默认页面背景微妙rgba(0,0,0,0.1) 0px 0px 0px 1px 内嵌白辉光静止卡片中等多层1px 环 2px 4px 8px 阴影栈抬升卡、特色区块高rgba(0,0,0,0.25) 0px 25px 50px -12px模态、下拉、遮罩焦点0px 0px 0px 2px #36F4A4键盘焦点环霓虹绿为什么这套阴影体系异常讲究不用单一值阴影而是堆叠多层——1px 环做边界定义2/4/8px 渐进模糊模拟自然光衰减rgba(255,255,255,0.03)内嵌白辉光模拟顶部照明的玻璃表面。在暗背景上阴影从已暗的表面再向暗处推进因此更接近「环境光遮蔽」而非传统抬升——卡片不是浮起而是微微沉入表面。装饰性深度暗绿松石渐变Hero 与产品展示后的环境径向洗聚光灯效果向黑渐隐的亮中心制造 keynote 式舞台光边缘辉光内嵌 box-shadow 在暗卡片上形成微妙的亮色边缘绿色氛围光晕背景渐变中极淡的绿调呼应品牌强调色。7. 应该做与不应该做应该做Do用暗绿松石-黑的表面层级Void → Deep Teal → Dark Forest → Forest构建深度显示字体保持 330–400 字重——幽玄的轻盈是这个设计的签名霓虹绿#36F4A4只用于焦点态与关键强调高亮所有主 CTA 按钮使用 9999px 圆角——全胶囊不可妥协卡片高度使用多层级阴影系统——单阴影会显得扁平所有文本保持ss03OpenType 特性——这是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——角色不混用区块间制造戏剧性间距80px以营造电影节奏。不应该做Dont暗背景上的文本不要用纯黑#000000——只用白#FFFFFF不引入暖色橙、红、黄——调色板严格限定为冷色绿、绿松石、中性NeueHaasGrotesk 正文不用 500 以上字重——重字重破坏幽玄感大面积表面不应用绿色强调——霓虹绿只做小而精的高亮交互元素不用锐角0px——一切都要圆润不添加亮色背景——暗色主题是根本性的不是可选项不用单层 box-shadow——堆叠式才是系统正文行高不超过 1.56——Shopify 的文本相对紧凑同一尺寸/角色下不混用 NeueHaasGrotesk 与 Inter——字重刻度不同标题不用 0 以下的字距——Shopify 标题保持中性或正向追踪。8. 响应式行为断点名称宽度主要变化移动640px单列、汉堡导航、显示文本缩放至 48px、16px 内边距平板640–1024px两列网格开始、显示文本 70px、32px 内边距桌面1024–1440px完整布局、展开导航、96px 显示、64px 内边距大桌面1440px最大宽容器居中、区块间距增大触摸目标最小触摸目标 44×44pxWCAG AAA胶囊按钮最低 48px 高度 充裕水平内边距导航链接44px 触摸区卡片表面若可链接则整卡可点。折叠策略导航全横向链接 → 1024px 以下汉堡菜单Logo 与 CTA 按钮保持可见Hero96px 显示 → 平板 70px → 移动 48px保持单列居中特色区块文本图片两列 → 768px 以下堆叠单列统计横向行 → 移动端垂直堆叠区块内边距随视口收窄按 64px → 40px → 24px → 16px 递减卡片网格 → 堆叠移动端保持全宽。components.html的实现与此完全同步media (max-width: 1023px)切换容器内边距为--container-gutter-tablet、区块纵向为--section-y-tabletmedia (max-width: 639px)再切换为--container-gutter-phone/--section-y-phone。图片行为产品截图暗容器内响应式、保持宽高比Hero 图所有断点全宽、暗占位懒加载管理 UI 预览等比缩放移动端可能裁切所有图片使用 CDN 与响应式 srcset。9. Agent 提示词指南让生成器直接复刻快速颜色参考主 CTAShopify 白#FFFFFF页面背景Void 黑#000000卡片表面深绿松石#02090A区块背景暗森林#061A1C抬升背景森林#102620强调色霓虹绿#36F4A4正文白#FFFFFF弱化文本#A1A1AA暗边框#1E2C31。组件提示词示例可直接用于生成器Hero「在纯黑#000000背景上创建 96px/330 NeueHaasGrotesk 白色标题、20px/500 的 #A1A1AA 副标题以及两个胶囊按钮白色填充 9999px 圆角 2px 白描边幽灵的 Hero 区块」特色卡「在深绿松石#02090A上设计带 1px #1E2C31 边框、12px 圆角、多层阴影1px 环 2/4/8px 模糊、10% 黑内含 32px/360 白色标题与 18px/400 #A1A1AA 正文的卡片」统计区「在暗森林#061A1C上构建 96px/750 白色数字NeueHaasGrotesk、16px/400 #A1A1AA 说明标签、统计块间 64px 充裕间距的统计区块」导航「创建透明背景滚动时变为 #102620、左侧白色 Shopify 徽标、18px/500 白导航链接0.72px 字距、右侧白色胶囊『Start for free』按钮的吸顶导航」徽章「设计磨砂玻璃背景 rgba(255,255,255,0.2)、4px 圆角、12px 16px 内边距、16px 白字的标签——浮于暗卡片表面之上」迭代指南改善由该系统生成、已存在的画面时一次只聚焦一个组件引用本文档的具体颜色名与十六进制码记住这是暗色优先设计——亮表面是例外而非规则显示文本永远保持羽毛般轻盈字重 330–400——显重就降字重霓虹绿#36F4A4是稀缺资源——仅用于焦点与强调克制使用暗表面层级黑 → 深绿松石 → 暗森林 → 森林制造微妙景深阴影必须多层——单个box-shadow值无法复现 Shopify 卡片质感所有文本都应启用ss03OpenType 特性保证排版一致性。10. 在 OpenDesign 中的落地与验证路径该设计系统在仓库中不是孤立的文档而是一套完整的、可被 Agent 消费的包结构见 design-systems/shopify/manifest.json 与 design-systems/shopify/USAGE.md。建议的阅读顺序是先读 USAGE.md 理解包契约读 DESIGN.md英文原版视觉意图本日文版为同源翻译理解约束与反模式将 tokens.css 粘贴进产物第一个style块再写组件 CSS用 components.manifest.json 查看紧凑组件清单35 个选择器、15 个类、22 个元素覆盖 buttons / inputs / cards / links / icons / typography / layout 七组其中 badges 与 keyboard 组未使用需要精确选择器或状态时打开 components.html需要视觉抽查时查看 preview/colors.html、preview/typography.html、preview/spacing.htmlsource/token-contract.report.json 与 design-tokens.json 作为审计证据确认 56 个 token 全部有源码背书、无「未声明引用」。使用纪律USAGE.md 明确要求保持 schema token 名不变跨品牌切换才可靠主操作、链接、焦点态及唯一视觉焦点用--accent复用 components.manifest.json 中的组件组不要自创控件在复制的:roottoken 块之外避免裸 hex 值不要脱离tokens.css自行重定义 Tailwind 或 design-token 值不声称拥有原始上游证据——本包基于仓库内置的 curated fixture不添加components.html或 DESIGN 文档中未出现的组件配方。结语从「看得到」到「写得出来」Shopify 这套设计语言的高明之处在于它的每一个「感觉」都能被精确定位为可复用的参数——暗色不是#000而是四层表面轻盈不是玄学而是 330 字重质感不是滤镜而是五段阴影栈克制不是风格而是「霓虹绿只在焦点环出现」的硬规则。配合 OpenDesign 仓库中的 token 契约与参考组件无论是人工实现还是 Agent 生成都能稳定复现这套「夜晚的产品发布会」美学。如果你要在暗色电商落地页、SaaS 营销站或产品发布型页面中追求这种电影感直接套用本文的色板、层级表与提示词即可上手。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
