Uber

Overview

Uber is a transportation-and-delivery super-app — ride, eats, freight, the whole urban logistics layer — and the brand's web surface signals that scale through restraint: no third colour, no accent palette, no illustration that fights the headline. The page is structurally a black-and-white duet, where black `{colors.primary}` is the conversion anchor (every CTA pill, every nav login button, the footer fill) and `{colors.canvas}` white carries everything else. The only consistent decoration is a body of editorial 4:3 illustrations — riders, drivers, parking lots, cars-on-highway — that ground the marketing without leaking accent colour into the system.

Type is the second decisive voice. Two custom faces carry every page: `UberMove` at weight 700 for headlines (32 – 52 px display sizes with tight 1.22 – 1.25 line-height, never letter-spaced), and `UberMoveText` at weights 400 / 500 for body, button, and link. The pairing reads as engineering-grade — no italic, no decorative weight, no tracking flourish. Headlines are sentence-case; eyebrows are uppercase only when used as the section eyebrow ("WHY BECOME"); buttons are sentence-case.

The single shape signature is the pill. Every interactive element rounds to `{rounded.pill}` 999 px — primary CTA, secondary CTA, subtle gray pill, white floating pill, category chip, app-download badge. Cards and surfaces round to `{rounded.xl}` 16 px; the larger "Go Get 2026" annual-showcase card uses the same 16 px shape, just at scale. The tab-toggle on the hero ride-request form uses an off-shape `{rounded.pill-tab}` 36 px — barely-pill, deliberately tighter than the canonical 999 px pill.

**Key Characteristics:**

• A two-colour CTA hierarchy: black `{colors.primary}` pill for primary conversion targets; white `{colors.canvas}` pill (sometimes with a soft drop shadow) for secondary; subtle gray `{colors.canvas-soft}` pill for tertiary or chip variants.
• The pill is the single signature shape — `{rounded.pill}` 999 px on every interactive element except the tab-toggle (`{rounded.pill-tab}` 36 px) and the larger product cards (`{rounded.xl}` 16 px).
• Every headline is sentence-case in `{typography.display-xl}` / `{typography.display-xxl}` weight 700; no all-caps display.
• Editorial 4:3 illustrations of riders / drivers / cars are the only consistent decorative system; no gradients, no atmospheric backdrops, no shadows that aren't card-elevation hints.
• A signature alternating-band rhythm: white feature card → black promo card (with white text and white CTA) → white feature card → black footer. The black bands are NOT hero-only; they appear mid-page as promo callouts.
• A signature ride-request form card on the hero: pickup pin input + destination input + date/time chip + black "See prices" pill, all stacked inside a `{rounded.xl}` shadowed card.

Colors

Brand & Accent

• **Ink Black** (`{colors.primary}` — `#000000`): The brand's only conversion colour. Every primary CTA pill, the footer fill, every dark promo band, every nav login button. The system has no secondary accent.
• **Surface Pressed** (`{colors.surface-pressed}` — `#e2e2e2`): The pressed-state fill for white pills — a soft grey that's used only in active / pressed states.
• **Black Elevated** (`{colors.black-elevated}` — `#282828`): A near-black used on hover for the translucent white tab-toggle pill. Documented as a system colour because it appears on a recurring brand control.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): The default page background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#efefef`): The soft gray fill for category chips, form-input rows inside the ride-request card, and subtle pill buttons.
• **Canvas Softer** (`{colors.canvas-softer}` — `#f3f3f3`): A slightly lighter gray used as a nested-input fill on white surfaces.

Text

• **Ink** (`{colors.ink}` — `#000000`): Every heading and body paragraph on light surfaces.
• **Body** (`{colors.body}` — `#5e5e5e`): Secondary text — captions, sub-headings, supporting copy.
• **Hairline Mid** (`{colors.hairline-mid}` — `#4b4b4b`): A mid-gray used for muted link text inside footer columns and breadcrumb-style nav.
• **Mute** (`{colors.mute}` — `#afafaf`): The lightest text role — placeholder text, fine print, low-priority metadata.
• **On Dark** (`{colors.on-dark}` — `#ffffff`): All text on `{colors.ink}` surfaces (footer, dark promo bands).

Semantic

The brand does not maintain a separate error / success / warning palette in its public marketing surface. Validation cues come from the primary black or from the brand's editorial illustrations. The `#0000ee` link colour is the system's only chromatic — it's the browser-default link blue, appearing in body-copy inline links inside legal / footer text.

Typography

Font Family

Two custom faces carry the entire system:

1. **A custom geometric display sans** (extracted as `UberMove`) for every headline. Weight 700 only; no italic; no tracking variation. Sizes range from `display-sm` 20 px up to `display-xxl` 52 px on the hero. Line-heights tighten to 1.22 – 1.25 at display sizes for a poured-on-the-page look.

2. **A custom text sans** (extracted as `UberMoveText`) for body, button, link, and small headings. Weights 400 and 500 are the working pair. Used at 12 – 18 px; 24 px maximum for ride-request form labels. Tracking is always neutral.

The two faces share a family DNA but never overlap roles — the display face never carries a body paragraph; the text face never carries a hero headline.

Hierarchy

| Token | Size | Weight | Line Height | Use |

|---|---|---|---|---|

| `{typography.display-xxl}` | 52px | 700 | 64px | Hero headline ("Go anywhere with Uber", "Drive when you want"). |

| `{typography.display-xl}` | 36px | 700 | 44px | Page section headlines ("Plan for later", "Safety, simplified"). |

| `{typography.display-lg}` | 32px | 700 | 40px | Promo-card headlines. |

| `{typography.display-md}` | 24px | 700 | 32px | Card titles, illustrated-promo headlines. |

| `{typography.display-sm}` | 20px | 700 | 28px | Sub-card headings. |

| `{typography.body-lg}` | 18px | 500 | 24px | Lead paragraphs and larger body. |

| `{typography.body-md}` | 16px | 400 | 24px | Default paragraph body. |

| `{typography.body-md-strong}` | 16px | 500 | 20px | Bolded inline body and most button labels. |

| `{typography.body-sm}` | 14px | 400 | 20px | Captions, secondary metadata. |

| `{typography.body-sm-strong}` | 14px | 500 | 16px | Bold caption / chip labels. |

| `{typography.caption}` | 12px | 400 | 20px | Fine print, footer secondary lines. |

| `{typography.button-large}` | 18px | 500 | 24px | Large rounded buttons inside the ride-request form. |

| `{typography.button-md}` | 16px | 500 | 20px | Default button label. |

Principles

• **Sentence-case is the voice.** No all-caps headlines. Eyebrow tags ("WHY BECOME") are the rare exception.
• **Weight 700 is for headlines; weight 500 is for buttons and emphasis.** Don't promote button labels to 700.
• **No tracking flourish.** The display face is never letter-spaced, positive or negative.
• **Two faces, two roles.** UberMove for display; UberMoveText for everything else. Never cross the streams.

Note on Font Substitutes

The two faces are proprietary. Open-source substitutes:

• **Display sans** — *Inter* weight 700 with `font-feature-settings: "ss01"` enabled comes closest. *Geist* weight 700 is the second-best option.
• **Text sans** — *Inter* weights 400 / 500 match the geometric width and x-height. *Plus Jakarta Sans* is a softer alternative if the brand wants a less neutral feel.

Layout

Spacing System

