version: alpha name: Uber-Inspired-design-analysis description: An inspired interpretation of Uber's design language — a transportation-and-delivery super-app brand whose web surface is a black-and-white duet, framed by a custom geometric display sans, accented by a single signature pill shape (radius 999px) on every interactive element, and decorated only by editorial 4:3 illustrations of riders, drivers, and city objects.

colors: primary: "#000000" on-primary: "#ffffff" ink: "#000000" body: "#5e5e5e" mute: "#afafaf" hairline-mid: "#4b4b4b" canvas: "#ffffff" canvas-soft: "#efefef" canvas-softer: "#f3f3f3" surface-pressed: "#e2e2e2" link: "#0000ee" on-dark: "#ffffff" black-elevated: "#282828"

typography: display-xxl: fontFamily: UberMove, UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 52px fontWeight: 700 lineHeight: 64px display-xl: fontFamily: UberMove, UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 36px fontWeight: 700 lineHeight: 44px display-lg: fontFamily: UberMove, UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 32px fontWeight: 700 lineHeight: 40px display-md: fontFamily: UberMove, UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 24px fontWeight: 700 lineHeight: 32px display-sm: fontFamily: UberMove, UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 20px fontWeight: 700 lineHeight: 28px body-lg: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 500 lineHeight: 24px body-md: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-md-strong: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 20px body-sm: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 16px caption: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 20px button-large: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 500 lineHeight: 24px button-md: fontFamily: UberMoveText, system-ui, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 20px

rounded: none: 0px md: 8px lg: 12px xl: 16px pill: 999px pill-tab: 36px full: 9999px

spacing: xxs: 4px xs: 6px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px

components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" padding: "{spacing.lg} {spacing.3xl}" nav-link: textColor: "{colors.ink}" typography: "{typography.body-md-strong}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "{spacing.md} {spacing.md}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "{spacing.md} {spacing.md}" button-subtle: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "{spacing.md} {spacing.lg}" button-floating: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "{spacing.md}" button-large-rounded: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-large}" rounded: "{rounded.xl}" padding: "{spacing.lg} {spacing.xl}" button-tab-translucent: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" rounded: "{rounded.pill-tab}" text-input: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "{spacing.lg}" text-input-on-soft: backgroundColor: "{colors.canvas-softer}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "{spacing.lg}" card-content: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" card-elevated: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" card-soft-tinted: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" promo-card-illustrated: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" promo-card-on-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" request-form-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.lg}" request-form-input-row: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "{spacing.lg}" category-button: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.pill}" padding: "{spacing.sm} {spacing.lg}" faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" padding: "{spacing.lg} 0" app-download-pill: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.body-md-strong}" rounded: "{rounded.pill}" padding: "{spacing.md} {spacing.xl}" hero-band-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xxl}" padding: "{spacing.3xl} {spacing.3xl}" hero-band-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.display-xxl}" padding: "{spacing.3xl} {spacing.3xl}" showcase-image-card: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.display-xxl}" rounded: "{rounded.xl}" padding: "{spacing.3xl}" link-blue: textColor: "{colors.link}" typography: "{typography.body-md}" link-on-dark: textColor: "{colors.on-dark}" typography: "{typography.body-md}" link-mute: textColor: "{colors.hairline-mid}" typography: "{typography.body-md}" link-mute-soft: textColor: "{colors.mute}" typography: "{typography.body-md}" icon-button-circular: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" rounded: "{rounded.full}" footer: backgroundColor: "{colors.primary}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.3xl}"

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default tier card. Mirrors card-content chrome with canvas-soft surface and a faint border." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.surface-pressed}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" ex-pricing-tier-featured: description: "Featured tier — polarity-flipped to ink with white text." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" ex-product-selector: description: "Plan picker — re-purposed for the brand's Ride / Eats / Reserve tier picker. Uses category-button pills inside the frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.none}" padding: "{spacing.2xl}" ex-cart-drawer: description: "Subscription summary — line items per add-on (NOT a literal e-commerce cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" item-divider: "{colors.surface-pressed}" ex-app-shell-row: description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses body-sm-strong 500 weight; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.body-sm-strong}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.surface-pressed}" ex-auth-form-card: description: "Sign-in / sign-up card. Mirrors card-content chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" ex-modal-card: description: "Modal dialog surface — same chrome as card-content with Level 2 drop shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.2xl}" ex-empty-state-card: description: "Empty-state illustration frame. Generous padding on canvas-soft surface." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.xl}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — flat-cornered card-content chrome with Level 2 drop shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}"

