Not checked
ghost · desktop
The element could not be found on the page again.
Nothing was compared for this component.
Recipe in DESIGN.mdExtraction confidence
- Components match the site at 97%
- 100% of the site's colors covered
- 76% of the site's text styles covered
- 100% of tokens seen on the site
Visual system
100% confidence
88% confidence
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% confidence
button-primary-padding-y
10px
10px
button-ghost-2-padding-y
10px
10px
button-secondary-3-padding-y
10px
10px
button-secondary-4-padding-y
10px
10px
button-ghost-4-padding-y
10px
10px
button-secondary-6-padding-y
10px
10px
button-primary-padding-x
12px
12px
button-ghost-2-padding-x
12px
12px
button-secondary-3-padding-x
12px
12px
button-secondary-4-padding-x
12px
12px
button-ghost-4-padding-x
12px
12px
button-secondary-6-padding-x
12px
12px
button-primary-2-padding-y
14px
14px
button-secondary-padding-y
14px
14px
button-secondary-2-padding-y
14px
14px
button-secondary-2-padding-x
14px
14px
button-primary-4-padding-y
14px
14px
button-primary-6-padding-y
14px
14px
button-secondary-5-padding-y
14px
14px
button-secondary-padding-x
16px
16px
button-primary-2-padding-x
25px
25px
button-primary-4-padding-x
25px
25px
button-primary-6-padding-x
25px
25px
button-secondary-5-padding-x
25px
25px
header-inner-2-inner-max-width
1408px
1408px
100% confidence
xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
full · 9999px
Components
Button18
Not checked
ghost · desktop
No recipe was made: the element could not be found on the page.
Nothing was compared for this component.
100% match
ghost · desktop
At rest100% match56 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
96% match
ghost · desktop
On focus, it renders 96% like the site, below the 97% bar.
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus96% match18 measurements match
100% match
ghost · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
Not checked
ghost · desktop
The element could not be found on the page again.
Nothing was compared for this component.
Recipe in DESIGN.md100% match
primary · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
primary · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
67% match
primary · desktop
It renders 67% like the site, below the 97% bar.
At rest67% match21 measurements match
Hover67% match18 measurements match
Focus77% match18 measurements match
98% match
primary · desktop
At rest99% match21 measurements match
Hover99% match18 measurements match
Focus98% match18 measurements match
Not checked
primary · desktop
The element could not be found on the page again.
Nothing was compared for this component.
Recipe in DESIGN.md100% match
primary · desktop
At rest100% match22 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match89 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match34 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match56 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
100% match
secondary · desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
Card9
100% match
desktop
At rest100% match100 measurements match
Hover100% match18 measurements match
Focus100% match18 measurements match
At rest, instance 2100% match100 measurements match
No image stored
No image stored
At rest, instance 3100% match100 measurements match
No image stored
No image stored
At rest, instance 4100% match100 measurements match
No image stored
No image stored
At rest, instance 5100% match100 measurements match
No image stored
No image stored
At rest, instance 6100% match100 measurements match
No image stored
No image stored
100% match
desktop
Group height is 291px, the site has 303px; Group 4 height is 72px, the site has 84px and 1 more.
At rest100% match3 of 154 measurements differ
At rest, instance 2100% match3 of 154 measurements differ
No image stored
No image stored
At rest, instance 3100% match3 of 154 measurements differ
No image stored
No image stored
At rest, instance 4100% match3 of 154 measurements differ
No image stored
No image stored
100% match
desktop
Group height is 364px, the site has 396px; Group 4 height is 104px, the site has 136px and 2 more.
At rest100% match4 of 176 measurements differ
At rest, instance 2100% match4 of 176 measurements differ
No image stored
No image stored
At rest, instance 3100% match4 of 176 measurements differ
No image stored
No image stored
100% match
desktop
Group width is 0px, the site has 360px; Group 2 width is 0px, the site has 360px and 3 more.
At rest100% match5 of 176 measurements differ
At rest, instance 2100% match5 of 176 measurements differ
No image stored
No image stored
At rest, instance 3100% match5 of 176 measurements differ
No image stored
No image stored
100% match
desktop
Group 2 width is 9px, the site has 360px; Group 4 x is 45px, the site has 495px and 5 more.
At rest100% match7 of 174 measurements differ
Hover100% match18 measurements match
Focus100% match1 of 18 measurements differ
At rest, instance 2100% match7 of 174 measurements differ
No image stored
No image stored
At rest, instance 3100% match7 of 174 measurements differ
No image stored
No image stored
100% match
desktop
Group width is 396px, the site has 360px; Group 2 width is 396px, the site has 360px and 1 more.
At rest100% match3 of 88 measurements differ
At rest, instance 2100% match3 of 88 measurements differ
No image stored
No image stored
At rest, instance 3100% match3 of 88 measurements differ
No image stored
No image stored
100% match
desktop
Root height is 416px, the site has 380px; Group 3 height is 208px, the site has 172px and 3 more.
At rest100% match5 of 246 measurements differ
At rest, instance 2100% match5 of 246 measurements differ
No image stored
No image stored
At rest, instance 3100% match5 of 246 measurements differ
No image stored
No image stored
At rest, instance 4100% match5 of 246 measurements differ
No image stored
No image stored
At rest, instance 5100% match5 of 246 measurements differ
No image stored
No image stored
At rest, instance 6100% match5 of 246 measurements differ
No image stored
No image stored
Not checked
desktop
No recipe was made: the element could not be found on the page.
Nothing was compared for this component.
90% match
desktop
Group width is 396px, the site has 360px; Group 2 width is 396px, the site has 360px and 2 more.
At rest90% match4 of 110 measurements differ
At rest, instance 290% match4 of 110 measurements differ
No image stored
No image stored
At rest, instance 392% match4 of 110 measurements differ
No image stored
No image stored
Extra4
100% match
desktop
At rest100% match97 measurements match
At rest, instance 2100% match97 measurements match
No image stored
No image stored
At rest, instance 3100% match97 measurements match
No image stored
No image stored
99% match
desktop
Group width is 124px, the site has 120px; Button x is 1032px, the site has 1036px and 1 more.
At rest99% match3 of 113 measurements differ
99% match
desktop
At rest100% match21 measurements match
Hover100% match18 measurements match
Focus99% match18 measurements match
95% match
desktop
It renders 95% like the site, below the 96% bar.
At rest95% match264 measurements match
Header6
93% match
desktop
It renders 94% like the site, below the 96% bar.
At rest94% match651 measurements match
Hovernot checked
Focusnot checked
Focus on cta 293% match18 measurements match
No image stored
No image stored
Hover on cta 294% match18 measurements match
No image stored
No image stored
Focus on cta 393% match18 measurements match
No image stored
No image stored
Hover on cta 394% match18 measurements match
No image stored
No image stored
Focus on cta 494% match18 measurements match
No image stored
No image stored
Hover on cta 494% match18 measurements match
No image stored
No image stored
Focus on cta93% match18 measurements match
No image stored
No image stored
Hover on cta94% match18 measurements match
No image stored
No image stored
Focus on logo94% match18 measurements match
No image stored
No image stored
Focus on nav link93% match18 measurements match
No image stored
No image stored
Hover on nav link94% match18 measurements match
No image stored
No image stored
100% match
desktop
At rest100% match372 measurements match
Hovernot checked
Focusnot checked
Focus on cta 2100% match18 measurements match
No image stored
No image stored
Hover on cta 2100% match18 measurements match
No image stored
No image stored
Focus on cta 3100% match18 measurements match
No image stored
No image stored
Hover on cta 3100% match18 measurements match
No image stored
No image stored
Focus on cta 4100% match18 measurements match
No image stored
No image stored
Hover on cta 4100% match18 measurements match
No image stored
No image stored
Focus on cta100% match18 measurements match
No image stored
No image stored
Hover on cta100% match18 measurements match
No image stored
No image stored
Focus on logo100% match18 measurements match
No image stored
No image stored
94% match
desktop
It renders 95% like the site, below the 96% bar.
At rest95% match592 measurements match
Hovernot checked
Focusnot checked
Focus on cta 294% match18 measurements match
No image stored
No image stored
Hover on cta 295% match18 measurements match
No image stored
No image stored
Focus on cta 394% match18 measurements match
No image stored
No image stored
Hover on cta 395% match18 measurements match
No image stored
No image stored
Focus on cta 494% match18 measurements match
No image stored
No image stored
Hover on cta 495% match18 measurements match
No image stored
No image stored
Focus on cta94% match18 measurements match
No image stored
No image stored
Hover on cta95% match18 measurements match
No image stored
No image stored
Focus on logo94% match18 measurements match
No image stored
No image stored
Focus on nav link94% match18 measurements match
No image stored
No image stored
Hover on nav link95% match18 measurements match
No image stored
No image stored
Not checked
mobile
No recipe was made: the element was not visible.
Nothing was compared for this component.
Not checked
mobile
No recipe was made: the element was not visible.
Nothing was compared for this component.
Not checked
mobile
No recipe was made: the element was not visible.
Nothing was compared for this component.
Footer2
60% match
desktop
Group height is 547px, the site has 1013px; Group 2 height is 547px, the site has 1013px and 54 more.
At rest60% match56 of 594 measurements differ
27% match
mobile
Group height is 499px, the site has 2066px; Group 2 height is 499px, the site has 2066px and 68 more.
At rest27% match70 of 572 measurements differ
Input1
Not checked
desktop
No recipe was made: the element could not be found on the page.
Nothing was compared for this component.
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-ringring. - Gray tiers (
bodythroughmuted-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 toprimary, so use it to express a text role. - Paper White (
surface, #FFFFFF): light page bands,sub-navigationbar (flagged: the render matched 95% of the original pixels, below the 96% required),benefit-list-itemrows. - On-Black White (
on-primary, #FFFFFF): all text on black, plus the white pill fill ofbutton-primaryandbutton-secondary-6sitting on the black header. - Graphite (
surface-dark, #292929): the dark service tiles ofcard, 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. thecard-7-textline in blog cards. - Soft Gray (
muted-soft, #6B6B6B): low-emphasis captions. - Disabled Gray (
muted-light, #A6A6A6): inactive controls, e.g. the disabled arrow oncarousel-control-button(carousel-controlflagged: its group width did not reproduce the measured 120px).
Neutral Fills
- Fog (
surface-subtle, #EFEFEF): light-gray control and band fill; the fill ofbutton-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 ascard-linkandcard-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 asbutton-primaryandbutton-secondary-6. - Recipe-only fills: #F3F3F3 on
button-secondary-2(the circular icon button); #EEEEEE onbutton-primary-4; #EFF4FE behind thecard-7-group-5tag (card-7flagged: its height did not reproduce the measured 380px). - Hairline:
card-7carries 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-mdup tohero-display, always at weight 700. It also sets the wordmark text inheader-landing-logoandheader-inner-2-logoat 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 ofheader-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.
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
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 capturedcard-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 capturedcard-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.
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.
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: thebutton-ghostbutton (.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: thebutton-primarybutton, 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-logofocus: outline 3px solid #276EF1, outline-offset 1pxheader-landing-nav-linkhover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-nav-linkfocus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-ctahover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-ctafocus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-2hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-2focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-3hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-3focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-4hover (header-landing-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-4focus (header-landing-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Footer
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 capturedfooter-column-2: inner block (.c-footer__column-2), content not capturedfooter-column-3: inner flex column (.c-footer__column-3, 4 instances), content not capturedfooter-list: inner grid (.c-footer__list), content not capturedfooter-list-2: inner flex row (.c-footer__list-2), content not capturedfooter-column-4: inner grid (.c-footer__column-4), content not capturedfooter-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 capturedfooter-mobile-column-2: inner block (.c-footer-mobile__column-2), content not capturedfooter-mobile-column-3: inner flex column (.c-footer-mobile__column-3, 4 instances), content not capturedfooter-mobile-list: inner grid (.c-footer-mobile__list), content not capturedfooter-mobile-list-2: inner grid (.c-footer-mobile__list-2), content not capturedfooter-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.
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
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 capturedcard-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 capturedcard-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.
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: thebutton-ghostbutton (.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: thebutton-secondary-3button, 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: thebutton-primarybutton, 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-logofocus: outline 3px solid #276EF1, outline-offset 1pxheader-inner-ctahover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-ctafocus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-nav-linkhover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-nav-linkfocus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-2hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-2focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-3hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-3focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-4hover (header-inner-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-4focus (header-inner-cta-4-focus): background-color #E2E2E2, 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
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 capturedcard-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.
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: thebutton-ghostbutton (.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: thebutton-ghost-4button, 4-character label (.c-header-inner-2__cta-2)header-inner-2-cta-3: thebutton-ghost-4button, 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: thebutton-primarybutton, 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-logofocus: outline 3px solid #276EF1, outline-offset 1pxheader-inner-2-ctahover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-ctafocus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-2hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-2focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-3hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-3focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-4hover (header-inner-2-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-4focus (header-inner-2-cta-4-focus): background-color #E2E2E2, 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
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 capturedcard-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.
Sub navigation
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 capturedsub-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.
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
Do's and Don'ts
Do
- Use pills (
rounded.full) for 36px header and utility controls, asbutton-primary,button-ghost-2,button-secondary-3,button-secondary-4,button-ghost-4andbutton-secondary-6all do. Pad them withbutton-primary-padding-y/button-primary-padding-x(10px / 12px) and set labels innav-link. - Use
rounded.md(8px) at 48px height with 14px / 25px padding for content CTAs, matchingbutton-primary-2,button-primary-4,button-primary-6andbutton-secondary-5. Set labels inbutton. - 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, thecard-text-2badge andbenefit-list-item. On white sections, the black fill ofbutton-primary-6takes over. - Draw hover as an inset overlay:
#FFFFFF1A 999px 999px 0px 0px inseton dark or white pills,#0000000A 999px 999px 0px 0px inseton gray fills. Also swap white pills tochip(#E2E2E2), asbutton-primarydoes. - Give every interactive element the focus ring
#FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2pxusingfocus-ring. - Build depth tonally:
surface-darktiles onprimaryblack (as incard, which sits in a 3-column grid), andsurface-subtlefills on white. - Keep the header 64px tall and black, with its inner row capped at
header-inner-2-inner-max-width(1408px), asheader-inner-2measures. - Use only weights 400, 500 and 700. Reserve 700 for Uber Move headlines (
title-mdthroughhero-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 likecard-link. Uselink(#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 pillbutton-secondary. - Don't apply letter-spacing or uppercase transforms. Every type token is
normal. - Don't use gradients.
accent-navyandaccent-tealare 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-mobilemeasures 2066px tall against 1013px for the desktopfooter. 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,mutedand the other color tokens for color, the typography token names for type, androunded.*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-ringfor focus andlinkfor links.accent-navyandaccent-tealstay confined to bands and illustration. - Pick one of two control sizes. Use 36px pills (
rounded.full, 10px / 12px padding,nav-linktype) or 48px CTAs (rounded.md, 14px / 25px padding,buttontype). Base new buttons onbutton-primary,button-primary-6orbutton-secondary-5, and avoid inventing a third size. - States live in box-shadow. Every interactive variant gets the inset hover overlay (
#FFFFFF1Aon dark or white pills,#0000000Aon gray fills) and the white-plus-focus-ringfocus ring. Never express a state with a size, border or layout change. - Depth stays tonal. Add hierarchy by stepping fills (
surface-darkon black,surface-subtleon 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-2throughcard-9grid cards,header-landing,footerandbutton-primary-3did 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-7andcard-9: group heights or widths.footerandfooter-mobile: heights.button-ghost,button-ghost-5andbutton-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.
Extracted from Uber’s public website, not official brand guidelines.
More like this
Browse all
Travel, Transport & Logistics
Airbnb
Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.
Finance & Fintech
Klarna
Klarna's design system features a sophisticated dark navy primary color (#0b051d) with bright accent colors including their signature pink (#ffa8cd). The system uses custom Klarna fonts alongside system fonts, emphasizes rounded corners (32px being most common), and maintains high contrast for accessibility. The design balances professionalism with approachability through generous spacing and clear typography hierarchy.
Commerce & Retail · E-commerce Store
IKEA
IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.
Software & SaaS · Productivity & Notes
Notion
Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.
Developer & Infrastructure · Developer Tools & IDEs
Railway
Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.
Business & Professional Services
Shopify
Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.