• **Base unit**: 4 px. Most captured values are multiples of 4 with a few 6-px sub-multiples (10, 14) inside button padding.
• **Tokens**: `{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.
• **Section padding**: marketing bands sit at `{spacing.3xl}` 32 px top/bottom on tighter pages and `{spacing.3xl} {spacing.3xl}` for hero bands; promo cards inset at `{spacing.2xl}` 24 px.
• **Card interior padding**: content cards sit at `{spacing.2xl}` 24 px; the ride-request form uses `{spacing.lg}` 16 px to keep the form compact.
• **Inline gap**: button rows, category chip rows, app-store pill rows use `{spacing.md}` 12 px between siblings.

Grid & Container

• **Max width**: ~1200 px container; centred with horizontal gutters of `{spacing.3xl}` 32 px on desktop, `{spacing.lg}` 16 px on mobile.
• **Column patterns**:
• Promo-card rows: 2-up at desktop (image left + content right, alternating sides), 1-up at mobile.
• Category chips: horizontal flex with wrap.
• FAQ rows: full-width single-column.
• App-download pills: 2-up at desktop (Rider + Driver), 1-up at mobile.

Whitespace Philosophy

Card-to-card spacing carries the rhythm — between two stacked promo cards there's roughly a full `{spacing.3xl}` 32 px gutter; inside a card the headline / paragraph / CTA stack is tight (`{spacing.sm}` 8 px between siblings). The black promo bands and the footer have no internal hairlines — content sits on flat ink with white text.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 600px | Nav collapses to hamburger; promo cards stack; ride-request form becomes full-width. |

| Mobile-Large | 600–767px | Same as Mobile; chip rows enable horizontal scroll. |

| Tablet | 768–1119px | 2-up promo grid at upper widths; nav stays horizontal until ≥ 1120 px. |

| Desktop | 1120–1135px | Full nav row visible; promo cards 2-up. |

| Desktop-Large | ≥ 1136px | Container caps at ~1200 px; bands stay edge-to-edge while content centres. |

#### Touch Targets

The pill `button-primary` renders at ~44 px tall (10 px vertical padding + 24 px label line-height); the larger `button-large-rounded` at ~56 px. Both meet WCAG AAA at all breakpoints. Category chips inflate to ≥ 44 px tall through extra padding on touch viewports.

#### Collapsing Strategy

• **Nav**: full link row + Help / Log in / Sign up pills at desktop. Collapses to logo + hamburger at mobile; menu overlays full-screen with the same link list stacked.
• **Ride-request form card**: at desktop, the form sits inside a max-490-px `{rounded.xl}` card with shadow. At mobile, full-width with edge-to-edge.
• **Promo cards**: at desktop, image-left + content-right (or alternating). At mobile, image always above content.
• **Annual showcase card**: scales from a 2:3 desktop frame to a 4:3 mobile frame; date text resizes proportionally.

#### Image Behavior

• **Editorial illustrations**: 4:3 or 16:9 hard-edge rectangles; never cropped to a circle, never tilted. Aspect preserved.
• **Photography**: same — square or landscape; framed inside `{rounded.xl}` card chrome.
• **Maps in ride-request flow**: full-bleed inside a card; rounded corners follow the parent card.
• **Logo bar**: SVG vector, monochrome, consistent height.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Default — most cards and surfaces lean on hairline-of-canvas contrast. |

| Level 1 — Subtle Drop | `rgba(0, 0, 0, 0.12) 0px 4px 16px 0px` | Card-elevated frames around promo cards on light bands. |

| Level 2 — Card Drop | `rgba(0, 0, 0, 0.16) 0px 4px 16px 0px` | The ride-request form card on the hero; large content cards with embedded forms. |

| Level 3 — Pill Float | `rgba(0, 0, 0, 0.16) 0px 2px 8px 0px` | The floating white pill button (the one that floats over hero photography). |

Decorative Depth

• **Black bands as polarity-flip depth**: the brand uses pure black `{colors.primary}` mid-page bands to break the white-on-white rhythm. The polarity shift IS the depth cue.
• **Editorial illustrations as in-card depth**: every promo card has a single 4:3 illustration as its left or right column. The illustration's visual weight is part of the card's elevation read.
• **Pill geometry as micro-depth**: `{rounded.pill}` 999 px applied at varying button heights creates a stack of nested pills that reads as visual hierarchy.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed hero bands, footer fill, raw image edges. |

| `{rounded.md}` | 8px | Form-input fields inside the ride-request card. |

| `{rounded.lg}` | 12px | Smaller secondary card chrome. |

| `{rounded.xl}` | 16px | Canonical card radius — promo cards, content cards, ride-request form card, annual-showcase card, large rounded buttons. |

| `{rounded.pill}` | 999px | The brand's signature interactive shape — every pill button, category chip, app-download pill, icon button. |

| `{rounded.pill-tab}` | 36px | The translucent-white tab-toggle pill on the hero (Ride / Drive). |

| `{rounded.full}` | 9999px | Identical effect to `{rounded.pill}` for circular icon containers. |

Photography Geometry

• **Editorial illustrations**: 4:3 landscape inside promo cards; 16:9 for full-width showcase frames.
• **Driver / rider portraits**: 4:5 portrait crop; framed by `{rounded.xl}` 16 px card chrome.
• **Annual showcase image**: 2:3 portrait at desktop, scaling to 4:3 at mobile. The image fills the card; the headline overlays the bottom.
• **Logo bar**: monochrome SVG vectors at consistent ~24 px height.
• **Avatars** (where used): square or `{rounded.full}` circle, never `{rounded.lg}` rounded-square.

Components

Buttons

**`button-primary`** — the canonical black pill, the brand's conversion target.

• Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.button-md}`, padding `{spacing.md} {spacing.md}`, shape `{rounded.pill}` 999 px.

**`button-secondary`** — the white pill paired with the black primary.

• Background `{colors.canvas}`, text `{colors.ink}`, same label and padding as `button-primary`, shape `{rounded.pill}`.

**`button-subtle`** — the gray secondary pill used for tertiary actions inside cards (e.g., "Learn more" / "Use Reserve").

• Background `{colors.canvas-soft}` (`#efefef`), text `{colors.ink}`, label in `{typography.button-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.pill}`.

**`button-floating`** — the white pill with a subtle drop-shadow that floats over a dark or photographic surface.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md}`, shape `{rounded.pill}`. Carries a Level 3 pill-float shadow.

**`button-large-rounded`** — the bigger black call-to-action used inside the ride-request flow ("Yes, help me").

• Background `{colors.primary}`, text `{colors.on-primary}`, label in `{typography.button-large}`, padding `{spacing.lg} {spacing.xl}`, shape `{rounded.xl}` 16 px (not pill — the only black CTA that breaks the pill rule, used in the larger form context).

**`button-tab-translucent`** — the tab-toggle on the hero ride-request form (Ride / Drive).

• Background `{colors.canvas}`, text `{colors.ink}`, label in `{typography.body-md-strong}`, shape `{rounded.pill-tab}` 36 px (off-shape, deliberately tighter than the canonical 999 px pill).

Cards & Containers

**`card-content`** — the canonical content card.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.2xl}`, shape `{rounded.xl}` 16 px. No shadow on the default state.

**`card-elevated`** — the content card with Level 1 subtle drop.

• Background `{colors.canvas}`, text `{colors.ink}`, same padding + shape as `card-content`. Shadow at Level 1.

**`card-soft-tinted`** — the gray-tinted card used as a sub-region inside the page (e.g., "Plan for later" callout).

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.2xl}`, shape `{rounded.xl}`.

**`promo-card-illustrated`** — the 2-column promo card with illustration on one side and copy on the other.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.2xl}`, shape `{rounded.xl}`. Headline in `{typography.display-md}` or larger.

**`promo-card-on-dark`** — the polarity-flipped promo card in black.

• Background `{colors.ink}`, text `{colors.on-dark}`, padding `{spacing.2xl}`, shape `{rounded.xl}`. Used for the "Drive with Uber" mid-page band.

**`request-form-card`** — the hero ride-request form chrome.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.xl}`. Carries Level 2 card drop shadow.

**`request-form-input-row`** — the per-field row inside the request-form card.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.lg}`, shape `{rounded.md}` 8 px. Hosts an icon + label + value.

**`showcase-image-card`** — the giant "GO•GET 2026" annual showcase card.

• Background `{colors.ink}`, text `{colors.on-dark}` overlay, padding `{spacing.3xl}`, shape `{rounded.xl}`. Display-xxl headline overlays the bottom of the image.

Inputs & Forms

**`text-input`** — the canonical text input.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, body in `{typography.body-md}`, padding `{spacing.lg}`, shape `{rounded.md}` 8 px.

**`text-input-on-soft`** — the nested input on a white card (slightly lighter fill).

• Background `{colors.canvas-softer}`, otherwise identical to `text-input`.

Navigation

**`nav-bar`** — the sticky top nav.

• Background `{colors.canvas}` on light pages, switches to `{colors.ink}` on the rare dark page (e.g., Uber Eats hero). Padding `{spacing.lg} {spacing.3xl}`.

**`nav-link`** — the link row inside `nav-bar`.

• Text `{colors.ink}`, set in `{typography.body-md-strong}` 500 weight.

**`footer`** — the deep-black footer band.

• Background `{colors.primary}` (the brand's only true black surface), text `{colors.on-dark}`, padding `{spacing.3xl} {spacing.3xl}`. Body in `{typography.body-sm}`; column eyebrows in `{typography.body-md-strong}`.

Signature Components

**`hero-band-light`** — the white hero with the ride-request card.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.3xl}`. Headline in `{typography.display-xxl}` (52 px / 700) on the left; `request-form-card` on the right.

**`hero-band-dark`** — the rare black hero (used on Uber Eats and Drive landing).

• Background `{colors.ink}`, text `{colors.on-dark}`, padding `{spacing.3xl} {spacing.3xl}`. Same display-xxl headline scale; CTA inverts to `button-secondary` white pill.

**`category-button`** — the horizontal-scroll category row ("Reserve / Rentals / Teens / Group rides").

• Background `{colors.canvas-soft}`, text `{colors.ink}`, label in `{typography.body-sm-strong}`, padding `{spacing.sm} {spacing.lg}`, shape `{rounded.pill}`. An icon precedes the label.

**`faq-row`** — the FAQ accordion item.

• Background `{colors.canvas}`, text `{colors.ink}`, question in `{typography.body-md-strong}`, padding `{spacing.lg}` 0. No card chrome — hairline dividers between rows.

**`app-download-pill`** — the "Download the Rider app" / "Download the Driver app" pill.

• Background `{colors.ink}`, text `{colors.on-dark}`, label in `{typography.body-md-strong}`, padding `{spacing.md} {spacing.xl}`, shape `{rounded.pill}`.

**`icon-button-circular`** — the round icon container used in the nav and inside the ride-request card.

• Background `{colors.canvas-soft}`, dark icon, shape `{rounded.full}`. No label.

Links

**`link-blue`** — the system-default browser-blue link inside legal / footer fine print.

• Text `{colors.link}` (`#0000ee`), body in `{typography.body-md}`.

**`link-on-dark`** — the white link inside dark bands.

• Text `{colors.on-dark}`, body in `{typography.body-md}`.

**`link-mute`** — the muted gray link inside footer columns.

• Text `{colors.hairline-mid}`, body in `{typography.body-md}`.

**`link-mute-soft`** — the lightest gray link, used for low-priority secondary text on dark surfaces.

• Text `{colors.mute}`, body in `{typography.body-md}`.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` (`#000000`) for every primary CTA pill. One black pill per visible viewport is the brand's whole conversion story.
• Use `{rounded.pill}` 999 px on every interactive element (buttons, chips, app pills). The pill IS the brand's geometric signature.
• Render cards in `{rounded.xl}` 16 px — promo cards, content cards, the ride-request form card, the annual-showcase card all share this radius.
• Set every headline in `{typography.display-*}` weight 700 in sentence-case. The display face never carries body copy.
• Use polarity-flipped black promo bands mid-page to break up white-on-white rhythm. The polarity shift IS the depth cue.
• Anchor every promo card with a 4:3 editorial illustration; never use generic stock imagery.

Don't