概览

Uber 是一个出行与外卖的超级应用——网约车、美食外卖、货运，整个城市物流层——其品牌网页表面通过克制来传达这种规模感:没有第三种颜色，没有点缀色配色，没有与标题争夺注意力的插图。页面在结构上是一段黑白二重奏，其中黑色 {colors.primary} 是转化锚点(每个 CTA 胶囊、每个导航登录按钮、页脚填充色)，而 {colors.canvas} 白色承载着其余一切。唯一贯穿始终的装饰是一套编辑风格 4:3 插图——乘客、司机、停车场、高速上的汽车——在不向系统引入点缀色的前提下为营销内容提供实在的支撑。

字体是第二个决定性的声音。两款定制字体承载整个页面:UberMove 以 700 字重承担标题(32 – 52 px 的展示字号，行高紧凑至 1.22 – 1.25，从不调整字距);UberMoveText 以 400 / 500 字重承担正文、按钮和链接。两者搭配呈现出工程级的观感——没有斜体、没有装饰字重、没有字距的花样。标题使用句首大写;小标签仅在作为章节眉标("WHY BECOME")时使用全大写;按钮使用句首大写。

唯一的形状特征是胶囊形。每个交互元素都圆角化为 {rounded.pill} 999 px——主 CTA、次 CTA、灰色柔和胶囊、白色浮动胶囊、分类标签、应用下载徽标。卡片和表面使用 {rounded.xl} 16 px 圆角;较大的"Go Get 2026"年度展示卡片采用相同的 16 px 形状，只是尺寸更大。首屏约车表单上的标签切换采用偏离规范的 {rounded.pill-tab} 36 px——几乎还是胶囊，但有意做得比标准 999 px 胶囊更紧凑。

关键特征:

• 一个双色 CTA 层级:黑色 {colors.primary} 胶囊作为主要转化目标;白色 {colors.canvas} 胶囊(有时带有柔和投影)作为次要目标;柔和灰色 {colors.canvas-soft} 胶囊作为第三级或标签变体。
• 胶囊是唯一的形状标识——除了标签切换({rounded.pill-tab} 36 px)和较大的产品卡片({rounded.xl} 16 px)之外，每个交互元素都使用 {rounded.pill} 999 px。
• 每条标题都以 {typography.display-xl} / {typography.display-xxl} 700 字重的句首大写呈现;不使用全大写展示字。
• 编辑风格 4:3 插图(乘客 / 司机 / 汽车)是唯一一致的装饰系统;没有渐变、没有氛围背景、没有超出卡片轻微抬升以外的阴影。
• 一种标志性的交替色带节奏:白色功能卡片 → 黑色促销卡片(白字白 CTA)→ 白色功能卡片 → 黑色页脚。黑色色带并非仅出现在首屏;它们也作为促销横幅出现在页面中部。
• 一个标志性的首屏约车表单卡片:接送点输入 + 目的地输入 + 日期/时间标签 + 黑色"See prices"胶囊，全部堆叠在一个 {rounded.xl} 带阴影的卡片中。

配色

品牌与点缀

