DESIGN.md 示例
从公开网站提取的真实 DESIGN.md 文件。每一份都以 AI 编程智能体能读取的格式，记录了网站的颜色、字体排版、间距和组件。打开卡片即可预览，并复制到你的仓库。
提取自各网站的公开页面，并非官方品牌规范。刚接触这个格式？请阅读什么是 DESIGN.md。
Airbnb
Airbnb 的设计系统以一款专有的可变字体（Airbnb Cereal VF）为核心，配色接近单色的中性色调，以深炭色（#222222）和浅灰色为基调。品牌标志性的珊瑚粉色"Rausch"（#ff385c）仅用于主要行动按钮和标志。布局采用响应式图片卡片网格，图片与文字的比例宽松，卡片带有 20px 的柔和圆角，并通过多层环境阴影营造细微的层次感，避免强烈的明暗对比。搜索栏是一个醒目的胶囊形容器，统一了用户的核心操作。
Anthropic
Anthropic的设计系统风格克制，以排版为核心，由两款定制字体构成：Anthropic Serif 与 Anthropic Sans，搭配温暖的象牙白背景（#faf9f5）。调色板刻意保持极简：近黑色（#141413）置于温暖的米白底色之上，次要文字与边框则采用柔和的石灰色调。大尺寸衬线展示字体确立了编辑式的表达语气，而深色面板区块（近黑背景配象牙白文字）则形成强烈对比。整体美学通过充裕的留白、鲜明的字体对比以及完全不做装饰的处理，传达出知识上的严肃性与以安全为先的使命感。
Apple
通过 CSSOM 频率分析提取的设计令牌，未经 LLM 解读。
Dribbble
Dribbble 的设计系统以深邃的近黑海军蓝（#0d0c22）搭配干净的白色底面为基础，并以标志性的热粉色（#ea4c89）作为强调色，克制地用于编辑式重点和交互高亮。整套排版体系只使用 Mona Sans 字体，所有字重一以贯之，层级完全依靠字重和字号来建立。胶囊形按钮（border-radius: 1e+07px）与圆角卡片（12px 圆角）共同定义了整体的几何语言。布局留白宽松，基于 8px 基础网格，层级主要通过柔和的投影来体现，而非厚重的叠层效果。
Duolingo - The world’s most popular way to learn
通过 CSSOM 频率分析提取的设计令牌，未经 LLM 解读。
Figma
Figma的营销网站采用鲜明的黑白单色体系，核心是其自有的figmaSans可变字体。设计以排版为主导：大号展示标题采用88px/56px，字距紧凑且为负值，与字重330的轻盈正文形成对比。按钮使用全圆角胶囊形状（border-radius: 9999px），实心黑底配白色文字。布局基于网格，最大内容宽度为1440px，每个区块上下留白80px，画布干净为白色。层次感很弱，阴影是基于oklch的细微叠加效果。页脚横幅中出现淡紫色的强调色#cb9fd2。整体风格自信、排版讲究，并突出品牌形象。
Harvey
Harvey的设计系统以一套定制的双字体体系为核心：HarveySerifFont用于编辑式的权威感，HarveySansFont用于功能性的清晰度。配色上，暖近黑色（#0f0e0d）的导航栏与象牙白（#fafaf9）的内容区域形成对比。调色板刻意保持单色调，采用由浅到深的暖灰色阶（gray-50至gray-950），不使用任何强调色，传递出适合高风险法律工作所需的可信与克制。层级主要通过表面明暗对比来体现，而非阴影。首页大标题采用72px的大号衬线字体，立刻建立起排版上的权威感；正文与界面元素则使用定制的无衬线字体。间距遵循8px基础网格，并设有命名的间距令牌（xs、sm、md、xl、2xl）。
IKEA
IKEA的全球首页采用大胆、扁平的设计系统，以标志性的IKEA黄色（#ffdb00）作为主要操作区域，并以IKEA蓝色（#0058a3）作为品牌标识的点缀色。整个字体体系基于一款定制字体Noto IKEA构建，使用400和700两种字重，字号等级划分严谨，从14px的正文到51px的展示标题。层级主要通过色彩对比和版面结构来体现，而非依靠阴影。版面采用最大宽度为90rem的容器，桌面端网格间距为1.5rem，交互元素统一应用8px的圆角。米白色背景（#fffefb）与纯粹的#111111文字形成温和对比，营造出高对比度、易于阅读的无障碍浏览体验。
Klarna
Klarna的设计系统以深邃的午夜藏青色作为主色（#0b051d），搭配明亮的点缀色，其中包括标志性的粉色（#ffa8cd）。系统同时使用Klarna自定义字体与系统字体，突出圆角设计，其中32px的圆角最为常见，并保持高对比度以满足无障碍需求。整体设计在专业感与亲和力之间取得平衡，通过宽裕的留白和清晰的字体层级来实现这一效果。
Linear
Linear 的设计系统以深色为主，是为工程团队打造的高密度产品界面。表面色板以近黑色（#08090a、#0f1011）为基础，通过层层叠加的深灰色区分侧边栏、卡片和面板。字体全部使用 Inter Variable，展示尺寸下搭配精确的负字间距；行内代码则使用 Berkeley Mono。圆角设计刻意保持较小（以 2–6px 为主），仅在徽章和状态标签上使用胶囊形状。层级主要通过细微的 1px 内描边和低透明度的投影来体现，而非强烈的叠层效果。主要行动按钮采用 Linear 标志性的靛蓝色（#5e6ad2），用于注册按钮和关键链接。
Magentix Studio
Magentix Studio 以编辑式、美术馆般的视觉语言，为一家以 AI 为核心的产品工作室塑造形象。
Neon
Neon 的设计系统以深色为先，是一个面向开发者的品牌。页面以近黑色底色为主（#000000、#18191b），搭配醒目的霓虹绿主色（#00e599）和中间层级的绿色辅助色（#34d59a）。排版体系将 Inter 用于界面与正文，GeistMono 用于代码与数据，两者都采用紧凑的负字间距。间距遵循 4px 基础网格。圆角统一保持在极简的 4px。层级主要通过边框对比来体现，而非阴影，仅偶尔使用一层环境投影。首屏区域采用铺满整个画布的动态数据可视化背景，进一步强化了其数据库与基础设施的品牌形象。
Notion
Notion 营销首页以深海军蓝（#02093a）的首屏区块搭配浅色（#f6f5f4）的主体背景，所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格，栏间距为 28px，圆角体系兼顾两种规格：卡片使用 8px，药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝（#2537b1）用于行动按钮与重点强调，从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。
Paperclip
Paperclip 是一个 AI 智能体管理平台，设计风格大胆，以近黑色（#0a0a0a）背景为主，搭配白色（#ffffff）前景文字，呈现深色画布的视觉效果。首屏以鲜明的多色渐变插画为核心，堆叠的胶囊形状融合了品红、紫罗兰、青绿、橙色和黄色，在深色底面上形成色彩丰富、充满活力的视觉identity。字体采用 Inter Tight 作为标题（紧凑、粗重，字间距偏紧），正文与界面文字使用 Inter，代码与状态信息使用 JetBrains Mono。主要按钮为白色胶囊形按钮，置于深色背景之上。产品界面中通过语义化的绿色（#22c55e）状态系统贯穿展示智能体与任务的运行状态。导航简洁扁平，底部带有一条细微的边框线。
PayPal
PayPal荷兰站首页采用大胆、面向大众消费者的设计风格，核心是鲜明的天蓝色（#60cdff）首屏区域，搭配超粗黑色展示字体（PayPal Pro w900）。导航栏为白底黑字，设有两种截然不同的行动按钮：描边的"Inloggen"和实心黑色的"Rekening openen"。页面顶部是深海军蓝色的公告横幅。整体语言高对比、圆角胶囊造型突出，并以品牌字体为主导，向广泛的大众金融用户传达信任感与易用性。
Railway
Railway 的设计系统是一套以深色为主的开发者平台界面，底色是近乎黑色的深海军蓝（#13111c、#0b0b0f），文字采用高对比度的米白色（#f7f7f8），品牌强调色为独特的紫色（#853bce / #553f83）。首屏使用 IBM Plex Serif 呈现编辑式的厚重感，界面文案统一使用 Inter，代码场景则使用 JetBrains Mono 与 SF Mono。层级关系主要依靠内嵌的白色发光描边（rgba(255,255,255,0.2) 1.5px inset）来实现，而非投影，使界面呈现玻璃面板般的质感。间距系统以 4px 为基础，节奏紧凑而明确，常用 8/12/16/24/32。圆角普遍较小，以 4px 为主，卡片与首屏容器则有选择地使用 8px 和 16px。
Shopify
Shopify 营销首页采用极具冲击力的全幅视频主视觉，近黑色背景（#02090a）与上方白色导航栏形成鲜明对比。品牌主色为醒目的薄荷绿（#36f4a4），克制地用于高亮和交互状态。字体分工明确：展示与编辑类标题使用 NeueHaasGrotesk，界面正文使用 Inter-Variable。CTA 按钮采用全圆角药丸形（border-radius: 9999px）。整体风格自信、高对比、充满憧憬，旨在将访客转化为商家。
Snapchat
Snapchat 的网页形象采用高对比度的浅色主题，以标志性的 #FFFC00 品牌黄为核心，搭配近黑色（#121314）的主要表面和干净的白色页面背景。字体设计以 Avenir Next 为主、Graphik 为辅，形成友好而有条理的字体层级。按钮、胶囊和标签等交互元素采用完全圆角（100px）的圆角半径，输入框则使用柔和的 5px 圆角。导航栏为悬浮胶囊形态，带有柔和的投影。内容以大尺寸媒体卡片呈现，卡片上叠加白色文字，营造沉浸式、以应用预览为重心的版式。整体密度适中，留白充足，视觉层级清晰，兼顾了营销页面与产品界面的设计惯例。
Stripe
Stripe 的营销首页采用一套严谨统一的设计系统（HDS，Stripe Design System），以可变字体 "sohne-var" 的细体至常规字重（300–400）为核心，配合从深海军蓝过渡到靛紫色的品牌色板，并以 #533afd（Stripe Indigo）为主色调；首屏采用标志性的满幅光谱渐变背景。组件圆角较小（4–6px），阴影平缓或极简，整体布局基于 8px 的基础间距网格。整体语调既权威又亲和：通过自信的字体排版和克制的色彩运用，传达金融基础设施的专业感。
Supabase
Supabase 采用以深色为先的设计系统，以接近纯黑的深色背景（oklch 约 0.19）为基底，搭配鲜明的绿色品牌强调色（#3ecf8e / #3fcf8e）。版面以响应式功能卡片网格组织，展示型标题使用 Manrope，正文与界面文字使用 Inter。所有等宽字体与代码场景均采用 Source Code Pro。色彩体系基于 oklch 自定义属性构建，并采用语义化命名。卡片圆角为 12px，边框处理较为柔和；按钮圆角为 6–8px。整体信息密度适中，基础间距遵循 8px 网格。
The Onion
The Onion 的设计系统是一份数字化的讽刺性报纸：黑色粗体窄体哥特式标题，搭配品牌标志性的森林绿色（#006b3a），用于栏目标签、热门徽章和行动按钮，整体建立在简洁的白色或浅灰色画布之上。排版是其主要设计手段：Adobe Fonts 的窄体与半窄体无衬线字体（tablet-gothic、rocky-condensed）主导标题，正文则采用 utopia-std-caption。布局信息密度较高，卡片网格紧凑，文章之间以底部边线分隔，结构性元素的圆角几乎为零。阴影极少，仅在浮层上使用少量柔和阴影。
Uber
Uber的设计语言将简约风格与生动的插画相结合，打造出亲和而不失专业的出行平台。鲜明的黑白底色带来清晰易读的效果，色彩丰富的主视觉插画则增添了温度与人情味。字体系统依赖定制的UberMove字族以保持品牌统一，宽松的留白让整个界面显得从容舒展。
WIRED
WIRED的设计系统是一套高对比、以编辑内容为导向的单色框架，建立在专有字体体系之上（Breve Text、WIRED Mono、WiredDisplay、Apercu），色彩几乎为零。黑色（#000000）占据主导，出现2961次，用于文字、边框、图标和交互状态。白色（#ffffff）作为主要底色。强调色用得很克制，仅有#057dbc这一品牌蓝出现在订阅按钮中。版面采用结构清晰的多栏稿件网格，基础间距紧凑，以8px为单位。表面扁平，没有阴影，圆角很小，标准为4px。字体是最主要的识别特征：正文使用19px的Breve Text，栏目标签使用大写、带字距的WIRED Mono，展示性标题则使用WiredDisplay。整体风格权威、信息密度高，并以阅读流为先。
xAI
xAI 的营销网站采用温暖的米白色底色体系，以 --color-ivory（#f9f8f6）和 --color-white（#ffffff）为基础，近黑色 #0a0a0a 作为主要文字色和前景色。字体系统分为三部分：大型展示标题使用 universalSansDisplay，字号 60–72px，字距收紧；正文与界面文案使用 universalSans；代码与终端场景使用 GeistMono。圆角语言以 9999px 的药丸形按钮和标签为主，卡片与输入框则使用 12px 和 6px。层级处理十分克制：卡片使用柔和的多层投影，大部分表面保持扁平。整体调性偏向技术感的高端风格：色彩收敛，留白充足，强烈的等宽代码美学彰显开发者的专业可信度。