• Don't introduce a second brand accent colour (orange, blue, green). The brand's entire UI is black-and-white plus grayscale; new accents flatten the system.
• Don't render the primary CTA as a `{rounded.xl}` rectangle except inside the larger ride-request flow (where `button-large-rounded` is the documented exception).
• Don't use all-caps display headlines. Sentence-case is the voice; uppercase is restricted to rare eyebrow tags.
• Don't drop a soft drop-shadow on every card. The brand uses Level 0 flat as the default; shadow is reserved for the floating pill and the ride-request form.
• Don't reduce the brand to its illustration system alone. The pill geometry + black/white duet carries the brand even without illustrations.
• Don't tighten or loosen letter-spacing on the display face. The brand never letter-spaces; default tracking is part of the voice.
• Don't use `{rounded.full}` 9999 px for square cards — the pill 999 px and full 9999 px effects are identical for interactive elements, but cards stay at `{rounded.xl}` 16 px.

개요

Uber는 탑승, 식사, 화물, 전체 도시 물류 계층 등 운송 및 배달 슈퍼 앱이며 브랜드의 웹 표면 신호는 제한을 통해 확장됩니다. 세 번째 색상도 없고 강조 색상도 없으며 헤드라인을 장식하는 일러스트레이션도 없습니다. 페이지는 구조적으로 흑백 이중주입니다. 여기서 검은색 ``은 전환 앵커(모든 CTA 알약, 모든 탐색 로그인 버튼, 바닥글 채우기)이고 `` 흰색은 다른 모든 것을 전달합니다. 유일하게 일관된 장식은 시스템에 강조 색상을 새기지 않고 마케팅을 기반으로 하는 라이더, 운전자, 주차장, 고속도로 차량 등의 편집 4:3 일러스트레이션입니다.

유형이 두 번째로 결정적인 목소리입니다. 두 개의 사용자 정의 얼굴이 모든 페이지를 전달합니다. 헤드라인의 경우 `UberMove`(줄 높이가 1.22~1.25로 좁고 문자 간격이 없는 32~52px 디스플레이 크기), 본문, 버튼 및 링크의 경우 가중치 400/500인 `UberMoveText`입니다. 페어링은 엔지니어링 등급으로 읽혀집니다. 이탤릭체도 없고 장식적인 무게도 없으며 추적이 번성하지도 않습니다. 헤드라인은 문장 단위입니다. 눈썹은 섹션 눈썹으로 사용될 때만 대문자입니다("WHY BECOME"). 버튼은 문장 대소문자입니다.

단일 모양의 서명은 알약입니다. 모든 대화형 요소는 `` 999픽셀(기본 CTA, 보조 CTA, 미묘한 회색 알약, 흰색 부동 알약, 카테고리 칩, 앱 다운로드 배지)로 반올림됩니다. 카드와 표면은 `` 16픽셀로 반올림됩니다. 더 큰 "Go Get 2026" 연간 쇼케이스 카드는 동일한 16px 모양을 사용합니다. 영웅 탑승 요청 양식의 탭 토글은 오프 모양의 `` 36픽셀을 사용합니다. 알약이 거의 없으며, 의도적으로 표준 999픽셀 알약보다 더 단단합니다.

**주요 특성:**

• 2색 CTA 계층 구조: 기본 전환 타겟을 위한 검은색 `` 알약; 보조용 흰색 `` 알약(때로는 부드러운 그림자가 있음); 3차 또는 칩 변형을 위한 미묘한 회색 `` 알약.
• 알약은 단일 서명 모양입니다. 탭 토글(`` 36px)과 더 큰 제품 카드(`` 16px)를 제외한 모든 대화형 요소의 `` 999px입니다.
• 모든 헤드라인은 `` / `` 가중치 700의 문장 대소문자입니다. 모두 대문자로 표시되지 않습니다.
• 기사/운전자/자동차의 4:3 일러스트레이션은 유일하게 일관된 장식 시스템입니다. 그라데이션 없음, 대기 배경 없음, 카드 높이 힌트가 아닌 그림자 없음.
• 시그니처 교대 리듬: 흰색 기능 카드 → 검정색 프로모션 카드(흰색 텍스트 및 흰색 CTA 포함) → 흰색 기능 카드 → 검정색 바닥글. 블랙 밴드는 영웅 전용이 아닙니다. 페이지 중간에 프로모션 문구로 표시됩니다.
• 영웅의 서명 탑승 요청 양식 카드: 픽업 핀 입력 + 목적지 입력 + 날짜/시간 칩 + 검은색 "가격 보기" 알약, 모두 `` 그림자 카드 안에 쌓여 있습니다.

색상

브랜드 및 액센트

• **잉크 블랙** (`` — ``): 브랜드의 유일한 변환 색상입니다. 모든 기본 CTA 알약, 바닥글 채우기, 모든 어두운 프로모션 밴드, 모든 탐색 로그인 버튼. 시스템에는 보조 악센트가 없습니다.
• **눌린 표면** (`` — ``): 흰색 알약에 대한 눌린 상태 채우기 — 활성/눌린 상태에서만 사용되는 부드러운 회색.
• **검은색 상승** (`` — ``): 반투명 흰색 탭 전환 알약에 마우스를 올리면 검정색에 가까운 색상입니다. 반복되는 브랜드 관리에 표시되므로 시스템 색상으로 문서화됩니다.

표면

• **캔버스** (`` — ``): 기본 페이지 배경입니다.
• **부드러운 캔버스**(`` — ``): 카테고리 칩을 위한 부드러운 회색 채우기, 탑승 요청 카드 내부의 양식 입력 행 및 섬세한 알약 버튼.
• **더 부드러운 캔버스**(`` — ``): 흰색 표면에 중첩된 입력 채우기로 사용되는 약간 더 밝은 회색입니다.

텍스트

• **잉크** (`` — ``): 밝은 표면의 모든 제목과 본문 단락.
• **본문**(`` — ``): 보조 텍스트 — 캡션, 부제목, 지원 사본.
• **가는 선 중간**(`` — ``): 바닥글 열 내부의 음소거된 링크 텍스트 및 탐색경로 스타일 탐색에 사용되는 중간 회색입니다.
• **음소거**(`` — ``): 가장 가벼운 텍스트 역할 — 자리 표시자 텍스트, 작은 글씨, 우선순위가 낮은 메타데이터.
• **어두운 부분**(`` — ``): `` 표면의 모든 텍스트(바닥글, 어두운 프로모션 밴드).

의미

브랜드는 공개 마케팅 표면에 별도의 오류/성공/경고 팔레트를 유지하지 않습니다. 검증 단서는 기본 검정색이나 브랜드의 편집 일러스트레이션에서 나옵니다. __CODEBCK_808___ 링크 색상은 시스템의 유일한 색채입니다. 이는 법적/바닥글 텍스트 내의 본문 복사 인라인 링크에 나타나는 브라우저 기본 링크 파란색입니다.

타이포그래피

글꼴군

두 개의 사용자 정의 얼굴이 전체 시스템을 전달합니다.

1. 모든 헤드라인에 **사용자 정의 기하학적 디스플레이가 없습니다**(`UberMove`로 추출됨). 무게는 700만; 이탤릭체 없음; 추적 변형이 없습니다. 영웅의 크기 범위는 `display-sm` 20px에서 최대 `display-xxl` 52px입니다. 페이지에 쏟아지는 듯한 느낌을 주기 위해 디스플레이 크기에서 줄 높이가 1.22 – 1.25로 조여졌습니다.

2. 본문, 버튼, 링크 및 작은 제목에 대한 **맞춤 텍스트 산세**(`UberMoveText`로 추출됨). 가중치 400과 500이 작동하는 쌍입니다. 12~18px에서 사용됩니다. 승차 요청 양식 라벨의 경우 최대 24픽셀입니다. 추적은 항상 중립적입니다.

두 얼굴은 가족 DNA를 공유하지만 역할은 결코 겹치지 않습니다. 표시 얼굴에는 본문 단락이 포함되지 않습니다. 텍스트 얼굴에는 영웅 헤드라인이 표시되지 않습니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | |

사용

|---|---|---|---|---|

| _`` | 52px | 700 | 64px | 영웅 헤드라인("Uber를 이용해 어디든 이동하세요", "원할 때 운전하세요"). |

| _`` | 36px | 700 | 44px | 페이지 섹션 헤드라인("나중을 위한 계획", "안전, 단순화"). |

| _`` | 32px | 700 | 40px | 프로모션 카드 헤드라인. |_

| _`` | 24px | 700 | 32px | 카드 제목, 그림이 포함된 프로모션 헤드라인. |_

| _`` | 20픽셀 | 700 | 28px | 하위 카드 제목. |

| _`` | 18px | 500 | 24px | 단락을 리드하고 본문을 더 크게 만듭니다. |_

| _`` | 16px | 400 | 24px | 기본 단락 본문. |_

| _`` | 16px | 500 | 20픽셀 | 굵은 글씨의 인라인 본문과 대부분의 버튼 라벨. |

| _`` | 14px | 400 | 20픽셀 | 캡션, 보조 메타데이터. |_

| _`` | 14px | 500 | 16px | 굵은 캡션/칩 라벨. |

| _`` | 12px | 400 | 20픽셀 | 작은 글씨, 바닥글 보조 줄. |_

| _`` | 18px | 500 | 24px | 승차 요청 양식 내부의 크고 둥근 버튼. |_

| _`` | 16px | 500 | 20픽셀 | 기본 버튼 라벨. |_

원칙

• **문장이 음성입니다.** 모두 대문자인 헤드라인이 없습니다. 눈썹 태그("WHY BECOME")는 드문 예외입니다.
• **가중치 700은 헤드라인용입니다. 가중치 500은 버튼과 강조용입니다.** 버튼 라벨을 700으로 승격하지 마세요.
• **추적 번창 없음.** 표시면은 문자 간격, 양수 또는 음수로 표시되지 않습니다.
• **두 얼굴, 두 역할.** 디스플레이용 UberMove; 다른 모든 것에 대해서는 UberMoveText를 사용하세요. 개울을 건너지 마십시오.

글꼴 대체에 대한 참고사항

두 얼굴은 독점적입니다. 오픈 소스 대체물:

