Open Design 设计系统实战Shopify 暗黑影院风设计语言E-Commerce Retail完整拆解【免费下载链接】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本指南以 design-systems/shopify/DESIGN-nl.md及英文版 DESIGN.md为核心围绕 Open Design 仓库内置的 Shopify 品牌设计系统展开。它定义了一整套暗黑优先、电影感、超轻字重的电商营销设计语言从深森林绿黑色表面层级、96px 超轻 NeueHaasGrotesk 展示字体、唯一的能量色 Neon Green#36F4A4到全药丸按钮与多层 box-shadow 深度系统。读完本文你将掌握该设计系统的全部设计令牌tokens、排版阶梯、组件规范与响应式策略并能在自己的落地页、原型或 Agent 提示词中直接复现这套视觉语言——同时本文会结合仓库内的 tokens.css、tailwind-v4.css、components.manifest.json 与 components.html 给出源码级验证确保每个结论都可查、可用、可复现。一、视觉主题与氛围把电商营销页做成数字剧场1.1 暗黑优先的基调Shopify 设计系统的第一性原理是dark-first暗黑优先。整个体验铺陈在近黑的表面上这些表面带着极轻微的深森林绿气息#02090A、#061A1C、#102620营造出一种夜场发布会而非普通 SaaS 营销页的氛围。文档的原话是这不是冷冰冰的商务黑而是奢侈品体验那种温暖、包裹式的黑暗——如同坐在暗场影院的第一排。这一氛围在仓库的令牌文件中被精确落地。tokens.css 的:root块将根背景定义为--bg: #000000真正的黑色卡片表面--surface: #02090a深青色区块背景--surface-warm: #061a1c深森林色。文件的头部注释甚至用三句话概括品牌身份第一条就是Darkness as theatre黑暗即剧场——深森林绿表面而非纯黑营造夜间 keynote 氛围像产品发布会一样被舞台化。1.2 排版是绝对主角设计文档强调排版是这个系统的无争议之星展示层NeueHaasGroteskHelvetica 的精炼后裔可变字体以 96px 的纪念碑式尺度配合 330–400 的不可能之轻字重出现让标题看起来像用光蚀刻而非用墨印刷ss03OpenType 特性为字母形状很可能是 a、g 及某些数字提供更具辨识度的替代字形使 Shopify 的字体区别于通用 Helvetica正文层Inter Variable 以手术般的精度处理正文使用 420、450、550 这些位于传统字重档位之间的非常规可变字重。在 tokens.css 中字体家族被绑定为--font-display: NeueHaasGrotesk, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: Inter Variable, Inter, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;而在 components.html 的body规则中可以看到ss03是如何被全局启用的这是品牌规范的一部分body { background: var(--bg); color: var(--muted); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); /* ss03 on all text per brand spec. */ font-feature-settings: ss03; -webkit-font-smoothing: antialiased; }1.3 色彩极度克制颜色被以极端克制的方式使用。唯一的能量色是Shopify Neon Green#36F4A4——一种电光薄荷绿只出现在焦点环focus rings与强调高光上如同黑暗画布上脉冲的生物荧光信号。柔和的绿色Aloe#C1FBD4、Pistachio#D4F9E0仅提供氛围洗色。在暗色表面上白色是唯一有意义的文字颜色而基于锌zinc的中性色阶#A1A1AA到#3F3F46负责安静信息的层级。核心特征清单原文继承暗黑优先设计带深森林绿-青色底调非纯黑超轻展示排版字重 330配 96px 纪念碑式尺度营造空灵存在感Neon Green#36F4A4作为黑暗中唯一的高能强调色全药丸按钮9999px 圆角作为主要交互形态分层、多阶段 box-shadow 打造摄影级深度产品截图嵌入暗色 UI 语境与周围黑暗融为一体基于锌的中性色阶处理文字层级——在冷暖之间取得平衡二、颜色调色板与角色分工2.1 主色Primary角色色值用途Shopify 白White#FFFFFF暗色表面上的主要文字、按钮填充、高对比元素Shopify 黑Black#000000body 背景、白底按钮上的文字、最大对比基准--color-shade-1002.2 次级与强调色Secondary Accent角色色值用途Neon Green#36F4A4标志性强调色——焦点环、交互高亮、激活态指示。电光且生物荧光Aloe#C1FBD4装饰性背景的柔和绿色洗色、氛围卡片--color-aloe-10Pistachio#D4F9E0最浅绿色用于微妙表面区分--color-pistachio-10在 tokens.css 中Neon Green 还有一套完整的交互状态链--accent: #36f4a4; /* neon green */ --accent-on: #000000; --accent-hover: #2de097; /* slightly darker neon on hover */ --accent-active: color-mix(in oklab, var(--accent), black 14%);注意--accent-active使用了现代 CSS 的color-mix(in oklab, ...)语法——这是可以在不手算色值的情况下生成激活态的手段。同时--success: #36f4a4复用同一个绿色作为成功状态色体现了单一高能强调色的系统哲学。2.3 表面与背景Surface Background角色色值用途Void#000000根页面背景——真黑最大化深度Deep Teal#02090A卡片表面、内容容器——近黑带绿色底调Dark Forest#061A1C区块背景带可见的绿色特征Forest#102620抬升的暗色表面、页头背景——最温暖的暗色调Dark Card Border#1E2C31暗色表面上的卡片边框微妙边界定义这五个值构成了完整的表面层级surface hierarchyVoid → Deep Teal → Dark Forest → Forest。文档指出深度正是由这条从黑到暖的渐变链产生的越靠后的值越温暖、越接近前景。在 tokens.css 中对应--bg、--surface、--surface-warm、--border#1e2c31四个核心令牌。2.4 中性色与文字Zinc 色阶角色色值用途Shade-30#D4D4D8最浅中性色暗色上几乎不可见的边框--color-shade-30Muted Text#A1A1AA次要文字、元数据、描述——安静的声音Shade-50#71717A三级文字、时间戳、最不重要的信息--color-shade-50Shade-60#52525B禁用文字、装饰性中性色--color-shade-60Shade-70#3F3F46微妙分隔线、几乎不可见的 UI 边界--color-shade-70Light Border#E4E4E7亮色表面上的边框罕见——仅用于亮色模式弹窗令牌文件中的对应关系非常清晰--muted: #a1a1aa次要文字、--meta: #71717a时间戳/三级信息、--border-soft: #3f3f46subtle dividers。--fg与--fg-2都是白色——文档注释解释在暗色画布上没有次级墨色分裂这是该系统与大多数多级前景色系统的关键区别。2.5 语义与链接色角色色值用途Muted Link#9797A2带下划线装饰的哑光链接文字Sage Link#9DABAD带青色底调的哑光链接Lavender Link#BDBDCA更浅的链接变体Mint Link#99B3AD用于主题区块的绿色底调链接变体2.6 渐变系统Dark Teal Wash暗青洗色从#102620中心到#02090A边缘的径向渐变——用于产品展示后方Green Atmospheric绿色氛围hero 区块后方微妙的绿色环境渐变无纯色也能制造深度Spotlight聚光灯聚焦的亮区渐隐至黑色——打造 keynote 式舞台照明。三、排版规则可变字体精度的教科书3.1 字体家族层级字体回退栈OpenType可用字重用途DisplayNeueHaasGroteskHelvetica 精炼后裔可变字体Helvetica, Arial, sans-serifss03330, 360, 400, 500, 750可变所有标题、hero 文本、大型展示元素BodyInter-VariableHelvetica, Arial, sans-serifss03400, 420, 450, 500, 550可变正文、链接、按钮、UI 元素Monoui-monospaceSFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New——代码片段、数据标签、技术内容3.2 排版阶梯Hierarchy完整表角色字号字重行高字距备注Display XL96px4001.00—NeueHaasGroteskhero 大标题ss03Display XL Bold90.74px7501.004.54pxNeueHaasGrotesk强调型展示Display XL Tracked96px4001.002.4pxNeueHaasGrotesk加宽字距展示Display Light96px3300.96—NeueHaasGrotesk空灵展示Heading 170px3301.00—NeueHaasGrotesk区块标题Heading 255px3301.16—NeueHaasGrotesk子区块Heading 348px3301.14—NeueHaasGrotesk功能标题Heading 432px3601.140.32pxNeueHaasGrotesk卡片标题Heading 528px5001.280.42pxNeueHaasGrotesk小标题Heading 624px4001.140.36pxNeueHaasGrotesk次要标题Body Large20px5001.400.3pxNeueHaasGrotesk / Inter引导段Body18px4001.56—Inter-Variable标准正文Body Medium18px5501.56—Inter-Variable强调正文Body Small16px4001.50—Inter / NeueHaasGrotesk紧凑正文Body Small Medium16px4201.50—Inter-Variable轻微强调Button16px4001.50—NeueHaasGroteskCTA 文本Nav Link18px5001.250.72pxNeueHaasGrotesk导航项Caption14px5001.490.28pxNeueHaasGrotesk / Inter元数据Caption Medium14px5501.490.28pxInter-Variable强调说明文字Overline15.36px4001.501.54pxNeueHaasGrotesk加宽字距标签Micro13px5001.50-0.13pxInter收紧字距小文本Label12px4001.200.72pxInter大写标签Code16px4001.50—ui-monospace大写代码块Code Small12px4001.33—ui-monospace大写行内代码3.3 令牌文件中的排版映射在 tokens.css 中这套阶梯被压缩为一条schema 脊柱spine从展示 XL 一路映射到标签--text-xs: 12px; /* label — uppercase, wide-tracked */ --text-sm: 14px; /* caption — metadata */ --text-base: 18px; /* body — standard Inter reading */ --text-lg: 20px; /* body large — lead paragraphs */ --text-xl: 32px; /* heading 4 — card headings */ --text-2xl: 48px; /* heading 3 — feature titles */ --text-3xl: 70px; /* heading 1 — section titles */ --text-4xl: 96px; /* display XL — cinematic hero */ --leading-body: 1.56; --leading-tight: 1.00; --tracking-display: 0em;这里有一个值得注意的细节--tracking-display: 0em表明 NeueHaasGrotesk 在 96px 展示尺度下字距保持中性而更小的 NeueHaas 字号0.32px–2.4px的正字距则按 components.html 中的说明以内联方式设置在组件里。同时注意正文字行高被限定在1.56——这与后面 Dos and Donts 中不要把正文字行高设到 1.56 以上的规则严格对应。3.4 设计原则解读文档对这一节有一段非常凝练的总结值得原样继承并展开Shopify 的排版是可变字体精度的大师课。展示层几乎完全生活在 330–400 的字重区间——羽毛般轻的文本仿佛投射的光悬浮在黑暗背景之上。这与多数 SaaS 站点采用粗重字体的做法完全相反别人在呐喊Shopify 在宏大尺度上低语。96px 的字号配 330 的字重制造了一种巨大尺寸 × 纤细笔画的矛盾体同时显得纪念碑式与脆弱。ss03激活的风格集让特定字符很可能 a、g 与某些数字更精致将 Shopify 排版与标准 Helvetica Neue 区分开。Inter Variable 则以 420/550 这类传统档位之间存在的字重处理正文层——每段文字都恰好拥有它需要的视觉重量。四、组件样式规范4.1 按钮Buttons主按钮白色填充背景白色#FFFFFF文字黑色#000000边框2px solid transparent圆角全药丸9999px内边距12px 26px 12px 16px不对称——右侧留更多空间以达成视觉平衡Hover轻微降低不透明度或背景偏移Focus2px#36F4A4Neon Green轮廓环过渡all 200ms ease次按钮Ghost/描边背景transparent文字白色#FFFFFF边框2px solid 白色#FFFFFF圆角全药丸9999px内边距12px 26px 12px 16pxHover填充为白色背景 黑色文字Focus2px#36F4A4轮廓Badge/Tag中性填充背景rgba(255, 255, 255, 0.2)磨砂玻璃文字白色#FFFFFF边框无圆角轻微圆角4px内边距12px 16px字体16px 常规在 components.manifest.json 的buttons组件组中可以看到按钮组实际引用的令牌--bg、--ease-standard、--fg、--font-display、--motion-base、--radius-sm、--space-2、--text-base。其中--radius-sm: 9999px被注释为full pill for all CTAs per brand identity——全药丸是不可谈判的品牌身份这正是9999px 即 CTA 的标准形态的令牌级落点。4.2 卡片与容器Cards Containers背景暗色页面上的 Deep Teal#02090A边框1px solid#1E2C31Dark Card Border——几乎不可见的边界圆角标准卡 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 8pxrgba(255,255,255,0.03) 0px 1px 0px inset内嵌白色高光营造微妙的顶部发光Hover阴影扩大卡片可轻微提亮过渡box-shadow 300ms ease、transform 200ms ease在 tokens.css 中这套阴影被封装为--elev-raised令牌1px ring 2px/4px/8px 渐进模糊 inset 白色微光并配合--elev-flat: none无阴影基底与--elev-ring: 0 0 0 1px var(--border)仅描边构成完整的抬升阶梯。components.manifest.json的cards组确认.card类实际引用了--border、--elev-raised、--radius-md、--surface、--space-6等令牌。4.3 输入框与表单Inputs Forms背景transparent 或 Dark Forest#061A1C文字白色#FFFFFF边框1px solid#3F3F46Shade-70圆角8px内边距12px 16pxFocus2px solid#36F4A4Neon Green 焦点环PlaceholderShade-50#71717A过渡border-color 200ms ease4.4 导航Navigation背景transparent覆盖在暗色 hero 上滚动时变为 Forest#102620高度约 64px左侧Shopify 字标 LogoSVG暗色底白字中/右侧18px/500 NeueHaasGrotesk 导航链接白色字距 0.72pxCTA右侧白色药丸按钮 Start for free次级 CTA白边 ghost 按钮Hover链接变为 Muted Text#A1A1AA或添加下划线移动端汉堡菜单 全屏暗色遮罩过渡滚动时background 300ms ease4.5 图片处理Image Treatment产品截图嵌入暗色 UI 语境与周围黑暗融为一体管理界面预览展示在暗色背景上带微妙的卡片边框宽高比多样——hero 图片偏宽近似 16:9功能图灵活所有图片平铺在暗色容器内——无亮边框或相框使用暗色占位表面的懒加载4.6 信任指标Trust Indicators统计数字突出展示15年、150M买家数字以展示尺度、NeueHaasGrotesk 呈现合作伙伴/开发者生态区融入页面流中的暗色主题客户证言五、布局原则5.1 间距系统Spacing System基础单位8pxToken值用途space-14px紧凑行内间距space-28px基础单位、图标间距space-312px卡片内边距、紧凑外边距space-416px标准元素内边距space-524px卡片间距、区块内边距space-628px中等区块间距space-732px区块分隔space-836px大内边距space-940px主要区块内边距space-1064pxHero 区块内边距、大间距在 tokens.css 中实现为--space-14px到--space-1264px并额外提供区块节奏令牌--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 40px——这正是文档所述剧场化节奏的可配置落点。5.2 栅格与容器Grid Container最大容器宽度约 1280px居中Hero全宽、通边暗色背景 居中文本功能区块文字 产品截图的 2 列布局统计区块带大数字的横向布局水平内边距桌面 64px、平板 32px、移动 16px栅格间距主要内容块之间 24–32px对应令牌--container-max: 1280px、--container-gutter-desktop: 64px、--container-gutter-tablet: 32px、--container-gutter-phone: 16px。在 components.html 中可以看到容器与区块规则如何随断点切换这三个 gutter 值1023px 以下用 tablet 值、639px 以下用 phone 值同时section section用border-top: 1px solid var(--border)作为区块间的微妙分隔。5.3 留白哲学Whitespace PhilosophyShopify 的留白策略是剧场化的。区块之间由大片黑暗空间分隔——80px 到 120px 的纯黑呼吸区——营造出演示而非网页的节奏。每个内容块都是 keynote 式滚动中的独立幻灯片。区块内部间距更紧凑、更有目的性在广阔虚空中形成焦点密度。宏观留白与微观精度的对比正是该网站电影化节律的来源。5.4 圆角尺度Border Radius Scale值场景4px标签、badge、微元素8px标准卡、输入框、视频容器12px强调卡、图片容器、按钮非药丸20px顶部圆角卡20px 20px 0 0、弹窗页头340px大圆角装饰元素9999px药丸按钮、药丸 badge、导航元素令牌实现--radius-sm: 9999px全药丸 CTA、--radius-md: 8px标准卡/输入框、--radius-lg: 12px强调卡、--radius-pill: 9999px。六、深度与抬升Depth Elevation层级处理方式用途基底无阴影暗色表面默认页面背景微妙rgba(0,0,0,0.1) 0px 0px 0px 1px inset 白色微光静止卡中等多层1px ring 2px 4px 8px 阴影堆叠抬升卡、强调区块高rgba(0,0,0,0.25) 0px 25px 50px -12px弹窗、下拉、遮罩焦点0px 0px 0px 2px #36F4A4键盘焦点环Neon Green文档对本节的原理阐释非常关键Shopify 的阴影系统异常精密。与单一阴影值不同卡片使用堆叠式多层方案1px ring 界定边界2px/4px/8px 渐进模糊模拟自然光衰减再加上rgba(255,255,255,0.03)的精致 inset 白色微光模拟顶部受光的玻璃表面。在暗色背景上阴影从本已很暗的表面再变暗因此阴影更多充当环境光遮蔽ambient occlusion而非传统抬升——卡片像是微微沉入表面而不是悬浮其上。在 tokens.css 中这一整套方案被封装为三个抬升令牌--elev-flat/--elev-ring/--elev-raised加一个焦点令牌--focus-ring: 0 0 0 2px #36f4a4。装饰性深度Decorative Depth暗青渐变hero 区块与产品展示后方的环境径向洗色聚光灯效果聚焦的亮区渐隐至黑色制造 keynote 式剧场照明边缘辉光通过 inset box-shadow 在暗卡上营造微妙的浅色边缘绿色氛围光晕背景渐变中淡淡的绿色调呼应品牌强调色七、Dos and Donts黄金守则应当Do使用暗青黑表面层级Void → Deep Teal → Dark Forest → Forest制造深度展示排版保持 330–400 字重——空灵轻盈是这套设计的签名Neon Green#36F4A4只用于焦点态与关键强调高光所有主 CTA 按钮应用 9999px 圆角——全药丸不可妥协卡抬升使用多层阴影系统——单层阴影看起来很平所有文本保持ss03OpenType 特性——它是排版身份的一部分正文用 Inter Variable、标题用 NeueHaasGrotesk——永不互换角色区块间创造剧场化间距80px以营造电影化节奏禁忌Dont不要在暗色背景上用纯黑#000000文字——只用白色#FFFFFF不要引入暖色橙、红、黄——调色板严格偏冷绿、青、中性不要在 NeueHaasGrotesk 正文中使用 500 以上字重——重字重会破坏空灵感不要将绿色强调色用于大表面——Neon Green 只用于小而精确的高光不要在交互元素上用锐角0px 圆角——一切都要圆润不要添加亮色背景——暗色主题是根本不是可选项不要用单层 box-shadow——堆叠方案才是系统不要把正文字行高设到 1.56 以上——Shopify 的文本相对紧凑不要在同一字号/角色混用 NeueHaasGrotesk 和 Inter——它们的字重体系不同不要对标题使用低于 0 的字距——Shopify 标题的字距为中性或正值八、响应式行为8.1 断点Breakpoints名称宽度关键变化移动640px单列、汉堡导航、展示文本缩至 48px、16px 内边距平板640–1024px2 列栅格开始、展示文本 70px、32px 内边距桌面1024–1440px完整布局、展开导航、96px 展示、64px 内边距大桌面1440px最大宽度容器居中、区块间距增大8.2 触控目标Touch Targets最小触控目标44×44pxWCAG AAA药丸按钮最小 48px 高配充裕的水平内边距导航链接44px 触控区域卡片表面整卡可点凡有链接处8.3 折叠策略Collapsing Strategy导航全水平链接 → 1024px 以下汉堡菜单Logo 与 CTA 按钮保持可见Hero 区块96px 展示 → 平板 70px → 移动 48px保持单列居中功能区块2 列文本图 → 768px 以下堆叠为单列统计横向行 → 移动端堆叠纵向区块内边距64px → 40px → 24px → 16px 随视口收窄卡片栅格 → 堆叠移动端保持全宽8.4 图片行为产品截图在暗色容器内响应式缩放保持宽高比Hero 图片全断点全宽带暗色占位的懒加载管理界面预览按比例缩放移动端可能裁切所有图片使用 CDNcdn.shopify.com配响应式 srcset九、Agent 提示词指南落地实操这套设计系统的最终价值在于被Agent 直接消费——它本身就是为 AI 编码/设计代理设计的可执行规范。以下是原文提供的可直接复用的实操素材。9.1 快速取色参考Quick Color Reference用途取值主 CTAShopify 白#FFFFFF页面背景Void 黑#000000卡表面Deep Teal#02090A区块背景Dark Forest#061A1C抬升背景Forest#102620强调色Neon Green#36F4A4正文字白#FFFFFF哑光文字Muted#A1A1AA暗色边框Dark Card Border#1E2C319.2 示例组件提示词可直接复制给 AgentCreate a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white borderDesign a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body textBuild a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocksCreate a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill Start for free button rightDesign a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface9.3 迭代指南Iteration Guide当用此设计系统打磨既有屏幕时一次只聚焦一个组件引用本文档中的具体颜色名与十六进制码记住这是DARK-FIRST设计——亮色表面是例外不是规则展示文本必须始终有羽毛般轻盈感字重 330–400——若看起来厚重就降低字重Neon Green#36F4A4是稀缺品——仅在焦点与强调处少量使用暗色表面层级黑 → 深青 → 深森林 → 森林制造微妙深度阴影是多层的——单一box-shadow值无法捕捉 Shopify 卡片的质感所有文本必须启用ss03OpenType 特性以保持排版一致性十、仓库落地的实现细节与使用方式这套设计系统在 Open Design 仓库中不仅是一份规范文档而是以Design System 2.0 包的形式完整落地包内文件结构如下均在 design-systems/shopify 下规范文档DESIGN.md英文、DESIGN-nl.md荷兰语及其余 15 种语言版本——视觉意图、约束与反模式设计令牌tokens.css真相源56 个令牌与派生的 design-tokens.json结构化令牌契约评分 100/grade excellentTailwind 绑定tailwind-v4.css——将全部令牌映射进 Tailwind v4 的theme块参考组件components.html35 个选择器、15 个类、22 个元素与 components.manifest.json组件清单buttons、inputs、cards、links、icons、typography、layout使用指南USAGE.md——规定了 OpenDesign Agent 与评审者的读取顺序先读 USAGE → 再读 DESIGN.md → 将tokens.css粘贴进首个 artifact 的style块 → 用 components.manifest.json 查组件清单 → 用 preview 页面做视觉校验审计证据source/evidence.md 与 source/token-contract.report.json10.1 令牌契约与 Tailwind 映射design-tokens.json 的摘要字段给出了量化证据总计 56 个令牌、56 个已声明、56 个有源码支撑其中 A1-identity 层 8 个、B-slot 层 4 个、A2 层 26 个、A1-structure 层 18 个综合评分 100。每个令牌都带有sources字段精确回指 tokens.css 的声明行号例如--bg对应tokens.css:36、--elev-raised对应tokens.css:120、--focus-ring对应tokens.css:129。如果项目使用 Tailwind v4则无需手工引用 CSS 变量——tailwind-v4.css 已经通过theme块将令牌桥接为工具类语义例如theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-muted: var(--muted); --font-display: var(--font-display); --font-sans: var(--font-body); --text-4xl: var(--text-4xl); --radius-sm: var(--radius-sm); --shadow-raised: var(--elev-raised); --shadow-focus-ring: var(--focus-ring); --container-max: var(--container-max); /* ... 完整映射见文件 */ }10.2 使用注意事项来自 USAGE.md 的约束保留 schema 令牌名不变以保证跨品牌切换的可靠性Open Design 仓库内含 100 个设计系统包令牌契约是它们之间互换的基础主操作、链接、焦点态与唯一焦点元素使用--accent优先复用 components.manifest.json 中的组件组而不是自创控件避免在拷贝的:root令牌块之外使用裸十六进制值避免脱离tokens.css独立重定义 Tailwind 或设计令牌值该包基于 OpenDesign 策展的 bundled fixture见 source/evidence.md不应声称拥有原始上游源码证据十一、总结这套设计语言的三条核心记忆点黑暗是舞台不是背景真正的黑色根背景 四级深绿黑表面层级Void → Deep Teal → Dark Forest → Forest配合 80–120px 的剧场化区块留白构成了电影感的节奏骨架轻盈是签名克制是纪律NeueHaasGrotesk 以 330–400 字重在 96px 尺度上低语Neon Green 只被允许出现在焦点环与精确强调上——系统的力量来自对少的坚持令牌化落地Agent 可消费从 DESIGN.md 的规范到 tokens.css 的 56 个令牌再到 tailwind-v4.css 的工具类桥接与 components.html 的参考实现整条链路开箱即用而本文第九节的提示词模板可以直接喂给 Open Design 的 Agent 工作流让编码代理一键产出符合 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考