Design System Uber

PROEngine v4

Bahasa desain Uber memadukan minimalisme yang bersih dengan ilustrasi yang cerah untuk menciptakan platform transportasi yang ramah namun tetap profesional. Fondasi hitam-putih yang tegas memberikan kejelasan dan keterbacaan, sementara ilustrasi hero yang berwarna-warni menghadirkan kehangatan dan kedekatan dengan manusia. Tipografi mengandalkan keluarga font kustom UberMove demi konsistensi merek, dengan spasi yang lapang sehingga antarmuka terasa lega di setiap bagiannya.

Sistem visual

100% keyakinan

88% keyakinan

hero-displayDesign is intelligence made visibleUber Move52px / 700 / 1.25

display-lgDesign is intelligence made visibleUber Move44px / 700 / 1.2

display-mdDesign is intelligence made visibleUber Move36px / 700 / 1.2

title-lgDesign is intelligence made visibleUber Move28px / 700 / 1.3

title-mdDesign is intelligence made visibleUber Move24px / 700 / 1.35

title-smDesign is intelligence made visibleUber Move Text18px / 500 / 1.35

bodyDesign is intelligence made visibleUber Move Text16px / 400 / 1.5

body-strongDesign is intelligence made visibleUber Move Text16px / 500 / 1.5

body-relaxedDesign is intelligence made visibleUber Move Text16px / 400 / 2

buttonDesign is intelligence made visibleUber Move Text16px / 500 / 1.25

body-smDesign is intelligence made visibleUber Move Text14px / 400 / 1.45

nav-linkDesign is intelligence made visibleUber Move Text14px / 500 / 1.15

captionDesign is intelligence made visibleUber Move Text12px / 400 / 1.65

100% keyakinan

button-primary-padding-y
10px

button-ghost-2-padding-y
10px

button-secondary-3-padding-y
10px

button-secondary-4-padding-y
10px

button-ghost-4-padding-y
10px

button-secondary-6-padding-y
10px

button-primary-padding-x
12px

button-ghost-2-padding-x
12px

button-secondary-3-padding-x
12px

button-secondary-4-padding-x
12px

button-ghost-4-padding-x
12px

button-secondary-6-padding-x
12px

button-primary-2-padding-y
14px

button-secondary-padding-y
14px

button-secondary-2-padding-y
14px

button-secondary-2-padding-x
14px

button-primary-4-padding-y
14px

button-primary-6-padding-y
14px

button-secondary-5-padding-y
14px

button-secondary-padding-x
16px

button-primary-2-padding-x
25px

button-primary-4-padding-x
25px

button-primary-6-padding-x
25px

button-secondary-5-padding-x
25px

header-inner-2-inner-max-width
1408px

100% keyakinan

xs · 4px

sm · 6px

md · 8px

lg · 12px

xl · 16px

full · 9999px

Komponen

Buttons18

Tidak dicek

ghost · desktop

Elemen tidak dapat ditemukan lagi di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

Tidak dicek

ghost · desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

100% kecocokan

ghost · desktop

DiamKecocokan 100%56 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

96% kecocokan

ghost · desktop

Saat focus, hasil render-nya 96% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 96%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

Tidak dicek

ghost · desktop

Elemen tidak dapat ditemukan lagi di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

67% kecocokan

primary · desktop

Hasil render-nya 67% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 67%21 ukuran cocok

Asli

Render

HoverKecocokan 67%18 ukuran cocok

Asli

Render

FocusKecocokan 77%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

primary · desktop

DiamKecocokan 99%21 ukuran cocok

Asli

Render

HoverKecocokan 99%18 ukuran cocok

Asli

Render

FocusKecocokan 98%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

Tidak dicek

primary · desktop

Elemen tidak dapat ditemukan lagi di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%22 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%89 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%56 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

Cards9

100% kecocokan

desktop

DiamKecocokan 100%100 ukuran cocok

Render terpisah dari Card, diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card, hover — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Card, focus — Render

Diam, instance 2Kecocokan 100%100 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%100 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%100 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%100 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%100 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group height bernilai 291px, sedangkan situs memakai 303px; Group 4 height bernilai 72px, sedangkan situs memakai 84px dan 1 lainnya.

DiamKecocokan 100%3 dari 154 ukuran berbeda

Render terpisah dari Card (2), diam — Render

Diam, instance 2Kecocokan 100%3 dari 154 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%3 dari 154 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%3 dari 154 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group height bernilai 364px, sedangkan situs memakai 396px; Group 4 height bernilai 104px, sedangkan situs memakai 136px dan 2 lainnya.

DiamKecocokan 100%4 dari 176 ukuran berbeda

Render terpisah dari Card (3), diam — Render

Diam, instance 2Kecocokan 100%4 dari 176 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%4 dari 176 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group width bernilai 0px, sedangkan situs memakai 360px; Group 2 width bernilai 0px, sedangkan situs memakai 360px dan 3 lainnya.

DiamKecocokan 100%5 dari 176 ukuran berbeda

Render terpisah dari Card (4), diam — Render

Diam, instance 2Kecocokan 100%5 dari 176 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%5 dari 176 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group 2 width bernilai 9px, sedangkan situs memakai 360px; Group 4 x bernilai 45px, sedangkan situs memakai 495px dan 5 lainnya.

DiamKecocokan 100%7 dari 174 ukuran berbeda

Render terpisah dari Card (5), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (5), hover — Render

FocusKecocokan 100%1 dari 18 ukuran berbeda

Render terpisah dari Card (5), focus — Render

Diam, instance 2Kecocokan 100%7 dari 174 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%7 dari 174 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group width bernilai 396px, sedangkan situs memakai 360px; Group 2 width bernilai 396px, sedangkan situs memakai 360px dan 1 lainnya.

DiamKecocokan 100%3 dari 88 ukuran berbeda

Render terpisah dari Card (6), diam — Render

Diam, instance 2Kecocokan 100%3 dari 88 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%3 dari 88 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Root height bernilai 416px, sedangkan situs memakai 380px; Group 3 height bernilai 208px, sedangkan situs memakai 172px dan 3 lainnya.

DiamKecocokan 100%5 dari 246 ukuran berbeda

Render terpisah dari Card (7), diam — Render

Diam, instance 2Kecocokan 100%5 dari 246 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%5 dari 246 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%5 dari 246 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%5 dari 246 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%5 dari 246 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

90% kecocokan

desktop

Group width bernilai 396px, sedangkan situs memakai 360px; Group 2 width bernilai 396px, sedangkan situs memakai 360px dan 2 lainnya.

DiamKecocokan 90%4 dari 110 ukuran berbeda

Render terpisah dari Card (9), diam — Render

Diam, instance 2Kecocokan 90%4 dari 110 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 92%4 dari 110 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras4

100% kecocokan

desktop

DiamKecocokan 100%97 ukuran cocok

Benefit list item asli di situs, diam — Asli

Render terpisah dari Benefit list item, diam — Render

Diam, instance 2Kecocokan 100%97 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%97 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

Group width bernilai 124px, sedangkan situs memakai 120px; Button x bernilai 1032px, sedangkan situs memakai 1036px dan 1 lainnya.

DiamKecocokan 99%3 dari 113 ukuran berbeda

Carousel controls asli di situs, diam — Asli

Render terpisah dari Carousel controls, diam — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 99%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

95% kecocokan

desktop

Hasil render-nya 95% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 95%264 ukuran cocok

Sub navigation asli di situs, diam — Asli

Render terpisah dari Sub navigation, diam — Render

Resep di DESIGN.md

Headers6

93% kecocokan

desktop

Hasil render-nya 94% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 94%651 ukuran cocok

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Hovertidak dicek

Header (inner) asli di situs, hover — Asli

Render terpisah dari Header (inner), hover — Render

Focustidak dicek

Header (inner) asli di situs, focus — Asli

Render terpisah dari Header (inner), focus — Render

Focus pada cta 2Kecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 3Kecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 3Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 4Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 4Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%372 ukuran cocok

Header (inner, 2) asli di situs, diam — Asli

Render terpisah dari Header (inner, 2), diam — Render

Hovertidak dicek

Header (inner, 2) asli di situs, hover — Asli

Render terpisah dari Header (inner, 2), hover — Render

Focustidak dicek

Header (inner, 2) asli di situs, focus — Asli

Render terpisah dari Header (inner, 2), focus — Render

Focus pada cta 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 3Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 3Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 4Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 4Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

94% kecocokan

desktop

Hasil render-nya 95% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 95%592 ukuran cocok

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Focustidak dicek

Header (landing) asli di situs, focus — Asli

Render terpisah dari Header (landing), focus — Render

Focus pada cta 2Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 3Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 3Kecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 4Kecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 4Kecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada nav linkKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Footers2

60% kecocokan

desktop

Group height bernilai 547px, sedangkan situs memakai 1013px; Group 2 height bernilai 547px, sedangkan situs memakai 1013px dan 54 lainnya.

DiamKecocokan 60%56 dari 594 ukuran berbeda

Render terpisah dari Footer, diam — Render

Resep di DESIGN.md

27% kecocokan

mobile

Group height bernilai 499px, sedangkan situs memakai 2066px; Group 2 height bernilai 499px, sedangkan situs memakai 2066px dan 68 lainnya.

DiamKecocokan 27%70 dari 572 ukuran berbeda

Resep di DESIGN.md

Input1

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

DESIGN.md

Uber

Overview