• **디스플레이 산스** — `font-feature-settings: "ss01"`이 활성화된 *간* 가중치 700이 가장 가깝습니다. *Geist* 웨이트 700이 차선책입니다.
• **텍스트 산스** — *간* 가중치 400/500은 기하학적 너비 및 x 높이와 일치합니다. *또한 Jakarta Sans*는 브랜드가 덜 중립적인 느낌을 원하는 경우 더 부드러운 대안이 됩니다.

레이아웃

간격 시스템

• **기본 단위**: 4px. 캡처된 대부분의 값은 버튼 패딩 내부에 몇 개의 6픽셀 약수(10, 14)가 포함된 4의 배수입니다.
• **토큰**: `` 4px · `` 6px · `` 8px · `` 12px · `` 16px · `` 20픽셀 · `` 24픽셀 · `` 32픽셀.
• **섹션 패딩**: 마케팅 밴드는 좁은 페이지의 경우 `` 32px 상단/하단에 위치하며 히어로 밴드의 경우 ` `에 위치합니다. `` 24px
에 삽입된 프로모션 카드
• **카드 내부 패딩**: 콘텐츠 카드는 `` 24px에 위치합니다. 승차 요청 양식은 양식을 간결하게 유지하기 위해 `` 16픽셀을 사용합니다.
• **인라인 간격**: 버튼 행, 카테고리 칩 행, 앱 스토어 알약 행은 형제 간에 `` 12픽셀을 사용합니다.

그리드 및 컨테이너

• **최대 너비**: ~1200px 컨테이너; 데스크톱의 경우 `` 32픽셀, 모바일의 경우 `` 16픽셀의 가로 여백을 중심으로 합니다.
• **열 패턴**:
• 프로모션 카드 행: 데스크톱에서는 2개(왼쪽 이미지 + 오른쪽 콘텐츠, 교대로 표시), 모바일에서는 1개.
• 카테고리 칩: 랩이 있는 수평 플렉스.
• FAQ 행: 전체 너비 단일 열.
• 앱 다운로드 알약: 데스크톱(승객 + 운전자)에서는 2업, 모바일에서는 1업.

공백 철학

카드 간 간격은 리듬을 전달합니다. 두 개의 쌓인 프로모 카드 사이에는 대략 `` 32px 여백이 있습니다. 카드 내부에서 헤드라인/문단/CTA 스택이 빡빡합니다(형제 간 `` 8픽셀). 검은색 프로모션 밴드와 바닥글에는 내부에 가는 선이 없습니다. 콘텐츠는 흰색 텍스트가 있는 평면 잉크 위에 표시됩니다.

반응형 전략

#### 중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 600px | Nav collapses to hamburger; promo cards stack; ride-request form becomes full-width. |

| 모바일-대형 | 600~767px | 모바일과 동일합니다. 칩 행은 가로 스크롤을 활성화합니다. |

| 태블릿 | 768~1119px | 위쪽 너비의 2업 프로모션 그리드; 탐색은 ≥ 1120px까지 수평을 유지합니다. |_

| 데스크탑 | 1120~1135px | 전체 탐색 행이 표시됩니다. 프로모 카드 2개. |

| 데스크탑-대형 | ≥ 1136px | ~1200px의 컨테이너 캡; 밴드는 콘텐츠 센터에 있는 동안 가장자리에서 가장자리를 유지합니다. |

#### 터치 대상

알약 `button-primary`은 높이 ~44픽셀(세로 패딩 10픽셀 + 레이블 줄 높이 24픽셀)로 렌더링됩니다. ~56픽셀의 더 큰 `button-large-rounded`. 둘 다 모든 중단점에서 WCAG AAA를 충족합니다. 카테고리 칩은 터치 뷰포트의 추가 패딩을 통해 높이가 44픽셀 이상으로 팽창합니다.

#### 축소 전략

• **Nav**: 전체 링크 행 + 도움말/로그인/데스크탑에서 알약 가입. 모바일에서는 로고 + 햄버거로 축소됩니다. 메뉴는 동일한 링크 목록이 쌓여 전체 화면으로 오버레이됩니다.
• **승차 요청 양식 카드**: 데스크탑에서 양식은 그림자가 있는 최대 490px `` 카드 내부에 있습니다. 모바일에서는 가장자리에서 가장자리까지 전체 너비로 표시됩니다.
• **프로모션 카드**: 데스크톱, 이미지 왼쪽 + 콘텐츠 오른쪽(또는 교대로). 모바일에서는 항상 콘텐츠 위에 이미지가 표시됩니다.
• **연간 쇼케이스 카드**: 2:3 데스크톱 프레임에서 4:3 모바일 프레임으로 확장됩니다. 날짜 텍스트의 크기가 비례적으로 조정됩니다.

#### 이미지 동작

• **사설 일러스트레이션**: 4:3 또는 16:9 가장자리가 단단한 직사각형; 결코 원형으로 자르거나 기울어지지 않았습니다. 측면이 보존됩니다.
• **사진**: 동일 — 정사각형 또는 가로형; `` 카드 크롬 안에 액자가 있습니다.
• **탑승 요청 흐름의 지도**: 카드 내부 풀블리드; 둥근 모서리는 상위 카드를 따릅니다.
• **로고 바**: SVG 벡터, 흑백, 일관된 높이.

고도 및 깊이

| 레벨 | 치료 | |

사용

|---|---|---|

| 레벨 0 — 평면 | 그림자도 없고 국경도 없습니다. | 기본값 - 대부분의 카드와 표면은 캔버스의 가는선 대비를 따릅니다. |_

| 레벨 1 - 미묘한 드롭 | _`rgba(0, 0, 0, 0.12) 0px 4px 16px 0px` | 밝은 밴드의 프로모션 카드 주변에 카드 높이 프레임이 있습니다. |

| 레벨 2 — 카드 드롭 | _`rgba(0, 0, 0, 0.16) 0px 4px 16px 0px` | 영웅의 탑승 요청 양식 카드 양식이 포함된 대형 콘텐츠 카드. |_

| 레벨 3 - 알약 부유물 | _`rgba(0, 0, 0, 0.16) 0px 2px 8px 0px` | 떠다니는 흰색 알약 버튼(영웅 사진 위에 떠 있는 버튼) |

장식적 깊이

• **극성 반전 깊이로서의 검은색 밴드**: 브랜드는 흰색 바탕에 흰색의 리듬을 깨기 위해 순수한 검은색 `` 페이지 중간 밴드를 사용합니다. 극성 이동은 깊이 단서입니다.
• **카드 내 깊이에 따른 사설 일러스트레이션**: 모든 프로모 카드에는 왼쪽 또는 오른쪽 열에 단일 4:3 일러스트레이션이 있습니다. 그림의 시각적 무게는 카드의 입면도 읽기의 일부입니다.
• **미세 깊이의 알약 형상**: `` 다양한 버튼 높이에 999픽셀을 적용하면 시각적 계층 구조로 읽는 중첩된 알약 스택이 생성됩니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 풀 블리드 히어로 밴드, 바닥글 채우기, 원시 이미지 가장자리. |

| _`` | 8픽셀 | 탑승 요청 카드 내부의 양식 입력 필드입니다. |

| _`` | 12px | 더 작은 보조 카드 크롬. |

| _`` | 16px | 표준 카드 반경 - 프로모션 카드, 콘텐츠 카드, 탑승 요청 양식 카드, 연간 쇼케이스 카드, 커다란 둥근 버튼. |

| _`` | 999px | 브랜드의 시그니처 인터랙티브 모양 — 모든 알약 버튼, 카테고리 칩, 앱 다운로드 알약, 아이콘 버튼. |

| _`` | 36px | 영웅의 반투명 흰색 탭 토글 알약(탑승/운전). |

| _`` | 9999px | 원형 아이콘 컨테이너의 경우 ``과 동일한 효과입니다. |

사진 기하학

• **사설 일러스트레이션**: 프로모 카드 내부 4:3 가로; 전체 너비 쇼케이스 프레임의 경우 16:9입니다.
• **운전자/탑승자 초상화**: 4:5 초상화 자르기; `` 16px 카드 크롬으로 구성되었습니다.
• **연간 쇼케이스 이미지**: 데스크톱에서 2:3 세로 비율, 모바일에서 4:3으로 확대됩니다. 이미지가 카드를 채웁니다. 헤드라인이 하단에 오버레이됩니다.
• **로고 바**: 일관된 ~24픽셀 높이의 흑백 SVG 벡터.
• **아바타**(사용된 경우): 정사각형 또는 `` 원형, 절대로 `` 둥근 정사각형.

구성요소

버튼

**`button-primary`** — 표준적인 검은 알약, 브랜드의 전환 목표.

• 배경 ``, 텍스트 ``, 라벨 세트 ``, 패딩 ` `, 모양 `` 999px

_**`button-secondary`** — 검은색 원색과 결합된 흰색 알약입니다.

• 배경 ``, 텍스트 ``, `button-primary`와 동일한 레이블 및 패딩, 모양 ``.

**`button-subtle`** — 카드 내부의 3차 작업에 사용되는 회색 보조 알약입니다(예: "자세히 알아보기" / "예약 사용").

• 배경 ``(``), 텍스트 ``, 레이블 ``, 패딩 ` `, 모양 ``.

_**`button-floating`** — 어두운 표면이나 사진 표면 위에 떠다니는 미묘한 그림자가 있는 흰색 알약.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``. 레벨 3 알약 플로트 섀도우를 담고 있습니다.

**`button-large-rounded`** — 탑승 요청 흐름 내에서 사용되는 더 큰 검은색 클릭 유도 문구("예, 도와주세요").

• 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 `` 16픽셀(알약 아님 - 알약 규칙을 위반하는 유일한 검은색 CTA, 더 큰 형식에 사용됨) 컨텍스트).

**`button-tab-translucent`** — 영웅 탑승 요청 양식(승차/운전)의 탭 토글입니다.

