OpenDesign 设计系统实战Nike 风格电商零售设计规范全解析【免费下载链接】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/nike/DESIGN-pt-br.md其英文原版为 design-systems/nike/DESIGN.md展开。该文档完整定义了以 Nike.com 为参照的电商零售设计系统激进单色 UI、96px 巨幅大写展示字体、full-bleed 无圆角摄影、30px 胶囊按钮与 8px 间距网格。读者将获得一套可直接复制的色彩 Token、字体层级、组件规格、布局与响应式规则以及面向 AI Agent 的 Prompt 指南可用于让编码 Agent 一键生成 Nike 风格的原型页、落地页或商品陈列界面。一、主题与视觉氛围为什么最花哨的页面反而最克制Nike 风格设计系统的核心矛盾在于界面极简到只剩黑白灰而色彩的全部活力由商品摄影承担。文档将其描述为动力零售大教堂kinetic retail cathedral——用运动的爆发力驱动数字化购物体验其底层原则是激进简化把所有 UI 元素剥离到黑、白、灰三阶让运动摄影汗流浃背的运动员、腾空而起的球鞋、体育场能量成为唯一的情感载体。这套设计源自 Nike 内部核心设计系统Podium CDSCore Design System的美学基调。UI 退隐为 Nike Black#111111文本与白色表面当色彩真正出现在界面上时几乎只承担功能语义红色表示错误、蓝色表示链接、绿色表示成功。由此产生一个视觉悖论——互联网上色彩最丰富的页面看起来反而最极简因为所有鲜艳都来自商品而非界面。核心特征清单特征规格单色 UI黑/白/灰商品摄影是唯一色彩来源巨幅大写显示字体96px、line-height 0.90横穿英雄图Full-bleed 摄影无 border radius图片填满每一条边胶囊按钮30px 半径作为主要交互元素8px 间距网格运动纪律每个度量都落在系统上品类驱动购物架构大型导航图片卡片无阴影极简层级仅用灰色阶变化区分表面这套系统同时包含双重性格的字体策略表达型显示字体Nike Futura ND与功能型正文字体Helvetica Now并置呼应品牌灵感遇见执行的二元性。这些特征不仅停留在视觉描述层面也在仓库的机器可读 Token 中逐一落地见下文第七节。二、色彩系统Token、语义角色与扩展色阶2.1 主色PrimaryToken 名色值用途Nike Black#111111主文本、按钮背景、导航文本、英雄图覆盖层。刻意不用纯黑#000000带来略微柔和的阅读体验Nike White#FFFFFF页面主画布、深底按钮文字、卡片表面、导航栏背景2.2 表面与背景Surface BackgroundNike 的表面阶梯surface ladder从最浅到深依次为名称色值对应 Podium 变量用途Snow#FAFAFA--podium-cds-color-grey-50最浅近白表面细微差异化Light Gray#F5F5F5--podium-cds-color-grey-100次级背景、搜索框填充、图片占位、加载骨架Hover Gray#E5E5E5--podium-cds-color-grey-200hover 背景、禁用按钮填充Dark Surface#28282A--podium-cds-color-grey-800深色/反色区块主背景Deep Charcoal#1F1F21--podium-cds-color-grey-900反转主背景比黑色更浅的深表面Dark Hover#39393B--podium-cds-color-grey-700深底 hover 状态2.3 中性色与文本Neutrals Text名称色值对应变量用途Primary Text#111111--podium-cds-color-text-primary正文、标题、导航链接Secondary Text#707072--podium-cds-color-text-secondary描述文字、元数据、时间戳、价格标签Disabled Text#9E9EA0--podium-cds-color-text-disabled非活动元素、不可用选项Disabled Inverse#4B4B4D--podium-cds-color-text-disabled-inverse深底上的禁用文字Border Primary#707072—默认边框色与次级文本一致Border Secondary#CACACB--podium-cds-color-grey-300细边框、输入框边框、分隔线Border Disabled#CACACB—禁用边框状态Border Active#111111—激活/聚焦边框与主文本一致2.4 语义色与强调Semantic Accent色彩在 UI 中只服务于语义这是 Nike 风格不可逾越的铁律名称色值对应变量用途Nike Red#D30005--podium-cds-color-red-600严重错误、促销徽章、紧急通知Bright Red#EE0005red-500略亮的红色强调Nike Orange Badge#D33918--podium-cds-color-text-badge徽章文本、促销号召Orange Flash#FF5000--podium-cds-color-orange-400表达性橙色强调Success Green#007D48--podium-cds-color-green-600确认、可用性、正向状态Success Inverse#1EAA52--podium-cds-color-green-500深底上的成功色Link Blue#1151FF--podium-cds-color-blue-500文本链接、信息强调Info Inverse#1190FF--podium-cds-color-blue-400深底链接Warning Yellow#FEDF35--podium-cds-color-yellow-200警告背景、注意横幅Focus Ringrgba(39, 93, 197, 1)—键盘焦点指示环2.5 扩展色阶Podium CDS 全谱每条色阶从 50 到 900供活动页与商品页表达性使用Red:#FFE5E5→#EE0005→#530300Orange:#FFE2D6→#FF5000→#3E1009Yellow:#FEF087→#FCA600→#99470AGreen:#DFFFB9→#1EAA52→#003C2ATeal:#D4FFFB→#008E98→#043441Blue:#D6EEFF→#1151FF→#020664Purple:#E4E1FC→#6E0FF6→#1C0060Pink:#FFE1F3→#ED1AA0→#4C012D2.6 渐变策略Nike 在 UI 中回避渐变。渐变只出现在照片级场景——商品英雄图背景例如红色球鞋配红色到深红渐变。设计系统本身只用纯色。三、字体规则巨幅显示字与瑞士精度正文的二元对立3.1 字体家族Font Families角色字体回退链用途DisplayNike Futura NDNike 独占的自定义 Futura 压缩变体Helvetica Now Text Medium → Helvetica → Arial仅用于巨型大写显示标题HeadingHelvetica Now Display MediumHelvetica → Arial24–32px 区块标题、商品标题Body MediumHelvetica Now Text Mediumweight 500Helvetica → Arial链接、按钮、图注、强调正文BodyHelvetica Now Textweight 400Helvetica → Arial默认正文、描述、元数据ArabicNeue Frutiger Arabic—阿拉伯语本地化替代字体3.2 层级表Hierarchy角色字号Weight行高备注Display96px5000.90Nike Futura ND大写英雄标题Heading 132px5001.20Helvetica Now Display Medium区块标题Heading 224px5001.20Helvetica Now Display Medium子区块Heading 316px5001.50Helvetica Now Text Medium卡片标题Body16px4001.75Helvetica Now Text商品描述Body Medium16px5001.75Helvetica Now Text Medium强调文字Link16px5001.75Helvetica Now Text Medium导航链接Link Small14px5001.86页脚/工具链接Button16px5001.50CTA 文本Button Small14px5001.50次级按钮Caption14px5001.50价格标签Small12px5001.50时间戳Tiny12px4001.50法律文本3.3 设计原则Nike 字体是一场张力研究显示层——Nike Futura ND 96px 0.90 行高——被设计得像体育场记分牌巨大、压缩、大写、无法忽视把标题变成战斗口号。其下的 Helvetica Now 则提供临床般精确的对位瑞士式可读性 1.75 的慷慨行高保证舒适的浏览节奏。weight 500Medium统治所有正文赋予文案轻微断言感而无须加粗——每句话读起来都像自信的推荐而不是嘶吼。仓库佐证这些数值在 design-systems/nike/tokens.css 中被固化为--leading-tight: 0.9仓库注释直言这是全仓库最激进的行高压紧绑定与--leading-body: 1.75字体回退链也原样落入--font-display/--font-body两个 Token。四、组件样式规格从按钮到导航的完整细节4.1 按钮Buttons主按钮Primário背景Nike Black#111111文本White#FFFFFF16px/500Helvetica Now Text Medium边框无圆角全圆胶囊30px内边距约 12px 24pxHover背景切换为 Grey-500#707072——注意是切换而非加深Activeripple 缩放 scale(0) 0.5 透明度Focus2px box-shadow 焦点环rgba(39, 93, 197, 1)Transitionbackground 200ms ease深底主按钮背景 White#FFFFFF、文本 Black#111111hover 背景转 Grey-300#CACACB。次级描边按钮背景透明、文本#111111、边框 1.5px solid#CACACBgrey-300、圆角 30pxHover边框加深至#707072背景转 grey-200禁用按钮背景 Grey-200#E5E5E5、文本 Grey-400#9E9EA0、cursor: not-allowed。图标按钮背景 Grey-100#F5F5F5、30px 半径圆形可用 50%、内边距 6px、hover 背景 Grey-500。4.2 卡片与容器Cards Containers背景White#FFFFFF多数情况无可见卡片边界圆角商品图片卡片0px图片通边交互容器 20px阴影无——Nike 不用卡片阴影Hover商品卡片无抬升效果卡片内文本链接显示下划线商品卡片结构顶部图片无圆角 下方文本元数据gap 12px品类卡片full-bleed 摄影 深色渐变文本覆盖层Transitionhover 换图时 opacity 200ms ease4.3 输入框与表单Inputs Forms背景Grey-100#F5F5F5边框可见时 1px solid#CACACB搜索框无边框圆角搜索框 24px表单输入 8px字体Helvetica Now Text16pxFocus边框转#111111border-active 2pxrgba(39, 93, 197, 1)焦点环错误边框#D30005PlaceholderGrey-500#707072Transitionborder-color 200ms ease4.4 导航Navigation背景White#FFFFFFsticky高度桌面约 60px左侧Nike Swoosh Logo24x24px SVG居中品类链接New Featured、Men、Women、Kids、Sale16px/500 Helvetica Now Text Medium右侧搜索24px 圆角输入框、收藏与购物车图标Hover文本色转 Grey-500#707072移动端汉堡菜单 全屏覆盖层顶部横幅深底#111111促销消息条 白字4.5 图片处理Imagery英雄图full-bleed、无圆角、通边商品网格1:1 或 4:3 方形比例无圆角品类卡片16:9 或 4:3full-bleed 文本覆盖占位图纯色 Grey-100#F5F5F5懒加载原生loadinglazy骨架屏用#F5F5F5商品 hover切换副图正面 → 侧面4.6 促销横幅Promo Banners全宽深底#111111 白字垂直内边距 8–12px居中文本12px/500 Helvetica Now Text Medium用于运费促销、会员权益、促销公告五、布局原则4px 基底的运动纪律5.1 间距系统基础单位 4px主网格为 8px 倍数Token值用途space-14px图标微调间距、行内间距space-28px基础单位、按钮内图标 gapspace-312px卡片内边距、紧凑边距space-416px标准内边距、导航间距space-520px商品卡片 gapspace-624px区块内边距、网格 gapspace-732px区块分隔space-848px主区块内边距space-964px英雄区块内边距space-1080px宽幅区块间距5.2 网格与容器容器最大宽度1920px默认内容宽度约 1440px 水平内边距商品网格桌面 3 列 → 平板 2 列 → 移动 1 列品类网格3 列 full-bleed 图片网格 gap4–12px刻意压缩营造密实超级卖场感水平内边距桌面 48px、平板 24px、移动 16px5.3 留白哲学Nike 的留白策略是刻意激进的压缩高密度而非奢侈品牌那种恭敬优雅。商品网格用最小 gap4–12px制造丰饶感区块分隔则慷慨48–80px以区隔购物语境。整体效果一家看似货品满盈、却依然可导航的卖场。5.4 圆角标尺值语境0px商品图、英雄摄影直角8px表单输入非搜索18px小型交互元素20px容器、含 UI 内容的卡片24px搜索框、中型胶囊30px按钮、标签、筛选器全胶囊50%圆形图标按钮、头像占位仓库佐证--radius-pill: 30px在 design-systems/nike/tokens.css 中被明确注释为保留字面值 30px 而非收敛到 9999px因为该数字本身就是品牌可识别的细节与 Apple 980px 同理。这与共享 schema 默认值--radius-pill: 9999px见 design-systems/_schema/defaults.css形成刻意偏离。六、深度与层级彻底扁平的无阴影模型层级处理方式用途Flat无阴影、无边框一切元素的默认状态Divider0px -1px 0px 0px #E5E5E5 inset区块间的 1px 内嵌细线Focus0 0 0 2px rgba(39, 93, 197, 1)键盘焦点环Overlay摄影上的深色 scrim保证图片上文字可读Nike 的层级哲学激进扁平没有卡片阴影、没有 hover 抬升、没有浮动元素。深度完全靠颜色传达——深区块后退、浅区块前进、灰色阶变化指示状态。整个系统中唯一的阴影是 1px 内嵌分隔线和可访问性要求的焦点环。装饰性深度英雄摄影覆盖层full-bleed 摄影上的深色渐变 scrim保障文字可读商品背景渐变商品英雄图背后的彩色背景如红鞋 红色渐变横幅条页面顶部实色深底促销条#111111仓库佐证--elev-raised被刻意绑定为0 0 0 1px var(--border)与--elev-ring相同而不是schema 默认的模糊阴影。tokens.css 的注释解释引用var(--elev-raised)的组件仍能解析但产出的是 Nike 想要的扁平/hairline 效果绝不会出现 Material 式浮起。七、仓库落地从规范到机器可读 TokenDESIGN.md的视觉规范在 OpenDesign 仓库中被编译为一份可被 Agent 直接消费的包package目录为 design-systems/nike文件作用design-systems/nike/USAGE.md包契约与阅读顺序先读 USAGE → 再读 DESIGN → 将tokens.css的:root块粘贴进产物第一个style→ 用components.manifest.json做组件清单design-systems/nike/tokens.css机器可读 Token共 56 个声明Agent 应原样粘贴:root块后一律通过var(--name)引用design-systems/nike/design-tokens.jsonToken 契约报告56/56 source-backed评分 100、等级 excellent含 A1-identity / A1-structure / A2 / B-slot 分层design-systems/nike/components.manifest.json组件清单buttons、inputs、cards、badges、links、keyboard、icons、typography、layout 共 9 组56 个选择器、29 个类design-systems/nike/manifest.json包元数据schemaVersionod-design-system-project/v1craft 建议color与accessibility-baselinedesign-systems/nike/preview/colors.html / typography.html / spacing.html视觉自检页design-systems/nike/components.html精确选择器与状态参考值得注意的 Token 绑定决策tokens.css 头部注释记录了 11 条非显而易见的品牌绑定决策对下游品牌作者极具参考价值--bg用纯白、--fg用 Nike Black#111111而非#000000——这是不要用纯黑做文本的品牌决定性选择--surface#F5F5F5与--surface-warm#FAFAFA分别绑定grey-100 与 grey-50 两级不合并为别名因为 Nike 走完整的 50/100/200 表面阶梯--accent绑定为#111111——Nike 的 UI 强调色就是黑色与--fg同值--accent-hover绑定#707072grey-500而非加深公式忠实于hover 切换到灰色的品牌行为--accent-active才加深到纯黑#000000——这是全系统唯一出现#000000的地方--fg-2别名到--fg主文本层是二元的中间没有过渡档--muted#707072与--meta#9E9EA0独立绑定--border-soft绑定#E5E5E5——文档规定的唯一分隔线就是0px -1px 0px 0px #E5E5E5 inset--radius-pill绑定 30px 而非 9999px见上文 5.4--elev-raised收敛为 ring-only见上文第六节--focus-ring是文档规定的 2px 实色蓝环0 0 0 2px rgba(39, 93, 197, 1)而非 schema 默认的 accent 混合光晕——这是全 UI 唯一的蓝色时刻--tracking-display: -0.02em——96px 下约等于 -1.92px压缩 Futura ND 轮廓成体育场记分牌式整体--leading-tight: 0.9——全仓库最激进的行高压紧绑定96px 显示字的上伸部与下伸部几乎相触。所有 Token 名都可在共享契约 design-systems/_schema/tokens.schema.tsTOKEN_SCHEMA中找到A2 回退值对照 design-systems/_schema/defaults.css。八、Do 与 Dont一条不落的行为红线Fazer应当所有主文本用 Nike Black#111111——绝不用纯黑#000000按钮保持胶囊形30px 半径且仅限主/次两种变体英雄区使用 full-bleed、通边摄影——图片不加圆角让商品摄影提供全部色彩活力UI 保持单色Nike Futura ND 大写只用于显示标题96px商品网格保持紧凑 gap4–12px营造密实丰饶感所有输入框与占位背景统一 Grey-100#F5F5F5色彩只保留给语义含义红错误、绿成功、蓝链接所有交互文本元素用 weight 500MediumNão Fazer禁止不给卡片加阴影——层级模型完全扁平不在商品图片上使用圆角——只有 UI 元素可以有圆角不为 UI 元素引入灰色阶之外的品牌色不在 24px 以下使用 Nike Futura ND——它纯粹是显示字体不加 hover 抬升效果——Nike 卡片 hover 不动画按钮或链接不用 weight 400——一律 500不在 UI 元素后放彩色背景——色彩保留给商品语境每张卡片文本层级不超过两级标题 正文不加装饰性分隔线——1px inset 是唯一分隔模式不弱化对比——Nike 刻意把黑底白字推到极限九、响应式行为断点、触控与折叠策略9.1 断点Breakpoints名称宽度主要变化Mobile640px单列、汉堡导航、显示字缩小、内边距降至 16pxSmall Tablet640–768px商品网格开始 2 列导航仍收起Tablet768–960px2 列网格、品类卡片缩放、水平内边距 24pxSmall Desktop960–1024px导航展开为完整横向、商品网格 3 列Desktop1024–1440px完整布局、展开导航、3 列网格、内边距 48pxLarge Desktop1440px最大宽度容器居中、边距增大、英雄图 full-bleed9.2 触控目标最小触控目标44x44pxWCAG AAA移动导航图标48x48px 触控区商品卡片整个表面可点筛选胶囊最小高度 36px 12px 内边距9.3 折叠策略导航完整品类链接 → 960px 以下汉堡菜单搜索、收藏、购物车图标始终可见商品网格3 列 → 960px 变 2 列 → 640px 变 1 列英雄区显示字 96px → 64px → 48px英雄图在所有尺寸保持 full-bleed品类卡片3 列 → 2 列 → 1 列保持 full-bleed 图片区块内边距80px → 48px → 32px → 24px 随视口收窄促销横幅文本换行或截断保持深底9.4 图片行为通过 Nike CDNc.static-nike.com按宽度参数提供响应式图片商品图用 srcset 多分辨率w_320、w_640、w_960、w_1920英雄图全断点 full-bleed比例变化桌面 16:9 → 移动 4:3懒加载loadinglazy加载期 grey-100 占位艺术指导英雄裁剪在桌面与移动构图间切换十、Agent Prompt 指南让编码 Agent 产出 Nike 风格10.1 快速色彩参考主 CTANike Black#111111背景White#FFFFFF次级表面Light Gray#F5F5F5标题文本Nike Black#111111正文 / hoverSecondary Text#707072边框Border Secondary#CACACB错误Nike Red#D30005链接Link Blue#1151FF10.2 组件 Prompt 示例可直接复制使用创建一个商品英雄区full-bleed 通边摄影、无圆角、深色渐变覆盖层用于文本96px/500 大写 Nike Futura 风格标题line-height 0.90以及 Nike Black#111111胶囊按钮30px 半径设计 3 列商品卡片网格方形图片无圆角、卡片间 gap 4px、商品名 16px/500 Nike Black#111111、价格 14px/500、次级文本 Grey-500#707072构建白色 sticky 导航栏左侧 Logo、居中品类链接 16px/500#111111hover 色#707072、右侧搜索24px 圆角、背景#F5F5F5、收藏与购物车图标创建促销横幅条背景#111111、居中白字 12px/500、垂直内边距 8px——全宽、无圆角设计次级描边按钮透明背景、1.5px#CACACB边框、30px 胶囊半径、16px/500#111111文本、hover 边框加深至#70707210.3 迭代指南精修已有生成界面时一次只聚焦一个组件引用本文档中的具体颜色名与 hex 码牢记商品摄影才是颜色UI 保持单色用灰色阶表达状态变化#F5F5F5→#E5E5E5→#CACACB→#707072如果 UI 看起来颜色太多那大概率就是错了——Nike 的 UI 是灰阶的显示字体Nike Futura永远大写且绝不小于 24px正文字体Helvetica Now的交互元素几乎一律 weight 500结语从规范到产物的完整闭环这套 Nike 风格设计系统文档的独特价值在于一条龙DESIGN.md描述视觉意图与反模式 →tokens.css提供可直接粘贴的机器可读 Token →components.html与components.manifest.json给出可复用的组件配方 →preview/页面提供视觉自检。使用者在 OpenDesign 中让 Agent 生成电商原型、落地页或商品页时只需按 USAGE.md 规定的顺序先读契约、再粘 Token、后查组件清单即可让产物在色彩、字体、圆角、阴影与响应式行为上严格贴合 Nike 的激进单色 巨幅字体 通边摄影语言——同时把色彩表现力完整地让渡给商品图片本身。【免费下载链接】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），仅供参考