OpenDesign 中的 Airbnb 设计系统落地指南从 Rausch 珊瑚粉到 Airbnb Cereal 的完整设计语言解析【免费下载链接】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/airbnb/DESIGN-vi.mdAirbnb 风格设计系统设计文档展开。该文档属于 OpenDesign 内置设计系统目录bundled catalog用于将 Airbnb 的设计语言编译成可供 Coding Agent 消费的规范与语义 token。读完本文你将掌握这套旅行杂志式界面背后的完整色彩角色、排版层级、组件规格、布局与响应式策略以及如何直接使用仓库内的 tokens.css、components.html 等资产为 Agent 生成高保真的 Airbnb 风格页面。一、系统概览为什么它看起来像 AirbnbAirbnb 2026 年的设计语言本质上是一本碰巧做成了应用的旅行杂志——纯净的白色画布让位于全幅摄影界面本身退后让房源列表呼吸。这一系统最鲜明的识别点是Rausch 珊瑚粉#ff385c它被节约但毫不含糊地用于搜索 CTA、激活态 Tab 下划线、主行动按钮偶尔出现在价格或心愿单爱心上其余一切都是纪律严明的灰度其中#222222承担了页面几乎每一行文字。该系统的信任感来自对内容的押注房源照片以英雄级比例展示4:3 裁切加全圆角处理品类切换通过三 Tab 选择器Homes / Experiences / Services完成配以 3D 渲染的示意图标斜顶房屋、热气球、服务铃——物理、触感、近乎玩具感——与锐利的Airbnb Cereal VF标签组合。这是极少数让 3D 渲染与纯文字 UI 共存而不产生冲突的消费级产品。最新的表面是Experiences产品线同样的 chrome 框架但卡片密度更高、摄影更多、预订面板居中锚定并带右侧粘性价格栏。房源详情页无论是房间还是游艇体验遵循同一个紧凑模板全幅英雄图网格 → 悬浮圆角预订卡滚动时粘性→ 设施 → 评价Guest Favorite 奖章使用居中大号4.81评分配月桂花环锁型→ 地图 → 房东主页 → 公开披露信息。核心特征速览Rausch 珊瑚粉#ff385c作为唯一强调色仅用于主 CTA 与搜索按钮全幅摄影 4:3 / 16:9轻柔圆角14–20px是主要视觉词汇3D 渲染品类图标 文字 Tab —— 系统唯一允许插图的位置圆形50%图标按钮返回、分享、收藏、轮播箭头遍布各处Airbnb Cereal VF承载从 8px 法律脚注到 28px 章节标题的所有标签——单一字体族系统产品分层配色Airbnb Plus洋红#92174d、Airbnb Luxe深紫#460479、AirbnbRausch 珊瑚Guest Favorite 奖章锁型——居中巨型评分数字夹在两个月桂花环之间粘性预订面板价格 → 日期 → 人数结构桌面端固定在右栏移动端塌缩为底部锚定的 Reserve 栏移动端底部固定导航Explore / Wishlists / Log in激活态带 Rausch 色调二、色彩体系与角色单一强调色的纪律主色Primary角色色值CSS 变量用途Rausch#ff385c--palette-bg-primary-core文档记录名主 Reserve 按钮、搜索提交按钮、激活 Tab 下划线、心愿单爱心填充、价格强调。每页可见度最高的颜色副色与强调Secondary Accent角色色值CSS 变量用途Deep Rausch#e00b41--palette-bg-tertiary-core按压/激活态按钮、渐变终止点Plus Magenta#92174d--palette-bg-primary-plusAirbnb Plus 产品层品牌色精选高端房源Luxe Purple#460479--palette-bg-primary-luxeAirbnb Luxe 产品层品牌色别墅/庄园级房源Info Blue#428bff--palette-text-legal法律/信息类链接条款、隐私、披露——系统唯一非单色链接表面与背景Surface Background角色色值用途Canvas White#ffffff默认页面背景所有卡片、容器、详情页的起点Soft Cloud#f7f7f7微弱的次表面色调页脚背景、地图视图包裹器、希望从主白色退后的其他一切区块Hairline Gray#dddddd无处不在的 1px 边框色——分隔卡片、设施行、评价面板、页脚列布局系统的主力中性色与文字Neutrals Text角色色值CSS 变量用途Ink Black#222222--palette-text-primary系统的近黑色约承载页面 90% 文字Charcoal#3f3f3f--palette-text-focused聚焦态输入文字、降级一档的强调文字Ash Gray#6a6a6a--palette-bg-tertiary-hover次级标签、城市名下的 Cottage rentals 式副标题、弱化页脚链接Mute Gray#929292--palette-text-link-disabled禁用按钮与低优先级元数据Stone Gray#c1c1c1—三级分隔线、图标描边、占位头像语义与强调Semantic角色色值CSS 变量用途Error Red#c13515--palette-text-primary-error表单校验错误、破坏性操作警告Deep Error#b32505--palette-text-secondary-error-hover错误状态的按压/激活变体Translucent Blackrgba(0, 0, 0, 0.24)--palette-text-material-disabled禁用的 material 风格标签渐变系统品牌渐变出现极少通常仅在 wordmark 与搜索按钮的品牌时刻linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)这条珊瑚 → 洋红渐变是品牌时刻——绝不作为完整表面使用只作为窄 pill 填充或 Logo 处理。三、排版规则单一字体族的层级艺术字体族Airbnb Cereal VF唯一主字体专有的可变字重无衬线字体承载整个系统。回退链按顺序Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif。在提取的 token 中观测到的字重为500、600、700——没有 400-regular系统的正文字重是 500这让每一块文字都有一种微妙而自信的密度感。OpenType 特性salt风格替换用于紧凑的 11px 与 14px 600 字重标签可能用于更紧凑的数字与特殊字符塑形未观测到连字或分数数字特性。层级表Hierarchy角色尺寸字重行高字距备注Section Heading28px / 1.75rem7001.430Inspiration for future getaways——页面级标题Subsection Heading22px / 1.38rem5001.18-0.44pxWhat this place offers、Meet the hosts——内容分隔Card Title21px / 1.31rem7001.430评价面板标题、卡片主标题Listing Title20px / 1.25rem6001.20-0.18pxSmall Group Yacht Tour, Unlimited Wine Fruits——详情页房源标题Subtitle Bold16px / 1.00rem6001.250房东姓名、城市名Body Medium16px / 1.00rem5001.250详情页正文Button Large16px / 1.00rem5001.250Reserve、Become a hostButton Default14px / 0.88rem5001.290标准按钮标签Link14px / 0.88rem5001.430导航链接、页脚链接Caption Medium14px / 0.88rem5001.290元数据、副标题行Cottage rentals、Villa rentalsCaption Bold14px / 0.88rem6001.430启用salt特性——数字统计、小字号强调Caption Small13px / 0.81rem4001.230评价日期、微元数据Micro Default12px / 0.75rem4001.330页脚免责声明、微法律文字Micro Bold12px / 0.75rem7001.330NEW pill 标签Badge Uppercase11px / 0.69rem6001.180salt特性——紧凑的品类/状态徽章Superscript8px / 0.50rem7001.250.32px大写——价格脚注、小数尾缀排版原则一个字体族多种字重。Airbnb Cereal VF 处理从 8px 法律文字到 28px 页面标题的一切——视觉识别来自字体族本身而非混搭字型。500 是新的 400。系统的常规字重是 500让每段文字都比 web 默认更自信。仅显示字型用负字距。20px 标题压缩字距 -0.18 到 -0.44px营造雕刻感正文保持 0 字距以保可读性。标题行高紧、正文行高松。显示字型运行在 1.18–1.25紧正文与说明文字放开到 1.43 以利长文舒适度。除 8px 外无全大写。系统唯一的大写变换是 8px 上标——其余地方句子大小写加上微妙的字重变化即可。字体替代说明Airbnb Cereal VF 是专有字体。最接近的开源替代是Circular Std仍为商业字体或Inter免费Google Fonts后者在显示尺寸需将 letter-spacing 减少 -0.01em。如需严格品牌保真文档记录的回退链Circular, -apple-system, system-ui在 macOS/iOS 上表现可接受——那里system-ui解析为比例相近的 San Francisco。四、组件样式规格可直接复刻的数值清单按钮Buttons主 CTAReserve、Search、Add dates背景Rausch#ff385c文字Canvas White#ffffffAirbnb Cereal 50016px内边距约 14px 纵向、24px 横向圆角8px矩形或 50%圆形图标变体边框无激活/按压transform: scale(0.92)外加 2px#222222聚焦环0 0 0 2px次按钮Become a host、描边三级操作背景#ffffff文字Ink Black#222222Airbnb Cereal 50014–16px内边距10px 16px圆角20pxpill或 8px矩形边框1px solid Hairline Gray#dddddd纯图标圆形按钮返回、分享、收藏、轮播控制背景#f2f2f2微偏白或白色加 1px 半透明黑边框图标#222222描边16–20px尺寸直径 32–44px圆角50%激活/按压transform: scale(0.92)柔和 4px 白环0 0 0 4px rgb(255,255,255)以与彩色摄影背景分离禁用按钮背景#f2f2f2、文字 Stone Gray#c1c1c1、透明度 0.5。Pill Tab 按钮Homes / Experiences / Services 品类选择器背景透明文字 Ink Black#222222Airbnb Cereal 50016px内边距 8px 14px激活态标签下方 2px Ink Black 下划线上方配 36–48px 3D 渲染示意图标卡片与容器Cards Containers房源卡片首页网格、搜索结果背景#ffffff图片 4:3 全幅、14px 圆角无外层容器内边距图片与元数据行间距 12px无阴影——分隔来自留白与照片本身的自然圆角元数据模式第 1 行城市/地区16px 600、第 2 行距离/时长14px 500 Ash Gray、第 3 行日期范围、底部价格行带 per night详情页预订面板房间/体验页右侧粘性栏背景#ffffff圆角 14–20px边框 1px Hairline Gray#dddddd阴影rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0——标志性三层堆叠阴影内边距 24px宽度约 370px固定于视口顶部下方 120–140px内容价格标题 → 日期选择器 → 人数下拉 → 主 CTA → You wont be charged yet 脚注设施网格卡背景白色行级非条目级1px Hairline Gray 边框每行 16px 垂直内边距图标标签模式左侧 24px 描边图标、右侧 16px 500 字重标签。评价卡纯白无边框靠网格间距分隔单行内为 40px 圆形头像 16px 600 字重姓名 14px 400 Ash Gray 日期下方 14px 500 正文段。输入与表单Inputs Forms搜索栏首页主视觉背景白色1px Hairline Gray 边框包裹三段Where / When / Who圆角 32px全 pill阴影rgba(0, 0, 0, 0.04) 0 2px 6px 0结构三段由细垂直线分隔每段上方 12px 500 标签、下方 14px 500 占位符提交右缘 Rausch 圆形图标按钮直径 48px文本输入白色背景、1px Hairline Gray 边框、8px 圆角、内边距 14px 16px聚焦时边框变 Ink Black 并加0 0 0 2px黑色外环错误时边框变#c13515Error Red帮助文字同色。日期选择器7 列日历网格圆形50%日期格宽 40–44px选中区间为 Ink Black#222222背景白数字起止锚点为更大实心圆中间日期用 Soft Cloud#f7f7f7色调。导航Navigation顶部导航桌面高约 80px白色背景左为 Rausch 色 wordmarkLogo102×32px中为三 Tab 品类选择器36–48px 3D 图标叠于 16px 500 标签之上激活 Tab 带 2px Ink Black 下划线右为 Become a host 文字链接、32px 圆形地球语言、36px 汉堡头像菜单底部 1px Hairline Gray 边框。顶部导航移动单行搜索 pill 占满全宽Start your search 占位符配小放大镜图标下方三 Tab 选择器保留图标缩至约 28px底部固定 Tab 栏 Explore激活态 Rausch/ Wishlists / Log in——24px 图标叠 12px 标签。房源详情次导航滚动经过英雄图后出现粘性横向滚动的锚点链接Photos · Amenities · Reviews · Location · Host高 56px底部 1px Hairline Gray 边框。图片处理Image Treatment主比例首页房源网格 4:3、体验英雄摄影 16:9、头像 1:1圆角房源网格图 14px、详情页英雄图框 20px、头像50%详情页图网格五图布局——左侧单张大图50% 宽 右侧 2×2 四张稍小图共享 20px 外圆角容器懒加载大量使用loadinglazy配模糊占位预览轮播32px 圆形箭头按钮叠于图上垂直居中圆点指示器位于底边上方 12px特色组件Signature ComponentsGuest Favorite 奖章锁型高分房源详情页居中评分数字 44–56px、700 字重两侧手绘 SVG 月桂花环插图约 48px 高下方 Guest Favorite 标签 12px 700 大写、tracking0.32px副标签 14px 500 Ash Gray全宽块、无容器边框——直接落在白色画布上三 Tab 品类选择器Homes / Experiences / Services 三 Tab各含约 48px 3D 渲染图标叠 16px 500 标签Experiences 与 Services 当前带小型海军蓝 NEW pill深蓝底白字 12px 700悬浮于图标右上激活 Tab 为 2px Ink Black 下划线。灵感城市网格首页 Inspiration for future getaways桌面 6 列、移动 2 列目的地链接每格第 1 行 16px 600 城市名、第 2 行 14px 500 Ash Gray 租赁类型副标题Cottage rentals、Villa rentals纯文字无图上方按品类 Tab 化Popular / Arts culture / Beach / Mountains / Outdoors / Things to do / Travel tips inspiration / Airbnb-friendly apartments激活 Tab 有 2px 下划线并切换字重。Reserve 粘性卡桌面端滚动过英雄图后固定于视口顶下 120px移动端塌缩为全宽底部栏带 From $X / night 标签与 Rausch 色 Reserve pill始终显示价格标题 → 日期显示 → 人数选择 → Rausch CTA → You wont be charged yet 免责声明。体验房东卡全宽圆角容器上方 3:2 封面照片房东头像圆形 56px50% 叠于封面底边下方房东名 16px 700、房东资历 14px 500 Ash Gray、小型 Rausch pill 按钮 Message host用于评价与设施/位置区块之间的过渡。Things to know 条带3 列规则/政策块House rules、Safety property、Cancellation policy每列顶部图标、16px 600 标题、14px 500 Ash Gray 正文、Ink Black 下划线 Show more 链接条带上下 1px Hairline Gray 分隔。五、布局原则8px 基底的密度控制间距系统基础单位8px提取尺度2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px——细粒度含少量为像素级图标对齐而用的网格外值区块内边距桌面约 48–64px 上下、移动 24–32px卡片内边距预订面板与大卡片 24px、设施行 16px、房源卡元数据 12px房源卡间距桌面 24px、移动 16px堆叠文字行间距4–8px极紧——强化旅行房源信息密集感网格与容器最大内容宽度超宽屏 1760–1920pxAirbnb 让网格比大多数站点呼吸得更开多数详情页 1280px首页房源网格≥1760px 时 6 列、≥1440px 时 5 列、≥1128px 时 4 列、≥800px 时 3 列、≥550px 时 2 列、以下 1 列详情页2 列不对称——主内容约 58%、右侧粘性预订面板约 36%、沟槽约 6%页脚3 列 Support / Hosting / Airbnb留白哲学Airbnb 信息密集但从不拥挤。留白用于分组——房源卡 24px 沟槽让每张照片读作独立对象但卡下元数据用 4–8px 间距让价格/城市/日期感觉像单一单元。详情页预订面板内部 24px 内边距但内部行日期选择、人数选择、CTA以 12px 堆叠——卡与页面的边界承担了比内部内容更多的分隔工作。圆角尺度圆角用途4px行内锚标签、标签 chip8px文字按钮、下拉、小型工具按钮14px房源卡摄影、通用内容容器、徽章20px主圆角按钮pill 形、大图、预订面板32px搜索栏 pill、超大容器50%所有圆形图标按钮、所有头像、心愿单爱心——系统的标志性圆几何六、深度与层次拒绝单层投影的哲学层级处理用途0无阴影房源卡、正文、纯文字区块1rgba(0, 0, 0, 0.08) 0 4px 12px激活/按压图标按钮返回、分享、收藏——轻微抬升提示可交互2rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0预订面板粘性卡、模态、下拉菜单——标志性三层抬升Focus Ring0 0 0 2px #222222激活态按钮、聚焦搜索输入White Separator Ringrgb(255, 255, 255) 0 0 0 4px叠于照片上的圆形按钮——4px 白环与彩色图片背景清晰分离阴影哲学Airbnb 使用堆叠多层阴影而非单个投影。预订面板三层阴影读作一个连贯的抬升实际是三个不同透明度/模糊值的独立阴影——在阴影周界产生细腻的抗锯齿显得高级而不沉重。装饰性深度摄影即深度系统重度依赖全幅摄影制造视觉深度阴影与渐变使用克制让照片承担主要工作月桂花环锁型Guest Favorite 奖章用两个 SVG 月桂插图给本来扁平的数字一种仪式感、奖杯感3D 渲染品类图标Homes/Experiences/Services 图标自带柔和内部照明与烘焙进作品的轻微投影——品牌唯一允许立体插画的地方七、该做与不该做保持品牌纪律该做Do将 Rausch#ff385c留给主操作与激活 Tab 指示——绝不用装饰性用途稀释它让摄影呼吸——4:3 裁切加 14–20px 圆角不叠文字、不加渐变 scrim所有 Rausch 之下的文字层用 Ink Black#222222——这是系统的近黑绝不用真#000000三 Tab 品类选择器的 3D 图标与扁平排版搭配——不在单一表面混搭插画风格堆叠三个低透明度阴影约 2%、4%、10%制造标志性预订面板抬升所有卡间、行间分隔用 1px Hairline Gray#dddddd边框桌面端预订面板粘性、移动端塌缩为底部锚定 reserve 栏元数据组内 4–8px、卡间 24px 间距——信息密度是有意为之不该做Dont不引入 Rausch / Plus Magenta / Luxe Purple 产品层调色板之外的副强调色不把文字放进照片内——说明文字永远在图片下方绝不叠加除唯一 8px 上标角色外不用全大写标签图标按钮圆角只用 50%——圆形是系统的标志性几何不给房源卡加投影——它们无抬升地躺在白色画布上不用渐变背景——系统唯一渐变是 wordmark 上窄窄的 Rausch → 洋红扫过不用 400-regular 字重——Airbnb Cereal 的正文字重是 500不用其他显示字体覆盖 Airbnb Cereal VF——系统有意为单一字体族八、响应式行为约 60 个断点背后的真实规律Airbnb 声明了约 60 个断点其组件库的设计时产物但有意义的布局变化集中在一个小得多的集合上名称宽度关键变化Ultra-wide≥1760px房源网格 6 列最大内容宽 1760–1920pxDesktop XL1440–1759px5 列网格、完整导航、右侧粘性预订面板Desktop1128–1439px4 列网格、粘性预订面板保留Laptop1024–1127px3–4 列网格、品类导航保持横向Tablet800–1023px3 列网格、全局搜索可塌缩为单行 pillSmall tablet550–799px2 列网格、预订面板降为全宽内联块Mobile375–549px1 列堆叠布局、底部固定 Tab 栏出现Explore / Wishlists / Log inSmall mobile375px边缘内边距收紧至 16px品类选择器图标缩至约 28px触控目标所有交互元素达到或超过44×44px。圆形图标按钮家族专门定尺 32–44px 并配 8–12px 扩展点击区内边距。Rausch 主 Reserve 按钮高约 48px。三 Tab 品类选择器点击区为完整标签图标矩形每 Tab 约 64×80px。塌缩策略导航平板及以上保留 wordmark 三 Tab 选择器移动端选择器滑到搜索 pill 正下方地球/头像控件移入底部锚定 Tab 栏搜索栏桌面端三段 pillWhere / When / Who配 Rausch 圆形提交按钮移动端塌缩为单行 Start your search pill点击打开全屏搜索 sheet预订面板≥1128px 右侧粘性800–1127px 内联于主内容列800px 底部固定 Reserve pill房源网格跨断点 6 → 5 → 4 → 3 → 2 → 1 列回流详情页图网格桌面五图布局1 大 4 小移动端变为可滑动的全幅轮播配分页圆点页脚3 列布局在 800px 塌缩为单列堆叠图片行为loadinglazy普遍使用模糊的im_wURL 参数化预览缩略图先行加载响应式图片使用 Airbnb 的muscache.comCDN 与im_w查询参数按宽度分发im_w240、im_w720、im_w1200、im_w2400无艺术裁剪——同一图片跨断点缩放轮播自动调整照片高度无论源比例如何都保持 4:3九、Agent Prompt 指南把设计语言转译为可执行指令快速色彩参考主 CTARausch (#ff385c)页面背景Canvas White (#ffffff)次表面Soft Cloud (#f7f7f7)标题/正文Ink Black (#222222)次级文字Ash Gray (#6a6a6a)边框/分隔线Hairline Gray (#dddddd)错误Error Red (#c13515)信息链接Info Blue (#428bff)Luxe 层强调Luxe Purple (#460479)Plus 层强调Plus Magenta (#92174d)组件 Prompt 示例可直接复制给 Agent创建主 Reserve 按钮Rausch (#ff385c) 背景白色 Airbnb Cereal 500 字重 16px 标签14px × 24px 内边距8px border-radius无阴影。激活/按压时加transform: scale(0.92)与 2px Ink Black 聚焦环0 0 0 2px #222222。构建房源卡4:3 全幅照片 14px border-radius、无容器阴影图片下方以 4px 间距堆叠三行文字16px 600 Ink Black 城市名、14px 500 Ash Gray (#6a6a6a) 租赁类型、16px 500 Ink Black 价格区间配 14pxper night后缀。设计粘性预订面板白色背景、14px border-radius、1px Hairline Gray (#dddddd) 边框、3 层抬升阴影rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0、24px 内边距、370px 宽、桌面端固定于视口顶下 120px。内容价格标题、日期选择器、人数下拉、Rausch 主 CTA、12px Ash GrayYou wont be charged yet免责声明。创建三 Tab 品类选择器三个等宽 Tab 分别标注 Homes、Experiences、Services每 Tab 有约 48px 3D 渲染示意图标房屋、热气球、铃叠于 16px 500 Ink Black 标签之上激活 Tab 加 2px Ink Black 下划线在 Experiences 与 Services 图标右上角加 12px 700 白字深海军蓝底小型NEWpill。渲染 Guest Favorite 奖章锁型居中评分数字 52px 700 字重 Ink Black左右两侧配手绘 SVG 月桂花环约 48px 高下方 12px 700 大写GUEST FAVORITE标签、tracking 0.32px副标签 14px 500 Ash Gray全宽块直接置于白色画布上、无容器边框。迭代指南用该系统精修已有界面时一次只聚焦一个组件引用本文档中的具体色彩名与十六进制码例如 Ink Black #222222而非 dark gray用自然语言描述搭配具体数值微妙的三层抬升优于一长串阴影字符串描述期望的感觉杂志感、摄影优先对比密集工具感正文始终默认 Airbnb Cereal VF 500 字重、强调用 600–700——绝不用 400让 Rausch 粉保持稀缺——若每视口出现超过一个 Rausch 色元素考虑是否应中和其一已知空白Known Gaps首页房源网格卡airbnb.com 的主房产卡网格主要视觉表面在提取的首页截图中未完整捕获——内容仅部分加载。上述房源卡规格由 Inspiration 网格结构与 Airbnb 更广惯例推断生产使用前请对照线上页面确认精确比例与元数据层级Experiences 品类图标Homes / Experiences / Services 的 3D 示意图标以栅格资产形式提供其精确源文件规格SVG 对比 PNG、渲染像素尺寸未记录动画与转场时长未捕获——静态提取范围暗色模式Airbnb 在提取的产品表面中未提供原生暗色模式本文档仅描述单一亮色主题十、从设计文档到可执行 Token仓库内的落地资产这套设计语言在仓库内并不仅是散文还以结构化的语义 token 形式落地供 Agent 直接消费。按照 USAGE.md 的读取顺序Agent 应将 tokens.css 中的:root { … }块原样粘贴到首个 artifact 的style块中此后所有取值一律通过var(--*)解析避免在 token 块之外使用裸十六进制值。manifest.json 将本包声明为od-design-system-project/v1规范、来源类型bundledOpenDesign 精选捆绑 fixture并登记了设计文档、token 样式、Tailwind v4 映射、组件清单与预览页等文件。关于整个目录的结构约定可参考 design-systems/README.md 与 docs/design-systems.md。tokens.css 中的关键绑定#Bindcomponents.manifest.json 与 design-tokens.json56 个 token契约评分 100 / 等级 excellent共同印证了以下绑定决策#Bind 1--bg与--surface均解析为 Canvas White#ffffff。Airbnb 的卡片直接躺在页面上不做色调阶梯——分隔来自 Hairline Gray 边缘--border与卡内照片绝不来自表面着色#Bind 2--surface-warm绑定 Soft Cloud#f7f7f7——用于页脚背景、地图包裹器与日历区间中间日期的真实品牌命名层级#Bind 3--accent-hover: #e31c5f与--accent-active: #e00b41是手工挑选而非公式推导——color-mix会过冲饱和度并欠冲品牌渐变终止点#Bind 4圆角尺度集中在标志性软圆几何8px按钮/输入、14px房源卡主力、20px预订面板与英雄图框、9999px圆形图标按钮与头像#Bind 5--elev-raised逐字编码标志性三层预订面板阴影——2% 发丝环 4% 短模糊 10% 中模糊品牌禁止单一投影#Bind 6--focus-ring是 2px Ink Black#222222不是schema 默认的强调色调环——为在全幅彩色摄影上清晰可读而设Rausch 环会消失在暖色调日落或海蓝叠层中#Bind 7--leading-body: 1.43宽松。紧显示行高1.18–1.25配开放正文行高的双模式节奏是旅行杂志感而非工具应用感的来源Tailwind v4 与设计 Token 的派生关系仓库强调派生文件是缓存而非并列真相源tailwind-v4.css派生自tokens.cssdesign-tokens.json派生自 token 契约报告并须与tokens.css一致components.manifest.json派生自components.html与tokens.css。其中 tailwind-v4.css 通过theme块把 56 个语义 token 映射为 Tailwind 工具类命名空间如--color-accent、--radius-md、--shadow-raised、--duration-fast文件头明确声明 Derived from tokens.css. Keep tokens.css as the source of truth.从 components.manifest.json 的统计可见落地质量111 个选择器、67 个类、28 个元素声明 56 个 token 中 52 个被组件引用--elev-flat、--motion-base、--text-4xl、--warn四个为声明未用undeclaredReferenced为空——即组件只引用已声明的 token契约闭环完整。组件分组buttons / inputs / badges / links / keyboard / icons / typography / layout与每组引用的 token 列表可作为编写组件时的允许清单视觉核对则可打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。结语Airbnb 设计系统的精髓可以浓缩为几条强纪律一个强调色、一个字体族、一个 50% 圆几何、零单层投影、摄影即深度。在 OpenDesign 的设计系统目录中这套语言已被完整编译为文档DESIGN.md、语义 tokentokens.css、组件 fixturecomponents.html与预览页的多层资产Agent 可以直接按 USAGE.md 的读取顺序消费。对希望生成旅行杂志感、摄影优先、信息密集而不拥挤界面的开发者与 Agent 而言这套系统给出了一个可复制、可验证、有源码级证据支撑的完整范本。【免费下载链接】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），仅供参考