• 배경 ``, 텍스트 ``, 레이블 ``, 모양 `` 36픽셀(모양이 맞지 않음, 의도적으로 표준 999픽셀 알약보다 더 촘촘함).

카드 및 용기

**`card-content`** — 표준 콘텐츠 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 `` 16px. 기본 상태에는 그림자가 없습니다.

**`card-elevated`** — 레벨 1 미묘한 드롭이 포함된 콘텐츠 카드.

• 배경 ``, 텍스트 ``, `card-content`과 동일한 패딩 + 모양. 레벨 1의 그림자.

**`card-soft-tinted`** — 페이지 내부의 하위 영역으로 사용되는 회색 색조의 카드(예: "나중 계획" 설명선).

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

_**`promo-card-illustrated`** — 한쪽에는 그림이 있고 다른 한쪽에는 문구가 있는 2열 프로모션 카드입니다.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``. `` 이상의 제목.

**`promo-card-on-dark`** — 검정색의 극성이 반대인 프로모 카드입니다.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``. 'Uber로 운전하기' 중간 페이지 밴드에 사용됩니다.

**`request-form-card`** — 영웅 탑승 요청 양식 크롬.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``. 레벨 2 카드 그림자를 전달합니다.

**`request-form-input-row`** — 요청 양식 카드 내부의 필드별 행.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 `` 8px. 아이콘 + 라벨 + 값을 호스팅합니다.

**`showcase-image-card`** — 거대한 "GO•GET 2026" 연간 쇼케이스 카드.

• 배경 ``, 텍스트 `` 오버레이, 패딩 ``, 모양 ``. Display-xxl 헤드라인은 이미지 하단에 오버레이됩니다.

입력 및 양식

**`text-input`** — 표준 텍스트 입력.

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 ``, 모양 `` 8px.

**`text-input-on-soft`** — 흰색 카드에 중첩된 입력(약간 더 밝은 채우기).

• 배경 ``, 그 외에는 `text-input`.
과 동일

탐색

**`nav-bar`** — 고정 상단 탐색

라이트 페이지에서는 __HTMLTAG_590___배경 ``, 드문 다크 페이지(예: Uber Eats Hero)에서는 ``으로 전환됩니다. 패딩 ` `.

**`nav-link`** — `nav-bar`.

내부의 링크 행

• 텍스트 ``, `` 500 가중치로 설정.

**`footer`** — 진한 검정색 바닥글 밴드.

• 배경 ``(브랜드 유일의 진정한 검정색 표면), 텍스트 ``, 패딩 ` `. ``의 본문; ``.
의 열 눈썹

서명 구성요소

**`hero-band-light`** — 탑승 요청 카드를 들고 있는 백인 영웅.

• 배경 ``, 텍스트 ``, 패딩 ` `. 왼쪽의 ``(52px/700) 제목; `request-form-card` 오른쪽.

_**`hero-band-dark`** — 희귀한 흑인 영웅(Uber Eats 및 Drive 방문에 사용됨).

• 배경 ``, 텍스트 ``, 패딩 ` `. 동일한 디스플레이-xxl 헤드라인 스케일; CTA는 `button-secondary` 흰색 알약으로 전환됩니다.

**`category-button`** — 가로 스크롤 카테고리 행("예약/대여/청소년/그룹 탑승").

• 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 ``. 라벨 앞에는 아이콘이 있습니다.

**`faq-row`** — FAQ 아코디언 항목.

• 배경 ``, 텍스트 ``, 질문 ``, 패딩 `` 0. 카드 크롬 없음 — 행 사이의 가는선 구분선.

_**`app-download-pill`** — "Rider 앱 다운로드" / "드라이버 앱 다운로드" 알약.

• 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 ``.

**`icon-button-circular`** — 탐색 및 승차 요청 카드 내부에 사용되는 원형 아이콘 컨테이너.

• 배경 ``, 어두운 아이콘, 모양 ``. 라벨이 없습니다.

링크

**`link-blue`** — 법적/바닥글 작은 글씨 내부의 시스템 기본 브라우저 파란색 링크입니다.

• 텍스트 ``(``), 본문은 ``.

_**`link-on-dark`** — 어두운 띠 안의 흰색 링크.

• 텍스트 ``, 본문 ``.

**`link-mute`** — 바닥글 열 내부의 음소거된 회색 링크.

• 텍스트 ``, 본문 ``.

**`link-mute-soft`** — 가장 밝은 회색 링크, 어두운 표면의 우선순위가 낮은 보조 텍스트에 사용됩니다.

• 텍스트 ``, 본문 ``.

예(설명)

> 자동 파생 키트-미러 데모 표면(`scripts/derive-examples-block.mjs`). 각 `ex-*` 항목은 브랜드 기본 기본 요소를 참조하므로 다운스트림 소비자(`/preview-design`, `/generate-kit`)는 동일한 10개 표면을 일관되게 다시 스킨합니다. `TO_FILL` 마커는 누락된 기본 요소를 나타냅니다. LLM 판단 단계에서 해결됩니다.

**`ex-pricing-tier`** — 기본 가격 등급 카드. 브랜드 캔버스처럼 부드러운 표면에 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — 추천/강조 표시된 계층 — 극성이 반전된 표면(밝은 모드에서 어두운 채우기 + 밝은 텍스트, 어두운 모드에서 밝은 채우기 + 어두운 텍스트).

• 속성: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — 포함된 내용 요약 카드 — SaaS/B2B 업종에 맞게 용도가 변경되었습니다(문자 그대로의 제품 갤러리 아님).

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — 구독 요약 — SaaS/B2B용으로 다시 사용됨(리터럴 카트가 아닌 추가 기능당 품목).

• 속성: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — 앱 셸 예시 내부의 사이드바 탐색 행. 활성 상태는 기본 브랜드를 지표로 사용합니다.

• 속성: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 기본 데이터 테이블 th + td chrome. 헤더는 모노 캡 눈썹 타이포그래피를 사용합니다. body는 body-sm을 사용합니다.

• 속성: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — 로그인/가입 카드. 내부에 텍스트 입력 기본 요소가 포함된 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — 모달 대화 상자 표면 — 높은 그림자가 있는 기능 카드와 동일한 크롬입니다.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — 빈 상태 그림 프레임.

• 속성: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — 토스트 알림 표면 — 기능 카드 모양 + 중간 그림자.

• 속성: `backgroundColor`, `rounded`, `padding`, `typography`

해야 할 일과 하지 말아야 할 일

하세요

• 모든 기본 CTA 알약에 대해 ``(``)을 예약하세요. 표시되는 뷰포트당 하나의 검은색 알약이 브랜드의 전체 전환 스토리입니다.
• 모든 대화형 요소(버튼, 칩, 앱 알약)에 `` 999픽셀을 사용하세요. 알약은 브랜드의 기하학적인 시그니처입니다.
• 렌더링 카드(`` 16픽셀) — 프로모션 카드, 콘텐츠 카드, 탑승 요청 양식 카드, 연간 쇼케이스 카드는 모두 이 반경을 공유합니다.
• 문장에서 `` 가중치 700의 모든 헤드라인을 설정합니다. 표시면에는 본문 문구가 포함되지 않습니다.
• 페이지 중간에 극성이 반전된 검정색 프로모션 밴드를 사용하여 흰색 바탕에 흰색의 리듬을 분리합니다. 극성 이동은 깊이 단서입니다.
• 4:3 편집 일러스트레이션으로 모든 프로모션 카드를 고정하세요. 일반적인 스톡 이미지를 사용하지 마세요.

하지 마세요

• 두 번째 브랜드 강조 색상(주황색, 파란색, 녹색)을 도입하지 마세요. 브랜드의 전체 UI는 흑백과 회색조입니다. 새로운 액센트가 시스템을 평면화합니다.
• 더 큰 승차 요청 흐름 내부를 제외하고 기본 CTA를 `` 직사각형으로 렌더링하지 마십시오(여기서 `button-large-rounded`은 문서화된 예외임).
• 모두 대문자로 표시되는 헤드라인을 사용하지 마세요. 문장 케이스는 목소리입니다. 대문자는 드문 눈썹 태그로 제한됩니다.
• 모든 카드에 부드러운 그림자를 추가하지 마세요. 브랜드는 레벨 0 플랫을 기본값으로 사용합니다. 그림자는 플로팅 알약과 탑승 요청 양식용으로 예약되어 있습니다.
• 브랜드를 일러스트레이션 시스템만으로 축소하지 마세요. 알약 기하학 + 흑백 듀엣은 일러스트 없이도 브랜드를 전달합니다.
• 디스플레이 표면의 문자 간격을 조이거나 느슨하게 하지 마세요. 브랜드는 문자 공백을 사용하지 않습니다. 기본 추적은 음성의 일부입니다.
• 정사각형 카드에 `` 9999px를 사용하지 마세요. 알약 999px 및 전체 9999px 효과는 대화형 요소에서 동일하지만 카드는 `` 16px로 유지됩니다.

概要

Uber は、乗車、食事、貨物、都市物流レイヤー全体の輸送と配達のスーパー アプリであり、ブランドの Web 表面は、制約を乗り越えて拡大することを示しています。つまり、第 3 の色、アクセント パレット、見出しに対抗するイラストはありません。このページは構造的に白黒のデュエットで、黒の `` がコンバージョン アンカー (すべての CTA ピル、すべてのナビゲーション ログイン ボタン、フッターの塗りつぶし) であり、白の `` がその他すべてを担っています。唯一の一貫した装飾は、ライダー、ドライバー、駐車場、高速道路上の車など、編集用の 4:3 イラストの本体であり、アクセントカラーをシステムに漏らすことなくマーケティングを基礎としています。

