UI of famous websites知名网站 UI
How do the best-known websites actually look? Each entry is a DESIGN.md — a plain-text design system extracted from a real site (colors, type, components, layout rules, do's and don'ts) — with our reading of its signature moves. Copy the DESIGN.md into your project and your coding agent can build UI that stays on-brand.
最知名的网站到底长什么样？每个条目都是一份 DESIGN.md —— 从真实网站提取的纯文本设计系统（色彩、字体、组件、布局规则、该做与不该做）—— 并附上我们对它招牌手法的解读。把 DESIGN.md 复制进你的项目，编程代理就能搭出不跑偏的界面。
The DESIGN.md files come from the open-source project awesome-design-md (MIT license) by VoltAgent. We curated, checked and translated the reading notes; the markdown files themselves are reproduced unchanged.
DESIGN.md 文件来自开源项目 awesome-design-md（MIT 协议，VoltAgent 出品）。我们做了筛选、核对和中文解读，markdown 文件本身原样转载。
74 sites — see how the best look, copy their DESIGN.md74 个知名网站 —— 看顶级设计，复制 DESIGN.md
Claude Claude（Anthropic） AI & LLM Platforms
The warmest, most editorial interface in the AI category: a tinted cream canvas (#faf9f5), slab-serif display headlines in Copernicus at weight 400 with negative tracking, and a signature coral (#cc785c) reserved for CTAs and full-bleed callout cards. Dark navy product mockups (#181715) supply the contrast.
AI 产品里最温暖、最具编辑感的界面：奶油色画布（#faf9f5）、400 字重加负字距的 Copernicus 衬线大标题，珊瑚色（#cc785c）只用于主按钮和整幅号召卡片。深藏青产品界面（#181715）负责明暗节奏。
Cohere Cohere（企业级 AI） AI & LLM Platforms
A sober enterprise AI command center: stark white canvas, monumental CohereText display headlines at 96px with -1.92px tracking, and near-black pill CTAs (#17171c). Deep green (#003c33) and dark navy (#071829) full-width bands carry the product pages; coral (#ff7759) appears only as editorial taxonomy.
沉稳的企业级 AI 指挥中心：纯白画布、96px 配 -1.92px 字距的 CohereText 巨型标题、近黑胶囊按钮（#17171c）。深绿（#003c33）与深藏青（#071829）整幅色带承载产品页，珊瑚色（#ff7759）只出现在编辑分类标签上。
ElevenLabs ElevenLabs（语音 AI） AI & LLM Platforms
A voice-AI brand that reads like a print magazine: off-white canvas (#f5f5f5), Waldenburg serif display at weight 300 with negative tracking, and a near-black ink pill (#292524) as the only CTA color. Soft pastel gradient orbs (mint #a7e5d3, peach #f4c5a8, lavender #c8b8e0) are the sole color moments.
读起来像印刷杂志的语音 AI 品牌：米白画布（#f5f5f5）、300 字重加负字距的 Waldenburg 衬线大标题，唯一的按钮色是近黑墨色胶囊（#292524）。柔和的粉彩渐变光晕（薄荷 #a7e5d3、蜜桃 #f4c5a8、薰衣草 #c8b8e0）是页面上仅有的色彩。
MiniMax MiniMax（AI 基础设施） AI & LLM Platforms
A dual-identity AI infrastructure brand: stark white canvas with black pill CTAs (#0a0a0a) for the marketing chrome, while each model line gets its own saturated identity card — coral #ff5530, magenta #ea5ec1, blue #1456f0, purple #a855f7. DM Sans runs everything from the 80px hero display to 12px micro labels.
双重身份的 AI 基础设施品牌：营销界面是白纸黑字 —— 纯白画布配黑色胶囊按钮（#0a0a0a）；而每条模型产品线都有自己的高饱和身份卡片 —— 珊瑚红 #ff5530、品红 #ea5ec1、蓝 #1456f0、紫 #a855f7。DM Sans 一族字体覆盖 80px 主视觉到 12px 微型标签。
Mistral AI Mistral AI（法国大模型） AI & LLM Platforms
The most cinematic identity in AI: PP Editorial Old near-serif headlines over mountain-sunset photography, a saturated orange CTA (#fa520f), and cream surfaces (#fff8e0) — plus the signature 'sunset stripe' gradient band (#fa520f → #ffa110 → #ffd900 → #fff8e0) closing every page.
AI 圈最有电影感的身份：PP Editorial Old 准衬线大标题压在群山日落摄影上，高饱和橙色按钮（#fa520f）配奶油色表面（#fff8e0），外加每页收尾的标志性「日落条纹」渐变色带（#fa520f → #ffa110 → #ffd900 → #fff8e0）。
Ollama Ollama（本地大模型） AI & LLM Platforms
Defiantly minimal, documentation-first design: a paper-white canvas (#ffffff), one pure-black pill (#000000) for every action, three neutral grays for text, and an inline curl install snippet in ui-monospace as the hero's centerpiece. SF Pro Rounded headings and a hand-drawn llama carry all the personality.
极简到近乎执拗、文档优先的设计：纸白画布（#ffffff）、所有操作共用一个纯黑胶囊（#000000）、三级中性灰文字，主角位置放着 ui-monospace 的内联 curl 安装命令。SF Pro Rounded 标题和手绘羊驼承担了全部个性。
OpenCode OpenCode（开源 AI 编程代理） AI & LLM Platforms
A marketing page that reads like a man page: every word set in Berkeley Mono on a warm cream canvas (#fdfcfc) with near-black ink (#201d1d), ASCII bracket markers for bullets, and a single dark TUI mockup as the only visual moment.
一页读上去像 man 手册的营销站：所有文字都用 Berkeley Mono 排在暖奶油色画布（#fdfcfc）上，墨色近黑（#201d1d），列表用 ASCII 方括号做标记，全站唯一的视觉时刻是一块深色终端界面模拟图。
Replicate Replicate（模型云平台） AI & LLM Platforms
Developer tooling with the soul of an art zine: a warm cream canvas (#f9f7f3), a stamp-like hot orange (#ea2804), rb-freigeist-neue display type up to 128px, and code that always sits in dark wells.
开发者工具的气质，艺术杂志的灵魂：暖奶油画布（#f9f7f3）、印章般的热橙（#ea2804）、最高 128px 的 rb-freigeist-neue 展示字，代码永远躺在深色井里。
Runway Runway（AI 视频生成） AI & LLM Platforms
A cinematic reel rendered as a website: full-bleed film-grade imagery on Runway Black (#000000), a single typeface (abcNormal) for every role, zero shadows, and cool-gray text (#767d88) that stays out of the picture's way.
把电影胶片做成网站：纯黑画布（#000000）上铺满全幅影像，abcNormal 一款字体包打天下，界面零阴影、近乎隐形，只留冷灰文字（#767d88）不抢画面的戏。
Together AI Together AI（AI 云基础设施） AI & LLM Platforms
AI infrastructure with one piece of chrome: near-black hero bands (#010120) alternate with bright white content bands, a three-stop gradient ribbon (#fc4c02 → #ef2cc1 → #bdbbff) does all the decoration, and a display sans (The Future) pairs with an uppercase mono eyebrow (PP Neue Montreal Mono).
近黑首屏（#010120）与纯白内容带交替铺开，唯一的品牌装饰是一条三色渐变丝带（#fc4c02 → #ef2cc1 → #bdbbff）；字体靠定制展示无衬线 The Future 配全大写等宽眉题 PP Neue Montreal Mono。
VoltAgent VoltAgent（AI 代理框架） AI & LLM Platforms
Documentation that decided to sell something: an unbroken near-black canvas (#101010), a single electric-green accent (#00d992) for CTAs and status pills, calm Inter headlines at weight 400, and SF Mono for everything typed at a terminal.
像文档站一样做营销：整站一块近黑画布（#101010），唯一的电光绿（#00d992）统领按钮与状态标签，Inter 标题冷静在 400 字重，凡能在终端敲出来的东西都交给 SF Mono。
xAI xAI（前沿 AI 实验室） AI & LLM Platforms
Engineered-cosmic restraint: a near-black canvas (#0a0a0a) edge-to-edge, white outline pills as the entire interactive vocabulary, Universal Sans display type at weight 400 with -2.4px tracking, and Geist Mono uppercase eyebrows that read like code comments.
工程感的宇宙级克制：近黑画布（#0a0a0a）一铺到底，交互词汇只有白色描边胶囊，Universal Sans 全程 400 字重配 -2.4px 字距，Geist Mono 大写眉题读起来像代码注释。
Cursor Cursor（AI 代码编辑器） Developer Tools & IDEs
An AI-first code editor whose site swaps IDE darkness for editorial calm: a warm-cream canvas (#f7f7f4), warm near-black ink (#26251e), one scarce Cursor Orange (#f54e00) for CTAs and the wordmark, CursorGothic at weight 400 with negative tracking, and JetBrains Mono on roughly half the page.
AI 优先的代码编辑器，官网却不用常见的 IDE 暗色氛围，走编辑部式的安静：暖奶油画布（#f7f7f4）、暖调近黑墨色（#26251e）、唯一且克制的 Cursor Orange（#f54e00）只给主按钮和 wordmark，CursorGothic 以 400 字重加负字距呈现杂志感，JetBrains Mono 铺满约半个页面的代码表面。
Expo Expo（React Native 平台） Developer Tools & IDEs
A React Native platform with an editorial pure-white canvas, near-black ink (#171717), and a pure-black (#000000) pill as the only CTA color; a soft sky-blue gradient (#cfe7ff → #a8c8e8) washes the device-mockup hero, with Inter at weight 600 and JetBrains Mono on every code surface.
React Native 开发平台，官网走编辑部式的纯白路线：纯白画布、近黑墨色（#171717），唯一的品牌电压是纯黑（#000000）胶囊按钮；hero 区衬着天蓝渐变（#cfe7ff → #a8c8e8）和设备样机，Inter 600 字重配 JetBrains Mono 代码表面。
Lovable Lovable（AI 应用构建） Developer Tools & IDEs
An AI app-builder with analog warmth: a parchment-cream canvas (#f7f4ed), charcoal ink (#1c1c1c) from which every gray is derived at 3-83% opacity, and the humanist Camera Plain Variable at weight 600 with -1.5px tracking for headlines. Dark buttons carry a signature multi-layer inset shadow.
AI 应用构建工具，官网有一种近似纸张的温润：羊皮纸奶油画布（#f7f4ed）、炭黑墨色（#1c1c1c）—— 页面所有灰色都由这同一只墨色按 3–83% 不透明度调出 —— 配人文感十足的 Camera Plain Variable，标题 600 字重加 -1.5px 字距。深色按钮带标志性的多层内阴影。
Raycast Raycast（启动器） Developer Tools & IDEs
A launcher whose marketing page is one continuous dark mode — near-black canvas (#07080a), hairline 1px borders (#242728), a pure-white (#ffffff) CTA pill as the only action color, and Inter with the ss03 stylistic set enabled site-wide. A red diagonal-stripe gradient (#ff5757 → #a1131a) crowns the hero once per page.
这款启动器的官网就是一整张连续暗色模式的产品截图：近黑画布（#07080a）、1px 发丝边框（#242728）、唯一的行动色是纯白（#ffffff）胶囊按钮，Inter 全站开启 ss03 风格集。红色斜纹渐变（#ff5757 → #a1131a）每页只在 hero 顶部出现一次。
Superhuman Superhuman（极速邮箱） Developer Tools & IDEs
A fast-email brand that reads like a high-end newsletter: an editorial dark hero in deep indigo navy (#1b1938) with a violet-sky backdrop and half-bleed portrait, a quiet white body set in warm grey ink (#292827), and a deep-teal (#0e3030) closing CTA band on every page — all in the proprietary Super Sans VF at sub-default weights.
高速邮箱品牌，官网读起来像一份高端通讯刊物：深靛蓝（#1b1938）的编辑部式暗色 hero 配紫罗兰天空背景和半出血人像，正文是安静的白色页面加暖灰墨色（#292827），每页收尾都是深青（#0e3030）CTA 横带 —— 全站用自家 Super Sans VF，字重是少见的 460/540 中间档。
Vercel Vercel（前端部署平台） Developer Tools & IDEs
The developer-platform benchmark for stark minimalism: a near-white canvas (#fafafa), one ink near-black (#171717) carrying every CTA and headline, Geist at weight 600 with aggressive -2.4px tracking, and Geist Mono for technical labels. A multi-color mesh gradient at hero scale is the entire decoration system.
开发者平台里极简主义的基准：近白画布（#fafafa），一只近黑墨色（#171717）包揽所有按钮和标题，Geist 600 字重配 -2.4px 激进负字距，技术标签用 Geist Mono。hero 尺度的多彩网格渐变就是全部装饰系统。
Warp Warp（AI 终端） Developer Tools & IDEs
A terminal brand that treats restraint as identity: a warm near-charcoal canvas (#2b2622) with no chromatic accent at all — off-white #f7f5f0 doubles as default text and primary-button fill. Inter at weight 400 with tight -1.6px tracking does the talking; DM Mono terminal mockups are the only decoration.
把克制当作身份的终端品牌：暖调近炭黑画布（#2b2622），完全没有彩色强调 —— 米白 #f7f5f0 同时充当正文与主按钮填充色。Inter 以 400 字重配 -1.6px 紧字距完成表达；DM Mono 终端截图是唯一的装饰。
ClickHouse ClickHouse（列式数据库） Backend, Database & DevOps
The highest-contrast identity in the database category: a near-pure black canvas (#0a0a0a) with one electric yellow (#faff69) carrying every CTA, stat number, and full-bleed CTA band. Inter at weight 700 with negative tracking and JetBrains Mono code windows complete the engineering-grade look.
数据库品类里对比度最高的身份：近纯黑画布（#0a0a0a）上，唯一的电光黄（#faff69）承担所有 CTA、统计数字和整幅黄色横幅。Inter 以 700 字重配负字距，加上 JetBrains Mono 代码窗口，补全工程质感。
Composio Composio（AI 工具集成） Backend, Database & DevOps
Developer-infrastructure dark mode: a near-black canvas (#0f0f0f), a single deep electric blue (#0007cd) for CTAs and the radial spotlight glow behind the hero, and abcDiatype at weight 500 throughout. The brand signature is a 2×2 terminal-mockup grid glowing blue at its center.
开发者基础设施式暗色：近黑画布（#0f0f0f），唯一的深电蓝（#0007cd）留给 CTA 和首屏背后的径向聚光光晕，abcDiatype 全程 500 字重。品牌签名是一块 2×2 终端模拟网格，中央透出蓝色辉光。
HashiCorp HashiCorp（基础设施软件） Backend, Database & DevOps
Multi-product enterprise infrastructure on a pure-black canvas (#000000): monochrome chrome — white CTAs, charcoal cards (#15181e) — held together by per-product identity colors like Terraform purple (#7b42bc) and Vault yellow (#ffcf25). hashicorpSans pairs tight 1.17 display leading with relaxed 1.50+ body leading.
纯黑画布（#000000）上的多产品企业基础设施：单色铬件 —— 白色 CTA、炭灰卡片（#15181e）—— 靠每款产品专属的身份色维系，如 Terraform 紫（#7b42bc）、Vault 黄（#ffcf25）。hashicorpSans 用 1.17 的紧凑标题行高对比 1.50 以上的宽松正文行高。
MongoDB MongoDB（文档数据库） Backend, Database & DevOps
A dual-mode identity: deep-teal hero bands (#001e2b) topped with bright green pill CTAs (#00ed64) over stark white content surfaces. Euclid Circular A carries every text role; fully-rounded pill buttons and 12px cards keep the enterprise database feeling approachable.
双模式身份：深青灰首屏横幅（#001e2b）压着亮绿色胶囊 CTA（#00ed64），内容区则是纯粹的白色表面。Euclid Circular A 承担所有文字角色；全圆角胶囊按钮和 12px 卡片让企业级数据库显得平易近人。
PostHog PostHog（产品分析） Backend, Database & DevOps
A product-analytics platform styled as a friendly engineering sketchbook: a warm cream canvas (#eeefe9) end to end, olive ink (#23251d headlines, #4d4f46 body), one yellow-orange CTA pill (#f7a501), and hand-drawn hedgehog mascots as the entire decorative system. IBM Plex Sans Variable runs every text role.
把产品分析平台画成一本友好的工程速写本：暖奶油色画布（#eeefe9）一铺到底，橄榄色墨色（标题 #23251d、正文 #4d4f46），唯一的橙黄 CTA 胶囊（#f7a501），手绘刺猬吉祥物构成全部装饰系统。IBM Plex Sans Variable 贯穿每个文字角色。
Sanity Sanity（无头 CMS） Backend, Database & DevOps
A nocturnal command center for structured content: a near-black canvas (#0b0b0b) as the default state rather than a dark mode, a coral-red CTA (#f36458) as the only warm note, and every hover flipping to electric blue (#0052ef). Custom waldenburgNormal display type with extreme negative tracking pairs with IBM Plex Mono technical labels.
为结构化内容打造的「夜间指挥中心」：近黑画布（#0b0b0b）是默认状态而非暗色模式，珊瑚红 CTA（#f36458）是唯一的暖色，所有悬停统一切换为电光蓝（#0052ef）。定制字体 waldenburgNormal 以极端负字距排标题，IBM Plex Mono 负责代码与技术标签。
Sentry Sentry（错误监控） Backend, Database & DevOps
A debugging console in a leather jacket: a deep violet-midnight canvas (#1f1633) with starfield texture and floating sticker mascots, electric lime (#c2ef4e) wrapped around single headline keywords like syntax highlighting. Rubik carries all UI copy, Monaco handles code, and buttons run uppercase at 14px/700 with 0.2px tracking.
像穿了皮夹克的调试控制台：深紫午夜画布（#1f1633）上撒着星空纹理和漂浮的贴纸风吉祥物，电光青柠色（#c2ef4e）以语法高亮的方式包住标题里的单个关键词。Rubik 承担全部界面文字，Monaco 负责代码，按钮一律 14px/700 大写加 0.2px 字距。
Supabase Supabase（开源数据库平台） Backend, Database & DevOps
Quietly technical open-source database branding: a pure white canvas (#ffffff) with near-black ink (#171717), where the emerald CTA (#3ecf8e) is the only chromatic event — set with near-black text on the green, not white. Circular at weight 500 with tight negative tracking carries the entire hierarchy.
安静的技术气质：纯白画布（#ffffff）配近黑墨色（#171717），全站唯一的色彩事件是祖母绿 CTA（#3ecf8e）—— 而且绿色上用近黑文字而非白色。Circular 以 500 字重加收紧的负字距撑起整个字体层级。
Cal.com Cal.com（日程预约） Productivity & SaaS
Clean, friendly modern SaaS for scheduling: a white canvas (#ffffff) with near-black primary buttons (#111111), custom Cal Sans display type at weight 600 with negative tracking, and Inter for everything else. Light-gray cards (#f5f5f5) embed real product UI fragments, and a dark footer (#101010) closes every long-scroll page.
干净友好的现代 SaaS：纯白画布（#ffffff）配近黑主按钮（#111111），定制几何字体 Cal Sans 以 600 字重加负字距统领标题，Inter 负责其余一切。浅灰卡片（#f5f5f5）里直接嵌入真实产品界面碎片，深黑页脚（#101010）为每个长滚动页面收尾。
Intercom Intercom（客服平台） Productivity & SaaS
An editorial, product-led canvas: warm cream (#f5f1ec) instead of pure white, charcoal ink (#111111) carrying the hierarchy, and Fin Orange (#ff5600) reserved strictly for the Fin AI product CTA. Proprietary Saans at weight 500 with measured negative tracking sets everything from hero to button.
编辑级的、以产品为主角的画布：暖奶油白底（#f5f1ec）而非纯白，炭黑墨色（#111111）承担全部层级，Fin Orange（#ff5600）严格留给 Fin AI 的产品 CTA。专有字体 Saans 以 500 字重加克制的负字距，排从主标题到按钮的一切文字。
Linear Linear（项目管理） Productivity & SaaS
Engineering-tool precision: a near-black canvas (#010102) with a faint blue tint, hairline borders instead of shadows, and one lavender-blue accent (#5e6ad2) reserved for primary actions. The interface feels like a well-lit instrument panel.
工程工具的精密感：近黑画布（#010102）带一丝蓝调，发丝边框代替阴影，唯一的薰衣草蓝（#5e6ad2）留给主操作。整个界面像一块照明良好的仪表盘。
Mintlify Mintlify（文档平台） Productivity & SaaS
Docs infrastructure with a split personality: atmospheric sky-gradient heroes (#87a8c8 to cream #f5e9d8) over a flat white canvas (#ffffff), black pill CTAs, and a signature mint green (#00d4a4) rationed to accent actions. Inter for prose, Geist Mono for code.
文档基础设施的双面性格：天蓝到米白的大气渐变 hero（#87a8c8 → #f5e9d8）铺在平坦的白色画布（#ffffff）上，黑色胶囊 CTA 主导营销流程，标志性薄荷绿（#00d4a4）只留给强调操作。正文用 Inter，代码用 Geist Mono。
Notion Notion（一体化工作区） Productivity & SaaS
The all-in-one workspace sold in an illustration-rich voice: a deep navy hero (#0a1530) scattered with sticky-note dots, a signature purple CTA (#5645d4), and pastel feature cards that echo the product's database property colors. Notion Sans (Inter-based) across every surface.
用插画感嗓音售卖的一体化工作区：深海军蓝 hero（#0a1530）散落便利贴圆点，标志性紫色 CTA（#5645d4），以及呼应产品数据库颜色的粉彩功能卡片。全站只用 Notion Sans（基于 Inter）。
Resend Resend（邮件 API） Productivity & SaaS
A developer tool with magazine typography: true black canvas (#000000), off-white ink (#fcfdff), and 96px Domaine Display serif headlines. Depth comes from translucent-white hairlines and low-opacity color glows, never from drop shadows.
长着杂志排版脸的开发者工具：纯黑画布（#000000）、米白墨色（#fcfdff）、96px Domaine Display 衬线大标题。纵深来自半透明白发丝线和低透明度彩色辉光，从不用投影。
Slack Slack（团队沟通） Productivity & SaaS
Workplace messaging built on chromatic monotheism: one deep aubergine (#4a154b) covers CTAs, the footer band, and the featured pricing tier, staged against cream-lavender hero canvases (#f4ede4 / #f9f0ff) with pastel-mesh gradients. Over-padded pill buttons and blue inline links (#1264a3) complete the voice.
建立在色彩单一神教上的职场通讯工具：唯一的深茄子紫（#4a154b）覆盖 CTA、页脚横幅和推荐价格档，背景是奶油-薰衣草色 hero 画布（#f4ede4 / #f9f0ff）配粉彩网格渐变。过度加宽的胶囊按钮和蓝色正文链接（#1264a3）补全了品牌嗓音。
Zapier Zapier（自动化工作流） Productivity & SaaS
Workflow automation at a warm temperature: cream canvas (#fffefb), deep coffee ink (#201515), and a single saturated orange CTA (#ff4f00). Degular Display carries hero headlines at weight 500; Inter does everything else.
温度偏暖的自动化工作流平台：奶油画布（#fffefb）、深咖啡墨色（#201515）、唯一的饱和橙 CTA（#ff4f00）。hero 标题交给 500 字重的 Degular Display，其余全部用 Inter。
Airtable Airtable（智能表格） Design & Creative Tools
Quietly editorial workflow software: white canvas, near-black ink (#181d26), a near-black primary CTA, and generous 96px whitespace — until full-bleed signature cards in coral (#aa2d00), forest green (#0a2e0e), and dark navy punctuate the scroll. Haas Grotesk never goes bolder than 500.
安静编辑风的工作流软件：白色画布、近黑墨色（#181d26）、近黑主 CTA 和慷慨的 96px 留白 —— 直到珊瑚红（#aa2d00）、森林绿（#0a2e0e）、深海军蓝的满幅签名卡片打断滚动。Haas Grotesk 字重从不超过 500。
Clay Clay（GTM 数据平台） Design & Creative Tools
The most playful B2B SaaS identity in its category: a cream-tinted canvas (#fffaf0), near-black ink and CTAs (#0a0a0a), and the rounded custom display face Plain Black at weight 500 with negative tracking. Brand voltage comes from 3D claymation illustrations and saturated single-color feature cards — hot pink #ff4d8b, deep teal #1a3a3a, lavender, peach, ochre.
同类 B2B SaaS 里最会玩的设计：奶油色画布（#fffaf0）配近黑墨色与 CTA（#0a0a0a），定制圆体 Plain Black 以 500 字重负字距排大标题。品牌电压全靠 3D 黏土动画插画和高饱和纯色功能卡片 —— 热粉 #ff4d8b、深青 #1a3a3a、薰衣草、蜜桃、赭黄。
Figma Figma（界面设计工具） Design & Creative Tools
An editor-clean monochrome frame — pure white canvas, pure black (#000000) ink and pill CTAs, figmaSans variable type at fine-grained weights with aggressive negative tracking — interrupted by oversized pastel color-block sections (lime #dceeb1, lilac #c5b0f4, navy #1f1d3d) that carry the storytelling like giant sticky notes on a clean desk.
编辑级黑白框架里的彩色便签：纯白画布、纯黑（#000000）墨色与胶囊 CTA、figmaSans 可变字体细粒度字重加激进负字距，叙事段落则整版落入粉彩色块（柠檬绿 #dceeb1、淡紫 #c5b0f4、藏青 #1f1d3d），像干净桌面上贴开的巨大便利贴。
Framer Framer（网站构建工具） Design & Creative Tools
A dark artboard identity: near-black canvas (#090909), white GT Walsheim Medium display type pushed to extreme negative tracking (-5.5px at 110px), white pill CTAs, and a single chromatic accent in sky blue #0099ff reserved for links and focus. Vibrant gradient spotlight cards (violet #6a4cf5, magenta #d44df0) break the monochrome grid as living showcase tiles.
把页面当黑色画板的品牌：近黑画布（#090909）上排 GT Walsheim Medium 白色超大标题，负字距拉到极端（110px 时 -5.5px），白色胶囊 CTA，唯一的彩色是天蓝 #0099ff，只给链接和焦点态。鲜艳的渐变聚光卡片（紫罗兰 #6a4cf5、洋红 #d44df0）像活的作品展示砖，打破单色网格。
Miro Miro（在线白板） Design & Creative Tools
The whiteboard made brand: a stark white canvas anchored by a canary-yellow wordmark (#ffd02f), black-pill primary CTAs (#1c1c1e), and Roobert PRO across every size from 80px hero to 11px micro labels. Pastel feature cards echo the product's sticky-note palette, and real Miro-board mockups do the illustrating.
把白板做成品牌：纯白画布左上角一枚金丝雀黄字标（#ffd02f），黑色胶囊主按钮（#1c1c1e）统领转化，Roobert PRO 从 80px 主标题一路排到 11px 微型标签。粉彩功能卡片直接借用白板里便利贴的配色，插图全用真实的 Miro 画板 mockup。
Webflow Webflow（可视化网页开发平台） Design & Creative Tools
A confident professional-tool identity: generous white canvas, near-black #080808 CTAs and ink, and the proprietary WF Visual Sans family capped at weight 600 with tight tracking. The signature is a five-stop chromatic palette (purple #7a3dff, pink #ed52cb, blue #3b89ff, orange #ff6b00, green #00d722) used only as full-fill category cards, never on buttons.
专业工具而非创业公司的气质：宽裕的白色画布，近黑 #080808 的 CTA 与墨色，专有字体 WF Visual Sans 字重封顶 600、字距收紧。签名是一套五色分类色板（紫 #7a3dff、粉 #ed52cb、蓝 #3b89ff、橙 #ff6b00、绿 #00d722），只做整卡填充，绝不上按钮。
Binance 币安（Binance） Fintech & Crypto
A trading platform that runs on one color: Binance Yellow #fcd535 carries every primary CTA, value-claim headline, and the wordmark over a deep near-black canvas (#0b0e11), with BinanceNova for copy and BinancePlex for every number. Transactional pages flip to a light theme; trading green #0ecb81 and red #f6465d mark price direction in both.
靠一种颜色运转的交易平台：币安黄 #fcd535 在深近黑画布（#0b0e11）上统领所有主 CTA、价值宣言标题和字标，文案用 BinanceNova、数字一律用 BinancePlex。交易型页面翻转为浅色主题；涨绿 #0ecb81 与跌红 #f6465d 在两种模式下都只做价格方向标记。
Coinbase Coinbase（加密货币交易所） Fintech & Crypto
An institutional-grade crypto exchange that reads like a quiet financial-services brand: pure white canvas, a single brand voltage of Coinbase Blue (#0052ff) reserved for CTAs and the wordmark, and Coinbase Display headlines held at weight 400. Full-bleed near-black editorial heroes (#0a0b0d) with floating product-UI mockups supply the page rhythm.
机构级加密货币交易所，读起来像一家安静的金融品牌：纯白画布上只有一种品牌电压 Coinbase Blue（#0052ff），只给主按钮、标志和行内链接；Coinbase Display 标题保持 400 字重，全出血近黑编辑英雄区（#0a0b0d）承托产品界面模型卡，构成页面节奏。
Kraken Kraken（加密货币交易所） Fintech & Crypto
A clean, trustworthy exchange on white surfaces with Kraken Purple (#7132f5) as the commanding brand color and darker purples (#5741d8, #5b1ecf) as its only depth scale. Kraken-Brand headlines at weight 700 with negative tracking sit above whisper-level shadows and buttons rounded at exactly 12px.
干净可信的交易所气质：白色表面上用 Kraken Purple（#7132f5）统领，深紫变体（#5741d8、#5b1ecf）构成唯一的紫色阶梯；Kraken-Brand 标题用 700 字重加负字距，按钮圆角精确停在 12px，阴影轻如耳语。
Mastercard Mastercard（万事达卡） Fintech & Crypto
A warm editorial magazine for a payments network: a putty-cream canvas (#F3F0EE) instead of white, oversized radii (20px buttons, 40px stadium heroes, 999px pills, full-circle portraits), and everything set in the proprietary MarkForMC geometric sans. Ink-black (#141413) pill CTAs and hand-drawn orange orbital arcs (#F37338) carry the identity; the famous brand red and yellow never leave the logo.
把支付网络做成了一本暖调纸感杂志：奶油画布（#F3F0EE）取代纯白，圆角只走极端（20px 按钮、40px 体育场形英雄区、999px 胶囊、正圆肖像），全文只用 MarkForMC 一族字体；墨黑（#141413）胶囊按钮与手绘感橙色轨道线（#F37338）承担识别，标志里的红黄两色从不进入界面。
Revolut Revolut（数字银行） Fintech & Crypto
A high-contrast two-mode system: true-black storytelling bands (#000000) slam against white catalogue bands, carrying oversized Aeonik Pro headlines (weight 500, up to 136px) over Inter body text. The cobalt violet accent (#494fdf) is reserved for featured plan cards — the loudest CTA on the page is a plain white pill on black.
高反差双模式系统：纯黑叙事条带（#000000）与白色目录条带整幅硬切，Aeonik Pro 超大标题（500 字重、最大 136px）配 Inter 正文；钴紫罗兰强调色（#494fdf）只盖在精选套餐卡上 —— 页面上最响亮的按钮其实是一枚黑底白胶囊。
Stripe Stripe（支付基础设施） Fintech & Crypto
The developer-finance look defined by its pastel gradient mesh washing across the upper third of every marketing page, a single indigo CTA pill (#533afd) per band, and Sohne set at weight 300 with negative tracking. Deep navy ink (#0d253d) and tabular tnum figures quietly signal financial infrastructure.
开发者金融的经典面孔：粉彩渐变网铺满每个营销页的上三分之一，每个区块只有一枚靛蓝实心胶囊按钮（#533afd），Sohne 字体全程 300 细字重加负字距；深海军蓝墨色（#0d253d）和 tnum 等宽数字悄悄亮明金融基础设施的身份。
Wise Wise（跨境汇款） Fintech & Crypto
A Scandinavian-magazine take on money transfer: a vivid lime-green CTA accent (#9fe870) on a sage-tinted canvas (#e8ebe6), unusually heavy Wise Sans headlines at weight 900 (up to 126px), and soft 24px-radius cards and buttons with not a single drop shadow.
把跨境汇款做成了北欧杂志：青柠绿按钮（#9fe870）落在灰绿画布（#e8ebe6）上，Wise Sans 用少见的 900 字重撑到 126px，卡片和按钮统一 24px 圆角，全站没有一处投影。
Airbnb 爱彼迎（Airbnb） E-commerce & Retail
The warm, photography-led marketplace: a pure white canvas (#ffffff), one voltage of Rausch coral (#ff385c) for every primary CTA and the search orb, and Airbnb Cereal VF at modest weights. The shape language is all pills and soft 8–14px radii — the decoration budget goes to listing photography, not UI chrome.
以摄影为主导的温暖市集风格：纯白画布（#ffffff），唯一的高电压 Rausch 珊瑚红（#ff385c）统领所有主按钮和搜索圆钮，Airbnb Cereal VF 字体用克制的字重。形状语言全是胶囊和 8–14px 的柔和圆角 —— 装饰预算花在房源摄影上，而不是界面铬件。
Meta Store Meta Store（Meta 硬件商店） E-commerce & Retail
Hardware merchandising with a split CTA personality: black pills (#000000) on marketing pages, cobalt blue (#0064e0) reserved for buy-now flows. A stark white canvas (#ffffff) carries full-bleed product photography in 32px-rounded frames, all set in Optimistic VF with its ss01/ss02 stylistic sets always on.
具有双重按钮性格的硬件电商：营销页用黑色胶囊按钮（#000000），钴蓝（#0064e0）只留给购买流程。纯白画布（#ffffff）承载装进 32px 圆角画框的全幅产品摄影，全站用 Optimistic VF 字体，ss01/ss02 风格集始终开启。
Nike 耐克（Nike） E-commerce & Retail
Athletic editorial retail: towering 96px uppercase Nike Futura ND burned into full-bleed campaign photography, above a near-monochrome chrome of Nike Black (#111111) pill CTAs, Soft Cloud (#f5f5f5) product stages, and Helvetica Now — with sale red (#d30005) as the only chromatic signal.
运动杂志式零售：96px 全大写 Nike Futura ND 直接烧进全幅广告大片，下方是近单色的界面 —— Nike Black（#111111）胶囊按钮、Soft Cloud（#f5f5f5）产品摄影底和 Helvetica Now 字体，促销红（#d30005）是唯一的彩色信号。
Shopify Shopify（电商平台） E-commerce & Retail
A two-polarity commerce brand: cinematic black (#000000) marketing pages with giant Neue Haas Grotesk display type at weight 330, flipping to cream-white (#fbfbf5) transactional pages with aloe (#c1fbd4) and pistachio (#d4f9e0) mint accents. Pill buttons and Inter body text unify both tracks.
双极性电商品牌：电影感的纯黑（#000000）营销页配 330 细字重的巨型 Neue Haas Grotesk 展示字体，翻到奶白（#fbfbf5）交易页则启用 aloe（#c1fbd4）和 pistachio（#d4f9e0）薄荷绿点缀。两条轨道共用胶囊按钮和 Inter 正文字体。
Starbucks 星巴克（Starbucks） E-commerce & Retail
A warm retail flagship wearing the storefront apron green: a café-cream canvas (#f2f0eb), a four-tier green system led by Starbucks Green (#006241) headings and Green Accent (#00754a) pill CTAs, and proprietary SoDoSans with tight -0.01em tracking. Gold (#cba258) appears only around Rewards ceremony.
穿着门店围裙绿的温暖零售旗舰：咖啡馆奶油色画布（#f2f0eb），四层绿色体系由 Starbucks Green（#006241）标题和 Green Accent（#00754a）胶囊按钮领衔，专属字体 SoDoSans 配 -0.01em 紧字距。金色（#cba258）只出现在 Rewards 会员仪式时刻。
Apple 苹果（Apple） Media & Consumer Tech
The reference for premium minimal e-commerce: vast white space, one near-black ink (#1d1d1f), a single Action Blue (#0066cc) for every interactive element, and SF Pro with signature tight tracking. Product photography does the decoration; UI chrome nearly disappears.
高端极简电商的参考答案：大面积留白、一种近黑墨色（#1d1d1f）、唯一的行动蓝（#0066cc）统领所有可交互元素，SF Pro 字体配标志性紧字距。装饰预算全部花在产品摄影上，界面铬件几乎隐形。
HP 惠普（HP） Media & Consumer Tech
An enterprise-grade consumer catalog: pure white canvas, one HP Electric Blue (#024ad8) as the lone CTA and link color, near-black ink (#1a1a1a), and bespoke Forma DJR Micro at weight 500 for every headline. Angular blue chevrons echo the wordmark's slashes around hero photography.
企业级消费电子目录的气质：纯白画布上，唯一的电光蓝（#024ad8）统领 CTA 和链接，近黑墨色（#1a1a1a）承担全部文字，定制几何无衬线 Forma DJR Micro 以 500 字重排每一个标题。锐利的蓝色人字形装饰呼应 HP 字标的两道斜杠。
IBM IBM（国际商业机器） Media & Consumer Tech
Carbon Design System as marketing chrome: pure white surfaces, charcoal ink (#161616), a single IBM Blue accent (#0f62fe), and a deliberately flat 0px-square aesthetic. IBM Plex Sans at weight 300 carries 42–76px headlines — the brand's quiet-authority signature.
Carbon 设计系统的营销页范本：纯白表面、炭黑墨色（#161616）、唯一的 IBM 蓝（#0f62fe）做强调色，所有元素坚持 0px 直角。IBM Plex Sans 以 300 轻字重排 42–76px 大标题，是品牌「安静的权威感」签名。
NVIDIA 英伟达（NVIDIA） Media & Consumer Tech
Engineering documentation that learned graphic design: a paper-white body grid framed by pure-black hero and footer chapters (#000000), with one almost violently saturated NVIDIA Green (#76b900) carrying every CTA. Everything is angular at 2px radius in the proprietary NVIDIA-EMEA sans.
学会了平面设计的工程文档：纸白正文网格夹在纯黑的 hero 与页脚章节（#000000）之间，唯一近乎刺眼高饱和的 NVIDIA 绿（#76b900）承担所有 CTA。一切元素 2px 圆角，专属字体 NVIDIA-EMEA 只有 400 和 700 两个字重。
Pinterest Pinterest（图片灵感社区） Media & Consumer Tech
Photography-first discovery: warm-cream chrome (#f6f6f3) that recedes behind imagery, one saturated Pinterest Red (#e60023) reserved for the Sign-up CTA, and proprietary Pin Sans with -1.2px-tracked 70px headlines. The product surface is a masonry grid of 16px-radius pin cards on 8px gutters.
摄影优先的发现引擎：暖奶油色铬件（#f6f6f3）退居图片之后，唯一饱和的 Pinterest 红（#e60023）留给注册 CTA，专属字体 Pin Sans 以 -1.2px 字距排出 70px 大标题。产品本体是 8px 窄缝、16px 圆角卡片组成的瀑布流网格。
PlayStation PlayStation（索尼游戏主机） Media & Consumer Tech
A console launch trailer in scrollable chapters: full-bleed bands alternating pure black (#000000), true white (#ffffff), and PlayStation Blue (#0070d1), with PlayStation SST display type at a signature light weight 300 and fully-rounded pill CTAs. Game key art and console renders occupy 60–90% of every section.
像主机发布预告片一样滚动的章节式页面：纯黑（#000000）、纯白（#ffffff）与 PlayStation 蓝（#0070d1）的全宽色带交替，PlayStation SST 以标志性的 300 轻字重排大标题，CTA 全是胶囊形。游戏主视觉和主机渲染图占每个段落的 60–90%。
SpaceX SpaceX（太空探索技术公司） Media & Consumer Tech
Austerity as brand: a pure-black canvas (#000000), full-bleed rocket photography and autoplaying launch video as the only decoration, and uppercase D-DIN-Bold headlines at 80px with +1.6px tracking. Each band gets one ghost-outlined pill CTA — there is no accent color at all.
以禁欲为品牌：纯黑画布（#000000）、全幅火箭摄影和自动播放的发射视频是仅有的装饰，大写 D-DIN-Bold 标题以 80px、+1.6px 字距排出。每个色带只有一枚描边胶囊 CTA —— 全站没有任何强调色。
Spotify Spotify（流媒体音乐） Media & Consumer Tech
A dark, immersive music player: near-black canvas (#121212) with charcoal surfaces stepped through #181818 and #1f1f1f, one functional Spotify Green (#1ed760) for play controls and active states, and compact SpotifyMixUI type based on Circular. Album art supplies all the color.
沉浸式深色音乐播放器：近黑画布（#121212），炭灰表面按 #181818、#1f1f1f 阶梯递进，唯一的功能性 Spotify 绿（#1ed760）留给播放控件与激活状态，字体是基于 Circular 定制的紧凑 SpotifyMixUI。所有色彩都交给专辑封面。
The Verge The Verge（科技媒体） Media & Consumer Tech
Developer console meets club night: a near-black canvas (#131313) with acid-mint (#3cffd0) and ultraviolet (#5200ff) used as hazard-tape accents, brutally heavy Manuka display headlines up to 107px, and saturated color-block story tiles stacked in a mono-timestamped StoryStream timeline.
开发者控制台撞上俱乐部之夜：近黑画布（#131313），酸性薄荷绿（#3cffd0）与紫外光紫（#5200ff）像危险警示带一样使用，Manuka 超粗展示标题最大到 107px，高饱和色块故事卡片堆叠在带 mono 大写时间戳的 StoryStream 时间线里。
Uber 优步（Uber） Media & Consumer Tech
A strict black-and-white duet: pure black (#000000) as the only conversion color on a white canvas (#ffffff), every interactive element rounded to a 999px pill, and UberMove headlines kept in sentence case. Editorial 4:3 illustrations of riders and drivers are the only decoration.
严格的黑白二重奏：纯黑（#000000）是白色画布（#ffffff）上唯一的转化色，每个可交互元素统一为 999px 胶囊，UberMove 标题一律句首大写。唯一的装饰是骑手与司机的 4:3 编辑插画。
Vodafone 沃达丰（Vodafone） Media & Consumer Tech
Telecom campaign-poster design: one Vodafone Red (#e60000) for every CTA and the speechmark logo orb, colossal 800-weight uppercase headlines (up to 144px) in the proprietary Vodafone display sans, and a strict ink (#25282b) hero → white content band rhythm over editorial photography.
电信运营商的竞选海报式设计：唯一的沃达丰红（#e60000）统领每个 CTA 与 speechmark 标志球，专有 Vodafone 展示字体以 800 字重大写标题（最大 144px）压场，页面按墨色（#25282b）首屏 → 白色内容带的节奏推进，衬以编辑级摄影。
WIRED WIRED（连线杂志） Media & Consumer Tech
A printed magazine ported to the web: strict black (#000000) on white (#ffffff) with no chromatic accent beyond the inline link blue (#057dbc), a tall narrow WiredDisplay serif for 64px cover headlines, BreveText serif body, Apercu sans metadata — and every button defiantly square.
把印刷杂志搬上网：严格的纯黑（#000000）对白底（#ffffff），除正文内链蓝（#057dbc）外没有任何彩色；高窄的 WiredDisplay 衬线字体承担 64px 封面标题，BreveText 衬线排正文，Apercu 无衬线管元信息 —— 每个按钮都固执地保持方形。
BMW 宝马（BMW） Automotive
Measured corporate-automotive design: a white canvas (#ffffff) broken by dark navy hero bands (#1a2129), one BMW corporate blue (#1c69d4) on every rectangular 0px-radius CTA, and BMW Type Next Latin pairing 700-weight display headlines against Light 300 body text.
克制的企业级汽车设计：白色画布（#ffffff）被深海军蓝首屏色带（#1a2129）打断，唯一的宝马企业蓝（#1c69d4）用在每个 0px 圆角矩形 CTA 上，BMW Type Next Latin 以 700 字重标题对比 Light 300 细体正文。
BMW M 宝马 M（BMW M） Automotive
Motorsport minimalism on a true-black canvas (#000000): white uppercase BMW Type Next Latin headlines at weight 700, hairline dividers, and full-bleed track photography doing all the decoration. The M tricolor stripe (#0066b1 → #1c69d4 → #e22718) appears only as a brand marker — never as a button fill or background.
赛车工程的极简主义：纯黑画布（#000000）上排布白色大写标题（BMW Type Next Latin，700 字重），发丝线分隔，全幅赛道摄影承担全部装饰。M 三色条纹（#0066b1 → #1c69d4 → #e22718）只作品牌标记 —— 从不用作按钮填充或背景。
Bugatti 布加迪（Bugatti） Automotive
The most austere site in luxury automotive: a pure-black canvas (#000000), white uppercase display type with 2–4px letter-spacing, and zero decoration — the only non-monochrome token anywhere is a rare ice-blue link (#c3d9f3). Three custom faces (Bugatti Display, serif Bugatti Text Regular, Bugatti Monospace) plus full-bleed photography do everything.
豪华汽车里最克制的界面：纯黑画布（#000000）、白色大写标题配 2–4px 字距，零装饰 —— 全站唯一的非黑白 token 是罕见的冰蓝链接（#c3d9f3）。三款定制字体（Bugatti Display、衬线的 Bugatti Text Regular、Bugatti Monospace）加上全幅摄影，就是全部。
Ferrari 法拉利（Ferrari） Automotive
Cinematic editorial luxury: a warm near-black canvas (#181818), pure-white FerrariSans display type at weight 500 with negative tracking, and one scarce accent — Rosso Corsa (#da291c) — reserved for primary CTAs, the Cavallino mark, and F1 race numbers. Full-bleed photography is the chrome.
电影级的编辑式豪华：微暖的近黑画布（#181818）、纯白 FerrariSans 标题（500 字重配负字距），以及唯一的稀缺强调色 Rosso Corsa（#da291c）—— 只给主按钮、跃马车标和 F1 车号。全幅摄影就是界面铬件。
Lamborghini 兰博基尼（Lamborghini） Automotive
Nocturnal theater: an uncompromising true-black canvas (#000000) where white LamboType headlines shout in uppercase at up to 120px, and a single accent — Lamborghini Gold (#FFC000) — ignites only on primary CTA buttons. Elevation comes from layering lighter grays over black, never from shadows.
夜间剧场：毫不妥协的纯黑画布（#000000），白色 LamboType 大写标题以最大 120px 喊出来，唯一的强调色兰博基尼金（#FFC000）只在主按钮上点燃。纵深感靠在黑色上叠更亮的灰色，从不用投影。
Renault 雷诺（Renault） Automotive
High-contrast mass-market catalogue: a white canvas for browsing that flips to full-bleed black (#000000) for storytelling bands, punctuated by a single Sunlight Yellow accent (#ffed00) on primary CTAs and "NEW" badges. Everything is set in Renault's proprietary NouvelR at weight 700 with a tight 0.95 line-height.
高对比的大众市场目录风：浏览用白色画布，讲故事时整幅切换为黑色（#000000）区块，再用唯一的日光黄（#ffed00）点缀主按钮和「NEW」徽章。全站只用雷诺自有的 NouvelR 字体，700 字重配 0.95 紧凑行高。
Tesla 特斯拉（Tesla） Automotive
Radical subtraction: a pure-white canvas (#FFFFFF), one chromatic color — Electric Blue (#3E6AE1) — spent only on primary CTAs, and full-viewport photography carrying all emotional weight. Universal Sans (Display + Text) at weights 400–500 keeps every screen quiet, with no shadows, gradients, or borders.
极致的减法：纯白画布（#FFFFFF），唯一的彩色电光蓝（#3E6AE1）只花在主按钮上，全视口摄影承担全部情绪重量。Universal Sans（Display + Text）只用 400–500 字重，没有阴影、渐变和边框，每屏都安静。
Dell (1996) 戴尔 1996 年版（Dell） Retro Web · 1990s
Catalog-era enterprise web preserved in amber: the entire page sits inside a literal 8px black frame (#000000), each product line gets a flat ribbon-card tint (sage #b3bd95, salmon #d77a7a, periwinkle #8c9ae0), Arial Black 900 display type tops Times New Roman body copy, and all decoration is hand-cut GIF stickers.
目录时代企业网页的活化石：整个页面套在一个 8px 纯黑相框（#000000）里，每条产品线配一个扁平色块丝带卡（灰绿 #b3bd95、鲑鱼粉 #d77a7a、长春花蓝 #8c9ae0），Arial Black 900 大标题压着 Times New Roman 正文，装饰全是手工剪切的 GIF 贴纸。
Nintendo.com (2001) 任天堂官网 2001 年版（Nintendo.com） Retro Web · 1990s
Y2K console-hardware chrome: the page is assembled from brushed-periwinkle (#7a8aba) beveled metal plates, a carbon-navy (#21242e) halftone-dotted command bar carries navigation, warm orange (#f68d1f) is rationed to wayfinding, and Arial Black hero wordmarks are outlined like game box art.
千禧年游戏机面板美学：整个页面由拉丝长春花蓝（#7a8aba）斜角金属板拼装而成，碳深蓝（#21242e）半调圆点纹理的指令栏承担导航，暖橙色（#f68d1f）只用于指路，Arial Black 大标题描边加硬阴影，像游戏盒封面。
Nothing matches. Try describing it differently — “the dots menu”, “mac window buttons”.没有匹配的词条。换个说法试试 ——「三个点的菜单」「Mac 窗口按钮」。