• 墨黑({colors.primary} — #000000):品牌唯一的转化色。每个主 CTA 胶囊、页脚填充、每个深色促销带、每个导航登录按钮。系统中没有次要点缀色。
• 按下表面({colors.surface-pressed} — #e2e2e2):白色胶囊的按下态填充色——一种柔和灰色，仅在激活 / 按下态下使用。
• 抬升黑({colors.black-elevated} — #282828):一种近黑色，用于半透明白色标签切换胶囊的 hover。记入系统色，因为它是品牌控件上反复出现的色彩。

表面

• 画布({colors.canvas} — #ffffff):默认页面背景。
• 柔和画布({colors.canvas-soft} — #efefef):用于分类标签、约车表单卡片内的表单输入行，以及柔和胶囊按钮的柔和灰色填充。
• 更柔画布({colors.canvas-softer} — #f3f3f3):在白色表面上用作嵌套输入填充的稍浅灰色。

文字

• 墨色({colors.ink} — #000000):浅色表面上的每个标题和正文段落。
• 正文({colors.body} — #5e5e5e):次要文字——说明文字、副标题、辅助文案。
• 中灰细线({colors.hairline-mid} — #4b4b4b):用于页脚列内的弱化链接文字以及面包屑式导航的中灰。
• 静音({colors.mute} — #afafaf):最低权重的文字——占位文字、细字脚注、低优先级元数据。
• 深底之上({colors.on-dark} — #ffffff):{colors.ink} 表面上的所有文字(页脚、深色促销带)。

语义

品牌在其公开营销表面不维护独立的错误 / 成功 / 警告配色。验证提示来自主黑色或品牌的编辑风格插图。#0000ee 链接色是系统唯一的彩色——它是浏览器默认的链接蓝，出现在法律 / 页脚文本中的内联链接上。

字体排版

字体族

两款定制字体承载整个系统:

1. 一款定制几何展示无衬线(提取为 UberMove),用于所有标题。仅使用 700 字重;不使用斜体;不调整字距。字号从 display-sm 20 px 到首屏上的 display-xxl 52 px。在展示字号下，行高收紧到 1.22 – 1.25，呈现出"浇注在页面上"的观感。
2. 一款定制正文无衬线(提取为 UberMoveText),用于正文、按钮、链接和小标题。400 和 500 是常用的字重组合。使用范围 12 – 18 px;约车表单标签最大 24 px。字距始终保持中性。

这两款字体共享家族 DNA 但角色从不重叠——展示字体从不承担正文段落;正文字体从不承担首屏标题。

层级

原则

• 句首大写是声音。 不使用全大写标题。小标签("WHY BECOME")是少数例外。
• 700 字重用于标题;500 字重用于按钮和强调。 不要把按钮标签提到 700。
• 没有字距花样。 展示字体从不调整字距，无论正负。
• 两款字体，两个角色。 UberMove 用于展示;UberMoveText 用于其他一切。绝不混用。

字体替代品说明

两款字体均为专有字体。开源替代品:

• 展示无衬线——开启 font-feature-settings: "ss01" 的 Inter 700 字重最为接近。Geist 700 字重是次优选择。
• 正文无衬线——Inter 400 / 500 字重匹配几何宽度和 x 高度。如果品牌希望弱化中性观感，Plus Jakarta Sans 是一个更柔和的替代。

布局

间距系统

• 基础单位:4 px。大多数采集到的值是 4 的倍数，在按钮内边距中有少量 6 px 的子倍数(10、14)。
• Token:{spacing.xxs} 4 px · {spacing.xs} 6 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px。
• 章节内边距:营销色带在紧凑型页面上使用 {spacing.3xl} 32 px 的上 / 下内边距，首屏色带使用 {spacing.3xl} {spacing.3xl};促销卡片内缩 {spacing.2xl} 24 px。
• 卡片内部内边距:内容卡片使用 {spacing.2xl} 24 px;约车表单使用 {spacing.lg} 16 px 以保持紧凑。
• 内联间距:按钮行、分类标签行、应用商店胶囊行在兄弟元素之间使用 {spacing.md} 12 px。

网格与容器

• 最大宽度:约 1200 px 容器;桌面端居中，水平内边距 {spacing.3xl} 32 px;移动端 {spacing.lg} 16 px。
• 栏模式:
  • 促销卡片行:桌面端 2 栏(图左 + 文右，两侧交替)，移动端 1 栏。
  • 分类标签:水平 flex，带换行。
  • FAQ 行:全宽单栏。
  • 应用下载胶囊:桌面端 2 栏(乘客 + 司机)，移动端 1 栏。

留白理念

卡片与卡片之间的间距承载节奏——两个堆叠的促销卡片之间约有完整 {spacing.3xl} 32 px 的间距;卡片内部标题 / 段落 / CTA 的堆叠是紧凑的(兄弟元素之间 {spacing.sm} 8 px)。黑色促销带和页脚没有内部细线——内容在纯墨色上以白色文字呈现。

响应式策略

断点

触控目标

胶囊形 button-primary 高度约 44 px(10 px 垂直内边距 + 24 px 标签行高);较大的 button-large-rounded 约 56 px。在所有断点均满足 WCAG AAA。分类标签通过在触摸视图上增加内边距膨胀到 ≥ 44 px 高。

折叠策略

• 导航:桌面端为完整链接行 + 帮助 / 登录 / 注册胶囊。移动端折叠为 logo + 汉堡菜单;菜单以全屏覆盖呈现，相同的链接列表堆叠。
• 约车表单卡片:桌面端时，表单位于最大 490 px 的 {rounded.xl} 阴影卡片中。移动端时，变为全宽边缘对齐。
• 促销卡片:桌面端时，图左 + 文右(或交替)。移动端时，图像始终在内容上方。
• 年度展示卡片:从桌面端的 2:3 框缩放到移动端的 4:3;日期文字按比例缩放。

图像行为

• 编辑风格插图:4:3 或 16:9 硬边矩形;从不裁剪为圆形，从不倾斜。保持宽高比。
• 摄影作品:相同——正方形或横向;嵌入 {rounded.xl} 卡片外壳中。
• 约车流程中的地图:在卡片内全屏出血;圆角跟随父卡片。
• Logo 条:SVG 矢量，单色，高度一致。

层次与深度

装饰性深度

• 黑色色带作为极性翻转的深度:品牌使用纯黑 {colors.primary} 的中部色带打破白底白字的节奏。极性切换本身就是深度提示。
• 编辑风格插图作为卡片内深度:每个促销卡片都有单个 4:3 插图作为其左或右栏。插图的视觉重量是卡片抬升读数的一部分。
• 胶囊几何作为微观深度:{rounded.pill} 999 px 在不同按钮高度上的应用创建了一组嵌套胶囊，呈现出视觉层次。

形状

圆角刻度

摄影几何

• 编辑风格插图:促销卡片内为 4:3 横向;全宽展示框为 16:9。
• 司机 / 乘客肖像:4:5 竖向裁剪;由 {rounded.xl} 16 px 卡片外壳框定。
• 年度展示图像:桌面端为 2:3 竖向，移动端缩放为 4:3。图像填满卡片;标题叠加在底部。
• Logo 条:单色 SVG 矢量，高度一致约 24 px。
• 头像(使用时):正方形或 {rounded.full} 圆形，绝不使用 {rounded.lg} 圆角方形。

组件

按钮

button-primary——标准的黑色胶囊,品牌的转化目标。

• 背景 {colors.primary},文字 {colors.on-primary},标签使用 {typography.button-md},内边距 {spacing.md} {spacing.md},形状 {rounded.pill} 999 px。

button-secondary——与黑色主按钮配对的白色胶囊。

• 背景 {colors.canvas},文字 {colors.ink},与 button-primary 相同的标签和内边距,形状 {rounded.pill}。

button-subtle——卡片内用于三级动作的灰色次级胶囊(如"Learn more" / "Use Reserve")。

• 背景 {colors.canvas-soft}(#efefef),文字 {colors.ink},标签使用 {typography.button-md},内边距 {spacing.md} {spacing.lg},形状 {rounded.pill}。

button-floating——浮于深色或摄影表面之上的、带轻微投影的白色胶囊。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.md},形状 {rounded.pill}。使用 3 级胶囊浮动阴影。

button-large-rounded——约车流程中使用的大型黑色 CTA("Yes, help me")。

• 背景 {colors.primary},文字 {colors.on-primary},标签使用 {typography.button-large},内边距 {spacing.lg} {spacing.xl},形状 {rounded.xl} 16 px(不是胶囊——这是唯一打破胶囊规则的大型表单上下文中使用的黑色 CTA)。

button-tab-translucent——首屏约车表单上的标签切换(网约车 / 司机)。

• 背景 {colors.canvas},文字 {colors.ink},标签使用 {typography.body-md-strong},形状 {rounded.pill-tab} 36 px(偏离规范,有意做得比标准 999 px 胶囊更紧凑)。

卡片与容器

card-content——标准内容卡片。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.2xl},形状 {rounded.xl} 16 px。默认状态下无阴影。

card-elevated——带 1 级微妙投影的内容卡片。

• 背景 {colors.canvas},文字 {colors.ink},与 card-content 相同的内边距 + 形状。阴影为 1 级。

card-soft-tinted——作为页面子区域使用的灰色调卡片(如"Plan for later"横幅)。

• 背景 {colors.canvas-soft},文字 {colors.ink},内边距 {spacing.2xl},形状 {rounded.xl}。

promo-card-illustrated——插图在一侧、文字在另一侧的双栏促销卡片。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.2xl},形状 {rounded.xl}。标题使用 {typography.display-md} 或更大字号。

promo-card-on-dark——极性翻转的黑色促销卡片。

• 背景 {colors.ink},文字 {colors.on-dark},内边距 {spacing.2xl},形状 {rounded.xl}。用于"Drive with Uber"中段色带。

request-form-card——首屏约车表单外壳。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.lg},形状 {rounded.xl}。使用 2 级卡片投影。

request-form-input-row——约车表单卡片内的逐字段行。

• 背景 {colors.canvas-soft},文字 {colors.ink},内边距 {spacing.lg},形状 {rounded.md} 8 px。承载图标 + 标签 + 值。

showcase-image-card——巨大的"GO•GET 2026"年度展示卡片。

• 背景 {colors.ink},文字 {colors.on-dark} 叠加,内边距 {spacing.3xl},形状 {rounded.xl}。display-xxl 标题叠加在图像底部。

输入与表单

text-input——标准文本输入。

• 背景 {colors.canvas-soft},文字 {colors.ink},正文使用 {typography.body-md},内边距 {spacing.lg},形状 {rounded.md} 8 px。

text-input-on-soft——白色卡片上的嵌套输入(填充色稍浅)。

• 背景 {colors.canvas-softer},其他与 text-input 相同。

导航

nav-bar——固定顶部导航。

• 浅色页面上背景为 {colors.canvas},在罕见的深色页面(如 Uber Eats 首屏)上切换为 {colors.ink}。内边距 {spacing.lg} {spacing.3xl}。

nav-link——nav-bar 内的链接行。

• 文字 {colors.ink},使用 {typography.body-md-strong} 500 字重。

footer——深黑色页脚色带。

• 背景 {colors.primary}(品牌唯一的真实黑色表面),文字 {colors.on-dark},内边距 {spacing.3xl} {spacing.3xl}。正文使用 {typography.body-sm};列标题使用 {typography.body-md-strong}。

标志性组件

hero-band-light——带约车表单卡片的白色首屏。

• 背景 {colors.canvas},文字 {colors.ink},内边距 {spacing.3xl} {spacing.3xl}。左侧标题使用 {typography.display-xxl}(52 px / 700);右侧为 request-form-card。

hero-band-dark——罕见的黑色首屏(用于 Uber Eats 和 Driver 着陆页)。

• 背景 {colors.ink},文字 {colors.on-dark},内边距 {spacing.3xl} {spacing.3xl}。相同的 display-xxl 标题尺度;CTA 反转为 button-secondary 白色胶囊。

category-button——水平滚动的分类行("Reserve / Rentals / Teens / Group rides")。

• 背景 {colors.canvas-soft},文字 {colors.ink},标签使用 {typography.body-sm-strong},内边距 {spacing.sm} {spacing.lg},形状 {rounded.pill}。图标在标签之前。

faq-row——FAQ 折叠项。

• 背景 {colors.canvas},文字 {colors.ink},问题使用 {typography.body-md-strong},内边距 {spacing.lg} 0。无卡片外壳——行之间使用细线分隔。

app-download-pill——"Download the Rider app" / "Download the Driver app" 胶囊。

• 背景 {colors.ink},文字 {colors.on-dark},标签使用 {typography.body-md-strong},内边距 {spacing.md} {spacing.xl},形状 {rounded.pill}。

icon-button-circular——导航和约车表单卡片内使用的圆形图标容器。

• 背景 {colors.canvas-soft},深色图标,形状 {rounded.full}。无标签。

链接

link-blue——法律 / 页脚细字脚注内的系统默认浏览器蓝链接。

• 文字 {colors.link}(#0000ee),正文使用 {typography.body-md}。

link-on-dark——深色色带内的白色链接。

• 文字 {colors.on-dark},正文使用 {typography.body-md}。

link-mute——页脚列内的弱化灰色链接。

• 文字 {colors.hairline-mid},正文使用 {typography.body-md}。

link-mute-soft——最浅的灰色链接,用于深色表面上的低优先级次要文字。

• 文字 {colors.mute},正文使用 {typography.body-md}。

示例(说明性)

自动派生的工具镜像演示表面(scripts/derive-examples-block.mjs)。每个 ex-* 条目引用品牌原生基元,因此下游消费者(/preview-design、/generate-kit)以一致的方式重新设置相同的 10 个表面。TO_FILL 标记表示缺失的基元——在 LLM 判断步骤中解决。

ex-pricing-tier——默认价格层卡片。重用功能卡片外壳,使用品牌 canvas-soft 表面。

• 属性:backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured——特色 / 高亮价格层——极性翻转表面(亮模式下深色填充 + 浅色文字,暗模式下浅色填充 + 深色文字)。

• 属性:backgroundColor、textColor、rounded、padding

ex-product-selector——What's Included 摘要卡片——为 SaaS / B2B 垂直领域重新利用(不是字面意义上的产品画廊)。

• 属性:backgroundColor、rounded、padding

ex-cart-drawer——订阅摘要——为 SaaS / B2B 重新利用(按附加项的逐项条目,不是字面意义上的购物车)。

• 属性:backgroundColor、rounded、padding、item-divider

ex-app-shell-row——App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示器。

• 属性:backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell——默认数据表 th + td 外壳。表头使用 mono-caps 标题字体;正文使用 body-sm。

• 属性:headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card——登录 / 注册卡片。重用功能卡片外壳,内含 text-input 基元。

• 属性:backgroundColor、rounded、padding

ex-modal-card——模态对话框表面——与功能卡片外壳相同,带抬升阴影。

• 属性:backgroundColor、rounded、padding

ex-empty-state-card——空状态插图框。

• 属性:backgroundColor、rounded、padding、captionTypography

ex-toast——Toast 通知表面——功能卡片形状 + 中等阴影。

• 属性:backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 为每个主 CTA 胶囊保留 {colors.primary}(#000000)。每个可见视口中一个黑色胶囊是品牌的整体转化故事。
• 在每个交互元素(按钮、标签、应用胶囊)上使用 {rounded.pill} 999 px。胶囊本身就是品牌几何标识。
• 以 {rounded.xl} 16 px 渲染卡片——促销卡片、内容卡片、约车表单卡片、年度展示卡片都共享此圆角。
• 每个标题都以 {typography.display-*} 700 字重的句首大写呈现。展示字体从不承担正文。
• 在页面中部使用极性翻转的黑色促销带来打破白底白字的节奏。极性切换本身就是深度提示。
• 用 4:3 编辑风格插图锚定每个促销卡片;切勿使用通用库存图像。

避免

• 不要引入第二个品牌点缀色(橙色、蓝色、绿色)。品牌的整个 UI 都是黑白加灰色调;新点缀色会削弱系统。
• 除了较大的约车流程中的 button-large-rounded 外(此为已记录在案的例外),不要将主 CTA 渲染为 {rounded.xl} 矩形。
• 不要使用全大写展示标题。句首大写是声音;大写仅限于罕见的小标签。
• 不要在每个卡片上都使用柔和投影。品牌使用 0 级平面作为默认;阴影保留给浮动胶囊和约车表单。
• 不要将品牌简化为仅仅是插图系统。胶囊几何 + 黑白二重奏即便没有插图也能承载品牌。
• 不要收紧或放松展示字体的字距。品牌从不调整字距;默认字距是声音的一部分。
• 不要对正方形卡片使用 {rounded.full} 9999 px——胶囊 999 px 和 full 9999 px 对交互元素效果相同,但卡片保持在 {rounded.xl} 16 px。