_Type は 2 番目の決定的な音声です。各ページには 2 つのカスタム面が含まれます。見出しの場合はウェイト 700 の `UberMove` (表示サイズは 32 ～ 52 ピクセル、行の高さは 1.22 ～ 1.25 で、文字間隔はありません)、本文、ボタン、およびリンクの場合はウェイト 400 / 500 の `UberMoveText` です。この組み合わせはエンジニアリンググレードと言えます。斜体も装飾的な重みも、トラッキングの装飾もありません。見出しは文例ごとに決まります。眉毛はセクション眉毛 (「WHY BECOME」) として使用される場合にのみ大文字になります。ボタンは大文字と小文字を区別します。

単一の形状の特徴が錠剤です。すべてのインタラクティブな要素は `` 999 ピクセルに四捨五入されます。つまり、プライマリ CTA、セカンダリ CTA、微妙な灰色の錠剤、白い浮遊錠剤、カテゴリ チップ、アプリ ダウンロード バッジです。カードとサーフェスは `` 16 ピクセルに丸められます。大きい方の「Go Get 2026」年次ショーケース カードは、同じ 16 ピクセルの形状を縮尺どおりに使用しています。ヒーローの乗車リクエスト フォームのタブ切り替えでは、形状の異なる__CODEBCK_775___ 36 ピクセルが使用されています。これはほとんど錠剤に近いもので、正規の 999 ピクセルの錠剤よりも意図的にきついです。

**主な特徴:**

• 2 色の CTA 階層: 黒 `` 主要なコンバージョン ターゲット用の錠剤。二次用の白い__CODEBCK_777___錠剤（場合によってはソフトドロップシャドウ付き）。微妙な灰色の `` 三次またはチップ バリアント用の錠剤。
• 錠剤は単一の署名形状です — タブ切り替え (`` 36 ピクセル) と大きな商品カード (`` 16 ピクセル) を除くすべてのインタラクティブ要素で `` 999 ピクセル。
• すべての見出しは、__CODEBCK_782___ / `` の重み 700 で文と文字が区別されます。すべて大文字の表示はありません。
• ライダー/ドライバー/車のエディトリアル 4:3 イラストは、唯一の一貫した装飾システムです。グラデーション、雰囲気のある背景、カードの高さのヒント以外の影はありません。
• _特徴的な交互バンドのリズム: 白いフィーチャー カード → 黒のプロモーション カード (白いテキストと白い CTA) → 白いフィーチャー カード → 黒いフッター。黒のバンドはヒーローだけではありません。ページの中央にプロモーションのコールアウトとして表示されます。
• 主人公の署名乗車リクエスト フォーム カード: ピックアップ PIN 入力 + 目的地入力 + 日付/時刻チップ + 黒の「料金を表示」錠剤。すべて `` 影付きカードの中に積み重ねられています。

色

ブランドとアクセント_

• **インク ブラック** (`` — ``): ブランドの唯一の変換カラー。すべての主要な CTA ピル、フッターの塗りつぶし、すべてのダーク プロモーション バンド、すべてのナビゲーション ログイン ボタン。このシステムには二次アクセントはありません。
• **表面押下** (`` — ``): 白い錠剤の押された状態の塗りつぶし — アクティブ/押された状態でのみ使用される柔らかいグレー。
• **ブラック エレベーテッド** (`` — ``): ホバー時に半透明の白いタブトグル ピルに使用される黒に近い色。 繰り返しのブランド コントロールに表示されるため、システム カラーとして文書化されています。

表面

• **キャンバス** (`` — ``): デフォルトのページの背景。
• **キャンバス ソフト** (`` — ``): カテゴリ チップ、配車リクエスト カード内のフォーム入力行、および微妙なピル ボタンのソフト グレーの塗りつぶし。
• **キャンバス ソフト** (`` — ``): 白い表面上のネストされた入力の塗りつぶしとして使用されるわずかに明るいグレー。

テキスト

• **インク** (`` — ``): ライト サーフェス上のすべての見出しと本文の段落。
• **本文** (`` — ``): 二次テキスト — キャプション、小見出し、サポートコピー。
• **ヘアライン ミッド** (`` — ``): フッター列およびパンくずリスト スタイルのナビゲーション内のミュートされたリンク テキストに使用されるミッドグレー。
• **ミュート** (`` — ``): 最も軽いテキストの役割 — プレースホルダー テキスト、細字、優先度の低いメタデータ。
• **ダーク上** (`` — ``): `` 表面上のすべてのテキスト (フッター、ダーク プロモーション バンド)。

セマンティック

このブランドは、公開マーケティング領域で個別のエラー/成功/警告パレットを管理していません。検証の手がかりは、原色の黒またはブランドのエディトリアルイラストから得られます。 `` リンクの色は、システムの唯一の有彩色です。これはブラウザのデフォルトのリンクの青で、法的/フッター テキスト内の本文コピーのインライン リンクに表示されます。

タイポグラフィ

フォント ファミリー

2 つのカスタム面がシステム全体をサポートします:

1. **すべての見出しにカスタム幾何学表示がありません** (__CODEBCK_809___ として抽出)。重量は700のみ。斜体はありません。トラッキング変動なし。サイズの範囲は、ヒーロー上で `display-sm` 20 ピクセルから `display-xxl` 52 ピクセルまでです。表示サイズでは行の高さが 1.22 ～ 1.25 に狭まり、ページ上に注がれたような外観になります。

2. **本文、ボタン、リンク、および小さな見出しのカスタム テキスト sans** (__CODEBCK_812___ として抽出)。重み 400 と 500 が動作ペアです。 12 ～ 18 ピクセルで使用されます。配車リクエストフォームのラベルは最大24ピクセル。追跡は常に中立です。

2 つの顔は家族の DNA を共有していますが、役割が重複することはありません。表示される顔には本文の段落が含まれることはありません。テキスト面にヒーロー見出しが含まれることはありません。

階層

|トークン |サイズ |重量 |行の高さ | |

を使用します

|---|---|---|---|---|

| `` | 52ピクセル | 700 | 64ピクセル |ヒーローの見出し (「Uber でどこへでも」、「好きなときに運転」)。 |

| `` | 36ピクセル | 700 | 44ピクセル |ページセクションの見出し (「後で計画する」、「安全性、簡素化」)。 |

| `` | 32ピクセル | 700 | 40ピクセル |プロモカードの見出し。 |

| `` | 24ピクセル | 700 | 32ピクセル |カードのタイトル、イラスト入りのプロモーション見出し。 |

| `` | 20ピクセル | 700 | 28ピクセル |サブカードの見出し。 |

| `` | 18ピクセル | 500 | 24ピクセル |段落をリードし、本文を大きくします。 |

| `` | 16ピクセル | 400 | 24ピクセル |デフォルトの段落本文。 |

| `` | 16ピクセル | 500 | 20ピクセル |太字のインライン本文とほとんどのボタンのラベル。 |

| `` | 14ピクセル | 400 | 20ピクセル |キャプション、二次メタデータ。 |

| `` | 14ピクセル | 500 | 16ピクセル |太字のキャプション/チップラベル。 |

| `` | 12ピクセル | 400 | 20ピクセル |細字、フッターの補助線。 |

| `` | 18ピクセル | 500 | 24ピクセル |配車リクエストフォーム内の大きな丸いボタン。 |

| `` | 16ピクセル | 500 | 20ピクセル |デフォルトのボタンのラベル。 |

原則

• **文のケースは音声です。** すべて大文字の見出しは使用できません。眉毛タグ (「WHY BECOME」) はまれな例外です。
• **ウェイト 700 は見出し用です。ウェイト 500 はボタンと強調用です。** ボタンのラベルを 700 に昇格しないでください。
• **トラッキング機能はありません。** 表示面には、正または負の文字間隔はありません。
• **2 つの顔、2 つの役割。** 表示用の UberMove。その他すべてについては UberMoveText。決して川を渡らないでください。

フォントの代替に関する注意

2 つの顔は独自のものです。オープンソースの代替品:

• _**表示なし** — `font-feature-settings: "ss01"` を有効にした *Inter* ウェイト 700 が最も近くなります。 *Geist* ウェイト 700 が 2 番目に良いオプションです。
• **Text sans** — *Inter* ウェイト 400 / 500 は、幾何学的な幅と X 高さに一致します。 *Plus Jakarta Sans* は、ブランドがよりニュートラルな雰囲気を求めている場合に、よりソフトな選択肢となります。

レイアウト

間隔システム_

• **基本単位**: 4 ピクセル。キャプチャされた値のほとんどは 4 の倍数で、ボタンのパディング内にいくつかの 6 ピクセルの約数 (10、14) が含まれています。
• **トークン**: `` 4 px · `` 6 px · `` 8 px · `` 12 px · `` 16 px · `` 20 px · `` 24 ピクセル · `` 32 ピクセル.
• **セクション パディング**: マーケティング バンドは、タイトなページでは `` 32 ピクセルの上下に配置され、ヒーロー バンドの場合は ` ` に配置されます。プロモーション カードは `` 24 ピクセルに挿入されます。
• **カード内部パディング**: コンテンツ カードは `` 24 ピクセルに配置されます。配車リクエスト フォームは、フォームをコンパクトに保つために `` 16 ピクセルを使用します。
• **インライン ギャップ**: ボタン行、カテゴリ チップ行、アプリストアの錠剤行では、兄弟間で `` 12 ピクセルを使用します。

グリッドとコンテナ

• **最大幅**: ~1200 ピクセルのコンテナ。デスクトップでは `` 32 ピクセル、モバイルでは `` 16 ピクセルの水平方向の余白が中央に配置されます。
• **列パターン**:
• プロモーション カードの行: デスクトップでは 2 列 (画像左 + コンテンツ右、交互)、モバイルでは 1 列。
• カテゴリ チップ: ラップ付きの水平方向のフレックス。
• FAQ 行: 全角の単一列。
• アプリのダウンロード錠剤: デスクトップでは 2 アップ (ライダー + ドライバー)、モバイルでは 1 アップ。

ホワイトスペースの哲学

