Uber
Uber's marketing system is uncompromising monochrome. Pure black and pure white do almost all of the work: a sticky black header with white pill links, black headlines on white bands, dark graphite cards on black, and white pill buttons that pop off dark surfaces. Color is held back. A single blue exists for focus, a deeper blue for links and tags, and navy and pale teal appear only as illustration and band accents. Warm lifestyle photography supplies the emotion, so the UI chrome can stay cold and direct.
Density is moderate. Copy is short and imperative, controls are compact (36px header pills, 48px content CTAs), and sections breathe with generous vertical gaps. Hierarchy comes from three levers only: the heavy geometric Uber Move display face against the quieter Uber Move Text, inversion between black and white bands, and tonal fills (graphite on black, light gray on white). It does not come from drop shadows or saturated color.
Interaction feedback is engineered rather than decorative. Hover darkens or lightens a control with a full-cover inset box-shadow overlay. Focus draws a white inner ring plus a focus-ring blue outer ring. Neither changes the layout.
Key Characteristics:
- Black (
primary, #000000) and white (surface, #FFFFFF) carry nearly all surfaces and text; the inverted band is the main sectioning device.
- Two typefaces: Uber Move for bold 24–52px headlines, Uber Move Text for everything at 18px and below.
- Only three weights exist: 400, 500 and 700. Letter-spacing is always normal.
- Pills (
rounded.full) for 36px header and utility controls; 8px (rounded.md) for 48px content CTAs and dark cards.
- No drop shadows. Hover and focus are drawn with inset box-shadow overlays and a blue
focus-ring ring.
- Gray tiers (
body through muted-light) build text hierarchy instead of color.
- No gradients; accents (
accent-navy, accent-teal) are rare band and illustration fills.
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.
- Uber Black (
primary, #000000): header bar, footer band, dark hero sections, black pill buttons (button-secondary-3, button-ghost-4) and the primary text color on white. This is the brand.
- Ink (
ink, #000000): default body and headline text on light surfaces; identical in value to primary, so use it to express a text role.
- Paper White (
surface, #FFFFFF): light page bands, sub-navigation bar (flagged: the render matched 95% of the original pixels, below the 96% required), benefit-list-item rows.
- On-Black White (
on-primary, #FFFFFF): all text on black, plus the white pill fill of button-primary and button-secondary-6 sitting on the black header.
- Graphite (
surface-dark, #292929): the dark service tiles of card, set on black so they read one step up without a shadow.
- Charcoal (
body, #333333): long-form body copy on white; the most-used non-black text color.
- Slate (
body-secondary, #4A4A4A): secondary paragraphs and supporting lines.
- Muted Gray (
muted, #5E5E5E): metadata and descriptions, e.g. the card-7-text line in blog cards.
- Soft Gray (
muted-soft, #6B6B6B): low-emphasis captions.
- Disabled Gray (
muted-light, #A6A6A6): inactive controls, e.g. the disabled arrow on carousel-control-button (carousel-control flagged: its group width did not reproduce the measured 120px).
- Fog (
surface-subtle, #EFEFEF): light-gray control and band fill; the fill of button-secondary.
- Link Blue (
link, #175BCC): inline links and the text of blog category tags (card-7-group-5).
- Browser Blue (
link-default, #0000EE): the user-agent default on wrapper anchors such as card-link and card-7-link; it is inherited, not a design choice, and should never be visible text.
- Night Navy (
accent-navy, #002661): the deep CTA band on the business page and illustration accents.
- Pale Teal (
accent-teal, #9DCDD6): illustration and light accent fills only.
These were measured on component recipes, never in page sampling.
- Focus Blue (
focus-ring, #276EF1): the outer 2px focus ring on every button and nav link, and the 3px outline on the header logo. Reserve it for focus.
- Pressed Gray (
chip, #E2E2E2): the hover and focus fill of white pills such as button-primary and button-secondary-6.
- Recipe-only fills: #F3F3F3 on
button-secondary-2 (the circular icon button); #EEEEEE on button-primary-4; #EFF4FE behind the card-7-group-5 tag (card-7 flagged: its height did not reproduce the measured 380px).
- Hairline:
card-7 carries a 1px solid #00000014 border, the only measured border on a container.
- Uber Move (geometric display grotesque, proprietary): every headline from
title-md up to hero-display, always at weight 700. It also sets the wordmark text in header-landing-logo and header-inner-2-logo at 24px / 400.
- Uber Move Text (text-optimized companion, proprietary): body, labels, nav links and every button. Recipes declare the stack
UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif.
| 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 |
- 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.
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.
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.
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.
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.
Every spacing token restates a measurement of a verified component recipe, or the step those measurements share.
header-inner-2-inner-max-width: 1408px (header-inner-2, max width of header-inner-2-inner)button-primary-padding-y: 10px (button-primary, vertical padding of the root)button-primary-padding-x: 12px (button-primary, horizontal padding of the root)button-primary-2-padding-y: 14px (button-primary-2, vertical padding of the root)button-primary-2-padding-x: 25px (button-primary-2, horizontal padding of the root)button-secondary-padding-y: 14px (button-secondary, vertical padding of the root)button-secondary-padding-x: 16px (button-secondary, horizontal padding of the root)button-secondary-2-padding-y: 14px (button-secondary-2, vertical padding of the root)button-secondary-2-padding-x: 14px (button-secondary-2, horizontal padding of the root)button-ghost-2-padding-y: 10px (button-ghost-2, vertical padding of the root)button-ghost-2-padding-x: 12px (button-ghost-2, horizontal padding of the root)button-primary-4-padding-y: 14px (button-primary-4, vertical padding of the root)button-primary-4-padding-x: 25px (button-primary-4, horizontal padding of the root)button-secondary-3-padding-y: 10px (button-secondary-3, vertical padding of the root)button-secondary-3-padding-x: 12px (button-secondary-3, horizontal padding of the root)button-secondary-4-padding-y: 10px (button-secondary-4, vertical padding of the root)button-secondary-4-padding-x: 12px (button-secondary-4, horizontal padding of the root)button-ghost-4-padding-y: 10px (button-ghost-4, vertical padding of the root)button-ghost-4-padding-x: 12px (button-ghost-4, horizontal padding of the root)button-primary-6-padding-y: 14px (button-primary-6, vertical padding of the root)button-primary-6-padding-x: 25px (button-primary-6, horizontal padding of the root)button-secondary-5-padding-y: 14px (button-secondary-5, vertical padding of the root)button-secondary-5-padding-x: 25px (button-secondary-5, horizontal padding of the root)button-secondary-6-padding-y: 10px (button-secondary-6, vertical padding of the root)button-secondary-6-padding-x: 12px (button-secondary-6, horizontal padding of the root)
The card grid lays out in 3 columns at desktop.
| 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.
| 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.
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
Button, primary (4)
Verification: verified against the live page at desktop.
Anatomy
button-primary-4: the component root, a <a> (.c-button-primary-4), 18-character label
Recipe
HTML · CSS
<div class="c-button-primary-4-scope">
<a class="c-button-primary-4" href="#">lorem ipsum dolor</a>
</div>
.c-button-primary-4-scope {
background-color: #002661;
color: #FFFFFF;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-button-primary-4 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 14px 25px;
background-color: #EEEEEE;
color: #000000;
border-radius: 8px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-primary-4:hover {
box-shadow: #0000000A 999px 999px 0px 0px inset;
}
.c-button-primary-4:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #0000000A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, secondary (3)
Verification: verified against the live page at desktop.
Anatomy
button-secondary-3: the component root, a <a> (.c-button-secondary-3), 10-character label
Recipe
HTML · CSS
<div class="c-button-secondary-3-scope">
<a class="c-button-secondary-3" href="#">lorem ipsu</a>
</div>
.c-button-secondary-3-scope {
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.c-button-secondary-3 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-secondary-3:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-secondary-3:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, secondary (4)
Verification: verified against the live page at desktop.
Anatomy
button-secondary-4: the component root, a <button> (.c-button-secondary-4)button-secondary-4-group: inner flex row (.c-button-secondary-4__group)button-secondary-4-icon: icon placeholder, 16px (.c-button-secondary-4__icon)button-secondary-4-label: label text, 2 characters (.c-button-secondary-4__label)
Recipe
HTML · CSS
<div class="c-button-secondary-4-scope">
<button class="c-button-secondary-4" type="button">
<div class="c-button-secondary-4__group">
<span class="c-button-secondary-4__icon" aria-hidden="true"></span>
</div>
<span class="c-button-secondary-4__label">lo</span>
</button>
</div>
.c-button-secondary-4-scope {
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.c-button-secondary-4 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-secondary-4__group {
display: flex;
margin-right: 8px;
}
.c-button-secondary-4__icon {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-button-secondary-4:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-secondary-4:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, ghost (4)
Verification: verified against the live page at desktop.
Anatomy
button-ghost-4: the component root, a <a> (.c-button-ghost-4), 4-character label
Recipe
HTML · CSS
<div class="c-button-ghost-4-scope">
<a class="c-button-ghost-4" href="#">lore</a>
</div>
.c-button-ghost-4-scope {
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.c-button-ghost-4 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
list-style-type: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-ghost-4:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-ghost-4:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, primary (5)
Verification: flagged, the original element could not be found again.
Anatomy
button-primary-5: the component root, a <a> (.c-button-primary-5), 10-character label
Recipe
HTML · CSS
<div class="c-button-primary-5-scope">
<a class="c-button-primary-5" href="#">lorem ipsu</a>
</div>
.c-button-primary-5-scope {
background-color: #FFFFFF;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-button-primary-5 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 14px 25px;
background-color: #000000;
color: #FFFFFF;
border-radius: 8px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-primary-5:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-primary-5:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, primary (6)
Verification: verified against the live page at desktop.
Anatomy
button-primary-6: the component root, a <button> (.c-button-primary-6), 4-character label
Recipe
HTML · CSS
<div class="c-button-primary-6-scope">
<button class="c-button-primary-6" type="button">lore</button>
</div>
.c-button-primary-6-scope {
background-color: #9DCDD6;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-button-primary-6 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 14px 25px;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 8px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: normal;
text-transform: none;
text-align: center;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-primary-6:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-primary-6:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, secondary (5)
Verification: verified against the live page at desktop.
Anatomy
button-secondary-5: the component root, a <a> (.c-button-secondary-5), 10-character label
Recipe
HTML · CSS
<div class="c-button-secondary-5-scope">
<a class="c-button-secondary-5" href="#">lorem ipsu</a>
</div>
.c-button-secondary-5-scope {
background-color: #000000;
color: #FFFFFF;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-button-secondary-5 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 14px 25px;
background-color: #FFFFFF;
color: #000000;
border-radius: 8px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-secondary-5:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-secondary-5:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, ghost (5)
Verification: flagged, the original element could not be found again.
Anatomy
button-ghost-5: the component root, a <button> (.c-button-ghost-5), 11-character label
Recipe
HTML · CSS
<div class="c-button-ghost-5-scope">
<button class="c-button-ghost-5" type="button">lorem ipsum</button>
</div>
.c-button-ghost-5-scope {
background-color: #FFFFFF;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-button-ghost-5 {
display: inline-flex;
justify-content: start;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 0px;
background-color: transparent;
color: #000000;
border: 0;
border-radius: 8px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: normal;
text-transform: none;
text-decoration-line: underline;
text-decoration-color: #000000;
text-align: center;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-ghost-5:hover {
box-shadow: #0000000A 999px 999px 0px 0px inset;
}
.c-button-ghost-5:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover: box-shadow #0000000A 999px 999px 0px 0px inset
- focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Button, secondary (6)
Verification: verified against the live page at desktop.
Anatomy
button-secondary-6: the component root, a <button> (.c-button-secondary-6), 7-character label
Recipe
HTML · CSS
<div class="c-button-secondary-6-scope">
<button class="c-button-secondary-6" type="button">lorem i</button>
</div>
.c-button-secondary-6-scope {
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.c-button-secondary-6 {
display: inline-flex;
justify-content: center;
align-items: center;
border-spacing: 0px;
box-sizing: border-box;
padding: 10px 12px;
background-color: #FFFFFF;
color: #000000;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
list-style-type: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-button-secondary-6:hover {
background-color: #E2E2E2;
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-button-secondary-6:focus {
background-color: #E2E2E2;
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
- hover (
button-secondary-6-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px inset
- focus (
button-secondary-6-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
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.
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.
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.
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.
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
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: the button-ghost button (.c-header-landing__cta, 2 instances)header-landing-text: label text, 5 characters (.c-header-landing__text, 2 instances)header-landing-group-2: inner flex row (.c-header-landing__group-2)header-landing-icon: icon placeholder, 18px (.c-header-landing__icon)header-landing-nav-2: inner flex row (.c-header-landing__nav-2)header-landing-item: inner group (.c-header-landing__item, 3 instances)header-landing-group-3: inner flex row (.c-header-landing__group-3)header-landing-icon-2: icon placeholder, 16px (.c-header-landing__icon-2)header-landing-cta-2: link, 4-character label (.c-header-landing__cta-2)header-landing-group-4: inner flex row (.c-header-landing__group-4, 2 instances)header-landing-cta-3: link, 6-character label (.c-header-landing__cta-3)header-landing-item-2: inner group (.c-header-landing__item-2)header-landing-cta-4: the button-primary button, 7-character label (.c-header-landing__cta-4)
Recipe
HTML · CSS
<div class="c-header-landing-scope">
<nav class="c-header-landing">
<div class="c-header-landing__group">
<div class="c-header-landing__inner">
<a class="c-header-landing__logo" href="#">lore</a>
<ul class="c-header-landing__nav">
<li class="c-header-landing__nav-item">
<a class="c-header-landing__nav-link" href="#">lore</a>
</li>
<li class="c-header-landing__nav-item">
<a class="c-header-landing__nav-link" href="#">lore</a>
</li>
<li class="c-header-landing__nav-item">
<a class="c-header-landing__nav-link" href="#">lorem ip</a>
</li>
<li class="c-header-landing__nav-item">
<a class="c-header-landing__nav-link" href="#">lorem ips</a>
</li>
<li class="c-header-landing__nav-item">
<button class="c-header-landing__cta" type="button">
<span class="c-header-landing__text">lorem</span>
<div class="c-header-landing__group-2">
<span class="c-header-landing__icon" aria-hidden="true"></span>
</div>
</button>
</li>
</ul>
<ul class="c-header-landing__nav-2">
<li class="c-header-landing__item">
<button class="c-header-landing__cta" type="button">
<div class="c-header-landing__group-3">
<span class="c-header-landing__icon-2" aria-hidden="true"></span>
</div>
<span class="c-header-landing__text">lo</span>
</button>
</li>
<li class="c-header-landing__item">
<a class="c-header-landing__cta-2" href="#">lore</a>
</li>
<div class="c-header-landing__group-4">
<li class="c-header-landing__item">
<a class="c-header-landing__cta-3" href="#">lorem</a>
</li>
</div>
<div class="c-header-landing__group-4">
<li class="c-header-landing__item-2">
<button class="c-header-landing__cta-4" type="button">lorem i</button>
</li>
</div>
</ul>
</div>
</div>
</nav>
</div>
.c-header-landing-scope {
background-color: #FFFFFF;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-header-landing {
display: flex;
border-spacing: 0px;
box-sizing: border-box;
height: 64px;
position: sticky;
top: 0px;
z-index: 2002;
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: top 0.3s ease;
padding-top: 12px;
padding-bottom: 12px;
}
.c-header-landing__group {
display: flex;
width: 100%;
position: relative;
}
.c-header-landing__inner {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 1408px;
padding-right: 64px;
padding-left: 64px;
margin-right: auto;
margin-left: auto;
}
.c-header-landing__logo {
display: flex;
align-items: center;
height: 100%;
position: relative;
top: 0px;
color: #FFFFFF;
cursor: pointer;
font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 112px;
text-decoration-line: none;
text-align: left;
white-space: nowrap;
transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-header-landing__nav {
display: flex;
flex-grow: 1;
padding: 0px;
margin: 0px 24px;
overflow-x: hidden;
overflow-y: hidden;
list-style-type: none;
}
.c-header-landing__nav-item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-landing__nav-link {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-landing__cta {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-landing__group-2 {
display: flex;
margin-left: 8px;
}
.c-header-landing__icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-landing__nav-2 {
display: flex;
justify-content: flex-end;
flex-shrink: 0;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-header-landing__item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-landing__group-3 {
display: flex;
margin-right: 8px;
}
.c-header-landing__icon-2 {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-landing__cta-2 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-landing__group-4 {
display: flex;
}
.c-header-landing__cta-3 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-landing__item-2 {
display: list-item;
align-self: center;
}
.c-header-landing__cta-4 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #FFFFFF;
color: #000000;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-landing__logo:focus {
outline: 3px solid #276EF1;
outline-offset: 1px;
}
.c-header-landing__nav-link:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-landing__nav-link:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-landing__cta:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-landing__cta:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-landing__cta-2:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-landing__cta-2:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-landing__cta-3:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-landing__cta-3:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-landing__cta-4:hover {
background-color: #E2E2E2;
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-landing__cta-4:focus {
background-color: #E2E2E2;
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
header-landing-logo focus: outline 3px solid #276EF1, outline-offset 1pxheader-landing-nav-link hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-nav-link focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-landing-cta-4 hover (header-landing-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-landing-cta-4 focus (header-landing-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Verification: flagged, the render matched 94% of the original pixels, below the 96% required after 2 correction attempts.
Variant observed on https://www.uber.com/de/en/business/.
Anatomy
header-inner: the component root, a <nav> (.c-header-inner)header-inner-inner: inner flex row (.c-header-inner__inner)header-inner-logo: link (.c-header-inner__logo)header-inner-logo-image: image placeholder, 121x39px (.c-header-inner__logo-image)header-inner-nav: inner flex row (.c-header-inner__nav)header-inner-nav-item: inner group (.c-header-inner__nav-item, 5 instances)header-inner-cta: the button-ghost button (.c-header-inner__cta, 5 instances)header-inner-text: label text, 8 characters (.c-header-inner__text, 5 instances)header-inner-group: inner flex row (.c-header-inner__group, 4 instances)header-inner-icon: icon placeholder, 18px (.c-header-inner__icon, 4 instances)header-inner-nav-link: link, 7-character label (.c-header-inner__nav-link)header-inner-nav-2: inner flex row (.c-header-inner__nav-2)header-inner-item: inner group (.c-header-inner__item, 3 instances)header-inner-group-2: inner flex row (.c-header-inner__group-2)header-inner-icon-2: icon placeholder, 16px (.c-header-inner__icon-2)header-inner-cta-2: the button-secondary-3 button, 10-character label (.c-header-inner__cta-2)header-inner-cta-3: link, 6-character label (.c-header-inner__cta-3)header-inner-item-2: inner group (.c-header-inner__item-2)header-inner-cta-4: the button-primary button, 11-character label (.c-header-inner__cta-4)
Recipe
HTML · CSS
<div class="c-header-inner-scope">
<nav class="c-header-inner">
<div class="c-header-inner__inner">
<a class="c-header-inner__logo" href="#">
<span class="c-header-inner__logo-image" aria-hidden="true"></span>
</a>
<ul class="c-header-inner__nav">
<li class="c-header-inner__nav-item">
<button class="c-header-inner__cta" type="button">
<span class="c-header-inner__text">lorem ip</span>
<div class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</div>
</button>
</li>
<li class="c-header-inner__nav-item">
<button class="c-header-inner__cta" type="button">
<span class="c-header-inner__text">lorem ips</span>
<div class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</div>
</button>
</li>
<li class="c-header-inner__nav-item">
<a class="c-header-inner__nav-link" href="#">lorem i</a>
</li>
<li class="c-header-inner__nav-item">
<button class="c-header-inner__cta" type="button">
<span class="c-header-inner__text">lorem ipsum dolo</span>
<div class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</div>
</button>
</li>
<li class="c-header-inner__nav-item">
<button class="c-header-inner__cta" type="button">
<span class="c-header-inner__text">lorem ips</span>
<div class="c-header-inner__group">
<span class="c-header-inner__icon" aria-hidden="true"></span>
</div>
</button>
</li>
</ul>
<ul class="c-header-inner__nav-2">
<li class="c-header-inner__item">
<button class="c-header-inner__cta" type="button">
<div class="c-header-inner__group-2">
<span class="c-header-inner__icon-2" aria-hidden="true"></span>
</div>
<span class="c-header-inner__text">lo</span>
</button>
</li>
<li class="c-header-inner__item">
<a class="c-header-inner__cta-2" href="#">lorem ipsu</a>
</li>
<li class="c-header-inner__item">
<a class="c-header-inner__cta-3" href="#">lorem</a>
</li>
<li class="c-header-inner__item-2">
<a class="c-header-inner__cta-4" href="#">lorem ipsum</a>
</li>
</ul>
</div>
</nav>
</div>
.c-header-inner-scope {
background-color: #FFFFFF;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-header-inner {
display: flex;
border-spacing: 0px;
box-sizing: border-box;
height: 64px;
position: relative;
top: 0px;
z-index: 2002;
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: top 0.3s ease;
padding-top: 12px;
padding-bottom: 12px;
}
.c-header-inner__inner {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 1408px;
padding-right: 64px;
padding-left: 64px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner__logo {
display: flex;
align-items: center;
height: 100%;
position: relative;
top: 0px;
color: #FFFFFF;
cursor: pointer;
font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 112px;
text-decoration-line: none;
text-align: left;
white-space: nowrap;
transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-header-inner__logo-image {
display: block;
flex-shrink: 0;
width: 121px;
height: 39px;
overflow-x: clip;
overflow-y: clip;
background-color: currentcolor;
}
.c-header-inner__nav {
display: flex;
flex-grow: 1;
padding: 0px;
margin: 0px 24px;
overflow-x: hidden;
overflow-y: hidden;
list-style-type: none;
}
.c-header-inner__nav-item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-inner__cta {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner__group {
display: flex;
margin-left: 8px;
}
.c-header-inner__icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner__nav-link {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner__nav-2 {
display: flex;
justify-content: flex-end;
flex-shrink: 0;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-header-inner__item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-inner__group-2 {
display: flex;
margin-right: 8px;
}
.c-header-inner__icon-2 {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner__cta-2 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner__cta-3 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner__item-2 {
display: list-item;
align-self: center;
}
.c-header-inner__cta-4 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #FFFFFF;
color: #000000;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner__logo:focus {
outline: 3px solid #276EF1;
outline-offset: 1px;
}
.c-header-inner__cta:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner__cta:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner__nav-link:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner__nav-link:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner__cta-2:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner__cta-2:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner__cta-3:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner__cta-3:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner__cta-4:hover {
background-color: #E2E2E2;
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner__cta-4:focus {
background-color: #E2E2E2;
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
header-inner-logo focus: outline 3px solid #276EF1, outline-offset 1pxheader-inner-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-nav-link hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-nav-link focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-cta-4 hover (header-inner-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-cta-4 focus (header-inner-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Verification: verified against the live page at desktop.
Variant observed on https://www.uber.com/de/en/blog/.
Anatomy
header-inner-2: the component root, a <nav> (.c-header-inner-2)header-inner-2-inner: inner flex row (.c-header-inner-2__inner)header-inner-2-logo: link, 9-character label (.c-header-inner-2__logo)header-inner-2-nav: inner flex row (.c-header-inner-2__nav)header-inner-2-nav-item: inner group (.c-header-inner-2__nav-item)header-inner-2-cta: the button-ghost button (.c-header-inner-2__cta, 2 instances)header-inner-2-text: label text, 7 characters (.c-header-inner-2__text, 2 instances)header-inner-2-group: inner flex row (.c-header-inner-2__group)header-inner-2-icon: icon placeholder, 18px (.c-header-inner-2__icon)header-inner-2-nav-2: inner flex row (.c-header-inner-2__nav-2)header-inner-2-item: inner group (.c-header-inner-2__item, 3 instances)header-inner-2-group-2: inner flex row (.c-header-inner-2__group-2)header-inner-2-icon-2: icon placeholder, 16px (.c-header-inner-2__icon-2)header-inner-2-cta-2: the button-ghost-4 button, 4-character label (.c-header-inner-2__cta-2)header-inner-2-cta-3: the button-ghost-4 button, 6-character label (.c-header-inner-2__cta-3)header-inner-2-item-2: inner group (.c-header-inner-2__item-2)header-inner-2-cta-4: the button-primary button, 7-character label (.c-header-inner-2__cta-4)
Recipe
HTML · CSS
<div class="c-header-inner-2-scope">
<nav class="c-header-inner-2">
<div class="c-header-inner-2__inner">
<a class="c-header-inner-2__logo" href="#">lorem ips</a>
<ul class="c-header-inner-2__nav">
<li class="c-header-inner-2__nav-item">
<button class="c-header-inner-2__cta" type="button">
<span class="c-header-inner-2__text">lorem i</span>
<div class="c-header-inner-2__group">
<span class="c-header-inner-2__icon" aria-hidden="true"></span>
</div>
</button>
</li>
</ul>
<ul class="c-header-inner-2__nav-2">
<li class="c-header-inner-2__item">
<button class="c-header-inner-2__cta" type="button">
<div class="c-header-inner-2__group-2">
<span class="c-header-inner-2__icon-2" aria-hidden="true"></span>
</div>
<span class="c-header-inner-2__text">lo</span>
</button>
</li>
<li class="c-header-inner-2__item">
<a class="c-header-inner-2__cta-2" href="#">lore</a>
</li>
<li class="c-header-inner-2__item">
<a class="c-header-inner-2__cta-3" href="#">lorem</a>
</li>
<li class="c-header-inner-2__item-2">
<button class="c-header-inner-2__cta-4" type="button">lorem i</button>
</li>
</ul>
</div>
</nav>
</div>
.c-header-inner-2-scope {
background-color: #FFFFFF;
color: #000000;
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
.c-header-inner-2 {
display: flex;
border-spacing: 0px;
box-sizing: border-box;
height: 64px;
position: relative;
top: 0px;
z-index: 2002;
background-color: #000000;
color: #000000;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: top 0.3s ease;
padding-top: 12px;
padding-bottom: 12px;
}
.c-header-inner-2__inner {
display: flex;
box-sizing: border-box;
width: 100%;
max-width: 1408px;
padding-right: 64px;
padding-left: 64px;
margin-right: auto;
margin-left: auto;
}
.c-header-inner-2__logo {
display: flex;
align-items: center;
height: 100%;
position: relative;
top: 0px;
color: #FFFFFF;
cursor: pointer;
font-family: UberMove, UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 112px;
text-decoration-line: none;
text-align: left;
white-space: nowrap;
transition: backgroundSize 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-header-inner-2__nav {
display: flex;
flex-grow: 1;
padding: 0px;
margin: 0px 24px;
overflow-x: hidden;
overflow-y: hidden;
list-style-type: none;
}
.c-header-inner-2__nav-item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-inner-2__cta {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner-2__group {
display: flex;
margin-left: 8px;
}
.c-header-inner-2__icon {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner-2__nav-2 {
display: flex;
justify-content: flex-end;
flex-shrink: 0;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.c-header-inner-2__item {
display: list-item;
align-self: center;
padding-right: 4px;
}
.c-header-inner-2__group-2 {
display: flex;
margin-right: 8px;
}
.c-header-inner-2__icon-2 {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
overflow-x: hidden;
overflow-y: hidden;
background-color: currentcolor;
}
.c-header-inner-2__cta-2 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner-2__cta-3 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #000000;
color: #FFFFFF;
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 16px;
text-decoration-line: none;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner-2__item-2 {
display: list-item;
align-self: center;
}
.c-header-inner-2__cta-4 {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px 12px;
background-color: #FFFFFF;
color: #000000;
border: 0;
border-radius: 999px;
cursor: pointer;
font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: nowrap;
transition: background 0.2s cubic-bezier(0, 0, 1, 1);
}
.c-header-inner-2__logo:focus {
outline: 3px solid #276EF1;
outline-offset: 1px;
}
.c-header-inner-2__cta:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner-2__cta:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner-2__cta-2:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner-2__cta-2:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner-2__cta-3:hover {
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner-2__cta-3:focus {
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
.c-header-inner-2__cta-4:hover {
background-color: #E2E2E2;
box-shadow: #FFFFFF1A 999px 999px 0px 0px inset;
}
.c-header-inner-2__cta-4:focus {
background-color: #E2E2E2;
box-shadow: #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px;
outline: none;
}
States
header-inner-2-logo focus: outline 3px solid #276EF1, outline-offset 1pxheader-inner-2-cta hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-2 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-2 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-3 hover: box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-3 focus: box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline noneheader-inner-2-cta-4 hover (header-inner-2-cta-4-hover): background-color #E2E2E2, box-shadow #FFFFFF1A 999px 999px 0px 0px insetheader-inner-2-cta-4 focus (header-inner-2-cta-4-focus): background-color #E2E2E2, box-shadow #FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px, outline none
Verification: desktop flagged, the footer-group height did not reproduce the measured 1013px after 2 correction attempts; mobile flagged, the footer-mobile-group height did not reproduce the measured 2066px after 2 correction attempts.
Anatomy
footer: the component root, a <footer> (.c-footer)footer-group: inner flex row (.c-footer__group)footer-group-2: inner flex row (.c-footer__group-2)footer-group-3: inner flex row (.c-footer__group-3)footer-inner: inner block (.c-footer__inner)footer-columns: inner grid (.c-footer__columns, 5 instances)footer-column: inner grid (.c-footer__column, 8 instances), content not 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.
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.
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.
- Use pills (
rounded.full) for 36px header and utility controls, as button-primary, button-ghost-2, button-secondary-3, button-secondary-4, button-ghost-4 and button-secondary-6 all do. Pad them with button-primary-padding-y / button-primary-padding-x (10px / 12px) and set labels in nav-link.
- Use
rounded.md (8px) at 48px height with 14px / 25px padding for content CTAs, matching button-primary-2, button-primary-4, button-primary-6 and button-secondary-5. Set labels in button.
- Treat white (#FFFFFF) as a fill that works on black, not a primary-only color. It is shared by
button-primary, button-primary-2, button-secondary-5, button-secondary-6, the card-text-2 badge and benefit-list-item. On white sections, the black fill of button-primary-6 takes over.
- Draw hover as an inset overlay:
#FFFFFF1A 999px 999px 0px 0px inset on dark or white pills, #0000000A 999px 999px 0px 0px inset on gray fills. Also swap white pills to chip (#E2E2E2), as button-primary does.
- Give every interactive element the focus ring
#FFFFFF 0px 0px 0px 2px inset, #276EF1 0px 0px 0px 2px using focus-ring.
- Build depth tonally:
surface-dark tiles on primary black (as in card, which sits in a 3-column grid), and surface-subtle fills on white.
- Keep the header 64px tall and black, with its inner row capped at
header-inner-2-inner-max-width (1408px), as header-inner-2 measures.
- Use only weights 400, 500 and 700. Reserve 700 for Uber Move headlines (
title-md through hero-display).
- Don't add outward drop shadows to cards or panels. No page-level shadow was measured, and lift comes from fill change and the inset state overlays.
- Don't add backdrop blur to the sticky header; it is solid
primary.
- Don't introduce a brand accent color for buttons. CTAs are black, white or gray, and
focus-ring (#276EF1) is for focus only.
- Don't let
link-default (#0000EE) show as visible text. It is the inherited default on wrapper anchors like card-link. Use link (#175BCC) for real links.
- Don't mix radii at one control height: 36px controls are pills and 48px content CTAs are
rounded.md, except the icon pill button-secondary.
- Don't apply letter-spacing or uppercase transforms. Every type token is
normal.
- Don't use gradients.
accent-navy and accent-teal are solid band and illustration fills only.
This analysis covers two viewports only: one desktop and one mobile capture. No intermediate breakpoint was observed, and no breakpoint pixel values are stated.
- Navigation collapses. The desktop header row of white pill links and CTAs shrinks to the logo, Log in and Sign up, and a hamburger. The bar stays black and sticky.
- Grids stack. Two-part hero and feature splits become a single column, with text above imagery. Multi-up service tiles turn into compact icon tiles, and step and blog cards stack into one column.
- The footer lengthens. Its link columns stack:
footer-mobile measures 2066px tall against 1013px for the desktop footer. Both are flagged; their group heights did not reproduce after 2 correction attempts.
- Carousels keep their controls. The 1/N counter and circular prev/next buttons persist.
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.
- Reference tokens, never hex. Use
primary, surface, surface-dark, body, muted and the other color tokens for color, the typography token names for type, and rounded.* for radius. If a value has no token, it probably doesn't belong in the system.
- Keep the palette monochrome. New components get black, white or gray fills. Blue is limited to
focus-ring for focus and link for links. accent-navy and accent-teal stay confined to bands and illustration.
- Pick one of two control sizes. Use 36px pills (
rounded.full, 10px / 12px padding, nav-link type) or 48px CTAs (rounded.md, 14px / 25px padding, button type). Base new buttons on button-primary, button-primary-6 or button-secondary-5, and avoid inventing a third size.
- States live in box-shadow. Every interactive variant gets the inset hover overlay (
#FFFFFF1A on dark or white pills, #0000000A on gray fills) and the white-plus-focus-ring focus ring. Never express a state with a size, border or layout change.
- Depth stays tonal. Add hierarchy by stepping fills (
surface-dark on black, surface-subtle on white) or by inverting a band. A 1px #00000014 hairline is the strongest container edge allowed, and drop shadows are off-limits.
- Respect the type split and the three weights. Uber Move at 700 is for headlines of 24px and up. Uber Move Text at 400/500 is for 18px and below. Weights are limited to 400, 500 and 700, and letter-spacing is always normal.
- Don't copy flagged recipes as truth. Check a component's flag before reusing its dimensions. The
card-2 through card-9 grid cards, header-landing, footer and button-primary-3 did not reproduce exactly.
- Coverage: All 5 pages captured (home, business, blog, ride, about). No values were dropped during grounding.
- Flagged recipes: These reproduce only approximately, so treat their measured sizes as indicative:
button-primary-3: 67% pixel match.button-ghost-3: 96% on focus.header-landing: 95%.header-inner: 94%.sub-navigation: 95%.carousel-control: width.card-2, card-3, card-4, card-5, card-6, card-7 and card-9: group heights or widths.footer and footer-mobile: heights.button-ghost, button-ghost-5 and button-primary-5: the original element could not be found again.
- No layout rhythm tokens: There is no section-padding or grid-gap token and no base spacing step. Section spacing and card gutters must be matched by eye.
- Partial state coverage: Hover and focus were captured on buttons and nav links. Active/pressed, disabled (beyond the gray carousel arrow), visited links and form-field states were not.
- No forms or inputs: No input, select or ride-booking field recipe exists. The pickup/destination inputs and any authenticated flows (login, ride request, Eats ordering) were not reachable.
- Not tokenized: The Uber Eats green photo frames and the large-radius Eats banner seen in screenshots were not measured.
- No motion: Animation, transitions and carousel motion were not captured.
- Fonts are proprietary: Uber Move and Uber Move Text were not available to verify metrics. A generic sans-serif dominated raw sampling, likely from wrapper elements rather than visible text.
- Responsive: Evidence is limited to two viewports. Breakpoints and intermediate layouts are unknown.
