awesome-design-md案例Binance的Binance Yellow与交易大厅紧迫感设计【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-mdawesome-design-md 是一个由 73 个知名网站提炼而成的 DESIGN.md 设计系统文档合集把某个品牌的DESIGN.md放进项目根目录AI 编程助手就能生成风格一致的 UI。本文以 Binance 案例为例拆解「币安黄」如何撑起一整个金融品牌视觉以及交易大厅的紧迫感是如何靠颜色、字号与密度设计出来的 。什么是 awesome-design-mdDESIGN.md 设计系统怎么用一句话理解AI 写代码看AGENTS.mdAI 画界面看DESIGN.md。AGENTS.md告诉编程助手「怎么构建项目」DESIGN.md告诉设计助手「项目长什么样、什么感觉」awesome-design-md 的价值在于这些文件不是表面套个皮肤而是从真实官网逆向分析出的设计 Token——颜色角色、字阶、圆角、间距、组件状态、Dos and Donts 一应俱全。仓库入口见 README.mdBinance 的完整分析在 design-md/binance/DESIGN.md。每个文件都遵循统一的九段结构视觉氛围 → 配色与角色 → 字体规则 → 组件样式 → 布局原则 → 深度与层次 → 设计规范 → 响应式行为 → Agent 提示指南。新手不用懂设计理论只要把文件交给 AI它就能按这套「说明书」产出页面。Binance 案例核心一Binance Yellow 单色品牌体系打开 Binance DESIGN.md 的配色表最抓眼的就是这个 TokenToken色值角色primary#FCD535币安黄唯一品牌色primary-active#f0b90b按下/悬停加深态trading-up#0ecb81价格涨绿trading-down#f6465d价格跌红canvas-dark#0b0e11近黑画布营销页默认这个案例最精妙的一点全系统只有一个强调色。所有主按钮、品牌宣言大标题FUNDS ARE SAFU、Sign Up 胶囊按钮、巨型统计数字全部用币安黄背景则是带一点暖调的近黑#0b0e11而不是纯黑。黄色在黑底上电压感极强文档里称之为「yellow voltage」——黄色的稀缺性本身就是它的力量。对应的设计红线写得很直白Dos and Donts 一节✅ 黄色只给主行动、品牌标题和 Logo绝不用于装饰或正文❌ 不要引入第二种品牌色任何扩展都会稀释品牌身份❌ 不要翻转按钮文字色——黄底黑字是签名组合黄底白字会丢辨识度 给新手的启示克制比丰富更难。一个颜色用得准胜过十个颜色凑气氛。Binance 案例核心二交易大厅的紧迫感是怎么做出来的「紧迫感」不是玄学这套文档把它拆成了三条可复用的设计手法1. 绿涨红跌只用文字色表达方向交易语义色trading-up / trading-down有一条铁律只作为文字颜色或小徽标出现永远不做卡片背景。行情表里 24h 涨跌格、内联价格、箭头靠#0ecb81与#f6465d直接点亮文字。在密集的数据表格里这比彩色徽章更快被眼睛捕捉。2. 数字专用字体让数字「表格化、可信化」Binance 用双字体分工Typography 一节BinanceNova标题、正文、按钮文案——负责「人话」BinancePlex价格、成交量、百分比、统计计数器——负责「数字」40px 的number-display让「15,000 BTC」这类数字一眼可辨文档甚至给出替代方案拿不到定制字体时Inter 替代 BinanceNova、JetBrains Mono / IBM Plex Sans 替代 BinancePlex。规则只有一条数字永远是 BinancePlex正文永远是 BinanceNova混用即违规。3. 高信息密度 色块分层代替留白多数营销网站靠留白呼吸Binance 靠对比分层Layout 一节区块间距 80px比普通营销站96px更紧——因为页面里混着营销横幅和密集的行情表层次不靠阴影靠#0b0e11画布与#1e2329卡片之间 12 级亮度跳变读起来就是「浮起了一层」主 CTA 统一 40px 高、6px 圆角只有「页面级动作」才用 9999px 胶囊圆角——胶囊这是 THE 按钮再叠上 64px/700 的超大号 H1首页是用户数实时滚动的大数字交易大厅的压迫感和能量感就出来了黑底、黄字大数字、红绿闪烁的价格、几乎不留缝隙的行情行。双主题切换营销页黑、交易页白这个案例还有一个值得抄的设计决策Overview 一节场景主题画布首页 / 产品宣传 / 交易看板深色#0b0e11买币 / 充值 / 表单页浅色#ffffff两种模式下黄色 CTA 和红绿交易色保持不变只翻转画布、表面和文字色。判断标准很简单展示和交易用深色营造「专业交易台」氛围真正要用户掏钱、填表的事务性页面切浅色降低操作焦虑。如何上手两步把 Binance 风格装进项目获取仓库本地已有则跳过git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md把 design-md/binance/DESIGN.md 复制到你项目的根目录然后告诉 AI 助手「用 DESIGN.md 作为设计规范帮我构建一个 Binance 风格的交易页面」。如果想做其他品牌风格仓库按类别组织金融加密类还有 coinbase、kraken、stripe、revolut开发者工具类有 cursor、vercel 等全部在同一结构下照着 Binance 案例的读法看即可。小结从 Binance 案例抄走的 5 条设计规范单一强调色一个颜色扛起所有品牌电压稀缺即力量黄底黑字高对比签名组合不翻转、不换色涨跌色只做文字方向语义进文本不进背景数字专用字体交易类界面给数字单独的「可信之声」密度靠对比深色卡片分层代替阴影80px 区块节奏制造紧迫而不混乱把这套逻辑套到任何数据密集的产品行情、监控面板、运营后台都能立刻得到「专业感 紧迫感」——这正是 awesome-design-md 用一份 Markdown 就能教会 AI 的事 ✨【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 awesome-design-md案例：Binance的Binance Yellow与交易大厅紧迫感设计
awesome-design-md案例Binance的Binance Yellow与交易大厅紧迫感设计【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-mdawesome-design-md 是一个由 73 个知名网站提炼而成的 DESIGN.md 设计系统文档合集把某个品牌的DESIGN.md放进项目根目录AI 编程助手就能生成风格一致的 UI。本文以 Binance 案例为例拆解「币安黄」如何撑起一整个金融品牌视觉以及交易大厅的紧迫感是如何靠颜色、字号与密度设计出来的 。什么是 awesome-design-mdDESIGN.md 设计系统怎么用一句话理解AI 写代码看AGENTS.mdAI 画界面看DESIGN.md。AGENTS.md告诉编程助手「怎么构建项目」DESIGN.md告诉设计助手「项目长什么样、什么感觉」awesome-design-md 的价值在于这些文件不是表面套个皮肤而是从真实官网逆向分析出的设计 Token——颜色角色、字阶、圆角、间距、组件状态、Dos and Donts 一应俱全。仓库入口见 README.mdBinance 的完整分析在 design-md/binance/DESIGN.md。每个文件都遵循统一的九段结构视觉氛围 → 配色与角色 → 字体规则 → 组件样式 → 布局原则 → 深度与层次 → 设计规范 → 响应式行为 → Agent 提示指南。新手不用懂设计理论只要把文件交给 AI它就能按这套「说明书」产出页面。Binance 案例核心一Binance Yellow 单色品牌体系打开 Binance DESIGN.md 的配色表最抓眼的就是这个 TokenToken色值角色primary#FCD535币安黄唯一品牌色primary-active#f0b90b按下/悬停加深态trading-up#0ecb81价格涨绿trading-down#f6465d价格跌红canvas-dark#0b0e11近黑画布营销页默认这个案例最精妙的一点全系统只有一个强调色。所有主按钮、品牌宣言大标题FUNDS ARE SAFU、Sign Up 胶囊按钮、巨型统计数字全部用币安黄背景则是带一点暖调的近黑#0b0e11而不是纯黑。黄色在黑底上电压感极强文档里称之为「yellow voltage」——黄色的稀缺性本身就是它的力量。对应的设计红线写得很直白Dos and Donts 一节✅ 黄色只给主行动、品牌标题和 Logo绝不用于装饰或正文❌ 不要引入第二种品牌色任何扩展都会稀释品牌身份❌ 不要翻转按钮文字色——黄底黑字是签名组合黄底白字会丢辨识度 给新手的启示克制比丰富更难。一个颜色用得准胜过十个颜色凑气氛。Binance 案例核心二交易大厅的紧迫感是怎么做出来的「紧迫感」不是玄学这套文档把它拆成了三条可复用的设计手法1. 绿涨红跌只用文字色表达方向交易语义色trading-up / trading-down有一条铁律只作为文字颜色或小徽标出现永远不做卡片背景。行情表里 24h 涨跌格、内联价格、箭头靠#0ecb81与#f6465d直接点亮文字。在密集的数据表格里这比彩色徽章更快被眼睛捕捉。2. 数字专用字体让数字「表格化、可信化」Binance 用双字体分工Typography 一节BinanceNova标题、正文、按钮文案——负责「人话」BinancePlex价格、成交量、百分比、统计计数器——负责「数字」40px 的number-display让「15,000 BTC」这类数字一眼可辨文档甚至给出替代方案拿不到定制字体时Inter 替代 BinanceNova、JetBrains Mono / IBM Plex Sans 替代 BinancePlex。规则只有一条数字永远是 BinancePlex正文永远是 BinanceNova混用即违规。3. 高信息密度 色块分层代替留白多数营销网站靠留白呼吸Binance 靠对比分层Layout 一节区块间距 80px比普通营销站96px更紧——因为页面里混着营销横幅和密集的行情表层次不靠阴影靠#0b0e11画布与#1e2329卡片之间 12 级亮度跳变读起来就是「浮起了一层」主 CTA 统一 40px 高、6px 圆角只有「页面级动作」才用 9999px 胶囊圆角——胶囊这是 THE 按钮再叠上 64px/700 的超大号 H1首页是用户数实时滚动的大数字交易大厅的压迫感和能量感就出来了黑底、黄字大数字、红绿闪烁的价格、几乎不留缝隙的行情行。双主题切换营销页黑、交易页白这个案例还有一个值得抄的设计决策Overview 一节场景主题画布首页 / 产品宣传 / 交易看板深色#0b0e11买币 / 充值 / 表单页浅色#ffffff两种模式下黄色 CTA 和红绿交易色保持不变只翻转画布、表面和文字色。判断标准很简单展示和交易用深色营造「专业交易台」氛围真正要用户掏钱、填表的事务性页面切浅色降低操作焦虑。如何上手两步把 Binance 风格装进项目获取仓库本地已有则跳过git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md把 design-md/binance/DESIGN.md 复制到你项目的根目录然后告诉 AI 助手「用 DESIGN.md 作为设计规范帮我构建一个 Binance 风格的交易页面」。如果想做其他品牌风格仓库按类别组织金融加密类还有 coinbase、kraken、stripe、revolut开发者工具类有 cursor、vercel 等全部在同一结构下照着 Binance 案例的读法看即可。小结从 Binance 案例抄走的 5 条设计规范单一强调色一个颜色扛起所有品牌电压稀缺即力量黄底黑字高对比签名组合不翻转、不换色涨跌色只做文字方向语义进文本不进背景数字专用字体交易类界面给数字单独的「可信之声」密度靠对比深色卡片分层代替阴影80px 区块节奏制造紧迫而不混乱把这套逻辑套到任何数据密集的产品行情、监控面板、运营后台都能立刻得到「专业感 紧迫感」——这正是 awesome-design-md 用一份 Markdown 就能教会 AI 的事 ✨【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考