カード間の間隔がリズムを伝えます。積み重ねられた 2 枚のプロモ カードの間には、ほぼ完全な `` 32 ピクセルの余白があります。カード内の見出し/段落/CTA スタックはタイトです (兄弟間で`` 8 ピクセル)。 黒のプロモーション バンドとフッターには内部ヘアラインがありません。コンテンツはフラットなインクの上に白のテキストで表示されます。

レスポンシブ戦略

__HTMLTAG_377__#### ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 600px | Nav collapses to hamburger; promo cards stack; ride-request form becomes full-width. |

|モバイル-大 | 600–767ピクセル |モバイルと同じ。チップ行により水平スクロールが可能になります。 |

|タブレット | 768–1119ピクセル |上部の幅に 2 アップのプロモーション グリッド。ナビゲーションは 1120 ピクセル以上になるまで水平を保ちます。 |

|デスクトップ | 1120–1135ピクセル |完全なナビゲーション行が表示されます。プロモカード2アップ。 |

|デスクトップ-大 | ≥ 1136 ピクセル |コンテナのキャップは約 1200 ピクセルです。コンテンツは中心にありながら、バンドは端から端まで留まります。 |

#### タッチターゲット

錠剤 `button-primary` は、高さ約 44 ピクセル (垂直方向のパディング 10 ピクセル + ラベルの行の高さ 24 ピクセル) でレンダリングされます。大きい__CODEBCK_846___は約56ピクセルです。どちらもすべてのブレークポイントで WCAG AAA を満たしています。カテゴリ チップは、タッチ ビューポートの追加パディングによって高さ 44 ピクセル以上に膨張します。

_#### 戦略の崩壊

• **ナビゲーション**: 完全なリンク行 + ヘルプ / ログイン / デスクトップでの錠剤のサインアップ。モバイルではロゴとハンバーガーに折りたたまれます。メニューは、同じリンク リストが積み重ねられた状態で全画面にオーバーレイされます。
• **配車リクエスト フォーム カード**: デスクトップでは、フォームは影付きの最大 490 ピクセルの `` カード内に配置されます。モバイルでは、全幅で端から端まで。
• **プロモーション カード**: デスクトップで、画像左 + コンテンツ右 (または交互)。モバイルでは、画像は常にコンテンツの上にあります。
• **年次ショーケース カード**: 2:3 デスクトップ フレームから 4:3 モバイル フレームまで拡張可能。日付テキストのサイズが比例して変更されます。

#### 画像の動作

• **エディトリアルイラスト**: 4:3 または 16:9 のハードエッジ長方形。決して円形にトリミングしたり、傾けたりしたことはありません。アスペクトは保持されます。
• **写真**: 同じ — 正方形または風景。 `` カード クロム内にフレーム化されています。
• _**配車リクエスト フロー内の地図**: カード内のフルブリード。丸い角は親カードに従います。
• **ロゴ バー**: SVG ベクター、モノクロ、一貫した高さ。

標高と深さ

|レベル |治療 | |

を使用します

|---|---|---|

|レベル 0 — フラット |影も境界線もありません。 |デフォルト — ほとんどのカードとサーフェスは、キャンバスのヘアラインのコントラストに依存します。 |

|レベル 1 — 微妙なドロップ | `rgba(0, 0, 0, 0.12) 0px 4px 16px 0px` |ライトバンド上のプロモカードの周りにカードを持ち上げたフレーム。 |

|レベル 2 — カードドロップ | `rgba(0, 0, 0, 0.16) 0px 4px 16px 0px` |主人公の乗車リクエストフォームカード。フォームが埋め込まれた大きなコンテンツ カード。 |

|レベル 3 — ピルフロート | `rgba(0, 0, 0, 0.16) 0px 2px 8px 0px` |浮かぶ白い薬のボタン (ヒーローの写真の上に浮かぶボタン)。 |

装飾の深さ

• **極性反転深度としての黒のバンド**: このブランドは、白地に白のリズムを打ち破るために、純粋な黒の__CODEBCK_852___ ページ中央バンドを使用しています。極性シフトは深度の手がかりです。
• **カード内の深さとしてのエディトリアル イラスト**: すべてのプロモーション カードには、左または右の列として 4:3 のイラストが 1 つあります。 イラストの視覚的な重みは、カードの標高の一部として読み取られます。
• **マイクロ深度としての錠剤のジオメトリ**: `` 999 ピクセルをさまざまなボタンの高さに適用すると、視覚的な階層として読み取れるネストされた錠剤のスタックが作成されます。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |フルブリードのヒーローバンド、フッターの塗りつぶし、生の画像のエッジ。 |

| `` | 8ピクセル |配車リクエストカード内のフォーム入力フィールド。 |

| `` | 12ピクセル |小さめのセカンダリ カード クロム。 |

| `` | 16ピクセル |正規のカード範囲 — プロモーション カード、コンテンツ カード、乗車リクエスト フォーム カード、年次ショーケース カード、大きな丸いボタン。 |

| `` | 999ピクセル |ブランドの特徴であるインタラクティブな形状 - すべての錠剤ボタン、カテゴリ チップ、アプリをダウンロードする錠剤、アイコン ボタン。 |

| `` | 36ピクセル |主人公（ライド/ドライブ）に装着されている半透明の白いタブトグル錠剤。 |

| `` | 9999ピクセル |円形アイコンコンテナに対する__CODEBCK_861___と同じ効果。 |

写真の幾何学

• **エディトリアルイラスト**: プロモーション カード内の 4:3 風景。全幅ショーケース フレームの場合は 16:9。
• **ドライバー/ライダーのポートレート**: 4:5 ポートレートクロップ。 `` 16 ピクセルのカード クロムでフレーム化されています。
• **年次ショーケース画像**: デスクトップでは 2:3 の縦長、モバイルでは 4:3 に拡大縮小されます。画像がカード全体に表示されます。見出しは下部にオーバーレイされます。
• **ロゴ バー**: 一貫した高さ約 24 ピクセルのモノクロ SVG ベクトル。
• **アバター** (使用する場合): 正方形または__CODEBCK_863___ 円形、__CODEBCK_864___ 角丸正方形は使用しないでください。

コンポーネント

ボタン

**`button-primary`** — 正規の黒い錠剤、ブランドのコンバージョン ターゲット。

• 背景__CODEBCK_866___、テキスト__CODEBCK_867___、__CODEBCK_868___に設定されたラベル、パディング__CODEBCK_869___、形状__CODEBCK_870___ 999ピクセル

**`button-secondary`** — 黒のプライマリと組み合わせた白い錠剤。

• 背景__CODEBCK_872___、テキスト__CODEBCK_873___、__CODEBCK_874___と同じラベルとパディング、形状__CODEBCK_875___.

_**`button-subtle`** — カード内の 3 番目のアクション (例: 「詳細を確認」/「予約を使用」) に使用される灰色の 2 番目の錠剤。

• 背景__CODEBCK_877___ (``)、テキスト__CODEBCK_879___、ラベル__CODEBCK_880___、パディング__CODEBCK_881___、形状__CODEBCK_882___.

_**`button-floating`** — 暗いまたは写真の表面に浮かぶ、微妙なドロップシャドウが付いた白い錠剤。

• 背景__CODEBCK_884___、テキスト__CODEBCK_885___、パディング__CODEBCK_886___、形状__CODEBCK_887___。 レベル 3 のピルフロート シャドウを持ちます。

**`button-large-rounded`** — 配車リクエスト フロー内で使用される大きな黒い CTA (CTA) (「はい、助けてください」)。

• 背景__CODEBCK_889___、テキスト__CODEBCK_890___、__CODEBCK_891___のラベル、パディング__CODEBCK_892___、形状__CODEBCK_893___ 16ピクセル（ピルではありません。ピルのルールに違反する唯一の黒いCTAで、より大きなフォームコンテキストで使用されます）。

**`button-tab-translucent`** — ヒーローの乗車リクエスト フォーム (乗車 / ドライブ) のタブ切り替え。

• 背景__CODEBCK_895___、テキスト__CODEBCK_896___、ラベル__CODEBCK_897___、形状__CODEBCK_898___ 36ピクセル（形状が異なり、正規の999ピクセルの丸薬よりも意図的に狭い）

カードとコンテナ

**`card-content`** — 正規のコンテンツ カード。

• 背景__CODEBCK_900___、テキスト__CODEBCK_901___、パディング__CODEBCK_902___、形状__CODEBCK_903___ 16ピクセル。デフォルト状態では影はありません。

**`card-elevated`** — レベル 1 の微妙な低下があるコンテンツ カード。

• 背景__CODEBCK_905___、テキスト__CODEBCK_906___、__CODEBCK_907___と同じパディングと形状。レベル 1 のシャドウ。

**`card-soft-tinted`** — ページ内のサブ領域として使用される灰色がかったカード (例: 「後で計画する」吹き出し)。

• 背景__CODEBCK_909___、テキスト__CODEBCK_910___、パディング__CODEBCK_911___、形状__CODEBCK_912___.

_**`promo-card-illustrated`** — 片面にイラスト、もう片面にコピーが記載された 2 列のプロモーション カード。

• 背景__CODEBCK_914___、テキスト__CODEBCK_915___、パディング__CODEBCK_916___、形状__CODEBCK_917___。 `` 以上の見出し。

**`promo-card-on-dark`** — 黒の極性反転プロモーション カード。

• 背景__CODEBCK_920___、テキスト__CODEBCK_921___、パディング__CODEBCK_922___、形状__CODEBCK_923___。 「Drive with Uber」ページ中央のバンドに使用されます。

**`request-form-card`** — ヒーローの乗車リクエスト フォーム クロム。

• 背景__CODEBCK_925___、テキスト__CODEBCK_926___、パディング__CODEBCK_927___、形状__CODEBCK_928___。レベル 2 カードのドロップ シャドウを持ちます。

**`request-form-input-row`** — リクエスト フォーム カード内のフィールドごとの行。

• 背景__CODEBCK_930___、テキスト__CODEBCK_931___、パディング__CODEBCK_932___、形状__CODEBCK_933___ 8ピクセル。アイコン + ラベル + 値をホストします。