Uber's marketing system is uncompromising monochrome. Pure black and pure white do almost all of the work: a sticky black header with white pill links, black headlines on white bands, dark graphite cards on black, and white pill buttons that pop off dark surfaces. Color is held back. A single blue exists for focus, a deeper blue for links and tags, and navy and pale teal appear only as illustration and band accents. Warm lifestyle photography supplies the emotion, so the UI chrome can stay cold and direct.

Density is moderate. Copy is short and imperative, controls are compact (36px header pills, 48px content CTAs), and sections breathe with generous vertical gaps. Hierarchy comes from three levers only: the heavy geometric Uber Move display face against the quieter Uber Move Text, inversion between black and white bands, and tonal fills (graphite on black, light gray on white). It does not come from drop shadows or saturated color.

Interaction feedback is engineered rather than decorative. Hover darkens or lightens a control with a full-cover inset box-shadow overlay. Focus draws a white inner ring plus a focus-ring blue outer ring. Neither changes the layout.

Key Characteristics:

Black (primary, #000000) and white (surface, #FFFFFF) carry nearly all surfaces and text; the inverted band is the main sectioning device.
Two typefaces: Uber Move for bold 24–52px headlines, Uber Move Text for everything at 18px and below.
Only three weights exist: 400, 500 and 700. Letter-spacing is always normal.
Pills (rounded.full) for 36px header and utility controls; 8px (rounded.md) for 48px content CTAs and dark cards.
No drop shadows. Hover and focus are drawn with inset box-shadow overlays and a blue focus-ring ring.
Gray tiers (body through muted-light) build text hierarchy instead of color.
No gradients; accents (accent-navy, accent-teal) are rare band and illustration fills.

Colors

The palette is a black/white core with a gray text ladder and a handful of tightly scoped blues. The site uses no gradients; every surface is a solid fill.

Core Monochrome

Uber Black (primary, #000000): header bar, footer band, dark hero sections, black pill buttons (button-secondary-3, button-ghost-4) and the primary text color on white. This is the brand.
Ink (ink, #000000): default body and headline text on light surfaces; identical in value to primary, so use it to express a text role.
Paper White (surface, #FFFFFF): light page bands, sub-navigation bar (flagged: the render matched 95% of the original pixels, below the 96% required), benefit-list-item rows.
On-Black White (on-primary, #FFFFFF): all text on black, plus the white pill fill of button-primary and button-secondary-6 sitting on the black header.
Graphite (surface-dark, #292929): the dark service tiles of card, set on black so they read one step up without a shadow.

Text Tiers

Charcoal (body, #333333): long-form body copy on white; the most-used non-black text color.
Slate (body-secondary, #4A4A4A): secondary paragraphs and supporting lines.
Muted Gray (muted, #5E5E5E): metadata and descriptions, e.g. the card-7-text line in blog cards.
Soft Gray (muted-soft, #6B6B6B): low-emphasis captions.
Disabled Gray (muted-light, #A6A6A6): inactive controls, e.g. the disabled arrow on carousel-control-button (carousel-control flagged: its group width did not reproduce the measured 120px).

Neutral Fills

Fog (surface-subtle, #EFEFEF): light-gray control and band fill; the fill of button-secondary.

Links & Accents

Link Blue (link, #175BCC): inline links and the text of blog category tags (card-7-group-5).
Browser Blue (link-default, #0000EE): the user-agent default on wrapper anchors such as card-link and card-7-link; it is inherited, not a design choice, and should never be visible text.
Night Navy (accent-navy, #002661): the deep CTA band on the business page and illustration accents.
Pale Teal (accent-teal, #9DCDD6): illustration and light accent fills only.

Component & State Colors

These were measured on component recipes, never in page sampling.

Focus Blue (focus-ring, #276EF1): the outer 2px focus ring on every button and nav link, and the 3px outline on the header logo. Reserve it for focus.
Pressed Gray (chip, #E2E2E2): the hover and focus fill of white pills such as button-primary and button-secondary-6.
Recipe-only fills: #F3F3F3 on button-secondary-2 (the circular icon button); #EEEEEE on button-primary-4; #EFF4FE behind the card-7-group-5 tag (card-7 flagged: its height did not reproduce the measured 380px).
Hairline: card-7 carries a 1px solid #00000014 border, the only measured border on a container.

Typography

Font Family

Uber Move (geometric display grotesque, proprietary): every headline from title-md up to hero-display, always at weight 700. It also sets the wordmark text in header-landing-logo and header-inner-2-logo at 24px / 400.
Uber Move Text (text-optimized companion, proprietary): body, labels, nav links and every button. Recipes declare the stack UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	52px	700	1.25	normal	Page h1 in heroes
`display-lg`	44px	700	1.2	normal	Oversized feature headline
`display-md`	36px	700	1.2	normal	Section h2 headings
`title-lg`	28px	700	1.3	normal	Blog card titles (`card-7-cta`)
`title-md`	24px	700	1.35	normal	Card and sub-section h3
`title-sm`	18px	500	1.35	normal	Small headings, service and step titles (Uber Move Text)
`body`	16px	400	1.5	normal	Default paragraph text
`body-strong`	16px	500	1.5	normal	Emphasized inline text, strong links
`body-relaxed`	16px	400	2	normal	Airy list and link stacks
`button`	16px	500	1.25	normal	48px CTAs (`button-primary-2`, `button-secondary`)
`body-sm`	14px	400	1.45	normal	Supporting copy, footnotes
`nav-link`	14px	500	1.15	normal	Header links and 36px pills (`nav-link`, `button-primary`)
`caption`	12px	400	1.65	normal	Legal and fine print; `card-body` descriptions

Principles

Three weights, no exceptions. 400 for reading, 500 for anything interactive or labeled, 700 reserved for Uber Move headlines. Never set Uber Move Text at 700 or Uber Move headlines at 500.
The family switch happens at 24px. At 24px and above with weight 700, use Uber Move. At 18px and below, use Uber Move Text.
Letter-spacing is always normal. The display face is already tight; do not add negative tracking or uppercase tracking.
Line height loosens as size drops. Headlines sit at 1.2–1.35, body at 1.5, captions at 1.65 and relaxed stacks at 2. Controls use tight fixed leading: 16px on 14px labels, 20px on 16px labels.

Note on Font Substitutes

Uber Move and Uber Move Text are proprietary. Without a license, substitute Inter for Uber Move Text at the same sizes and weights (400/500). Inter runs slightly wide, so keep 14px labels at 14px rather than scaling up. For Uber Move headlines, use Manrope or Inter Display at 700, with letter-spacing left at normal or tightened by at most a hair at 44–52px. Keep the recipe fallback stack (system-ui, Helvetica Neue, Arial) after the substitute.

Layout

Spacing System

No base step was published. The verified spacing tokens are all control paddings, and they fall into two families that map one-to-one onto control heights:

Token	Value	Read on
`button-secondary-3-padding-y` / `-padding-x`	10px / 12px	`button-secondary-3`
`button-secondary-4-padding-y` / `-padding-x`	10px / 12px	`button-secondary-4`
`button-ghost-4-padding-y` / `-padding-x`	10px / 12px	`button-ghost-4`
`button-secondary-6-padding-y` / `-padding-x`	10px / 12px	`button-secondary-6`
`button-primary-4-padding-y` / `-padding-x`	14px / 25px	`button-primary-4`
`button-primary-6-padding-y` / `-padding-x`	14px / 25px	`button-primary-6`
`button-secondary-5-padding-y` / `-padding-x`	14px / 25px	`button-secondary-5`
`button-secondary-2-padding-y` / `-padding-x`	14px / 14px	circular icon button `button-secondary-2`

The rule is simple. Compact pills use 10px by 12px. Full-size CTAs use 14px vertical with 25px horizontal. Icon-led pills drop the horizontal padding to 16px, and the square icon button goes even at 14px.

Grid & Container

The header content is capped by header-inner-2-inner-max-width (1408px) and centered. Content sections use a narrower centered column. The screenshots show multi-up grids of service tiles, step cards, blog cards and footer link columns, plus two-part splits in heroes and features: text on the left, photography on the right. No grid gap or section-padding token was verified, so match the gutters visually and keep them consistent within a grid.

Whitespace Philosophy

The site uses whitespace instead of decoration. Sections are separated by large vertical gaps and by black/white band inversion, never by rules or shadows. Inside a section, a heavy headline sits close to short body copy and a single CTA. Keep groupings tight and gaps between sections wide, and let photography fill space rather than adding UI ornament.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share.

header-inner-2-inner-max-width: 1408px (header-inner-2, max width of header-inner-2-inner)
button-primary-padding-y: 10px (button-primary, vertical padding of the root)
button-primary-padding-x: 12px (button-primary, horizontal padding of the root)
button-primary-2-padding-y: 14px (button-primary-2, vertical padding of the root)
button-primary-2-padding-x: 25px (button-primary-2, horizontal padding of the root)
button-secondary-padding-y: 14px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 16px (button-secondary, horizontal padding of the root)
button-secondary-2-padding-y: 14px (button-secondary-2, vertical padding of the root)
button-secondary-2-padding-x: 14px (button-secondary-2, horizontal padding of the root)
button-ghost-2-padding-y: 10px (button-ghost-2, vertical padding of the root)
button-ghost-2-padding-x: 12px (button-ghost-2, horizontal padding of the root)
button-primary-4-padding-y: 14px (button-primary-4, vertical padding of the root)
button-primary-4-padding-x: 25px (button-primary-4, horizontal padding of the root)
button-secondary-3-padding-y: 10px (button-secondary-3, vertical padding of the root)
button-secondary-3-padding-x: 12px (button-secondary-3, horizontal padding of the root)
button-secondary-4-padding-y: 10px (button-secondary-4, vertical padding of the root)
button-secondary-4-padding-x: 12px (button-secondary-4, horizontal padding of the root)
button-ghost-4-padding-y: 10px (button-ghost-4, vertical padding of the root)
button-ghost-4-padding-x: 12px (button-ghost-4, horizontal padding of the root)
button-primary-6-padding-y: 14px (button-primary-6, vertical padding of the root)
button-primary-6-padding-x: 25px (button-primary-6, horizontal padding of the root)
button-secondary-5-padding-y: 14px (button-secondary-5, vertical padding of the root)
button-secondary-5-padding-x: 25px (button-secondary-5, horizontal padding of the root)
button-secondary-6-padding-y: 10px (button-secondary-6, vertical padding of the root)
button-secondary-6-padding-x: 12px (button-secondary-6, horizontal padding of the root)

The card grid lays out in 3 columns at desktop.

Elevation & Depth

Level	Treatment	Use
Flat (tonal)	Solid fill change: `surface-dark` (#292929) on `primary` black, `surface-subtle` (#EFEFEF) on white	`card` service tiles, light-gray bands and buttons
Hairline	1px solid #00000014 border	`card-7` blog cards (flagged: height did not reproduce the measured 380px)
Inset overlay, light	box-shadow `#FFFFFF1A 999px 999px 0px 0px inset`	Hover on black and white pills: `button-primary`, `button-ghost-2`, `nav-link`, `button-secondary-3`, `button-primary-6`
Inset overlay, dark	box-shadow `#0000000A 999px 999px 0px 0px inset`	Hover on gray-filled controls: `button-secondary`, `button-secondary-2`, `button-primary-4`
Focus ring	box-shadow `#FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px`; logo uses outline 3px solid #276EF1, offset 1px	Keyboard focus on every button, nav link and the header logo

No backdrop blur was measured anywhere, including the sticky header.

Shadow philosophy. Uber uses box-shadow as a state tool, not a depth tool. No outward drop shadow lifts any card or panel. Instead, a 999px-spread inset shadow floods the control with a translucent tint: white at 10% on dark controls, black at 4% on light ones. Hover is therefore a pure color shift that never moves pixels. Focus reuses the same channel to draw a white inner gap and a blue outer ring. Resting depth comes from tonal stepping and the occasional hairline. When you add a component, give it inset hover and ring focus, and do not give it a drop shadow.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	4px	Small category tags (`card-7-group-5` in blog cards)
`rounded.sm`	6px	Rare small elements; low usage
`rounded.md`	8px	48px content CTAs (`button-primary-2`, `button-primary-4`, `button-primary-6`, `button-secondary-5`) and dark `card` tiles
`rounded.lg`	12px	Bordered blog cards (`card-7`, flagged: height did not reproduce the measured 380px) and photo tiles
`rounded.xl`	16px	Rare larger containers; low usage
`rounded.full`	9999px	Pills: header and nav controls, 36px utility buttons, `button-secondary`, the `card-text-2` badge

The geometry is rounded but disciplined, and it splits cleanly by role. Pills (rounded.full; recipes measure 999px) belong to navigation and compact actions. These include every header link and CTA (nav-link, button-primary, button-ghost-2, button-secondary-3, button-ghost-4), the icon pill button-secondary and the white badge inside card. Circles appear on icon-only controls: button-secondary-2 and the carousel prev/next arrows. Soft rectangles (rounded.md) are for 48px content CTAs and service cards. Larger rounded.lg is used for media-led cards. Nothing is sharp-cornered except full-bleed bands.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Buttons

Button, primary

Verification: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <button> (.c-button-primary), 7-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">lorem i</button>
</div>

.c-button-primary-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary:hover {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-primary:focus {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover (button-primary-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus (button-primary-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2), 10-character label

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ipsu</a>
</div>

.c-button-primary-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 25px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary-2:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-primary-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, primary (3)

Verification: flagged, the render matched 67% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

button-primary-3: the component root, a <a> (.c-button-primary-3), 14-character label

Recipe

HTML · CSS

<div class="c-button-primary-3-scope">
  <a class="c-button-primary-3" href="#">lorem ipsum do</a>
</div>

.c-button-primary-3-scope {
  background-color: #FFFFFF33;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 16px;
  background-color: #F3F3F3;
  color: #000000;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary-3:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-primary-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary)
button-secondary-group: inner flex row (.c-button-secondary__group)
button-secondary-icon: icon placeholder, 20px (.c-button-secondary__icon)
button-secondary-label: label text, 10 characters (.c-button-secondary__label)
button-secondary-group-2: inner flex row (.c-button-secondary__group-2)
button-secondary-icon-2: icon placeholder, 20px (.c-button-secondary__icon-2)

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <div class="c-button-secondary__group">
      <span class="c-button-secondary__icon" aria-hidden="true"></span>
    </div>
    <span class="c-button-secondary__label">lorem ipsu</span>
    <div class="c-button-secondary__group-2">
      <span class="c-button-secondary__icon-2" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 14px 16px;
  background-color: #EFEFEF;
  color: #000000;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary__group {
  display: flex;
  flex-shrink: 0;
  margin-right: 8px;
}

.c-button-secondary__icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-secondary__label {
  display: flow-root;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-button-secondary__group-2 {
  display: flex;
  margin-left: 8px;
}

.c-button-secondary__icon-2 {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-secondary:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-secondary:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-2: the component root, a <button> (.c-button-secondary-2)
button-secondary-2-icon: icon placeholder, 24px (.c-button-secondary-2__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">
    <span class="c-button-secondary-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-secondary-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px;
  background-color: #F3F3F3;
  color: #000000;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary-2__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-secondary-2:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-secondary-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, ghost

Verification: flagged, the original element could not be found again.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-label: label text, 5 characters (.c-button-ghost__label)
button-ghost-group: inner flex row (.c-button-ghost__group)
button-ghost-icon: icon placeholder, 18px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__label">lorem</span>
    <div class="c-button-ghost__group">
      <span class="c-button-ghost__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-ghost__group {
  display: flex;
  margin-left: 8px;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-ghost:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-group: inner flex row (.c-button-ghost-2__group)
button-ghost-2-icon: icon placeholder, 16px (.c-button-ghost-2__icon)
button-ghost-2-label: label text, 2 characters (.c-button-ghost-2__label)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
    </div>
    <span class="c-button-ghost-2__label">lo</span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-ghost-2__group {
  display: flex;
  margin-right: 8px;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-2:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-ghost-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, ghost (3)

Verification: flagged, the render matched 96% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3), 11-character label

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">lorem ipsum</button>
</div>

.c-button-ghost-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-3 {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-ghost-3:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-ghost-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, primary (4)

Verification: verified against the live page at desktop.

Anatomy

button-primary-4: the component root, a <a> (.c-button-primary-4), 18-character label

Recipe

HTML · CSS

<div class="c-button-primary-4-scope">
  <a class="c-button-primary-4" href="#">lorem ipsum dolor</a>
</div>

.c-button-primary-4-scope {
  background-color: #002661;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 25px;
  background-color: #EEEEEE;
  color: #000000;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary-4:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-primary-4:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-3: the component root, a <a> (.c-button-secondary-3), 10-character label

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <a class="c-button-secondary-3" href="#">lorem ipsu</a>
</div>

.c-button-secondary-3-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary-3:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-secondary-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary (4)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-4: the component root, a <button> (.c-button-secondary-4)
button-secondary-4-group: inner flex row (.c-button-secondary-4__group)
button-secondary-4-icon: icon placeholder, 16px (.c-button-secondary-4__icon)
button-secondary-4-label: label text, 2 characters (.c-button-secondary-4__label)

Recipe

HTML · CSS

<div class="c-button-secondary-4-scope">
  <button class="c-button-secondary-4" type="button">
    <div class="c-button-secondary-4__group">
      <span class="c-button-secondary-4__icon" aria-hidden="true"></span>
    </div>
    <span class="c-button-secondary-4__label">lo</span>
  </button>
</div>

.c-button-secondary-4-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary-4__group {
  display: flex;
  margin-right: 8px;
}

.c-button-secondary-4__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-secondary-4:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-secondary-4:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-4: the component root, a <a> (.c-button-ghost-4), 4-character label

Recipe

HTML · CSS

<div class="c-button-ghost-4-scope">
  <a class="c-button-ghost-4" href="#">lore</a>
</div>

.c-button-ghost-4-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-ghost-4:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-ghost-4:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, primary (5)

Verification: flagged, the original element could not be found again.

Anatomy

button-primary-5: the component root, a <a> (.c-button-primary-5), 10-character label

Recipe

HTML · CSS

<div class="c-button-primary-5-scope">
  <a class="c-button-primary-5" href="#">lorem ipsu</a>
</div>

.c-button-primary-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 25px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary-5:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-primary-5:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, primary (6)

Verification: verified against the live page at desktop.

Anatomy

button-primary-6: the component root, a <button> (.c-button-primary-6), 4-character label

Recipe

HTML · CSS

<div class="c-button-primary-6-scope">
  <button class="c-button-primary-6" type="button">lore</button>
</div>

.c-button-primary-6-scope {
  background-color: #9DCDD6;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-6 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 25px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-primary-6:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-primary-6:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary (5)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-5: the component root, a <a> (.c-button-secondary-5), 10-character label

Recipe

HTML · CSS

<div class="c-button-secondary-5-scope">
  <a class="c-button-secondary-5" href="#">lorem ipsu</a>
</div>

.c-button-secondary-5-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 14px 25px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary-5:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-secondary-5:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, ghost (5)

Verification: flagged, the original element could not be found again.

Anatomy

button-ghost-5: the component root, a <button> (.c-button-ghost-5), 11-character label

Recipe

HTML · CSS

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">lorem ipsum</button>
</div>

.c-button-ghost-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-5 {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-color: #000000;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-ghost-5:hover {
  box-shadow: #0000000A 999px 999px 0px 0px inset;
}

.c-button-ghost-5:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #0000000A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Button, secondary (6)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-6: the component root, a <button> (.c-button-secondary-6), 7-character label

Recipe

HTML · CSS

<div class="c-button-secondary-6-scope">
  <button class="c-button-secondary-6" type="button">lorem i</button>
</div>

.c-button-secondary-6-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-6 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-button-secondary-6:hover {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-button-secondary-6:focus {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover (button-secondary-6-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus (button-secondary-6-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Cards

Card

Verification: verified against the live page at desktop.

Anatomy

Group: 6 instances in a 3-column grid; the recipe carries the values they all share
card: the component root, a <li> (.c-card)
card-link: link (.c-card__link)
card-group: inner flex column (.c-card__group)
card-group-2: inner block (.c-card__group-2)
card-text: label text, 4 characters (.c-card__text)
card-body: label text, 54 characters (.c-card__body)
card-text-2: label text, 7 characters (.c-card__text-2)
card-media: image placeholder, 128px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <li class="c-card">
    <a class="c-card__link" href="#">
      <div class="c-card__group">
        <div class="c-card__group-2">
          <div class="c-card__text">lore</div>
          <p class="c-card__body">lorem ipsum dolor sit amet consectetur adipiscing elit</p>
        </div>
        <div class="c-card__text-2">lorem i</div>
      </div>
      <span class="c-card__media" aria-hidden="true"></span>
    </a>
  </li>
</div>

.c-card-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  vertical-align: top;
  background-color: #292929;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  list-style-type: none;
}

.c-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}

.c-card__group-2 {
  display: block;
}

.c-card__text {
  display: block;
  color: #FFFFFF;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 20px;
}

.c-card__body {
  display: flow-root;
  margin: 8px 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #FFFFFF;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.c-card__text-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 999px;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card:hover {
  margin: 0px 18px 18px 0px;
}

.c-card:focus {
  margin: 0px 18px 18px 0px;
}

States

hover: margin 0px 18px 18px 0px
focus: margin 0px 18px 18px 0px

Card (2)

Verification: flagged, the card-2-group height did not reproduce the measured 303px after 2 correction attempts.

Anatomy

Group: 4 instances in a 5-column grid, 36px gap; the recipe carries the values they all share
card-2: the component root, a <li> (.c-card-2)
card-2-group: inner grid (.c-card-2__group)
card-2-group-2: inner block (.c-card-2__group-2)
card-2-group-3: inner block (.c-card-2__group-3), content not captured
card-2-group-4: inner block (.c-card-2__group-4)
card-2-group-5: inner block (.c-card-2__group-5, 2 instances), content not captured

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <li class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <div class="c-card-2__group-3"></div>
      </div>
      <div class="c-card-2__group-4">
        <div class="c-card-2__group-5"></div>
        <div class="c-card-2__group-5"></div>
      </div>
    </div>
  </li>
</div>

.c-card-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-2 {
  display: list-item;
  border-spacing: 0px;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  list-style-type: none;
}

.c-card-2__group {
  display: grid;
  gap: 20px;
  grid-template-rows: auto 1fr;
}

.c-card-2__group-2 {
  display: block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 199.125px;
}

.c-card-2__group-3 {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__group-4 {
  display: block;
  width: 100%;
}

.c-card-2__group-5 {
  display: block;
}

States

No hover or focus change was observed.

Card (3)

Verification: flagged, the card-3-group height did not reproduce the measured 396px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 36px gap; the recipe carries the values they all share
card-3: the component root, a <li> (.c-card-3)
card-3-group: inner grid (.c-card-3__group)
card-3-group-2: inner block (.c-card-3__group-2)
card-3-group-3: inner block (.c-card-3__group-3), content not captured
card-3-group-4: inner block (.c-card-3__group-4)
card-3-group-5: inner block (.c-card-3__group-5, 3 instances), content not captured

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <li class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3"></div>
      </div>
      <div class="c-card-3__group-4">
        <div class="c-card-3__group-5"></div>
        <div class="c-card-3__group-5"></div>
        <div class="c-card-3__group-5"></div>
      </div>
    </div>
  </li>
</div>

.c-card-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3 {
  display: list-item;
  border-spacing: 0px;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  list-style-type: none;
}

.c-card-3__group {
  display: grid;
  gap: 20px;
  grid-template-rows: auto 1fr;
}

.c-card-3__group-2 {
  display: block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 240px;
}

.c-card-3__group-3 {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-3__group-4 {
  display: block;
  width: 100%;
}

.c-card-3__group-5 {
  display: block;
}

States

No hover or focus change was observed.

Card (4)

Verification: flagged, the card-4-group width did not reproduce the measured 360px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 36px gap; the recipe carries the values they all share
card-4: the component root, a <div> (.c-card-4)
card-4-cta: link (.c-card-4__cta)
card-4-group: inner grid (.c-card-4__group)
card-4-group-2: inner block (.c-card-4__group-2)
card-4-group-3: inner block (.c-card-4__group-3), content not captured
card-4-group-4: inner grid (.c-card-4__group-4)
card-4-group-5: inner grid (.c-card-4__group-5)
card-4-group-6: inner block (.c-card-4__group-6), content not captured

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <div class="c-card-4">
    <a class="c-card-4__cta" href="#">
      <div class="c-card-4__group">
        <div class="c-card-4__group-2">
          <div class="c-card-4__group-3"></div>
        </div>
      </div>
      <div class="c-card-4__group-4">
        <div class="c-card-4__group-5">
          <div class="c-card-4__group-6"></div>
        </div>
      </div>
    </a>
  </div>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-4 {
  display: inline-grid;
  align-self: center;
  border-spacing: 0px;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-4__cta {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: max-content min-content;
  background-color: #FFFFFF;
  color: #333333;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card-4__group {
  display: grid;
  order: 1;
  width: 100%;
}

.c-card-4__group-2 {
  display: block;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-4__group-3 {
  display: block;
  transition: all 0.2s ease;
}

.c-card-4__group-4 {
  display: grid;
  align-self: center;
  order: 2;
  width: 100%;
}

.c-card-4__group-5 {
  display: grid;
  align-items: start;
  box-sizing: border-box;
  height: 100%;
  padding: 24px;
}

.c-card-4__group-6 {
  display: block;
  width: 100%;
}

States

No hover or focus change was observed.

Card (5)

Verification: flagged, the card-5-group-2 width did not reproduce the measured 360px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-group: inner grid (.c-card-5__group)
card-5-group-2: inner block (.c-card-5__group-2)
card-5-group-3: inner block (.c-card-5__group-3), content not captured
card-5-group-4: inner block (.c-card-5__group-4)
card-5-group-5: inner block (.c-card-5__group-5)
card-5-group-6: inner block (.c-card-5__group-6, 2 instances), content not captured

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3"></div>
      </div>
      <div class="c-card-5__group-4">
        <div class="c-card-5__group-5">
          <div class="c-card-5__group-6"></div>
          <div class="c-card-5__group-6"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-5 {
  display: inline-block;
  border-spacing: 0px;
  position: relative;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-5__group {
  display: grid;
  align-self: center;
  gap: 70px 36px;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
}

.c-card-5__group-2 {
  display: block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 202.5px;
}

.c-card-5__group-3 {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-5__group-4 {
  display: block;
  margin-top: -6px;
}

.c-card-5__group-5 {
  display: block;
  width: 100%;
}

.c-card-5__group-6 {
  display: block;
}

.c-card-5:hover {
  padding: 0px 0px 64px;
}

.c-card-5:hover::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 0px;
  right: 715px;
  bottom: 257.5px;
  left: 428px;
  background-color: #000000;
  transform: matrix(1, 0, 0, 1, -4, 0);
}

.c-card-5:hover::after {
  content: "";
  display: block;
  width: 1px;
  height: 254px;
  position: absolute;
  top: 11px;
  right: 723px;
  bottom: 2px;
  left: 428px;
  background-color: #000000;
}

.c-card-5:focus {
  padding: 0px 0px 64px;
}

.c-card-5:focus::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 0px;
  right: 715px;
  bottom: 257.5px;
  left: 428px;
  background-color: #000000;
  transform: matrix(1, 0, 0, 1, -4, 0);
}

.c-card-5:focus::after {
  content: "";
  display: block;
  width: 1px;
  height: 254px;
  position: absolute;
  top: 11px;
  right: 723px;
  bottom: 2px;
  left: 428px;
  background-color: #000000;
}

States

hover: padding 0px 0px 64px, ::before content "", ::before display block, ::before width 9px, ::before height 9px, ::before position absolute, ::before top 0px, ::before right 715px, ::before bottom 257.5px, ::before left 428px, ::before background-color #000000, ::before transform matrix(1, 0, 0, 1, -4, 0), ::after content "", ::after display block, ::after width 1px, ::after height 254px, ::after position absolute, ::after top 11px, ::after right 723px, ::after bottom 2px, ::after left 428px, ::after background-color #000000
focus: padding 0px 0px 64px, ::before content "", ::before display block, ::before width 9px, ::before height 9px, ::before position absolute, ::before top 0px, ::before right 715px, ::before bottom 257.5px, ::before left 428px, ::before background-color #000000, ::before transform matrix(1, 0, 0, 1, -4, 0), ::after content "", ::after display block, ::after width 1px, ::after height 254px, ::after position absolute, ::after top 11px, ::after right 723px, ::after bottom 2px, ::after left 428px, ::after background-color #000000

Card (6)

Verification: flagged, the card-6-group width did not reproduce the measured 360px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 36px gap; the recipe carries the values they all share
card-6: the component root, a <div> (.c-card-6)
card-6-group: inner flex column (.c-card-6__group)
card-6-group-2: inner block (.c-card-6__group-2)
card-6-group-3: inner block (.c-card-6__group-3), content not captured

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__group-2">
        <div class="c-card-6__group-3"></div>
      </div>
    </div>
  </div>
</div>

.c-card-6-scope {
  background-color: #F3F3F3;
  color: #333333;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-6 {
  display: inline-grid;
  align-self: start;
  border-spacing: 0px;
  color: #333333;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-6__group {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.c-card-6__group-2 {
  display: block;
  width: 100%;
  height: 100%;
  margin-right: 36px;
  margin-bottom: 20px;
}

.c-card-6__group-3 {
  display: block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 202.5px;
}

States

No hover or focus change was observed.

Card (7)

Verification: flagged, the card-7 height did not reproduce the measured 380px after 2 correction attempts.

Anatomy

Group: 6 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-7: the component root, a <div> (.c-card-7)
card-7-group: inner block (.c-card-7__group)
card-7-group-2: inner block (.c-card-7__group-2)
card-7-media: image placeholder, 366x206px (.c-card-7__media)
card-7-group-3: inner flex column (.c-card-7__group-3)
card-7-group-4: inner flex row (.c-card-7__group-4)
card-7-group-5: inner flex row (.c-card-7__group-5, 3 instances), content not captured
card-7-group-6: inner block (.c-card-7__group-6)
card-7-cta: link, 52-character label (.c-card-7__cta)
card-7-text: label text, 15 characters (.c-card-7__text)
card-7-link: link (.c-card-7__link)

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <div class="c-card-7">
    <div class="c-card-7__group">
      <div class="c-card-7__group-2">
        <span class="c-card-7__media" aria-hidden="true"></span>
      </div>
    </div>
    <div class="c-card-7__group-3">
      <div class="c-card-7__group-4">
        <span class="c-card-7__group-5"></span>
        <span class="c-card-7__group-5"></span>
        <span class="c-card-7__group-5"></span>
      </div>
      <div class="c-card-7__group-6">
        <a class="c-card-7__cta" href="#">lorem ipsum dolor sit amet consectetur adipiscing el</a>
      </div>
      <div class="c-card-7__text">lorem ipsum dol</div>
    </div>
    <a class="c-card-7__link" href="#"></a>
  </div>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-7 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  border: 1px solid #00000014;
  border-radius: 12px;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-7__group {
  display: block;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-7__group::before {
  content: "";
  display: block;
  padding-top: 205.875px;
  margin-left: -1px;
}

.c-card-7__group::after {
  content: "";
  display: table;
}

.c-card-7__group-2 {
  display: block;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

.c-card-7__media {
  display: inline-block;
  flex-shrink: 0;
  width: 366px;
  height: 206px;
  background-color: currentcolor;
}

.c-card-7__group-3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.c-card-7__group-4 {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 6px;
  max-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-7__group-5 {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 4px 6px;
  background-color: #EFF4FE;
  color: #175BCC;
  border-radius: 4px;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.c-card-7__group-6 {
  display: flow-root;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  text-overflow: ellipsis;
}

.c-card-7__cta {
  display: inline;
  background-image: linear-gradient(#000000, #000000);
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.4s ease;
}

.c-card-7__text {
  display: block;
  color: #5E5E5E;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
}

.c-card-7__link {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
}

States

No hover or focus change was observed.

Card (9)

Verification: flagged, the card-9-group width did not reproduce the measured 360px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 36px gap; the recipe carries the values they all share
card-9: the component root, a <div> (.c-card-9)
card-9-group: inner flex column (.c-card-9__group)
card-9-group-2: inner block (.c-card-9__group-2)
card-9-group-3: inner block (.c-card-9__group-3), content not captured
card-9-group-4: inner block (.c-card-9__group-4), content not captured

Recipe

HTML · CSS

<div class="c-card-9-scope">
  <div class="c-card-9">
    <div class="c-card-9__group">
      <div class="c-card-9__group-2">
        <div class="c-card-9__group-3"></div>
      </div>
      <div class="c-card-9__group-4"></div>
    </div>
  </div>
</div>

.c-card-9-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-9 {
  display: inline-grid;
  align-self: start;
  border-spacing: 0px;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-9__group {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.c-card-9__group-2 {
  display: block;
  width: 100%;
  height: 100%;
  margin-right: 36px;
  margin-bottom: 20px;
}

.c-card-9__group-3 {
  display: block;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 360px;
}

.c-card-9__group-4 {
  display: block;
  width: 100%;
}

States

No hover or focus change was observed.

Nav link

Verification: verified against the live page at desktop.

Anatomy

nav-link: the component root, a <a> (.c-nav-link), 4-character label

Recipe

HTML · CSS

<div class="c-nav-link-scope">
  <a class="c-nav-link" href="#">lore</a>
</div>

.c-nav-link-scope {
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  list-style-type: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-nav-link:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-nav-link:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Carousel controls

Verification: flagged, the carousel-control-group width did not reproduce the measured 120px after 2 correction attempts.

Anatomy

carousel-control: the component root, a <nav> (.c-carousel-control)
carousel-control-text: label text, 3 characters (.c-carousel-control__text)
carousel-control-group: inner block (.c-carousel-control__group)
carousel-control-button: button (.c-carousel-control__button)
carousel-control-icon: icon placeholder, 24px (.c-carousel-control__icon, 2 instances)
carousel-control-button-2: button (.c-carousel-control__button-2)

Recipe

HTML · CSS

<div class="c-carousel-control-scope">
  <nav class="c-carousel-control">
    <div class="c-carousel-control__text">lor</div>
    <div class="c-carousel-control__group">
      <button class="c-carousel-control__button" type="button">
        <span class="c-carousel-control__icon" aria-hidden="true"></span>
      </button>
      <button class="c-carousel-control__button-2" type="button">
        <span class="c-carousel-control__icon" aria-hidden="true"></span>
      </button>
    </div>
  </nav>
</div>

.c-carousel-control-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-carousel-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-spacing: 0px;
  color: #FFFFFF;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-carousel-control__text {
  display: block;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  margin-right: 18px;
}

.c-carousel-control__group {
  display: block;
}

.c-carousel-control__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 14px;
  background-color: #F3F3F3;
  color: #A6A6A6;
  border: 0;
  border-radius: 50%;
  cursor: not-allowed;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
  margin-right: 4px;
  margin-left: 4px;
}

.c-carousel-control__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-carousel-control__button-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 14px;
  background-color: #F3F3F3;
  color: #000000;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
  margin-right: 4px;
  margin-left: 4px;
}

States

No hover or focus change was observed.

Headers

Header (landing)

Verification: flagged, the render matched 95% of the original pixels, below the 96% required after 2 correction attempts.

Variant observed on https://www.uber.com/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-inner: inner flex row (.c-header-landing__inner)
header-landing-logo: link, 4-character label (.c-header-landing__logo)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-nav-item: inner group (.c-header-landing__nav-item, 5 instances)
header-landing-nav-link: link, 4-character label (.c-header-landing__nav-link, 4 instances)
header-landing-cta: the button-ghost button (.c-header-landing__cta, 2 instances)
header-landing-text: label text, 5 characters (.c-header-landing__text, 2 instances)
header-landing-group-2: inner flex row (.c-header-landing__group-2)
header-landing-icon: icon placeholder, 18px (.c-header-landing__icon)
header-landing-nav-2: inner flex row (.c-header-landing__nav-2)
header-landing-item: inner group (.c-header-landing__item, 3 instances)
header-landing-group-3: inner flex row (.c-header-landing__group-3)
header-landing-icon-2: icon placeholder, 16px (.c-header-landing__icon-2)
header-landing-cta-2: link, 4-character label (.c-header-landing__cta-2)
header-landing-group-4: inner flex row (.c-header-landing__group-4, 2 instances)
header-landing-cta-3: link, 6-character label (.c-header-landing__cta-3)
header-landing-item-2: inner group (.c-header-landing__item-2)
header-landing-cta-4: the button-primary button, 7-character label (.c-header-landing__cta-4)

Recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <div class="c-header-landing__group">
      <div class="c-header-landing__inner">
        <a class="c-header-landing__logo" href="#">lore</a>
        <ul class="c-header-landing__nav">
          <li class="c-header-landing__nav-item">
            <a class="c-header-landing__nav-link" href="#">lore</a>
          </li>
          <li class="c-header-landing__nav-item">
            <a class="c-header-landing__nav-link" href="#">lore</a>
          </li>
          <li class="c-header-landing__nav-item">
            <a class="c-header-landing__nav-link" href="#">lorem ip</a>
          </li>
          <li class="c-header-landing__nav-item">
            <a class="c-header-landing__nav-link" href="#">lorem ips</a>
          </li>
          <li class="c-header-landing__nav-item">
            <button class="c-header-landing__cta" type="button">
              <span class="c-header-landing__text">lorem</span>
              <div class="c-header-landing__group-2">
                <span class="c-header-landing__icon" aria-hidden="true"></span>
              </div>
            </button>
          </li>
        </ul>
        <ul class="c-header-landing__nav-2">
          <li class="c-header-landing__item">
            <button class="c-header-landing__cta" type="button">
              <div class="c-header-landing__group-3">
                <span class="c-header-landing__icon-2" aria-hidden="true"></span>
              </div>
              <span class="c-header-landing__text">lo</span>
            </button>
          </li>
          <li class="c-header-landing__item">
            <a class="c-header-landing__cta-2" href="#">lore</a>
          </li>
          <div class="c-header-landing__group-4">
            <li class="c-header-landing__item">
              <a class="c-header-landing__cta-3" href="#">lorem</a>
            </li>
          </div>
          <div class="c-header-landing__group-4">
            <li class="c-header-landing__item-2">
              <button class="c-header-landing__cta-4" type="button">lorem i</button>
            </li>
          </div>
        </ul>
      </div>
    </div>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  position: sticky;
  top: 0px;
  z-index: 2002;
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: top 0.3s ease;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-header-landing__group {
  display: flex;
  width: 100%;
  position: relative;
}

.c-header-landing__inner {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1408px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__logo {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  top: 0px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 112px;
  text-decoration-line: none;
  text-align: left;
  white-space: nowrap;
  transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-landing__nav {
  display: flex;
  flex-grow: 1;
  padding: 0px;
  margin: 0px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-landing__nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-landing__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-landing__group-2 {
  display: flex;
  margin-left: 8px;
}

.c-header-landing__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-2 {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-landing__group-3 {
  display: flex;
  margin-right: 8px;
}

.c-header-landing__icon-2 {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-landing__group-4 {
  display: flex;
}

.c-header-landing__cta-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-landing__item-2 {
  display: list-item;
  align-self: center;
}

.c-header-landing__cta-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-landing__logo:focus {
  outline: 3px solid #276EF1;
  outline-offset: 1px;
}

.c-header-landing__nav-link:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-landing__nav-link:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-landing__cta:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-landing__cta:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-landing__cta-2:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-landing__cta-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-landing__cta-3:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-landing__cta-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-landing__cta-4:hover {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-landing__cta-4:focus {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

header-landing-logo focus: outline 3px solid #276EF1, outline-offset 1px
header-landing-nav-link hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-landing-nav-link focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-landing-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-landing-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-landing-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-landing-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-landing-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-landing-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-landing-cta-4 hover (header-landing-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-landing-cta-4 focus (header-landing-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Header (inner)

Verification: flagged, the render matched 94% of the original pixels, below the 96% required after 2 correction attempts.

Variant observed on https://www.uber.com/de/en/business/.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-inner: inner flex row (.c-header-inner__inner)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-image: image placeholder, 121x39px (.c-header-inner__logo-image)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner group (.c-header-inner__nav-item, 5 instances)
header-inner-cta: the button-ghost button (.c-header-inner__cta, 5 instances)
header-inner-text: label text, 8 characters (.c-header-inner__text, 5 instances)
header-inner-group: inner flex row (.c-header-inner__group, 4 instances)
header-inner-icon: icon placeholder, 18px (.c-header-inner__icon, 4 instances)
header-inner-nav-link: link, 7-character label (.c-header-inner__nav-link)
header-inner-nav-2: inner flex row (.c-header-inner__nav-2)
header-inner-item: inner group (.c-header-inner__item, 3 instances)
header-inner-group-2: inner flex row (.c-header-inner__group-2)
header-inner-icon-2: icon placeholder, 16px (.c-header-inner__icon-2)
header-inner-cta-2: the button-secondary-3 button, 10-character label (.c-header-inner__cta-2)
header-inner-cta-3: link, 6-character label (.c-header-inner__cta-3)
header-inner-item-2: inner group (.c-header-inner__item-2)
header-inner-cta-4: the button-primary button, 11-character label (.c-header-inner__cta-4)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__inner">
      <a class="c-header-inner__logo" href="#">
        <span class="c-header-inner__logo-image" aria-hidden="true"></span>
      </a>
      <ul class="c-header-inner__nav">
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__text">lorem ip</span>
            <div class="c-header-inner__group">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
            </div>
          </button>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__text">lorem ips</span>
            <div class="c-header-inner__group">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
            </div>
          </button>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link" href="#">lorem i</a>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__text">lorem ipsum dolo</span>
            <div class="c-header-inner__group">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
            </div>
          </button>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__text">lorem ips</span>
            <div class="c-header-inner__group">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
            </div>
          </button>
        </li>
      </ul>
      <ul class="c-header-inner__nav-2">
        <li class="c-header-inner__item">
          <button class="c-header-inner__cta" type="button">
            <div class="c-header-inner__group-2">
              <span class="c-header-inner__icon-2" aria-hidden="true"></span>
            </div>
            <span class="c-header-inner__text">lo</span>
          </button>
        </li>
        <li class="c-header-inner__item">
          <a class="c-header-inner__cta-2" href="#">lorem ipsu</a>
        </li>
        <li class="c-header-inner__item">
          <a class="c-header-inner__cta-3" href="#">lorem</a>
        </li>
        <li class="c-header-inner__item-2">
          <a class="c-header-inner__cta-4" href="#">lorem ipsum</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  position: relative;
  top: 0px;
  z-index: 2002;
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: top 0.3s ease;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-header-inner__inner {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1408px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__logo {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  top: 0px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 112px;
  text-decoration-line: none;
  text-align: left;
  white-space: nowrap;
  transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner__logo-image {
  display: block;
  flex-shrink: 0;
  width: 121px;
  height: 39px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner__nav {
  display: flex;
  flex-grow: 1;
  padding: 0px;
  margin: 0px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner__group {
  display: flex;
  margin-left: 8px;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner__nav-2 {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-inner__group-2 {
  display: flex;
  margin-right: 8px;
}

.c-header-inner__icon-2 {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner__cta-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner__item-2 {
  display: list-item;
  align-self: center;
}

.c-header-inner__cta-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner__logo:focus {
  outline: 3px solid #276EF1;
  outline-offset: 1px;
}

.c-header-inner__cta:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner__cta:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner__nav-link:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner__nav-link:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner__cta-2:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner__cta-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner__cta-3:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner__cta-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner__cta-4:hover {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner__cta-4:focus {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

header-inner-logo focus: outline 3px solid #276EF1, outline-offset 1px
header-inner-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-nav-link hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-nav-link focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-cta-4 hover (header-inner-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-cta-4 focus (header-inner-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Header (inner, 2)

Verification: verified against the live page at desktop.

Variant observed on https://www.uber.com/de/en/blog/.

Anatomy

header-inner-2: the component root, a <nav> (.c-header-inner-2)
header-inner-2-inner: inner flex row (.c-header-inner-2__inner)
header-inner-2-logo: link, 9-character label (.c-header-inner-2__logo)
header-inner-2-nav: inner flex row (.c-header-inner-2__nav)
header-inner-2-nav-item: inner group (.c-header-inner-2__nav-item)
header-inner-2-cta: the button-ghost button (.c-header-inner-2__cta, 2 instances)
header-inner-2-text: label text, 7 characters (.c-header-inner-2__text, 2 instances)
header-inner-2-group: inner flex row (.c-header-inner-2__group)
header-inner-2-icon: icon placeholder, 18px (.c-header-inner-2__icon)
header-inner-2-nav-2: inner flex row (.c-header-inner-2__nav-2)
header-inner-2-item: inner group (.c-header-inner-2__item, 3 instances)
header-inner-2-group-2: inner flex row (.c-header-inner-2__group-2)
header-inner-2-icon-2: icon placeholder, 16px (.c-header-inner-2__icon-2)
header-inner-2-cta-2: the button-ghost-4 button, 4-character label (.c-header-inner-2__cta-2)
header-inner-2-cta-3: the button-ghost-4 button, 6-character label (.c-header-inner-2__cta-3)
header-inner-2-item-2: inner group (.c-header-inner-2__item-2)
header-inner-2-cta-4: the button-primary button, 7-character label (.c-header-inner-2__cta-4)

Recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <nav class="c-header-inner-2">
    <div class="c-header-inner-2__inner">
      <a class="c-header-inner-2__logo" href="#">lorem ips</a>
      <ul class="c-header-inner-2__nav">
        <li class="c-header-inner-2__nav-item">
          <button class="c-header-inner-2__cta" type="button">
            <span class="c-header-inner-2__text">lorem i</span>
            <div class="c-header-inner-2__group">
              <span class="c-header-inner-2__icon" aria-hidden="true"></span>
            </div>
          </button>
        </li>
      </ul>
      <ul class="c-header-inner-2__nav-2">
        <li class="c-header-inner-2__item">
          <button class="c-header-inner-2__cta" type="button">
            <div class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-2" aria-hidden="true"></span>
            </div>
            <span class="c-header-inner-2__text">lo</span>
          </button>
        </li>
        <li class="c-header-inner-2__item">
          <a class="c-header-inner-2__cta-2" href="#">lore</a>
        </li>
        <li class="c-header-inner-2__item">
          <a class="c-header-inner-2__cta-3" href="#">lorem</a>
        </li>
        <li class="c-header-inner-2__item-2">
          <button class="c-header-inner-2__cta-4" type="button">lorem i</button>
        </li>
      </ul>
    </div>
  </nav>
</div>

.c-header-inner-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2 {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  position: relative;
  top: 0px;
  z-index: 2002;
  background-color: #000000;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: top 0.3s ease;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-header-inner-2__inner {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1408px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__logo {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  top: 0px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 112px;
  text-decoration-line: none;
  text-align: left;
  white-space: nowrap;
  transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner-2__nav {
  display: flex;
  flex-grow: 1;
  padding: 0px;
  margin: 0px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style-type: none;
}

.c-header-inner-2__nav-item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-inner-2__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner-2__group {
  display: flex;
  margin-left: 8px;
}

.c-header-inner-2__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__nav-2 {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-2__item {
  display: list-item;
  align-self: center;
  padding-right: 4px;
}

.c-header-inner-2__group-2 {
  display: flex;
  margin-right: 8px;
}

.c-header-inner-2__icon-2 {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner-2__cta-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner-2__item-2 {
  display: list-item;
  align-self: center;
}

.c-header-inner-2__cta-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  background-color: #FFFFFF;
  color: #000000;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}

.c-header-inner-2__logo:focus {
  outline: 3px solid #276EF1;
  outline-offset: 1px;
}

.c-header-inner-2__cta:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner-2__cta:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner-2__cta-2:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner-2__cta-2:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner-2__cta-3:hover {
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner-2__cta-3:focus {
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

.c-header-inner-2__cta-4:hover {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}

.c-header-inner-2__cta-4:focus {
  background-color: #E2E2E2;
  box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
  outline: none;
}

States

header-inner-2-logo focus: outline 3px solid #276EF1, outline-offset 1px
header-inner-2-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-2-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-2-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-2-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-2-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-2-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
header-inner-2-cta-4 hover (header-inner-2-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
header-inner-2-cta-4 focus (header-inner-2-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none

Verification: desktop flagged, the footer-group height did not reproduce the measured 1013px after 2 correction attempts; mobile flagged, the footer-mobile-group height did not reproduce the measured 2066px after 2 correction attempts.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-group: inner flex row (.c-footer__group)
footer-group-2: inner flex row (.c-footer__group-2)
footer-group-3: inner flex row (.c-footer__group-3)
footer-inner: inner block (.c-footer__inner)
footer-columns: inner grid (.c-footer__columns, 5 instances)
footer-column: inner grid (.c-footer__column, 8 instances), content not captured
footer-column-2: inner block (.c-footer__column-2), content not captured
footer-column-3: inner flex column (.c-footer__column-3, 4 instances), content not captured
footer-list: inner grid (.c-footer__list), content not captured
footer-list-2: inner flex row (.c-footer__list-2), content not captured
footer-column-4: inner grid (.c-footer__column-4), content not captured
footer-column-5: inner grid (.c-footer__column-5)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <section class="c-footer__group">
      <div class="c-footer__group-2">
        <div class="c-footer__group-3">
          <div class="c-footer__inner">
            <div class="c-footer__columns">
              <div class="c-footer__column">
                <div class="c-footer__columns">
                  <div class="c-footer__column"></div>
                  <div class="c-footer__column-2"></div>
                </div>
              </div>
              <div class="c-footer__column">
                <div class="c-footer__columns">
                  <div class="c-footer__column-3"></div>
                  <div class="c-footer__column-3"></div>
                  <div class="c-footer__column-3"></div>
                  <div class="c-footer__column-3"></div>
                </div>
              </div>
              <div class="c-footer__column">
                <div class="c-footer__columns">
                  <ul class="c-footer__list"></ul>
                  <ul class="c-footer__list-2"></ul>
                  <div class="c-footer__column-4"></div>
                </div>
              </div>
              <div class="c-footer__column">
                <div class="c-footer__columns">
                  <div class="c-footer__column"></div>
                  <div class="c-footer__column"></div>
                  <div class="c-footer__column-5"></div>
                  <div class="c-footer__column"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </footer>
</div>

.c-footer-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer__group {
  display: flex;
  width: 100%;
  position: relative;
  background-color: #000000;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-2 {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-3 {
  display: flex;
  justify-content: center;
  width: 100%;
}

.c-footer__inner {
  display: block;
  align-self: flex-start;
  width: 100%;
  max-width: 1152px;
  padding: 64px;
}

.c-footer__columns {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
}

.c-footer__column {
  display: grid;
  align-self: center;
  width: 100%;
}

.c-footer__column-2 {
  display: block;
  height: 100%;
}

.c-footer__column-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.c-footer__list {
  display: grid;
  justify-content: left;
  grid-auto-flow: column;
  padding: 12px 0px;
  margin: 0px;
  transform: matrix(1, 0, 0, 1, -12, 0);
  list-style-type: none;
}

.c-footer__list-2 {
  display: flex;
  justify-content: end;
  align-items: center;
  grid-auto-flow: column;
  width: 100%;
  padding: 0px;
  margin: 0px;
  transform: matrix(1, 0, 0, 1, -12, 0);
  list-style-type: none;
}

.c-footer__column-4 {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
}

.c-footer__column-5 {
  display: grid;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-group: inner flex row (.c-footer-mobile__group)
footer-mobile-group-2: inner flex row (.c-footer-mobile__group-2)
footer-mobile-group-3: inner flex row (.c-footer-mobile__group-3)
footer-mobile-inner: inner block (.c-footer-mobile__inner)
footer-mobile-columns: inner grid (.c-footer-mobile__columns, 5 instances)
footer-mobile-column: inner grid (.c-footer-mobile__column, 8 instances), content not captured
footer-mobile-column-2: inner block (.c-footer-mobile__column-2), content not captured
footer-mobile-column-3: inner flex column (.c-footer-mobile__column-3, 4 instances), content not captured
footer-mobile-list: inner grid (.c-footer-mobile__list), content not captured
footer-mobile-list-2: inner grid (.c-footer-mobile__list-2), content not captured
footer-mobile-column-4: inner grid (.c-footer-mobile__column-4), content not captured

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <section class="c-footer-mobile__group">
      <div class="c-footer-mobile__group-2">
        <div class="c-footer-mobile__group-3">
          <div class="c-footer-mobile__inner">
            <div class="c-footer-mobile__columns">
              <div class="c-footer-mobile__column">
                <div class="c-footer-mobile__columns">
                  <div class="c-footer-mobile__column"></div>
                  <div class="c-footer-mobile__column-2"></div>
                </div>
              </div>
              <div class="c-footer-mobile__column">
                <div class="c-footer-mobile__columns">
                  <div class="c-footer-mobile__column-3"></div>
                  <div class="c-footer-mobile__column-3"></div>
                  <div class="c-footer-mobile__column-3"></div>
                  <div class="c-footer-mobile__column-3"></div>
                </div>
              </div>
              <div class="c-footer-mobile__column">
                <div class="c-footer-mobile__columns">
                  <ul class="c-footer-mobile__list"></ul>
                  <ul class="c-footer-mobile__list-2"></ul>
                  <div class="c-footer-mobile__column-4"></div>
                </div>
              </div>
              <div class="c-footer-mobile__column">
                <div class="c-footer-mobile__columns">
                  <div class="c-footer-mobile__column"></div>
                  <div class="c-footer-mobile__column"></div>
                  <div class="c-footer-mobile__column"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer-mobile {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer-mobile__group {
  display: flex;
  width: 100%;
  position: relative;
  background-color: #000000;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-2 {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-3 {
  display: flex;
  justify-content: center;
  width: 100%;
}

.c-footer-mobile__inner {
  display: block;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 40px 24px;
}

.c-footer-mobile__columns {
  display: grid;
  gap: 36px 16px;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}

.c-footer-mobile__column {
  display: grid;
  align-self: center;
  width: 100%;
}

.c-footer-mobile__column-2 {
  display: block;
  height: 100%;
}

.c-footer-mobile__column-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.c-footer-mobile__list {
  display: grid;
  justify-content: left;
  grid-auto-flow: column;
  padding: 12px 0px;
  margin: 0px;
  transform: matrix(1, 0, 0, 1, -12, 0);
  transform-origin: 171px 36px;
  list-style-type: none;
}

.c-footer-mobile__list-2 {
  display: grid;
  justify-content: left;
  width: 100%;
  padding: 0px;
  margin: 0px;
  transform: matrix(1, 0, 0, 1, -12, 0);
  transform-origin: 155px 36px;
  list-style-type: none;
}

.c-footer-mobile__column-4 {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
}

States

No hover or focus change was observed.

Verification: flagged, the render matched 95% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

sub-navigation: the component root, a <nav> (.c-sub-navigation)
sub-navigation-group: inner flex row (.c-sub-navigation__group)
sub-navigation-list: inner flex row (.c-sub-navigation__list)
sub-navigation-item: inner group (.c-sub-navigation__item)
sub-navigation-group-2: inner flex row (.c-sub-navigation__group-2), content not captured
sub-navigation-list-2: inner flex row (.c-sub-navigation__list-2)
sub-navigation-group-3: inner flex row (.c-sub-navigation__group-3)
sub-navigation-item-2: inner group (.c-sub-navigation__item-2, 5 instances), content not captured

Recipe

HTML · CSS

<div class="c-sub-navigation-scope">
  <nav class="c-sub-navigation">
    <div class="c-sub-navigation__group">
      <ul class="c-sub-navigation__list">
        <li class="c-sub-navigation__item">
          <div class="c-sub-navigation__group-2"></div>
        </li>
      </ul>
      <ul class="c-sub-navigation__list-2">
        <div class="c-sub-navigation__group-3">
          <li class="c-sub-navigation__item-2"></li>
          <li class="c-sub-navigation__item-2"></li>
          <li class="c-sub-navigation__item-2"></li>
          <li class="c-sub-navigation__item-2"></li>
          <li class="c-sub-navigation__item-2"></li>
        </div>
      </ul>
    </div>
  </nav>
</div>

.c-sub-navigation-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-sub-navigation {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  padding: 12px 64px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-sub-navigation__group {
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.c-sub-navigation__list {
  display: flex;
  flex-shrink: 0;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-sub-navigation__item {
  display: list-item;
  align-self: center;
  max-width: 1410px;
}

.c-sub-navigation__group-2 {
  display: flex;
}

.c-sub-navigation__list-2 {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style-type: none;
}

.c-sub-navigation__group-3 {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-sub-navigation__item-2 {
  display: list-item;
  align-self: center;
  padding-left: 24px;
}

States

No hover or focus change was observed.

Benefit list item

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
benefit-list-item: the component root, a <li> (.c-benefit-list-item)
benefit-list-item-group: inner flex row (.c-benefit-list-item__group)
benefit-list-item-media: image placeholder, 20px (.c-benefit-list-item__media)
benefit-list-item-group-2: inner flex row (.c-benefit-list-item__group-2)
benefit-list-item-group-3: inner grid (.c-benefit-list-item__group-3)
benefit-list-item-body: label text, 55 characters (.c-benefit-list-item__body)

Recipe

HTML · CSS

<div class="c-benefit-list-item-scope">
  <li class="c-benefit-list-item">
    <div class="c-benefit-list-item__group">
      <span class="c-benefit-list-item__media" aria-hidden="true"></span>
    </div>
    <div class="c-benefit-list-item__group-2">
      <div class="c-benefit-list-item__group-3">
        <p class="c-benefit-list-item__body">lorem ipsum dolor sit amet consectetur adipiscing elit</p>
      </div>
    </div>
  </li>
</div>

.c-benefit-list-item-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-benefit-list-item {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  list-style-type: none;
}

.c-benefit-list-item__group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
}

.c-benefit-list-item__media {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-benefit-list-item__group-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  min-height: 64px;
  padding-right: 16px;
}

.c-benefit-list-item__group-3 {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-benefit-list-item__body {
  display: block;
  margin: 0px;
  font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
}

States

No hover or focus change was observed.

Do's and Don'ts

Do

Use pills (rounded.full) for 36px header and utility controls, as button-primary, button-ghost-2, button-secondary-3, button-secondary-4, button-ghost-4 and button-secondary-6 all do. Pad them with button-primary-padding-y / button-primary-padding-x (10px / 12px) and set labels in nav-link.
Use rounded.md (8px) at 48px height with 14px / 25px padding for content CTAs, matching button-primary-2, button-primary-4, button-primary-6 and button-secondary-5. Set labels in button.
Treat white (#FFFFFF) as a fill that works on black, not a primary-only color. It is shared by button-primary, button-primary-2, button-secondary-5, button-secondary-6, the card-text-2 badge and benefit-list-item. On white sections, the black fill of button-primary-6 takes over.
Draw hover as an inset overlay: #FFFFFF1A 999px 999px 0px 0px inset on dark or white pills, #0000000A 999px 999px 0px 0px inset on gray fills. Also swap white pills to chip (#E2E2E2), as button-primary does.
Give every interactive element the focus ring #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px using focus-ring.
Build depth tonally: surface-dark tiles on primary black (as in card, which sits in a 3-column grid), and surface-subtle fills on white.
Keep the header 64px tall and black, with its inner row capped at header-inner-2-inner-max-width (1408px), as header-inner-2 measures.
Use only weights 400, 500 and 700. Reserve 700 for Uber Move headlines (title-md through hero-display).

Don't

Don't add outward drop shadows to cards or panels. No page-level shadow was measured, and lift comes from fill change and the inset state overlays.
Don't add backdrop blur to the sticky header; it is solid primary.
Don't introduce a brand accent color for buttons. CTAs are black, white or gray, and focus-ring (#276EF1) is for focus only.
Don't let link-default (#0000EE) show as visible text. It is the inherited default on wrapper anchors like card-link. Use link (#175BCC) for real links.
Don't mix radii at one control height: 36px controls are pills and 48px content CTAs are rounded.md, except the icon pill button-secondary.
Don't apply letter-spacing or uppercase transforms. Every type token is normal.
Don't use gradients. accent-navy and accent-teal are solid band and illustration fills only.

Responsive Behavior

Scope

This analysis covers two viewports only: one desktop and one mobile capture. No intermediate breakpoint was observed, and no breakpoint pixel values are stated.

What Changes on Mobile

Navigation collapses. The desktop header row of white pill links and CTAs shrinks to the logo, Log in and Sign up, and a hamburger. The bar stays black and sticky.
Grids stack. Two-part hero and feature splits become a single column, with text above imagery. Multi-up service tiles turn into compact icon tiles, and step and blog cards stack into one column.
The footer lengthens. Its link columns stack: footer-mobile measures 2066px tall against 1013px for the desktop footer. Both are flagged; their group heights did not reproduce after 2 correction attempts.
Carousels keep their controls. The 1/N counter and circular prev/next buttons persist.

Touch Targets

Control heights carry over unchanged. The smallest are the 36px pills (button-primary, button-ghost-4, button-secondary-6). Content CTAs are 48px (button-primary-2, button-secondary), and icon controls are 52px (button-secondary-2, carousel-control-button). On mobile, prefer the 48px variants for primary actions, since 36px falls below common touch-target guidance.

Iteration Guide

Reference tokens, never hex. Use primary, surface, surface-dark, body, muted and the other color tokens for color, the typography token names for type, and rounded.* for radius. If a value has no token, it probably doesn't belong in the system.
Keep the palette monochrome. New components get black, white or gray fills. Blue is limited to focus-ring for focus and link for links. accent-navy and accent-teal stay confined to bands and illustration.
Pick one of two control sizes. Use 36px pills (rounded.full, 10px / 12px padding, nav-link type) or 48px CTAs (rounded.md, 14px / 25px padding, button type). Base new buttons on button-primary, button-primary-6 or button-secondary-5, and avoid inventing a third size.
States live in box-shadow. Every interactive variant gets the inset hover overlay (#FFFFFF1A on dark or white pills, #0000000A on gray fills) and the white-plus-focus-ring focus ring. Never express a state with a size, border or layout change.
Depth stays tonal. Add hierarchy by stepping fills (surface-dark on black, surface-subtle on white) or by inverting a band. A 1px #00000014 hairline is the strongest container edge allowed, and drop shadows are off-limits.
Respect the type split and the three weights. Uber Move at 700 is for headlines of 24px and up. Uber Move Text at 400/500 is for 18px and below. Weights are limited to 400, 500 and 700, and letter-spacing is always normal.
Don't copy flagged recipes as truth. Check a component's flag before reusing its dimensions. The card-2 through card-9 grid cards, header-landing, footer and button-primary-3 did not reproduce exactly.

Known Gaps

Coverage: All 5 pages captured (home, business, blog, ride, about). No values were dropped during grounding.
Flagged recipes: These reproduce only approximately, so treat their measured sizes as indicative:
- button-primary-3: 67% pixel match.
- button-ghost-3: 96% on focus.
- header-landing: 95%.
- header-inner: 94%.
- sub-navigation: 95%.
- carousel-control: width.
- card-2, card-3, card-4, card-5, card-6, card-7 and card-9: group heights or widths.
- footer and footer-mobile: heights.
- button-ghost, button-ghost-5 and button-primary-5: the original element could not be found again.
No layout rhythm tokens: There is no section-padding or grid-gap token and no base spacing step. Section spacing and card gutters must be matched by eye.
Partial state coverage: Hover and focus were captured on buttons and nav links. Active/pressed, disabled (beyond the gray carousel arrow), visited links and form-field states were not.
No forms or inputs: No input, select or ride-booking field recipe exists. The pickup/destination inputs and any authenticated flows (login, ride request, Eats ordering) were not reachable.
Not tokenized: The Uber Eats green photo frames and the large-radius Eats banner seen in screenshots were not measured.
No motion: Animation, transitions and carousel motion were not captured.
Fonts are proprietary: Uber Move and Uber Move Text were not available to verify metrics. A generic sans-serif dominated raw sampling, likely from wrapper elements rather than visible text.
Responsive: Evidence is limited to two viewports. Breakpoints and intermediate layouts are unknown.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik Uber, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Keuangan & Fintech

Klarna

Sistem desain Klarna menampilkan warna primer biru navy gelap yang canggih (#0b051d) dengan warna aksen cerah, termasuk warna pink khasnya (#ffa8cd). Sistem ini menggunakan font kustom Klarna berdampingan dengan font sistem, menonjolkan sudut membulat (32px paling umum), dan mempertahankan kontras tinggi demi aksesibilitas. Desainnya menyeimbangkan kesan profesional dengan keramahan melalui spasi yang lega dan hierarki tipografi yang jelas.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Design System Uber

Komponen

Buttons18

Cards9

Extras4

Headers6

Footers2

Input1

Overview

Colors

Core Monochrome

Text Tiers

Neutral Fills

Links & Accents

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Buttons

Cards

Nav link

Carousel controls

Headers

Footer

Sub navigation

Benefit list item

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What Changes on Mobile

Touch Targets

Iteration Guide

Known Gaps

Serupa dengan ini

Airbnb

Klarna

IKEA

Notion

Railway

Shopify

Palet serupa