**`showcase-image-card`** — 巨大な「GO•GET 2026」年次ショーケース カード。

• 背景__CODEBCK_935___、テキスト__CODEBCK_936___オーバーレイ、パディング__CODEBCK_937___、形状__CODEBCK_938___。 Display-xxl の見出しが画像の下部にオーバーレイされます。

入力とフォーム

**`text-input`** — 正規のテキスト入力。

• 背景__CODEBCK_940___、テキスト__CODEBCK_941___、本文__CODEBCK_942___、パディング__CODEBCK_943___、形状__CODEBCK_944___ 8ピクセル

**`text-input-on-soft`** — 白いカード上のネストされた入力 (わずかに明るい塗りつぶし)。

• 背景__CODEBCK_946___、それ以外は__CODEBCK_947___と同一。

ナビゲーション

**`nav-bar`** — スティッキートップナビゲーション

ライト ページでは
• 背景 ``、まれにダーク ページ (Uber Eats ヒーローなど) では `` に切り替わります。パディング ` `.

_**`nav-link`** — `nav-bar`.

内のリンク行

• テキスト__CODEBCK_954___、__CODEBCK_955___ 500ウェイトで設定。

**`footer`** — 真っ黒のフッター バンド。

• 背景__CODEBCK_957___ (ブランドの唯一の真の黒い表面)、テキスト__CODEBCK_958___、パディング__CODEBCK_959___。 `` の本体。 ``.
の列眉毛

署名コンポーネント

**`hero-band-light`** — 乗車リクエスト カードを持った白いヒーロー。

• 背景__CODEBCK_963___、テキスト__CODEBCK_964___、パディング__CODEBCK_965___。左側の__CODEBCK_966___ (52 px / 700) の見出し。 `request-form-card` 右側。

_**`hero-band-dark`** — 珍しい黒人のヒーロー (Uber Eats とドライブの着陸で使用)。

• 背景__CODEBCK_969___、テキスト__CODEBCK_970___、パディング__CODEBCK_971___。同じディスプレイ xxl 見出しスケール。 CTA は__CODEBCK_972___ の白い錠剤に反転します。

**`category-button`** — 水平スクロール カテゴリ行 (「予約 / レンタル / ティーン / グループ乗り物」)。

• 背景__CODEBCK_974___、テキスト__CODEBCK_975___、ラベル__CODEBCK_976___、パディング__CODEBCK_977___、形状__CODEBCK_978___。アイコンはラベルの前にあります。

**`faq-row`** — FAQ アコーディオン項目。

• 背景__CODEBCK_980___、テキスト__CODEBCK_981___、質問__CODEBCK_982___、パディング__CODEBCK_983___ 0. カードクロムなし - 行間のヘアライン区切り。

**`app-download-pill`** — 「Rider アプリをダウンロード」/「ドライバー アプリをダウンロード」という錠剤。

• 背景__CODEBCK_985___、テキスト__CODEBCK_986___、ラベル__CODEBCK_987___、パディング__CODEBCK_988___、形状__CODEBCK_989___.

_**`icon-button-circular`** — ナビおよび配車リクエスト カード内で使用される丸いアイコン コンテナ。

• 背景__CODEBCK_991___、暗いアイコン、形状__CODEBCK_992___。 ラベルがありません。

リンク

**`link-blue`** — 法的/フッターの細字内のシステムデフォルトのブラウザーの青いリンク。

• テキスト__CODEBCK_994___ (``)、本文は__CODEBCK_996___.

**`link-on-dark`** — 暗い帯内の白いリンク。

• テキスト__CODEBCK_998___、本文は__CODEBCK_999___.

**`link-mute`** — フッター列内のミュートされた灰色のリンク。

• テキスト__CODEBCK_1001___、本文は__CODEBCK_1002___.

_**`link-mute-soft`** — 最も明るい灰色のリンク。暗い表面上の優先度の低い二次テキストに使用されます。

• テキスト__CODEBCK_1004___、本文は__CODEBCK_1005___.

例 (説明)

> 自動派生キットミラー デモンストレーション サーフェス (`scripts/derive-examples-block.mjs`)。各 `ex-*` エントリはブランドネイティブのプリミティブを参照するため、下流のコンシューマ (`/preview-design`、__CODEBCK_1009___) は同じ 10 個のサーフェスを一貫して再スキンします。 `TO_FILL` マーカーはプリミティブが欠落していることを示しています — LLM 判定パスで解決されます。

_**`ex-pricing-tier`** — デフォルトの価格帯カード。ブランドキャンバスのような柔らかい表面を備えたフィーチャーカードクロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_1013___、__CODEBCK_1014___、__CODEBCK_1015___、__CODEBCK_1016__HTMLTAG_677___

**`ex-pricing-tier-featured`** — 注目/ハイライト層 — 極性反転サーフェス (ライト モードでは暗い塗りつぶし + 明るいテキスト、ダーク モードでは明るい塗りつぶし + 暗いテキスト)。

• プロパティ: `backgroundColor`、__CODEBCK_1019___、__CODEBCK_1020___、__CODEBCK_1021___

**`ex-product-selector`** — 含まれるもの概要カード — SaaS / B2B 業種向けに再利用されています (文字通りの製品ギャラリーではありません)。

• プロパティ: `backgroundColor`、__CODEBCK_1024___、__CODEBCK_1025___

**`ex-cart-drawer`** — サブスクリプションの概要 — SaaS / B2B 用に再利用されました (文字通りのカートではなく、アドオンごとの品目)。

• プロパティ: `backgroundColor`、__CODEBCK_1028___、__CODEBCK_1029___、__CODEBCK_1030___

**`ex-app-shell-row`** — App Shell サンプル内のサイドバーのナビゲーション行。アクティブな状態では、ブランドのプライマリを指標として使用します。

• プロパティ: `backgroundColor`、__CODEBCK_1033___、__CODEBCK_1034___、__CODEBCK_1035__HTMLTAG_701___

_**`ex-data-table-cell`** — デフォルトのデータテーブル th + td chrome。ヘッダーにはモノキャップの眉毛タイポグラフィが使用されています。 body は body-sm を使用します。

• プロパティ: `headerBackground`、__CODEBCK_1038___、__CODEBCK_1039___、__CODEBCK_1040___、__CODEBCK_1041___

**`ex-auth-form-card`** — サインイン/サインアップ カード。 テキスト入力プリミティブを内部に備えた機能カード クロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_1044___、__CODEBCK_1045___

**`ex-modal-card`** — モーダル ダイアログ サーフェス — 影が高くなったフィーチャー カードと同じクロム。

• プロパティ: `backgroundColor`、__CODEBCK_1048___、__CODEBCK_1049___

**`ex-empty-state-card`** — 空の状態のイラスト フレーム。

• プロパティ: `backgroundColor`、__CODEBCK_1052___、__CODEBCK_1053___、__CODEBCK_1054___

**`ex-toast`** — トースト通知面 — フィーチャー カードの形状 + 中程度の影。

• プロパティ: `backgroundColor`、__CODEBCK_1057___、__CODEBCK_1058___、__CODEBCK_1059__HTMLTAG_731___

推奨事項と禁止事項

実行

• すべての CTA 主要錠剤に対して__CODEBCK_1060___ (``) を予約します。表示されるビューポートごとに 1 つの黒い錠剤が、ブランドのコンバージョン ストーリー全体となります。
• すべてのインタラクティブ要素 (ボタン、チップ、アプリの錠剤) で `` 999 ピクセルを使用します。錠剤はブランドの幾何学模様のサインです。
• カードを `` 16 ピクセルでレンダリングします — プロモーション カード、コンテンツ カード、配車リクエスト フォーム カード、年次ショーケース カードはすべてこの範囲を共有します。
• __CODEBCK_1064___ のすべての見出しを文例の重み 700 に設定します。表示面にボディコピーが表示されることはありません。
• ページの途中で極性を反転した黒のプロモーション バンドを使用して、白地に白のリズムを崩します。極性のシフトは深度の手がかりです。
• すべてのプロモーション カードを 4:3 のエディトリアル イラストでアンカーします。一般的なストック画像は決して使用しないでください。

しないでください

• _ブランドの 2 番目のアクセント カラー (オレンジ、青、緑) を導入しないでください。ブランドの UI 全体は白黒とグレースケールです。新しいアクセントによりシステムがフラット化されます。
• より大きな配車リクエスト フロー内を除き、プライマリ CTA を `` 四角形としてレンダリングしないでください (_`button-large-rounded` は文書化された例外です)。
• _すべて大文字の表示見出しを使用しないでください。文のケースは音声です。大文字は、まれな眉毛タグに限定されます。
• すべてのカードにソフト ドロップ シャドウを適用しないでください。このブランドはデフォルトとしてレベル 0 フラットを使用します。シャドウは、フローティング ピルと配車リクエスト フォーム用に予約されています。
• ブランドをイラスト システムだけに還元しないでください。錠剤の幾何学模様 + 黒/白のデュエットは、イラストがなくてもブランドを伝えます。
• _ディスプレイ面の文字の間隔を狭めたり緩めたりしないでください。ブランドは決して文字スペースを使いません。デフォルトのトラッキングは音声の一部です。
• 正方形のカードには `` 9999 ピクセルを使用しないでください。ピルの 999 ピクセルとフル 9999 ピクセルの効果はインタラクティブ要素では同じですが、カードは `` 16 ピクセルのままです。

Industry Context

In the landscape of modern digital products, Uber's design system stands out for its distinctive visual identity. Compared to peers, Uber invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Uber's design system stands out for its distinctive visual identity. Compared to peers, Uber invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Uber's design system stands out for its distinctive visual identity. Compared to peers, Uber invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Related Design Systems

Explore similar design languages from the same category:

• Wired Design System
• Shopify Design System
• Snapchat Design System
• Vodafone Design System