Shopify Design System

shopify.com

PROEngine v4

Visual system

100% confidence

98% confidence

hero-displayDesign is intelligence made visibleNational 2120px / 400 / 0.95

display-xlDesign is intelligence made visibleNational 2116.55px / 400 / 1.5

display-lgDesign is intelligence made visibleShopify Inter96px / 300 / 1.1

display-mdDesign is intelligence made visibleShopify Inter56px / 330 / 1.1

title-mdDesign is intelligence made visibleShopify Inter20px / 450 / 1.3

body-lgDesign is intelligence made visibleShopify Inter20px / 400 / 1.4

body-mdDesign is intelligence made visibleShopify Inter18px / 400 / 1.4

bodyDesign is intelligence made visibleShopify Inter16px / 400 / 1.5

body-mediumDesign is intelligence made visibleShopify Inter16px / 420 / 1.5

label-strongDesign is intelligence made visibleShopify Inter16px / 550 / 1

nav-linkDesign is intelligence made visibleShopify Inter14px / 420 / 1.45

body-smDesign is intelligence made visibleShopify Inter14px / 400 / 1.45

caption-tightDesign is intelligence made visibleShopify Inter14px / 400 / 1.3

microDesign is intelligence made visibleShopify Inter13px / 400 / 1.3

100% confidence

button-primary-3-padding-y
2px

button-secondary-2-padding-y
2px

input-padding-y
8px

button-primary-5-padding-y
12px

button-secondary-3-padding-y
12px

button-secondary-4-padding-y
12px

button-secondary-5-padding-y
12px

button-secondary-6-padding-y
12px

button-primary-3-padding-x
16px

button-secondary-2-padding-x
16px

input-padding-x
16px

card-5-grid-gap
24px

button-primary-5-padding-x
24px

button-secondary-3-padding-x
24px

button-secondary-4-padding-x
24px

button-secondary-5-padding-x
24px

button-secondary-6-padding-x
24px

card-3-grid-gap
40px

card-5-grid-row-gap
40px

section-padding-y
64px

100% confidence

xs · 3px

sm · 4px

sm-plus · 5px

md-sm · 6px

md · 8px

md-plus · 10px

lg · 12px

xl · 16px

2xl · 30px

3xl · 48px

4xl · 340px

full · 9999px

Components

Button15

99% match

ghost · desktop

Icon x is 34px, the site has 26px; Icon 2 x is 34px, the site has 26px.

At rest100% match2 of 72 measurements differ

Original

Render

Hover100% match22 measurements match

Original

Render

Focus99% match22 measurements match

Original

Render

Recipe in DESIGN.md

92% match

ghost · desktop

It renders 92% like the site, below the 97% bar.

At rest92% match44 measurements match

Original

Render

Hover99% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

65% match

primary · desktop

It renders 65% like the site, below the 97% bar.

At rest65% match25 measurements match

Original

Render

Hover65% match22 measurements match

Original

Render

Focus80% match22 measurements match

Original

Render

Recipe in DESIGN.md

86% match

primary · desktop

It renders 86% like the site, below the 97% bar.

At rest86% match26 measurements match

Original

Render

Hover93% match22 measurements match

Original

Render

Focus92% match22 measurements match

Original

Render

Recipe in DESIGN.md

98% match

primary · desktop

At rest98% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

96% match

primary · desktop

On focus, it renders 96% like the site, below the 97% bar.

At rest99% match25 measurements match

Original

Render

Hover99% match22 measurements match

Original

Render

Focus96% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

82% match

secondary · desktop

On hover, it renders 88% like the site, below the 97% bar.

At rest100% match25 measurements match

Original

Render

Hover88% match22 measurements match

Original

Render

Focus82% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card8

3% match

desktop

It renders 3% like the site, below the 96% bar.

At rest3% match99 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Focus3% match18 measurements match

Original Card on the site, focus — Original

At rest, instance 231% match99 measurements match

Original

No image stored

Render

No image stored

At rest, instance 314% match99 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

82% match

desktop

It renders 84% like the site, below the 96% bar.

At rest84% match154 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

At rest, instance 283% match154 measurements match

Original

No image stored

Render

No image stored

At rest, instance 382% match154 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match119 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

At rest, instance 2100% match119 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match119 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Root height is 217px, the site has 213px; Group height is 217px, the site has 213px.

At rest100% match2 of 71 measurements differ

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

At rest, instance 2100% match2 of 71 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match2 of 71 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match54 measurements match

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

At rest, instance 2100% match54 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match54 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Text y is 153px, the site has 147px; Text y is 153px, the site has 147px.

At rest100% match2 of 114 measurements differ

Original Card (6) on the site, at rest — Original

Isolated render of Card (6), at rest — Render

At rest, instance 2100% match2 of 114 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match2 of 114 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match66 measurements match

Original Card (7) on the site, at rest — Original

Isolated render of Card (7), at rest — Render

At rest, instance 2100% match66 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match66 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

Text 2 y is 53px, the site has 59px.

At rest99% match1 of 61 measurements differ

Original Card (8) on the site, at rest — Original

Isolated render of Card (8), at rest — Render

Hover100% match19 measurements match

Original Card (8) on the site, hover — Original

Isolated render of Card (8), hover — Render

Focus99% match3 of 19 measurements differ

Original Card (8) on the site, focus — Original

Isolated render of Card (8), focus — Render

At rest, instance 299% match1 of 61 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match1 of 61 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra17

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

98% match

desktop

At rest98% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

87% match

desktop

On focus, it renders 87% like the site, below the 96% bar.

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus87% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match25 measurements match

Original Cookie consent (2) on the site, at rest — Original

Isolated render of Cookie consent (2), at rest — Render

Hover100% match22 measurements match

Original Cookie consent (2) on the site, hover — Original

Isolated render of Cookie consent (2), hover — Render

Focus100% match22 measurements match

Original Cookie consent (2) on the site, focus — Original

Isolated render of Cookie consent (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

92% match

desktop

It renders 95% like the site, below the 96% bar.

At rest95% match47 measurements match

Original Label chip on the site, at rest — Original

Isolated render of Label chip, at rest — Render

Focus95% match18 measurements match

Original Label chip on the site, focus — Original

Isolated render of Label chip, focus — Render

At rest, instance 292% match47 measurements match

Original

No image stored

Render

No image stored

At rest, instance 396% match47 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match35 measurements match

Original

Render

At rest, instance 2100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match35 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match35 measurements match

Original

Render

At rest, instance 2100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match35 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match35 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

94% match

desktop

Text height is 18px, the site has 20px; Group 4 y is 56px, the site has 72px and 7 more.

At rest94% match9 of 496 measurements differ

Original Nav on the site, at rest — Original

Isolated render of Nav, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Group 4 y is 56px, the site has 72px; Group 5 x is -16px, the site has -90px and 4 more.

At rest100% match6 of 498 measurements differ

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Cta y is -16px, the site has 0px; Cta height is 900px, the site has 50px.

At rest100% match2 of 318 measurements differ

Original Navigation (2) on the site, at rest — Original

Isolated render of Navigation (2), at rest — Render

Recipe in DESIGN.md

100% match

desktop

Root height is 108px, the site has 96px; List height is 108px, the site has 96px and 45 more.

At rest100% match47 of 651 measurements differ

Original Navigation (3) on the site, at rest — Original

Isolated render of Navigation (3), at rest — Render

Recipe in DESIGN.md

1% match

desktop

On focus, it renders 1% like the site, below the 96% bar.

At rest100% match22 measurements match

Original Toggle on the site, at rest — Original

Isolated render of Toggle, at rest — Render

Hover100% match18 measurements match

Original Toggle on the site, hover — Original

Isolated render of Toggle, hover — Render

Focus1% match18 measurements match

Original Toggle on the site, focus — Original

Isolated render of Toggle, focus — Render

Recipe in DESIGN.md

91% match

desktop

It renders 93% like the site, below the 96% bar.

At rest93% match100 measurements match

Original Video player on the site, at rest — Original

Isolated render of Video player, at rest — Render

Focus91% match18 measurements match

Original Video player on the site, focus — Original

Isolated render of Video player, focus — Render

Recipe in DESIGN.md

Header6

100% match

desktop

Group 2 y is 56px, the site has 72px; Group 2 height is 116px, the site has 322px and 19 more.

At rest100% match21 of 420 measurements differ

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Recipe in DESIGN.md

54% match

desktop

It renders 54% like the site, below the 96% bar.

At rest54% match430 measurements match

Original Header (inner, 2) on the site, at rest — Original

Isolated render of Header (inner, 2), at rest — Render

Hovernot checked

Original Header (inner, 2) on the site, hover — Original

Isolated render of Header (inner, 2), hover — Render

Focusnot checked

Original Header (inner, 2) on the site, focus — Original

Isolated render of Header (inner, 2), focus — Render

Hover on cta55% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link 254% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 354% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 454% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link54% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

The recipe could not be rendered on its own.

Nothing was compared for this component.

Recipe in DESIGN.md

97% match

mobile

It renders 97% like the site, below the 96% bar.

At rest97% match222 measurements match

Hovernot checked

Focusnot checked

Focus on nav link 297% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 397% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link97% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

The recipe could not be rendered on its own.

Nothing was compared for this component.

Recipe in DESIGN.md

Footer6

99% match

desktop

List height is 405px, the site has 228px; Item height is 405px, the site has 228px and 79 more.

At rest99% match81 of 748 measurements differ

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Recipe in DESIGN.md

100% match

desktop

Root height is 99px, the site has 93px; Columns height is 58px, the site has 52px and 6 more.

At rest100% match8 of 130 measurements differ

Original Footer (inner, 2) on the site, at rest — Original

Isolated render of Footer (inner, 2), at rest — Render

Recipe in DESIGN.md

100% match

desktop

List height is 405px, the site has 228px; Item height is 405px, the site has 228px and 73 more.

At rest100% match75 of 730 measurements differ

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Recipe in DESIGN.md

100% match

mobile

Root height is 137px, the site has 128px; Columns height is 96px, the site has 87px and 6 more.

At rest100% match8 of 130 measurements differ

Recipe in DESIGN.md

100% match

mobile

Group height is 313px, the site has 339px; Group 2 height is 0px, the site has 26px and 23 more.

At rest100% match25 of 710 measurements differ

Recipe in DESIGN.md

100% match

mobile

Group height is 313px, the site has 339px; Group 2 height is 0px, the site has 26px and 24 more.

At rest100% match26 of 710 measurements differ

Recipe in DESIGN.md

Input1

100% match

desktop

At rest100% match22 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Focus100% match18 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

DESIGN.md

Shopify

Overview

Shopify's German marketing site (Shopify Deutschland) is a cinematic, high-contrast system built almost entirely from pure black and pure white. Full-bleed photography and deep teal-black bands carry the mood; the typography carries the hierarchy. Headlines are oversized and light, set in Shopify Inter at weights as low as 300 with tight negative tracking. Body copy stays in a narrow 14–20px band, so the distance between a section headline and its supporting text is very large, and that contrast in scale does most of the ordering work.

Density is low. Sections are separated by generous vertical bands, utility content moves to pale zinc panels, and campaign moments switch to saturated indigo or near-black teal surfaces. Color is used as a whole-section mood rather than as decoration on components. The signature mint accent appears rarely, and interactive emphasis comes from inverting the black/white fill, not from a brand-colored button.

Geometry is soft. Every primary and secondary call to action is a full pill. Cards sit at 8–16px corners, and full-width sections stack as large rounded-top sheets. Depth comes mainly from tonal layering and section contrast, with soft drop shadows reserved for floating product and UI mockups.

Key Characteristics:

Black (primary, #000000) and white (surface, #FFFFFF) carry nearly all surface and text work. Zinc greys handle muted text, hairlines and soft panels.
Display type is large and light: display-lg at 96px/300 and display-md at 56px/330, both with negative letter-spacing.
Shopify Inter is a variable font used at intermediate weights (330, 420, 450, 550), not just 400/700.
All CTAs are pills (rounded.full, 9999px). The fill inverts per surface: white on dark bands, black on light bands.
The header is transparent over dark heroes, 72px tall and sticky. The footer is solid black with zinc-grey (muted-light, #A1A1AA) links.
Campaign surfaces use teal-black (surface-dark, #061A1C) and indigo (surface-indigo, #4325B1). Mint (accent, #36F4A4) is a sparing highlight.
Focus is a vivid violet outline (focus-ring, #751BE9), 3px wide with a 2px offset on buttons.

Colors

The palette is monochrome first. Most colors on the page are black, white or a zinc step, and the few saturated tones belong to whole sections or to focus states.

Brand & Accent

Ink Black (primary, #000000): the anchor color.
- Footer background (footer-landing) and primary text on light surfaces.
- Fill of the dark pill CTA (button-primary-5), which hovers to #3F3F46.
Paper White (on-primary, #FFFFFF): text on black and indigo surfaces.
- Also the fill of the light pill CTA used on dark bands (button-primary-3, nav-cta, button-secondary-6), which hovers to #D4D4D8.
Signal Mint (accent, #36F4A4): the signature green.
- Measured only as text: highlights and accent words on dark sections.
- Use it sparingly and never as a large fill.

Surface

White (surface, #FFFFFF): default page canvas for utility and product sections.
Zinc Mist (surface-soft, #F4F4F5): soft panels on light sections.
- Nearby measured fills: card-5 is #F6F6F6 and the header-inner-2-group-5 search field is #F4F4F4.
Deep Teal (surface-dark, #061A1C): the immersive dark band behind hero and feature sections.
- card-group-3 fills with it.
- card-group uses a translucent version, #061A1C33.
Indigo (surface-indigo, #4325B1): the campaign statement band and the fill of card-2.
Deep Indigo (surface-indigo-deep, #361E8F): the darker step paired with Indigo in layered panels.

Text

Zinc Ink (ink, #18181B): body text on white where pure black would feel heavy, for example the dropdown text in header-inner-group-3.
Graphite (ink-soft, #333333): secondary dark text, seen on one page.
Zinc Grey (muted, #71717A): muted copy and captions on light surfaces.
Light Zinc (muted-light, #A1A1AA): footer link and body text on black (footer-landing, footer-inner).
Cool Grey (muted-alt, #9797A2): an alternate muted text tone, seen on one page.

Translucent text on dark surfaces

These tones are layered rather than drawn from a solid grey:

card-2-text and card-6-group-2 use 70% white (#FFFFFFB3).
card-5-text uses 60% black (#00000099) on its light panel.
card-3-body uses a teal-grey, #99B3AD, on dark teal.

Hairlines & Borders

Hairline (hairline, #E4E4E7): dividers on light sections.
Zinc Border (border, #D4D4D8): control borders and hover state.
- It is the hover fill of the white pills (button-primary, button-secondary-6).
- It is the hover ring color of button-secondary.
Strong Border (border-strong, #C9C9C9): the most-used border color in page sampling.

On dark surfaces, hairlines are near-black tints rather than greys:

footer-landing-columns uses a 1px top border in #121C1E.
card-3-group-2 uses a 1px bottom border in #11352D.

Focus & State Colors (component-only)

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

Focus Violet (focus-ring, #751BE9): the standard focus outline on Shopify-Inter buttons and nav links.
Focus Blue (focus-ring-blue, #005FCC): an alternate focus color.
Focus Sky (focus-ring-light, #60A5FA): the focus border and outline on the Inter cookie buttons (cookie-consent-2, button-primary-3).
Hover borders on the cookie pills:
- #7AEB9F on cookie-consent-2.
- #FF6669 on button-secondary-2.

Gradients

No gradient values were extracted as tokens. The screenshots do show subtle green radial glows and atmospheric gradients inside dark sections, but these live in imagery and background art. Rebuild them as imagery, not as tokenized fills.

Typography

Font Family

Shopify Inter (served as Shopify-Inter / ShopifyInter): the workhorse for every UI and body role, and most display roles.
- It is a variable font. The site uses non-standard weights: 300, 330, 420, 450 and 550.
- Fallback stack: Helvetica, Arial, sans-serif.
National 2 (served as National2): a display face for the campaign headline tokens hero-display and display-xl.
- It is also the base font of the Spring Edition navigation (navigation-2, header-inner-2) at 14px.
- It appears on one captured page only.
Inter / Inter-Variable: used by the cookie banner controls (cookie-consent-2, button-primary-3) and the edition-page header controls (button-ghost-2, header-inner-2-cta).
- Treat these as third-party or embedded surfaces, not as the main brand voice.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	120px	400	0.95	-9.6px	Campaign headline in National 2
`display-xl`	116.55px	400	1.5	-9.324px	National 2 display spans on the edition page
`display-lg`	96px	300	1.1	-1.92px	Hero statements and big stat numerals
`display-md`	56px	330	1.1	-1.68px	Section headlines (h2/h3)
`title-md`	20px	450	1.3	normal	Card titles, footer column headings
`body-lg`	20px	400	1.4	normal	Lead paragraphs
`body-md`	18px	400	1.4	normal	Card and section supporting copy
`body`	16px	400	1.5	normal	Default body, footer links
`body-medium`	16px	420	1.5	normal	Nav group labels, form labels
`label-strong`	16px	550	1	-0.16px	Eyebrow headings above big headlines
`nav-link`	14px	420	1.45	normal	Header links, small list items
`body-sm`	14px	400	1.45	normal	Small body copy
`caption-tight`	14px	400	1.3	-0.56px	Tight captions, edition-page labels
`micro`	13px	400	1.3	-0.52px	Fine print, legal links

Principles

Big type is light, small type is firm. Display sizes drop below regular weight (display-lg 300, display-md 330), while UI labels rise above it:
- nav-link and body-medium at 420.
- title-md at 450.
- Button labels at 550: button-primary uses 16px/550 and button-primary-5 uses 18px/550.
- Never set a display headline bold.
Weight 700 lives only in the Inter cookie controls. It appears on cookie-consent-2 and button-primary-3 at 14px/700. The Shopify Inter ladder tops out at 550.
Weight 500 is outside the main ladder. It shows up only in label-chip-text and the Inter-Variable header controls.
Tracking tightens with size.
- Shopify Inter display tokens track at roughly -2% to -3% (display-lg -1.92px, display-md -1.68px).
- National 2 display tracks very hard, about -8% (hero-display -9.6px).
- Body text keeps normal tracking, except the compact caption-tight and micro tokens at -0.56px and -0.52px.
Line height loosens as size drops. Display runs at 0.95–1.1, titles at 1.3, body at 1.4–1.5. Single-line labels such as label-strong use 1.

Note on Font Substitutes

Both brand faces are proprietary.

Shopify Inter: substitute the open-source Inter variable font, which shares its skeleton.
- Keep the intermediate weights (330, 420, 450, 550) via font-variation-settings or numeric font-weight; the variable axis supports them.
- Keep the negative display tracking.
National 2: use a grotesk with a tall x-height and tight default spacing, such as Inter Tight or Archivo.
- Ease the tracking slightly; -9.6px on a substitute can collide letters, so start around -6% and adjust by eye.
- Hold the line height at 0.95.

Layout

Spacing System

No base step token was emitted. The spacing below is the set of measured values; reuse these, not arbitrary steps.

Token	Value	Measured on
`section-padding-y`	64px	Vertical padding between the page's sections, read on 17 section edges across 4 pages (a page measurement, not a component one)
`card-3-grid-gap`	40px	Column gap of the grid holding the dark stat cards (`card-3`)
`card-5-grid-gap`	24px	Column gap of the light feature-card grid (`card-5`)
`card-5-grid-row-gap`	40px	Row gap of the `card-5` grid
`button-primary-5-padding-y` / `button-primary-5-padding-x`	12px / 24px	Large pill CTA
`button-secondary-3-padding-y` / `-x`	12px / 24px	Outlined pill
`button-secondary-4-padding-y` / `-x`	12px / 24px	Outlined pill
`button-secondary-5-padding-y` / `-x`	12px / 24px	Outlined pill
`button-secondary-6-padding-y` / `-x`	12px / 24px	White pill on dark bands
`button-primary-3-padding-y` / `button-primary-3-padding-x`	2px / 16px	Compact cookie pill
`button-secondary-2-padding-y` / `-x`	2px / 16px	Compact cookie pill
`input-padding-y` / `input-padding-x`	8px / 16px	Text input

All large pills share the 12px / 24px padding. Compact pills drop to 2px / 16px.

Grid & Container

No container max-width token was verified. The screenshots show a contained desktop column with a consistent left margin under full-bleed backgrounds.
Card grids use the gaps above:
- Dark stat cards (card-3) sit at card-3-grid-gap (40px).
- Light feature cards (card-5) sit at card-5-grid-gap (24px) across columns and card-5-grid-row-gap (40px) between rows.
Other recurring patterns in the screenshots:
- Multi-up card rows.
- A split layout pairing a large headline with a descriptor column.
- Stat rows with oversized numerals over thin dividers.
- Wide logo walls.
Hero copy is left-aligned over full-bleed imagery. Later sections alternate between left-aligned and centered headings.

Whitespace Philosophy

Whitespace is a pacing device. Sections repeat section-padding-y (64px) as their standard rhythm, and campaign sections open up further.
The screenshots show very large empty bands before and after headline moments.
Inside sections, density stays tight: small eyebrow labels sit close to big headlines, and cards group with modest gaps.
Air goes between sections, not inside components.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

section-padding-y: 64px (vertical padding repeated on the page sections: 17 section edges on 4 pages)
card-3-grid-gap: 40px (card-3, column gap of the grid its instances sit in)
card-5-grid-gap: 24px (card-5, column gap of the grid its instances sit in)
card-5-grid-row-gap: 40px (card-5, row gap of the grid its instances sit in)
button-primary-3-padding-y: 2px (button-primary-3, vertical padding of the root)
button-primary-3-padding-x: 16px (button-primary-3, horizontal padding of the root)
button-secondary-2-padding-y: 2px (button-secondary-2, vertical padding of the root)
button-secondary-2-padding-x: 16px (button-secondary-2, horizontal padding of the root)
button-primary-5-padding-y: 12px (button-primary-5, vertical padding of the root)
button-primary-5-padding-x: 24px (button-primary-5, horizontal padding of the root)
button-secondary-3-padding-y: 12px (button-secondary-3, vertical padding of the root)
button-secondary-3-padding-x: 24px (button-secondary-3, horizontal padding of the root)
button-secondary-4-padding-y: 12px (button-secondary-4, vertical padding of the root)
button-secondary-4-padding-x: 24px (button-secondary-4, horizontal padding of the root)
button-secondary-5-padding-y: 12px (button-secondary-5, vertical padding of the root)
button-secondary-5-padding-x: 24px (button-secondary-5, horizontal padding of the root)
input-padding-y: 8px (input, vertical padding of the root)
input-padding-x: 16px (input, horizontal padding of the root)
button-secondary-6-padding-y: 12px (button-secondary-6, vertical padding of the root)
button-secondary-6-padding-x: 24px (button-secondary-6, horizontal padding of the root)

The card-3 grid lays out in 3 columns; the card-5 grid in 3 columns at desktop.

Elevation & Depth

Shopify's depth is built in layers: tonal section swaps do the heavy lifting, hairlines and 1px inset shadows draw edges, and a small set of soft, stacked drop shadows lifts product UI and media tiles off the page. Every shadow below was measured; reuse them verbatim rather than inventing new blur radii.

Level	Treatment	Use
0 · Tonal base	Surface change only: Black (`primary`, #000000), White (`surface`, #FFFFFF), Soft Zinc (`surface-soft`, #F4F4F5), Deep Teal (`surface-dark`, #061A1C), Indigo (`surface-indigo`, #4325B1)	Section bands and large rounded-top sheets that stack over the previous band; `card-5` sits as a #F6F6F6 panel on light sections with no border
1 · Hairline border	1px solid rules: `card-3-group-2` border-bottom #11352D; `footer-landing-columns` border-top #121C1E; `footer-inner-2-group` border-top #FFFFFF33; `card-8` hover/focus border-right #3F3F4680	Stat dividers on dark teal, footer column separators, comparison-row dividers
2 · Inset top highlight	`transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #40474D66 0px 1px 0px 0px inset`	`card-2-group-2` (flagged: the render matched 84% of the original pixels, below the 96% required (instance 1) after 2 correction attempts), a 1px top light-edge inside the indigo cards
3 · Inset hover ring	`transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #D4D4D8 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px` with border 2px solid #D4D4D8; or the same stack with `#3F3F46 0px 0px 0px 1px inset` and border 2px solid #3F3F46	Hover on outlined pills: `button-secondary` (flagged: the render matched 88% of the original pixels, below the 97% required on hover after 2 correction attempts) on dark, `button-secondary-3` on light. The ring thickens the outline; it does not lift
4 · Layered micro-lift	`transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF08 0px 0.929px 0px 0px inset, #0000001A 0px 0px 0px 0.929px, #0000001A 0px 1.858px 1.858px 0px, #0000001A 0px 3.717px 3.717px 0px`	`card-group-2` (flagged: the render came out 88 px taller and 68 px wider than the original (instance 1) after 2 correction attempts), small label rows inside media cards
5 · Floating UI (page-sampled)	`rgba(0, 0, 0, 0.25) 0px 10px 50px 0px, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` (4 pages); also `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` and `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`	White product, checkout and "buy now" mock cards floating over photography and dark bands
6 · Deep glow (page-sampled)	`rgba(0, 0, 0, 0.6) 0px 11.751px 23.503px 0px, rgb(47, 43, 88) -0.445px -0.445px 0.89px 0px inset, rgb(137, 129, 211) 0.445px 0.445px 0.89px 0px inset`	Single campaign tile on the indigo band, a bevelled, embossed object
Focus	Outline 3px solid Focus Violet (`focus-ring`, #751BE9), offset 2px; cookie pills use 2px solid Focus Sky (`focus-ring-light`, #60A5FA), offset 2px	Keyboard focus on every pill button and nav link; an outline, never a shadow

No backdrop blur was measured: the sticky 72px header is transparent with backdrop-filter: none, so it reads over dark heroes by contrast alone.

Shadow philosophy. Hierarchy comes first from swapping whole surfaces (black, white, deep teal, indigo) and stacking rounded sheets, so shadows stay quiet and functional. When an edge is needed, reach for a 1px hairline or a 1px inset ring before any blur. Interactive pills show hover by thickening their ring (tier 3), not by rising. Real lift is reserved for objects that sit on top of imagery or colour: small multi-layer stacks at roughly 10% black (tier 4) for in-card chips, and the wide 50px-blur shadow paired with a white 1px ring (tier 5) for floating product UI. Never put a drop shadow on section bands, buttons or text cards like card-3 and card-5; they earn separation from tone and hairlines.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	3px	Tiny inline elements
`rounded.sm`	4px	Inner card groups (`card-group`, `card-group-2`), icon tiles (`cookie-control-icon`), edition-page header controls (`button-ghost-2`, `navigation-2-link`)
`rounded.sm-plus`	5px	Small tags
`rounded.md-sm`	6px	Small controls
`rounded.md`	8px	Compact dark cards (`card`)
`rounded.md-plus`	10px	Small panels
`rounded.lg`	12px	Dark link cards (`card-6`)
`rounded.xl`	16px	Feature and campaign cards (`card-2`, `card-5`)
`rounded.2xl`	30px	Compact Inter pills in the cookie banner (`button-primary-3`, `cookie-consent-2`, `button-secondary-2`)
`rounded.3xl`	48px	Large rounded-top section sheets that overlap the previous band
`rounded.4xl`	340px	Oversized circular art and media masks
`rounded.full`	9999px	Every Shopify-Inter CTA (`button-primary`, `button-primary-5`, `button-secondary-3`, `nav-cta`), chips, and circular icon buttons (`button-ghost-4`)

The geometry is soft at every scale, and the radius grows with the size of the object:

4px inside cards.
8–16px on cards.
48px on full-width section sheets.

Pill and circle usage is deliberate:

All primary, secondary and ghost CTAs are full pills (rounded.full).
Circular icon buttons use the same token.
The only non-pill buttons are the 4px edition-page header controls (button-ghost-2).
The 30px cookie pills are the only buttons with a fixed radius instead of a pill.

Sharp corners do not appear. Even the stacked sections are rounded at the top.

Components

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

Button, primary

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

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 0px;
}

.c-button-primary {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 550;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  list-style-type: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary:hover {
  background-color: #D4D4D8;
}

.c-button-primary:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-primary-hover): background-color #D4D4D8
focus: outline 3px solid #751BE9, outline-offset 2px

Button, primary (2)

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

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-2-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary-2 {
  display: block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  text-align: left;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary-2:hover {
  background-color: #D4D4D8;
}

.c-button-primary-2:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-primary-2-hover): background-color #D4D4D8
focus: outline 3px solid #751BE9, outline-offset 2px

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-button-primary-3 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1);
}

.c-button-primary-3:hover {
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid #7AEB9F;
}

.c-button-primary-3:focus {
  border: 2px solid #60A5FA;
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

States

hover (button-primary-3-hover): background-color #000000, color #FFFFFF, border 2px solid #7AEB9F
focus: border 2px solid #60A5FA, outline 2px solid #60A5FA, outline-offset 2px

Button, secondary

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

Anatomy

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

Recipe

HTML · CSS

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

.c-button-secondary-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: max-content;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  text-align: left;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary:hover {
  border: 2px solid #D4D4D8;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #D4D4D8 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px;
}

.c-button-secondary:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover: border 2px solid #D4D4D8, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #D4D4D8 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px
focus: outline 3px solid #751BE9, outline-offset 2px

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">lorem ip</button>
</div>

.c-button-secondary-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-button-secondary-2 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1);
}

.c-button-secondary-2:hover {
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid #FF6669;
}

.c-button-secondary-2:focus {
  border: 2px solid #60A5FA;
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

States

hover (button-secondary-2-hover): background-color #000000, color #FFFFFF, border 2px solid #FF6669
focus: border 2px solid #60A5FA, outline 2px solid #60A5FA, outline-offset 2px

Button, ghost

Verification: flagged, the button-ghost-icon x did not reproduce the measured 26px after 2 correction attempts.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-group: inner group (.c-button-ghost__group)
button-ghost-icon: icon placeholder, 11px (.c-button-ghost__icon)
button-ghost-icon-2: icon placeholder, 11px (.c-button-ghost__icon-2)
button-ghost-label: label text, 28 characters (.c-button-ghost__label)

Recipe

HTML · CSS

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

.c-button-ghost-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost {
  display: inline-block;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  column-gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost__group {
  display: inline-block;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: 5px;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-ghost__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-ghost:hover {
  background-color: #FFFFFF26;
}

.c-button-ghost:focus {
  background-color: #FFFFFF;
  color: #000000;
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-ghost-hover): background-color #FFFFFF26
focus (button-ghost-focus): background-color #FFFFFF, color #000000, outline 3px solid #751BE9, outline-offset 2px

Card

Verification: flagged, the render came out 88 px taller and 68 px wider than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner block (.c-card__group)
card-media: image placeholder, 204x227px (.c-card__media)
card-group-2: inner flex row (.c-card__group-2)
card-text: label text, 7 characters (.c-card__text)
card-group-3: inner block (.c-card__group-3)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <span class="c-card__media" aria-hidden="true"></span>
    </div>
    <div class="c-card__group-2">
      <span class="c-card__text">lorem i</span>
    </div>
    <div class="c-card__group-3"></div>
  </div>
</div>

.c-card-scope {
  background-color: #061A1C;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 16px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.7s, 0.2s;
  transition-timing-function: ease-in-out, ease;
  transition-property: transform, opacity;
}

.c-card__group {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #061A1C33;
  border-radius: 4px;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 204px;
  height: 227px;
  max-width: 100%;
  aspect-ratio: auto 812 / 904;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 56px;
  padding: 4px;
  background-image: linear-gradient(#244749 0%, #182E2F 100%);
  border-radius: 4px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF08 0px 0.929px 0px 0px inset, #0000001A 0px 0px 0px 0.929px, #0000001A 0px 1.858px 1.858px 0px, #0000001A 0px 3.717px 3.717px 0px;
  font-size: 14px;
  font-weight: 420;
  line-height: 19.2px;
}

.c-card__text {
  display: block;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

.c-card__group-3 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #061A1C;
  opacity: 0.6;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card:focus {
  z-index: 20;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.02, -118, 0, -10, 1.2);
}

States

focus: z-index 20, transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.02, -118, 0, -10, 1.2)

Nav

Verification: flagged, the nav-text height did not reproduce the measured 20px after 2 correction attempts.

Anatomy

nav: the component root, a <nav> (.c-nav)
nav-group: inner flex row (.c-nav__group)
nav-group-2: inner flex row (.c-nav__group-2)
nav-link: link (.c-nav__link)
nav-media: image placeholder, 126x36px (.c-nav__media)
nav-list: inner flex row (.c-nav__list)
nav-item: inner flex row (.c-nav__item, 4 instances)
nav-group-3: inner flex row (.c-nav__group-3, 2 instances)
nav-text: label text, 13 characters (.c-nav__text, 2 instances)
nav-icon: icon placeholder, 16px (.c-nav__icon, 2 instances)
nav-group-4: inner block (.c-nav__group-4, 2 instances)
nav-group-5: inner flex row (.c-nav__group-5), content not captured
nav-group-6: inner grid (.c-nav__group-6), content not captured
nav-link-2: link, 15-character label (.c-nav__link-2, 2 instances)
nav-list-2: inner flex row (.c-nav__list-2)
nav-item-2: inner group (.c-nav__item-2, 2 instances)
nav-link-3: link, 9-character label (.c-nav__link-3)
nav-cta: link, 17-character label (.c-nav__cta)

Recipe

HTML · CSS

<div class="c-nav-scope">
  <nav class="c-nav">
    <div class="c-nav__group">
      <div class="c-nav__group-2">
        <a class="c-nav__link" href="#">
          <span class="c-nav__media" aria-hidden="true"></span>
        </a>
      </div>
    </div>
    <ul class="c-nav__list">
      <li class="c-nav__item">
        <label class="c-nav__group-3">
          <span class="c-nav__text">lorem ipsum d</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </label>
        <div class="c-nav__group-4">
          <div class="c-nav__group-5"></div>
        </div>
      </li>
      <li class="c-nav__item">
        <label class="c-nav__group-3">
          <span class="c-nav__text">lorem ip</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </label>
        <div class="c-nav__group-4">
          <div class="c-nav__group-6"></div>
        </div>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__link-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__link-2" href="#">lorem ipsu</a>
      </li>
    </ul>
    <ul class="c-nav__list-2">
      <li class="c-nav__item-2">
        <a class="c-nav__link-3" href="#">lorem ips</a>
      </li>
      <li class="c-nav__item-2">
        <a class="c-nav__cta" href="#">lorem ipsum dolor</a>
      </li>
    </ul>
  </nav>
</div>

.c-nav-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-nav {
  display: inline-flex;
  column-gap: 32px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-nav__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-nav__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-nav__link {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-nav__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 126px;
  height: 36px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-nav__list {
  display: flex;
  column-gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px auto 0px 0px;
  list-style-type: none;
}

.c-nav__item {
  display: flex;
  box-sizing: border-box;
  font-weight: 420;
  white-space: nowrap;
}

.c-nav__item::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 24px;
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-nav__group-3 {
  display: flex;
  align-items: center;
  column-gap: 2px;
  box-sizing: border-box;
  position: relative;
  cursor: default;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-nav__group-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 197px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: -64px;
  bottom: 0px;
  left: 0px;
  transform-origin: 98.6875px 36px;
  translate: -32px;
}

.c-nav__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 3px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-nav__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 738px;
  position: absolute;
  top: 72px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.c-nav__group-5 {
  display: flex;
  align-items: flex-start;
  gap: 68px 40px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #02090A;
  transform-origin: 720px 143.195px;
  translate: 0px calc(-100% - 1px);
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-nav__group-6 {
  display: grid;
  align-items: flex-start;
  gap: 32px 40px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(2, min-content);
  box-sizing: border-box;
  position: relative;
  background-color: #02090A;
  transform-origin: 720px 296.391px;
  translate: 0px calc(-100% - 1px);
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-nav__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-nav__list-2 {
  display: flex;
  align-items: center;
  gap: 20px 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav__item-2 {
  display: list-item;
  box-sizing: border-box;
  line-height: 0px;
}

.c-nav__link-3 {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-nav__cta {
  display: inline-block;
  align-self: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 550;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

States

No hover or focus change was observed.

Label chip

Verification: flagged, the render came out 68 px shorter and 19 px wider than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 3 instances in a 2-column grid; the recipe carries the values they all share
label-chip: the component root, a <div> (.c-label-chip)
label-chip-group: inner flex row (.c-label-chip__group)
label-chip-text: label text, 7 characters (.c-label-chip__text)

Recipe

HTML · CSS

<div class="c-label-chip-scope">
  <div class="c-label-chip">
    <div class="c-label-chip__group">
      <span class="c-label-chip__text">lorem i</span>
    </div>
  </div>
</div>

.c-label-chip-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-label-chip {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-label-chip__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 96px;
  padding: 10px 20px;
  background-image: linear-gradient(#181D20, #181D20), linear-gradient(#FFFFFF8C, #FFFFFF0F);
  background-size: auto, auto;
  background-position: 0% 0%, 0% 0%;
  background-repeat: repeat, repeat;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  border-radius: 3.35544e+07px;
  opacity: 0.18;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

.c-label-chip__text {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.28px;
}

.c-label-chip:focus {
  transform: matrix(0.5, -0.866025, 0.866025, 0.5, -200.485, -105);
}

States

focus: transform matrix(0.5, -0.866025, 0.866025, 0.5, -200.485, -105)

Verification: verified against the live page at desktop.

Anatomy

cookie-control: the component root, a <button> (.c-cookie-control)
cookie-control-icon: icon placeholder, 32px (.c-cookie-control__icon)

Recipe

HTML · CSS

<div class="c-cookie-control-scope">
  <button class="c-cookie-control" type="button">
    <span class="c-cookie-control__icon" aria-hidden="true"></span>
  </button>
</div>

.c-cookie-control-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-control {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-control__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-control-2: the component root, a <button> (.c-cookie-control-2)
cookie-control-2-icon: icon placeholder, 28px (.c-cookie-control-2__icon)

Recipe

HTML · CSS

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

.c-cookie-control-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-control-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-control-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease, ease;
  transition-property: background-color, color;
}

.c-cookie-control-2:hover {
  background-color: #FFFFFF;
}

.c-cookie-control-2:focus {
  background-color: #FFFFFF;
}

States

hover (cookie-control-2-hover): background-color #FFFFFF
focus (cookie-control-2-focus): background-color #FFFFFF

Header (landing)

Verification: desktop flagged, the recipe could not be rendered on its own; mobile flagged, the recipe could not be rendered on its own.

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

Anatomy

header-landing: the component root, a <header> (.c-header-landing)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-group-2: inner flex row (.c-header-landing__group-2)
header-landing-nav-link: link (.c-header-landing__nav-link)
header-landing-nav-link-image: image placeholder, 126x36px (.c-header-landing__nav-link-image)
header-landing-nav-list: inner flex row (.c-header-landing__nav-list)
header-landing-nav-item: inner flex row (.c-header-landing__nav-item, 4 instances)
header-landing-group-3: inner flex row (.c-header-landing__group-3, 2 instances)
header-landing-text: label text, 13 characters (.c-header-landing__text, 2 instances)
header-landing-icon: icon placeholder, 16px (.c-header-landing__icon, 2 instances)
header-landing-group-4: inner block (.c-header-landing__group-4, 2 instances)
header-landing-group-5: inner flex row (.c-header-landing__group-5)
header-landing-group-6: inner block (.c-header-landing__group-6)
header-landing-group-7: inner grid (.c-header-landing__group-7)
header-landing-nav-list-2: inner grid (.c-header-landing__nav-list-2)
header-landing-group-8: inner block (.c-header-landing__group-8)
header-landing-nav-link-2: link, 15-character label (.c-header-landing__nav-link-2, 2 instances)
header-landing-nav-list-3: inner flex row (.c-header-landing__nav-list-3)
header-landing-nav-item-2: inner group (.c-header-landing__nav-item-2, 2 instances)
header-landing-nav-link-3: link, 9-character label (.c-header-landing__nav-link-3)
header-landing-cta: the button-primary button, 17-character label (.c-header-landing__cta)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <nav class="c-header-landing__nav">
      <div class="c-header-landing__group">
        <div class="c-header-landing__group-2">
          <a class="c-header-landing__nav-link" href="#">
            <span class="c-header-landing__nav-link-image" aria-hidden="true"></span>
          </a>
        </div>
      </div>
      <ul class="c-header-landing__nav-list">
        <li class="c-header-landing__nav-item">
          <label class="c-header-landing__group-3">
            <span class="c-header-landing__text">lorem ipsum d</span>
            <span class="c-header-landing__icon" aria-hidden="true"></span>
          </label>
          <div class="c-header-landing__group-4">
            <div class="c-header-landing__group-5">
              <div class="c-header-landing__group-6"></div>
            </div>
          </div>
        </li>
        <li class="c-header-landing__nav-item">
          <label class="c-header-landing__group-3">
            <span class="c-header-landing__text">lorem ip</span>
            <span class="c-header-landing__icon" aria-hidden="true"></span>
          </label>
          <div class="c-header-landing__group-4">
            <div class="c-header-landing__group-7">
              <ul class="c-header-landing__nav-list-2"></ul>
              <div class="c-header-landing__group-8"></div>
            </div>
          </div>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ipsum dol</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ipsu</a>
        </li>
      </ul>
      <ul class="c-header-landing__nav-list-3">
        <li class="c-header-landing__nav-item-2">
          <a class="c-header-landing__nav-link-3" href="#">lorem ips</a>
        </li>
        <li class="c-header-landing__nav-item-2">
          <a class="c-header-landing__cta" href="#">lorem ipsum dolor</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

.c-header-landing-scope {
  background-color: #000000;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 50;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-right: 90px;
  padding-left: 90px;
}

.c-header-landing::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 32px;
  left: 0px;
  z-index: 100;
  background-image: linear-gradient(in oklab, #02090A 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 0;
  background-color: #02090A;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__nav {
  display: flex;
  column-gap: 32px;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
}

.c-header-landing__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-header-landing__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__nav-link {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing__nav-link-image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 126px;
  height: 36px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing__nav-list {
  display: flex;
  column-gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px auto 0px 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: flex;
  box-sizing: border-box;
  font-weight: 420;
  white-space: nowrap;
}

.c-header-landing__nav-item::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 24px;
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-header-landing__group-3 {
  display: flex;
  align-items: center;
  column-gap: 2px;
  box-sizing: border-box;
  position: relative;
  cursor: default;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__group-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 197px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: -64px;
  bottom: 0px;
  left: 0px;
}

.c-header-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 3px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-landing__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 738px;
  position: absolute;
  top: 72px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.c-header-landing__group-5 {
  display: flex;
  align-items: flex-start;
  gap: 68px 40px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #02090A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-landing__group-6 {
  display: block;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 40px;
  padding-left: 40px;
}

.c-header-landing__group-6::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 386px;
  height: 306px;
  position: absolute;
  top: -40px;
  right: -90px;
  bottom: -20px;
  left: 0px;
  z-index: 0;
  background-color: #051517;
}

.c-header-landing__group-6::after {
  content: "";
  display: inline;
  box-sizing: border-box;
  background-color: #121C1E;
}

.c-header-landing__group-7 {
  display: grid;
  align-items: flex-start;
  gap: 32px 40px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(2, min-content);
  box-sizing: border-box;
  position: relative;
  background-color: #02090A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-landing__nav-list-2 {
  display: grid;
  gap: 32px 40px;
  grid-template-columns: calc(25% - 36.6667px) calc(25% - 36.6667px) calc(25% - 36.6667px) calc(25% - 10px);
  box-sizing: border-box;
  padding: 24px 0px;
  margin: 0px;
  position: sticky;
  bottom: 0px;
  z-index: 20;
  list-style-type: none;
}

.c-header-landing__nav-list-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 2880px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: -2250px;
  bottom: 64px;
  left: 630px;
  z-index: 10;
  background-image: linear-gradient(0deg, #02090A 0px, transparent 40px);
}

.c-header-landing__nav-list-2::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 2880px;
  height: 104px;
  position: absolute;
  top: 0px;
  right: -2250px;
  bottom: 0px;
  left: 630px;
  background-color: #02090A;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #121C1E 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px;
}

.c-header-landing__group-8 {
  display: block;
  align-self: stretch;
  box-sizing: border-box;
  position: relative;
  padding-left: 40px;
}

.c-header-landing__group-8::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 395px;
  height: 553px;
  position: absolute;
  top: -104px;
  right: -90px;
  bottom: -32px;
  left: 0px;
  z-index: 0;
  background-color: #051517;
}

.c-header-landing__group-8::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 489px;
  position: absolute;
  top: -40px;
  right: 304px;
  bottom: -32px;
  left: 0px;
  z-index: 10;
  background-color: #121C1E;
}

.c-header-landing__nav-link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__nav-list-3 {
  display: flex;
  align-items: center;
  gap: 20px 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  line-height: 0px;
}

.c-header-landing__nav-link-3 {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing__cta {
  display: inline-block;
  align-self: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 550;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__nav-link-3:hover {
  color: #D4D4D8;
}

.c-header-landing__nav-link-3:focus {
  outline: 2px solid #751BE9;
  outline-offset: 2px;
}

.c-header-landing__cta:hover {
  background-color: #D4D4D8;
}

.c-header-landing__cta:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

Mobile anatomy

header-landing-mobile: the component root, a <header> (.c-header-landing-mobile)
header-landing-mobile-nav: inner flex row (.c-header-landing-mobile__nav)
header-landing-mobile-group: inner flex row (.c-header-landing-mobile__group)
header-landing-mobile-group-2: inner flex row (.c-header-landing-mobile__group-2)
header-landing-mobile-nav-link: link (.c-header-landing-mobile__nav-link)
header-landing-mobile-nav-link-image: image placeholder, 126x36px (.c-header-landing-mobile__nav-link-image)
header-landing-mobile-nav-link-2: link (.c-header-landing-mobile__nav-link-2)
header-landing-mobile-text: label text, 17 characters (.c-header-landing-mobile__text)
header-landing-mobile-group-3: inner flex column (.c-header-landing-mobile__group-3)
header-landing-mobile-group-4: inner group (.c-header-landing-mobile__group-4)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <nav class="c-header-landing-mobile__nav">
      <div class="c-header-landing-mobile__group">
        <div class="c-header-landing-mobile__group-2">
          <a class="c-header-landing-mobile__nav-link" href="#">
            <span class="c-header-landing-mobile__nav-link-image" aria-hidden="true"></span>
          </a>
        </div>
      </div>
      <a class="c-header-landing-mobile__nav-link-2" href="#">
        <span class="c-header-landing-mobile__text">lorem ipsum dolor</span>
      </a>
      <label class="c-header-landing-mobile__group-3">
        <span class="c-header-landing-mobile__group-4"></span>
      </label>
    </nav>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #000000;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing-mobile {
  display: flex;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  left: 0px;
  z-index: 50;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing-mobile::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 390px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 32px;
  left: 0px;
  z-index: 100;
  background-image: linear-gradient(in oklab, #02090A 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing-mobile::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 390px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 0;
  background-color: #02090A;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing-mobile__nav {
  display: flex;
  column-gap: 14px;
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  padding-left: 16px;
}

.c-header-landing-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-right: auto;
}

.c-header-landing-mobile__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-mobile__nav-link {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing-mobile__nav-link-image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 126px;
  height: 36px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__nav-link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  row-gap: 4px;
  box-sizing: border-box;
  width: 50px;
  height: 100%;
  cursor: pointer;
}

.c-header-landing-mobile__group-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 2px;
  background-color: #FFFFFF;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-landing-mobile__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 2px;
  background-color: #FFFFFF;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-landing-mobile__group-4 {
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 2px;
  background-color: #FFFFFF;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing-mobile__nav-link-2:hover {
  color: #D4D4D8;
}

.c-header-landing-mobile__nav-link-2:focus {
  outline: 2px solid #751BE9;
  outline-offset: 2px;
}

States

header-landing-nav-link-3 hover (header-landing-nav-link-3-hover): color #D4D4D8
header-landing-nav-link-3 focus: outline 2px solid #751BE9, outline-offset 2px
header-landing-cta hover (header-landing-cta-hover): background-color #D4D4D8
header-landing-cta focus: outline 3px solid #751BE9, outline-offset 2px
mobile, header-landing-mobile-nav-link-2 hover (header-landing-mobile-nav-link-2-hover): color #D4D4D8
mobile, header-landing-mobile-nav-link-2 focus: outline 2px solid #751BE9, outline-offset 2px

Verification: desktop flagged, the footer-landing-list height did not reproduce the measured 228px after 2 correction attempts; mobile flagged, the footer-landing-mobile-group height did not reproduce the measured 339px after 2 correction attempts.

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

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-link: link (.c-footer-landing__link)
footer-landing-link-icon: icon placeholder, 44x50px (.c-footer-landing__link-icon)
footer-landing-list: inner grid (.c-footer-landing__list)
footer-landing-item: inner group (.c-footer-landing__item, 25 instances)
footer-landing-heading: heading, 7 characters (.c-footer-landing__heading, 4 instances)
footer-landing-list-2: inner flex column (.c-footer-landing__list-2, 4 instances)
footer-landing-columns: inner flex row (.c-footer-landing__columns)
footer-landing-column: inner block (.c-footer-landing__column)
footer-landing-list-3: inner flex row (.c-footer-landing__list-3)
footer-landing-group: inner flex row (.c-footer-landing__group)
footer-landing-text: label text, 25 characters (.c-footer-landing__text)
footer-landing-logo: image placeholder, 30x14px (.c-footer-landing__logo)
footer-landing-list-4: inner flex row (.c-footer-landing__list-4)
footer-landing-item-2: inner group (.c-footer-landing__item-2, 7 instances)
footer-landing-icon: icon placeholder, 32px (.c-footer-landing__icon, 7 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <a class="c-footer-landing__link" href="#">
      <span class="c-footer-landing__link-icon" aria-hidden="true"></span>
    </a>
    <ul class="c-footer-landing__list">
      <li class="c-footer-landing__item">
        <h3 class="c-footer-landing__heading">lorem i</h3>
        <ul class="c-footer-landing__list-2">
          <li class="c-footer-landing__item">lorem ipsum dolo</li>
          <li class="c-footer-landing__item">lorem ipsum dolo</li>
          <li class="c-footer-landing__item">lorem ipsum do</li>
        </ul>
      </li>
      <li class="c-footer-landing__item">
        <h3 class="c-footer-landing__heading">lorem ips</h3>
        <ul class="c-footer-landing__list-2">
          <li class="c-footer-landing__item">lorem ipsum dolor sit a</li>
          <li class="c-footer-landing__item">lorem ipsum</li>
          <li class="c-footer-landing__item">lorem ips</li>
          <li class="c-footer-landing__item">lorem i</li>
          <li class="c-footer-landing__item">lorem ipsu</li>
        </ul>
      </li>
      <li class="c-footer-landing__item">
        <h3 class="c-footer-landing__heading">lorem ipsu</h3>
        <ul class="c-footer-landing__list-2">
          <li class="c-footer-landing__item">lore</li>
          <li class="c-footer-landing__item">lorem ipsum dolor s</li>
          <li class="c-footer-landing__item">lorem ipsum dolo</li>
          <li class="c-footer-landing__item">lorem ips</li>
        </ul>
      </li>
      <li class="c-footer-landing__item">
        <h3 class="c-footer-landing__heading">lorem i</h3>
        <ul class="c-footer-landing__list-2">
          <li class="c-footer-landing__item">lorem ipsum dolor s</li>
          <li class="c-footer-landing__item">lorem ipsum dol</li>
          <li class="c-footer-landing__item">lorem ipsum dolor sit am</li>
          <li class="c-footer-landing__item">lorem ipsum do</li>
        </ul>
      </li>
    </ul>
    <div class="c-footer-landing__columns">
      <div class="c-footer-landing__column"></div>
      <ul class="c-footer-landing__list-3">
        <li class="c-footer-landing__item">lorem ipsum dolor sit amet consec</li>
        <li class="c-footer-landing__item">lorem ipsum</li>
        <li class="c-footer-landing__item">lorem ipsum dolor sit</li>
        <li class="c-footer-landing__item">lorem i</li>
        <li class="c-footer-landing__item">
          <span class="c-footer-landing__group">
            <span class="c-footer-landing__text">lorem ipsum dolor sit ame</span>
            <span class="c-footer-landing__logo" aria-hidden="true"></span>
          </span>
        </li>
      </ul>
      <ul class="c-footer-landing__list-4">
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing__item-2">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #000000;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing {
  display: grid;
  gap: 56px 24px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 80px 90px;
  position: relative;
  z-index: 10;
  background-color: #000000;
  color: #A1A1AA;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing__link {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__list {
  display: grid;
  gap: 56px 24px;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 450;
  line-height: 20px;
}

.c-footer-landing__list-2 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__columns {
  display: flex;
  align-items: center;
  gap: 28px 40px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #121C1E;
}

.c-footer-landing__column {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-footer-landing__list-3 {
  display: flex;
  column-gap: 40px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px auto 0px 0px;
  list-style-type: none;
}

.c-footer-landing__group {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  cursor: pointer;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 30px;
  height: 14px;
  max-width: 100%;
  aspect-ratio: auto 30 / 14;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__list-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__item-2 {
  display: list-item;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  color: #000000;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

Mobile anatomy

footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)
footer-landing-mobile-link: link (.c-footer-landing-mobile__link)
footer-landing-mobile-link-icon: icon placeholder, 44x50px (.c-footer-landing-mobile__link-icon)
footer-landing-mobile-list: inner flex column (.c-footer-landing-mobile__list)
footer-landing-mobile-item: inner group (.c-footer-landing-mobile__item, 24 instances)
footer-landing-mobile-heading: heading, 7 characters (.c-footer-landing-mobile__heading, 4 instances)
footer-landing-mobile-list-2: inner flex column (.c-footer-landing-mobile__list-2, 4 instances)
footer-landing-mobile-group: inner flex column (.c-footer-landing-mobile__group)
footer-landing-mobile-group-2: inner block (.c-footer-landing-mobile__group-2)
footer-landing-mobile-list-3: inner flex column (.c-footer-landing-mobile__list-3)
footer-landing-mobile-group-3: inner flex row (.c-footer-landing-mobile__group-3)
footer-landing-mobile-text: label text, 25 characters (.c-footer-landing-mobile__text)
footer-landing-mobile-logo: image placeholder, 30x14px (.c-footer-landing-mobile__logo)
footer-landing-mobile-list-4: inner flex row (.c-footer-landing-mobile__list-4)
footer-landing-mobile-item-2: inner group (.c-footer-landing-mobile__item-2, 7 instances)
footer-landing-mobile-icon: icon placeholder, 32px (.c-footer-landing-mobile__icon, 7 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <a class="c-footer-landing-mobile__link" href="#">
      <span class="c-footer-landing-mobile__link-icon" aria-hidden="true"></span>
    </a>
    <ul class="c-footer-landing-mobile__list">
      <li class="c-footer-landing-mobile__item">
        <h3 class="c-footer-landing-mobile__heading">lorem i</h3>
        <ul class="c-footer-landing-mobile__list-2">
          <li class="c-footer-landing-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum do</li>
        </ul>
      </li>
      <li class="c-footer-landing-mobile__item">
        <h3 class="c-footer-landing-mobile__heading">lorem ips</h3>
        <ul class="c-footer-landing-mobile__list-2">
          <li class="c-footer-landing-mobile__item">lorem ipsum dolor sit a</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum</li>
          <li class="c-footer-landing-mobile__item">lorem ips</li>
          <li class="c-footer-landing-mobile__item">lorem i</li>
          <li class="c-footer-landing-mobile__item">lorem ipsu</li>
        </ul>
      </li>
      <li class="c-footer-landing-mobile__item">
        <h3 class="c-footer-landing-mobile__heading">lorem ipsu</h3>
        <ul class="c-footer-landing-mobile__list-2">
          <li class="c-footer-landing-mobile__item">lore</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum dolor s</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-landing-mobile__item">lorem ips</li>
        </ul>
      </li>
      <li class="c-footer-landing-mobile__item">
        <h3 class="c-footer-landing-mobile__heading">lorem i</h3>
        <ul class="c-footer-landing-mobile__list-2">
          <li class="c-footer-landing-mobile__item">lorem ipsum dolor s</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum dol</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum dolor sit am</li>
          <li class="c-footer-landing-mobile__item">lorem ipsum do</li>
        </ul>
      </li>
    </ul>
    <div class="c-footer-landing-mobile__group">
      <div class="c-footer-landing-mobile__group-2"></div>
      <ul class="c-footer-landing-mobile__list-3">
        <li class="c-footer-landing-mobile__item">lorem ipsum dolor sit amet consec</li>
        <li class="c-footer-landing-mobile__item">lorem ipsum</li>
        <li class="c-footer-landing-mobile__item">lorem ipsum dolor sit</li>
        <li class="c-footer-landing-mobile__item">lorem i</li>
        <span class="c-footer-landing-mobile__group-3">
          <span class="c-footer-landing-mobile__text">lorem ipsum dolor sit ame</span>
          <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
        </span>
      </ul>
      <ul class="c-footer-landing-mobile__list-4">
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #000000;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile {
  display: flex;
  flex-direction: column;
  row-gap: 56px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 80px 32px;
  position: relative;
  z-index: 10;
  background-color: #000000;
  color: #A1A1AA;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile__link {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-landing-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  row-gap: 56px;
  box-sizing: border-box;
  padding: 0px 0px 8px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 450;
  line-height: 20px;
}

.c-footer-landing-mobile__list-2 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__group {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #121C1E;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-footer-landing-mobile__list-3 {
  display: flex;
  flex-direction: column;
  gap: 16px 40px;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__group-3 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  cursor: pointer;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 30px;
  height: 14px;
  max-width: 100%;
  aspect-ratio: auto 30 / 14;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__list-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  color: #000000;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

States

No hover or focus change was observed.

Card (2)

Verification: flagged, the render matched 84% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-group: inner grid (.c-card-2__group)
card-2-media: image placeholder, 404x465px (.c-card-2__media)
card-2-media-2: image placeholder, 404x0px (.c-card-2__media-2)
card-2-group-2: inner block (.c-card-2__group-2)
card-2-group-3: inner block (.c-card-2__group-3)
card-2-group-4: inner block (.c-card-2__group-4)
card-2-title: heading, 16 characters (.c-card-2__title)
card-2-text: label text, 0 characters (.c-card-2__text)
card-2-text-2: label text, 33 characters (.c-card-2__text-2, 3 instances)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <span class="c-card-2__media" aria-hidden="true"></span>
      <span class="c-card-2__media-2" aria-hidden="true"></span>
      <div class="c-card-2__group-2"></div>
    </div>
    <div class="c-card-2__group-3">
      <div class="c-card-2__group-4">
        <h3 class="c-card-2__title">lorem ipsum dolo</h3>
        <div class="c-card-2__text">
          <span class="c-card-2__text-2">lorem ipsum dolor sit amet consec</span>
          <span class="c-card-2__text-2">lorem ipsum dolor sit amet consectetur adipiscing</span>
          <span class="c-card-2__text-2">lorem ipsum dolor s</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #F2F2F0;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #4325B1;
  color: #FFFFFF;
  border-radius: 16px;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2__group {
  display: grid;
  box-sizing: border-box;
  min-height: 200px;
  position: relative;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 404px;
  height: 465px;
  max-width: 100%;
  aspect-ratio: 812 / 934;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-2__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 404px;
  height: 0px;
  background-color: currentcolor;
}

.c-card-2__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #40474D66 0px 1px 0px 0px inset;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.c-card-2__group-3 {
  display: block;
  box-sizing: border-box;
  padding: 24px;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 20px;
  font-weight: 450;
  line-height: 26px;
}

.c-card-2__text {
  display: block;
  box-sizing: border-box;
  color: #FFFFFFB3;
  font-size: 18px;
  line-height: 25.2px;
  padding-top: 8px;
}

States

No hover or focus change was observed.

Card (3)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 40px gap; the recipe carries the values they all share
card-3: the component root, a <div> (.c-card-3)
card-3-group: inner flex row (.c-card-3__group)
card-3-icon: icon placeholder, 14x17px (.c-card-3__icon)
card-3-title: heading, 30 characters (.c-card-3__title)
card-3-group-2: inner block (.c-card-3__group-2)
card-3-group-3: inner flex row (.c-card-3__group-3)
card-3-text: label text, 2 characters (.c-card-3__text)
card-3-text-2: label text, 1 characters (.c-card-3__text-2)
card-3-body: label text, 0 characters (.c-card-3__body)
card-3-text-3: label text, 3 characters (.c-card-3__text-3, 3 instances)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <span class="c-card-3__icon" aria-hidden="true"></span>
      <h3 class="c-card-3__title">lorem ipsum dolor sit amet con</h3>
    </div>
    <div class="c-card-3__group-2">
      <div class="c-card-3__group-3">
        <span class="c-card-3__text">lo</span>
        <span class="c-card-3__text-2">l</span>
      </div>
    </div>
    <p class="c-card-3__body">
      <span class="c-card-3__text-3">lor</span>
      <span class="c-card-3__text-3">lorem ipsum dolor sit amet consectetur adipisci</span>
      <span class="c-card-3__text-3">lorem ipsum dolor sit amet consectetu</span>
    </p>
  </div>
</div>

.c-card-3-scope {
  background-color: #041E18;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.c-card-3__group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  order: 2;
  box-sizing: border-box;
  margin-top: 16px;
}

.c-card-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 17px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 24px;
  font-weight: 400;
  line-height: 31.2px;
  letter-spacing: -0.24px;
}

.c-card-3__group-2 {
  display: block;
  order: 1;
  box-sizing: border-box;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #11352D;
}

.c-card-3__group-3 {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  box-sizing: border-box;
}

.c-card-3__text {
  display: block;
  box-sizing: border-box;
  font-size: 96px;
  font-weight: 300;
  line-height: 96px;
}

.c-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  font-size: 70px;
  font-weight: 300;
  line-height: 78.225px;
}

.c-card-3__body {
  display: block;
  order: 3;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  color: #99B3AD;
  font-size: 18px;
  line-height: 25.2px;
}

States

No hover or focus change was observed.

Logo list

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 6 instances in a 20-column grid, 24px gap; the recipe carries the values they all share
logo-list: the component root, a <li> (.c-logo-list)
logo-list-media: image placeholder, 210x90px (.c-logo-list__media)

Recipe

HTML · CSS

<div class="c-logo-list-scope">
  <li class="c-logo-list">
    <span class="c-logo-list__media" aria-hidden="true"></span>
  </li>
</div>

.c-logo-list-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo-list {
  display: inline-flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 90px;
  aspect-ratio: 210 / 90;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-logo-list__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 210px;
  height: 90px;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Verification: flagged, the navigation-group-4 y did not reproduce the measured 72px after 2 correction attempts.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-group: inner flex row (.c-navigation__group)
navigation-group-2: inner flex row (.c-navigation__group-2)
navigation-link: link (.c-navigation__link)
navigation-media: image placeholder, 126x36px (.c-navigation__media)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner flex row (.c-navigation__item, 4 instances)
navigation-group-3: inner flex row (.c-navigation__group-3, 2 instances)
navigation-text: label text, 13 characters (.c-navigation__text, 2 instances)
navigation-icon: icon placeholder, 16px (.c-navigation__icon, 2 instances)
navigation-group-4: inner block (.c-navigation__group-4, 2 instances)
navigation-group-5: inner flex row (.c-navigation__group-5), content not captured
navigation-group-6: inner grid (.c-navigation__group-6), content not captured
navigation-link-2: link, 15-character label (.c-navigation__link-2, 2 instances)
navigation-list-2: inner flex row (.c-navigation__list-2)
navigation-item-2: inner group (.c-navigation__item-2, 2 instances)
navigation-link-3: link (.c-navigation__link-3)
navigation-text-2: label text, 9 characters (.c-navigation__text-2)
navigation-cta: link, 17-character label (.c-navigation__cta)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <div class="c-navigation__group">
      <div class="c-navigation__group-2">
        <a class="c-navigation__link" href="#">
          <span class="c-navigation__media" aria-hidden="true"></span>
        </a>
      </div>
    </div>
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <label class="c-navigation__group-3">
          <span class="c-navigation__text">lorem ipsum d</span>
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </label>
        <div class="c-navigation__group-4">
          <div class="c-navigation__group-5"></div>
        </div>
      </li>
      <li class="c-navigation__item">
        <label class="c-navigation__group-3">
          <span class="c-navigation__text">lorem ip</span>
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </label>
        <div class="c-navigation__group-4">
          <div class="c-navigation__group-6"></div>
        </div>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link-2" href="#">lorem ipsu</a>
      </li>
    </ul>
    <ul class="c-navigation__list-2">
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-3" href="#">
          <span class="c-navigation__text-2">lorem ips</span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__cta" href="#">lorem ipsum dolor</a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: inline-flex;
  column-gap: 32px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-navigation__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__link {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-navigation__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 126px;
  height: 36px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-navigation__list {
  display: flex;
  column-gap: 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px auto 0px 0px;
  list-style-type: none;
}

.c-navigation__item {
  display: flex;
  box-sizing: border-box;
  font-weight: 420;
  white-space: nowrap;
}

.c-navigation__item::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 24px;
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-navigation__group-3 {
  display: flex;
  align-items: center;
  column-gap: 2px;
  box-sizing: border-box;
  position: relative;
  cursor: default;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-navigation__group-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 197px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: -64px;
  bottom: 0px;
  left: 0px;
  transform-origin: 98.6875px 36px;
  translate: -32px;
}

.c-navigation__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 3px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-navigation__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 738px;
  position: absolute;
  top: 72px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.c-navigation__group-5 {
  display: flex;
  align-items: flex-start;
  gap: 68px 40px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #02090A;
  transform-origin: 720px 143.195px;
  translate: 0px calc(-100% - 1px);
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-navigation__group-6 {
  display: grid;
  align-items: flex-start;
  gap: 32px 40px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(2, min-content);
  box-sizing: border-box;
  position: relative;
  background-color: #02090A;
  transform-origin: 720px 296.391px;
  translate: 0px calc(-100% - 1px);
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-navigation__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-navigation__list-2 {
  display: flex;
  align-items: center;
  gap: 20px 32px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation__item-2 {
  display: list-item;
  box-sizing: border-box;
  line-height: 0px;
}

.c-navigation__link-3 {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation__text-2 {
  display: inline;
  box-sizing: border-box;
}

.c-navigation__cta {
  display: inline-block;
  align-self: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 550;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-consent: the component root, a <button> (.c-cookie-consent)
cookie-consent-icon: icon placeholder, 32px (.c-cookie-consent__icon)

Recipe

HTML · CSS

<div class="c-cookie-consent-scope">
  <button class="c-cookie-consent" type="button">
    <span class="c-cookie-consent__icon" aria-hidden="true"></span>
  </button>
</div>

.c-cookie-consent-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-consent {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-consent__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-consent-2: the component root, a <button> (.c-cookie-consent-2), 16-character label

Recipe

HTML · CSS

<div class="c-cookie-consent-2-scope">
  <button class="c-cookie-consent-2" type="button">lorem ipsum dolo</button>
</div>

.c-cookie-consent-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-consent-2 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1);
}

.c-cookie-consent-2:hover {
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid #7AEB9F;
}

.c-cookie-consent-2:focus {
  border: 2px solid #60A5FA;
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

States

hover (cookie-consent-2-hover): background-color #000000, color #FFFFFF, border 2px solid #7AEB9F
focus: border 2px solid #60A5FA, outline 2px solid #60A5FA, outline-offset 2px

Verification: desktop flagged, the footer-inner-list height did not reproduce the measured 228px after 2 correction attempts; mobile flagged, the footer-inner-mobile-group height did not reproduce the measured 339px after 2 correction attempts.

Variant observed on https://www.shopify.com/de/sell.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-link: link (.c-footer-inner__link)
footer-inner-link-icon: icon placeholder, 44x50px (.c-footer-inner__link-icon)
footer-inner-list: inner grid (.c-footer-inner__list)
footer-inner-item: inner group (.c-footer-inner__item, 24 instances)
footer-inner-heading: heading, 7 characters (.c-footer-inner__heading, 4 instances)
footer-inner-list-2: inner flex column (.c-footer-inner__list-2, 4 instances)
footer-inner-link-2: link, 14-character label (.c-footer-inner__link-2)
footer-inner-columns: inner flex row (.c-footer-inner__columns)
footer-inner-column: inner block (.c-footer-inner__column)
footer-inner-list-3: inner flex row (.c-footer-inner__list-3)
footer-inner-group: inner flex row (.c-footer-inner__group)
footer-inner-text: label text, 25 characters (.c-footer-inner__text)
footer-inner-logo: image placeholder, 30x14px (.c-footer-inner__logo)
footer-inner-list-4: inner flex row (.c-footer-inner__list-4)
footer-inner-item-2: inner group (.c-footer-inner__item-2, 7 instances)
footer-inner-icon: icon placeholder, 32px (.c-footer-inner__icon, 7 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <a class="c-footer-inner__link" href="#">
      <span class="c-footer-inner__link-icon" aria-hidden="true"></span>
    </a>
    <ul class="c-footer-inner__list">
      <li class="c-footer-inner__item">
        <h3 class="c-footer-inner__heading">lorem i</h3>
        <ul class="c-footer-inner__list-2">
          <li class="c-footer-inner__item">lorem ipsum dolo</li>
          <li class="c-footer-inner__item">lorem ipsum dolo</li>
          <li class="c-footer-inner__item">lorem ipsum do</li>
        </ul>
      </li>
      <li class="c-footer-inner__item">
        <h3 class="c-footer-inner__heading">lorem ips</h3>
        <ul class="c-footer-inner__list-2">
          <li class="c-footer-inner__item">lorem ipsum dolor sit a</li>
          <li class="c-footer-inner__item">lorem ipsum</li>
          <li class="c-footer-inner__item">lorem ips</li>
          <li class="c-footer-inner__item">lorem i</li>
          <li class="c-footer-inner__item">lorem ipsu</li>
        </ul>
      </li>
      <li class="c-footer-inner__item">
        <h3 class="c-footer-inner__heading">lorem ipsu</h3>
        <ul class="c-footer-inner__list-2">
          <li class="c-footer-inner__item">lore</li>
          <li class="c-footer-inner__item">lorem ipsum dolor s</li>
          <li class="c-footer-inner__item">lorem ipsum dolo</li>
          <li class="c-footer-inner__item">lorem ips</li>
        </ul>
      </li>
      <li class="c-footer-inner__item">
        <h3 class="c-footer-inner__heading">lorem i</h3>
        <ul class="c-footer-inner__list-2">
          <li class="c-footer-inner__item">lorem ipsum dolor s</li>
          <li class="c-footer-inner__item">lorem ipsum dol</li>
          <li class="c-footer-inner__item">lorem ipsum dolor sit am</li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-2" href="#">lorem ipsum do</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="c-footer-inner__columns">
      <div class="c-footer-inner__column"></div>
      <ul class="c-footer-inner__list-3">
        <li class="c-footer-inner__item">lorem ipsum dolor sit amet consec</li>
        <li class="c-footer-inner__item">lorem ipsum</li>
        <li class="c-footer-inner__item">lorem ipsum dolor sit</li>
        <li class="c-footer-inner__item">lorem i</li>
        <span class="c-footer-inner__group">
          <span class="c-footer-inner__text">lorem ipsum dolor sit ame</span>
          <span class="c-footer-inner__logo" aria-hidden="true"></span>
        </span>
      </ul>
      <ul class="c-footer-inner__list-4">
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner__item-2">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner {
  display: grid;
  gap: 56px 24px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 80px 90px;
  position: relative;
  background-color: #000000;
  color: #A1A1AA;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner__link {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__list {
  display: grid;
  gap: 56px 24px;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 450;
  line-height: 20px;
}

.c-footer-inner__list-2 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #A1A1AA;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner__columns {
  display: flex;
  align-items: center;
  gap: 28px 40px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #121C1E;
}

.c-footer-inner__column {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-footer-inner__list-3 {
  display: flex;
  column-gap: 40px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px auto 0px 0px;
  list-style-type: none;
}

.c-footer-inner__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}

.c-footer-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 30px;
  height: 14px;
  max-width: 100%;
  aspect-ratio: auto 30 / 14;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__list-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__item-2 {
  display: list-item;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  color: #000000;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-link: link (.c-footer-inner-mobile__link)
footer-inner-mobile-link-icon: icon placeholder, 44x50px (.c-footer-inner-mobile__link-icon)
footer-inner-mobile-list: inner flex column (.c-footer-inner-mobile__list)
footer-inner-mobile-item: inner group (.c-footer-inner-mobile__item, 24 instances)
footer-inner-mobile-heading: heading, 7 characters (.c-footer-inner-mobile__heading, 4 instances)
footer-inner-mobile-list-2: inner flex column (.c-footer-inner-mobile__list-2, 4 instances)
footer-inner-mobile-group: inner flex column (.c-footer-inner-mobile__group)
footer-inner-mobile-group-2: inner block (.c-footer-inner-mobile__group-2)
footer-inner-mobile-list-3: inner flex column (.c-footer-inner-mobile__list-3)
footer-inner-mobile-group-3: inner flex row (.c-footer-inner-mobile__group-3)
footer-inner-mobile-text: label text, 25 characters (.c-footer-inner-mobile__text)
footer-inner-mobile-logo: image placeholder, 30x14px (.c-footer-inner-mobile__logo)
footer-inner-mobile-list-4: inner flex row (.c-footer-inner-mobile__list-4)
footer-inner-mobile-item-2: inner group (.c-footer-inner-mobile__item-2, 7 instances)
footer-inner-mobile-icon: icon placeholder, 32px (.c-footer-inner-mobile__icon, 7 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <a class="c-footer-inner-mobile__link" href="#">
      <span class="c-footer-inner-mobile__link-icon" aria-hidden="true"></span>
    </a>
    <ul class="c-footer-inner-mobile__list">
      <li class="c-footer-inner-mobile__item">
        <h3 class="c-footer-inner-mobile__heading">lorem i</h3>
        <ul class="c-footer-inner-mobile__list-2">
          <li class="c-footer-inner-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum do</li>
        </ul>
      </li>
      <li class="c-footer-inner-mobile__item">
        <h3 class="c-footer-inner-mobile__heading">lorem ips</h3>
        <ul class="c-footer-inner-mobile__list-2">
          <li class="c-footer-inner-mobile__item">lorem ipsum dolor sit a</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum</li>
          <li class="c-footer-inner-mobile__item">lorem ips</li>
          <li class="c-footer-inner-mobile__item">lorem i</li>
          <li class="c-footer-inner-mobile__item">lorem ipsu</li>
        </ul>
      </li>
      <li class="c-footer-inner-mobile__item">
        <h3 class="c-footer-inner-mobile__heading">lorem ipsu</h3>
        <ul class="c-footer-inner-mobile__list-2">
          <li class="c-footer-inner-mobile__item">lore</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum dolor s</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum dolo</li>
          <li class="c-footer-inner-mobile__item">lorem ips</li>
        </ul>
      </li>
      <li class="c-footer-inner-mobile__item">
        <h3 class="c-footer-inner-mobile__heading">lorem i</h3>
        <ul class="c-footer-inner-mobile__list-2">
          <li class="c-footer-inner-mobile__item">lorem ipsum dolor s</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum dol</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum dolor sit am</li>
          <li class="c-footer-inner-mobile__item">lorem ipsum do</li>
        </ul>
      </li>
    </ul>
    <div class="c-footer-inner-mobile__group">
      <div class="c-footer-inner-mobile__group-2"></div>
      <ul class="c-footer-inner-mobile__list-3">
        <li class="c-footer-inner-mobile__item">lorem ipsum dolor sit amet consec</li>
        <li class="c-footer-inner-mobile__item">lorem ipsum</li>
        <li class="c-footer-inner-mobile__item">lorem ipsum dolor sit</li>
        <li class="c-footer-inner-mobile__item">lorem i</li>
        <span class="c-footer-inner-mobile__group-3">
          <span class="c-footer-inner-mobile__text">lorem ipsum dolor sit ame</span>
          <span class="c-footer-inner-mobile__logo" aria-hidden="true"></span>
        </span>
      </ul>
      <ul class="c-footer-inner-mobile__list-4">
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
        <li class="c-footer-inner-mobile__item-2">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner-mobile {
  display: flex;
  flex-direction: column;
  row-gap: 56px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 80px 32px;
  position: relative;
  background-color: #000000;
  color: #A1A1AA;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner-mobile__link {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__list {
  display: flex;
  flex-direction: column;
  row-gap: 56px;
  box-sizing: border-box;
  padding: 0px 0px 8px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 450;
  line-height: 20px;
}

.c-footer-inner-mobile__list-2 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__group {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
  box-sizing: border-box;
  width: 100%;
  padding-top: 40px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #121C1E;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-footer-inner-mobile__list-3 {
  display: flex;
  flex-direction: column;
  gap: 16px 40px;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}

.c-footer-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 30px;
  height: 14px;
  max-width: 100%;
  aspect-ratio: auto 30 / 14;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__list-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  color: #000000;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

States

No hover or focus change was observed.

Button, primary (4)

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

Anatomy

button-primary-4: the component root, a <a> (.c-button-primary-4), 17-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: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 0px;
}

.c-button-primary-4 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 550;
  line-height: 24px;
  text-decoration-line: none;
  white-space: nowrap;
  list-style-type: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary-4:hover {
  background-color: #3F3F46;
}

.c-button-primary-4:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-primary-4-hover): background-color #3F3F46
focus: outline 3px solid #751BE9, outline-offset 2px

Button, primary (5)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-5-scope {
  background-color: #F3F3F1;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary-5 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary-5:hover {
  background-color: #3F3F46;
}

.c-button-primary-5:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-primary-5-hover): background-color #3F3F46
focus: outline 3px solid #751BE9, outline-offset 2px

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <a class="c-button-secondary-3" href="#">lorem ipsum dolor sit amet consectetur adipi</a>
</div>

.c-button-secondary-3-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-3 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-3:hover {
  border: 2px solid #3F3F46;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #3F3F46 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px;
}

.c-button-secondary-3:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover: border 2px solid #3F3F46, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #3F3F46 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px
focus: outline 3px solid #751BE9, outline-offset 2px

Button, secondary (4)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-secondary-4-scope {
  background-color: #09090A08;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-4 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-4:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

focus: outline 3px solid #751BE9, outline-offset 2px

Button, secondary (5)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-button-secondary-5-scope">
  <a class="c-button-secondary-5" href="#">lorem ipsum dolor sit amet consectetu</a>
</div>

.c-button-secondary-5-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-5 {
  display: inline-block;
  align-self: flex-start;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-5:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

focus: outline 3px solid #751BE9, outline-offset 2px

Card (4)

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

Anatomy

Group: 3 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-4: the component root, a <div> (.c-card-4)
card-4-group: inner block (.c-card-4__group)
card-4-media: image placeholder, 380x41px (.c-card-4__media)
card-4-link: link, 11-character label (.c-card-4__link)
card-4-body: label text, 107 characters (.c-card-4__body)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <div class="c-card-4">
    <div class="c-card-4__group">
      <span class="c-card-4__media" aria-hidden="true"></span>
      <a class="c-card-4__link" href="#">lorem ipsum</a>
      <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet con</p>
    </div>
  </div>
</div>

.c-card-4-scope {
  background-color: #F3F3F1;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4__group {
  display: block;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  padding-top: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

.c-card-4__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 380px;
  height: 41px;
  background-color: currentcolor;
}

.c-card-4__link {
  display: block;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-size: 20px;
  font-weight: 450;
  line-height: 26px;
  text-decoration-line: none;
  margin-top: 28px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-card-4__link::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 404px;
  height: 213px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  margin: 8px 0px 0px;
  color: #52525B;
  font-size: 18px;
  line-height: 20px;
}

States

No hover or focus change was observed.

Card (5)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-media: image placeholder, 340x40px (.c-card-5__media)
card-5-group: inner flex column (.c-card-5__group)
card-5-text: label text, 114 characters (.c-card-5__text)

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <span class="c-card-5__media" aria-hidden="true"></span>
    <div class="c-card-5__group">
      <div class="c-card-5__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetu</div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5 {
  display: inline-flex;
  flex-direction: column;
  gap: 24px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px;
  background-color: #F6F6F6;
  color: #000000;
  border-radius: 16px;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 340px;
  height: 40px;
  background-color: currentcolor;
}

.c-card-5__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.c-card-5__text {
  display: block;
  box-sizing: border-box;
  color: #00000099;
  font-size: 18px;
  line-height: 25.2px;
}

States

No hover or focus change was observed.

Card (6)

Verification: flagged, the card-6-text y did not reproduce the measured 147px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-6: the component root, a <div> (.c-card-6)
card-6-group: inner block (.c-card-6__group)
card-6-media: image placeholder, 340x41px (.c-card-6__media)
card-6-group-2: inner block (.c-card-6__group-2)
card-6-text: label text, 79 characters (.c-card-6__text, 5 instances)
card-6-link: link (.c-card-6__link)
card-6-link-2: link, 37-character label (.c-card-6__link-2)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <span class="c-card-6__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-6__group-2">
      <span class="c-card-6__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lo</span>
      <a class="c-card-6__link" href="#">
        <span class="c-card-6__text">lorem ip</span>
        <span class="c-card-6__text">lor</span>
        <span class="c-card-6__text">lorem ips</span>
      </a>
      <span class="c-card-6__text">l</span>
    </div>
    <a class="c-card-6__link-2" href="#">lorem ipsum dolor sit amet consectetu</a>
  </div>
</div>

.c-card-6-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #131416;
  color: #FFFFFF;
  border-radius: 12px;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 32px;
  padding-right: 32px;
  padding-left: 32px;
}

.c-card-6__group {
  display: block;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.c-card-6__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 340px;
  height: 41px;
  background-color: currentcolor;
}

.c-card-6__group-2 {
  display: block;
  box-sizing: border-box;
  color: #FFFFFFB3;
  font-size: 20px;
  line-height: 28px;
}

.c-card-6__link {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFFB3;
  cursor: pointer;
  font-weight: 550;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFFB3;
}

.c-card-6__link-2 {
  display: block;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 18px;
  font-weight: 550;
  line-height: 25.2px;
  text-decoration-line: none;
  padding-top: 16px;
  padding-bottom: 36px;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-banner: the component root, a <button> (.c-cookie-banner)
cookie-banner-icon: icon placeholder, 32px (.c-cookie-banner__icon)

Recipe

HTML · CSS

<div class="c-cookie-banner-scope">
  <button class="c-cookie-banner" type="button">
    <span class="c-cookie-banner__icon" aria-hidden="true"></span>
  </button>
</div>

.c-cookie-banner-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-banner {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-banner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-banner-2: the component root, a <button> (.c-cookie-banner-2), 16-character label

Recipe

HTML · CSS

<div class="c-cookie-banner-2-scope">
  <button class="c-cookie-banner-2" type="button">lorem ipsum dolo</button>
</div>

.c-cookie-banner-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-banner-2 {
  display: inline-block;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: all 0.4s cubic-bezier(0.84, 0, 0.16, 1);
}

.c-cookie-banner-2:hover {
  background-color: #000000;
  color: #FFFFFF;
  border: 2px solid #7AEB9F;
}

.c-cookie-banner-2:focus {
  border: 2px solid #60A5FA;
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
}

States

hover (cookie-banner-2-hover): background-color #000000, color #FFFFFF, border 2px solid #7AEB9F
focus: border 2px solid #60A5FA, outline 2px solid #60A5FA, outline-offset 2px

Header (inner)

Verification: flagged, the header-inner-group-2 y did not reproduce the measured 72px after 2 correction attempts.

Variant observed on https://www.shopify.com/de/channels.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner group (.c-header-inner__nav-item, 2 instances)
header-inner-group: inner flex row (.c-header-inner__group, 2 instances)
header-inner-text: label text, 13 characters (.c-header-inner__text, 2 instances)
header-inner-icon: icon placeholder, 16px (.c-header-inner__icon, 2 instances)
header-inner-group-2: inner block (.c-header-inner__group-2, 2 instances)
header-inner-group-3: inner flex row (.c-header-inner__group-3)
header-inner-group-4: inner block (.c-header-inner__group-4)
header-inner-group-5: inner grid (.c-header-inner__group-5)
header-inner-nav-list: inner grid (.c-header-inner__nav-list)
header-inner-group-6: inner block (.c-header-inner__group-6)
header-inner-nav-item-2: inner group (.c-header-inner__nav-item-2, 2 instances)
header-inner-group-7: inner flex row (.c-header-inner__group-7, 2 instances)
header-inner-nav-link: link, 15-character label (.c-header-inner__nav-link, 2 instances)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <ul class="c-header-inner__nav">
      <li class="c-header-inner__nav-item">
        <div class="c-header-inner__group">
          <span class="c-header-inner__text">lorem ipsum d</span>
          <span class="c-header-inner__icon" aria-hidden="true"></span>
        </div>
        <div class="c-header-inner__group-2">
          <div class="c-header-inner__group-3">
            <div class="c-header-inner__group-4"></div>
          </div>
        </div>
      </li>
      <li class="c-header-inner__nav-item">
        <div class="c-header-inner__group">
          <span class="c-header-inner__text">lorem ip</span>
          <span class="c-header-inner__icon" aria-hidden="true"></span>
        </div>
        <div class="c-header-inner__group-2">
          <div class="c-header-inner__group-5">
            <ul class="c-header-inner__nav-list"></ul>
            <div class="c-header-inner__group-6"></div>
          </div>
        </div>
      </li>
      <li class="c-header-inner__nav-item-2">
        <div class="c-header-inner__group-7">
          <a class="c-header-inner__nav-link" href="#">lorem ipsum dol</a>
        </div>
      </li>
      <li class="c-header-inner__nav-item-2">
        <div class="c-header-inner__group-7">
          <a class="c-header-inner__nav-link" href="#">lorem ipsu</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner {
  display: inline-flex;
  flex-grow: 1;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner__nav {
  display: flex;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-right: 32px;
}

.c-header-inner__nav-item::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 24px;
  position: absolute;
  top: 48px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  column-gap: 2px;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-inner__group::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 197px;
  height: 72px;
  position: absolute;
  top: 0px;
  right: -64px;
  bottom: 0px;
  left: 0px;
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  font-weight: 420;
  white-space: nowrap;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 3px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 738px;
  position: absolute;
  top: 72px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 36px;
}

.c-header-inner__group-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 36px;
  position: absolute;
  top: 250.391px;
  right: 0px;
  bottom: 36px;
  left: 0px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0000001A 0px 20px 25px -5px, #0000001A 0px 8px 10px -6px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-inner__group-3 {
  display: flex;
  align-items: flex-start;
  gap: 68px 40px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #18181B;
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner__group-4 {
  display: block;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 40px;
  padding-left: 40px;
}

.c-header-inner__group-4::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 386px;
  height: 306px;
  position: absolute;
  top: -40px;
  right: -90px;
  bottom: -20px;
  left: 0px;
  z-index: 0;
  background-color: #FAFAFA;
}

.c-header-inner__group-4::after {
  content: "";
  display: inline;
  box-sizing: border-box;
  background-color: #F4F4F5;
}

.c-header-inner__group-5 {
  display: grid;
  align-items: flex-start;
  gap: 32px 40px;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(2, min-content);
  box-sizing: border-box;
  position: relative;
  background-color: #FFFFFF;
  color: #18181B;
  font-size: 14px;
  line-height: 20px;
  padding-top: 40px;
  padding-right: 90px;
  padding-left: 90px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner__nav-list {
  display: grid;
  gap: 32px 40px;
  grid-template-columns: calc(25% - 36.6667px) calc(25% - 36.6667px) calc(25% - 36.6667px) calc(25% - 10px);
  box-sizing: border-box;
  padding: 24px 0px;
  margin: 0px;
  position: sticky;
  bottom: -36px;
  z-index: 20;
  list-style-type: none;
}

.c-header-inner__nav-list::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 2880px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: -2250px;
  bottom: 64px;
  left: 630px;
  z-index: 10;
  background-image: linear-gradient(0deg, #FFFFFF 0px, transparent 40px);
}

.c-header-inner__nav-list::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 2880px;
  height: 104px;
  position: absolute;
  top: 0px;
  right: -2250px;
  bottom: 0px;
  left: 630px;
  background-color: #FFFFFF;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #F4F4F5 0px 0px 0px 1px inset, transparent 0px 0px 0px 0px;
}

.c-header-inner__group-6 {
  display: block;
  align-self: stretch;
  box-sizing: border-box;
  position: relative;
  padding-left: 40px;
}

.c-header-inner__group-6::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 395px;
  height: 553px;
  position: absolute;
  top: -104px;
  right: -90px;
  bottom: -32px;
  left: 0px;
  z-index: 0;
  background-color: #FAFAFA;
}

.c-header-inner__group-6::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 489px;
  position: absolute;
  top: -40px;
  right: 304px;
  bottom: -32px;
  left: 0px;
  z-index: 10;
  background-color: #F4F4F5;
}

.c-header-inner__nav-item-2 {
  display: list-item;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 32px;
}

.c-header-inner__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner__nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Button, ghost (2)

Verification: not verifiable, it differs only where an image the recipe cannot carry (a pattern or a sprite) paints, so the comparison could not be judged.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 8 characters (.c-button-ghost-2__label)
button-ghost-2-group: inner group (.c-button-ghost-2__group)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <span class="c-button-ghost-2__label">lorem ip</span>
    <span class="c-button-ghost-2__group"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-button-ghost-2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-spacing: 0px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 8px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost-2__group {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost-2:hover {
  background-color: #FFFFFF;
  color: #000000;
}

States

hover (button-ghost-2-hover): background-color #FFFFFF, color #000000

Input

Verification: verified against the live page at desktop.

Anatomy

input: the component root, a <input> (.c-input), 0-character placeholder

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="search" placeholder="">
</div>

.c-input-scope {
  background-color: #F4F4F4;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-input {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 490px;
  height: 46px;
  padding: 8px 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: text;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0%;
  text-transform: none;
  text-align: start;
  list-style-type: none;
  appearance: none;
}

.c-input:focus {
  min-width: 0px;
  min-height: 0px;
  outline: none;
}

States

focus: min-width 0px, min-height 0px, outline none

Card (7)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

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

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <article class="c-card-7">
    <div class="c-card-7__group">
      <div class="c-card-7__group-2"></div>
    </div>
  </article>
</div>

.c-card-7-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-card-7 {
  display: inline-grid;
  row-gap: 16px;
  grid-template-columns: subgrid;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-card-7__group {
  display: block;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #09090999;
}

.c-card-7__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
}

States

No hover or focus change was observed.

Video player

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

Anatomy

video-player: the component root, a <button> (.c-video-player)
video-player-group: inner flex row (.c-video-player__group)
video-player-group-2: inner flex row (.c-video-player__group-2)
video-player-group-3: inner block (.c-video-player__group-3)
video-player-icon: icon placeholder, 48px (.c-video-player__icon)

Recipe

HTML · CSS

<div class="c-video-player-scope">
  <button class="c-video-player" type="button">
    <span class="c-video-player__group">
      <span class="c-video-player__group-2">
        <div class="c-video-player__group-3">
          <span class="c-video-player__icon" aria-hidden="true"></span>
        </div>
      </span>
    </span>
  </button>
</div>

.c-video-player-scope {
  background-color: #09090999;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-video-player {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-video-player__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 3.35544e+07px;
}

.c-video-player__group-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease, ease;
  transition-property: clip-path, background-color;
}

.c-video-player__group-3 {
  display: block;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: #090909;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease, ease;
  transition-property: transform, color;
}

.c-video-player__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-video-player:focus {
  outline: none;
}

States

focus: outline none

Verification: flagged, the navigation-2-cta y did not reproduce the measured 0px after 2 correction attempts.

Anatomy

navigation-2: the component root, a <nav> (.c-navigation-2)
navigation-2-cta: link, 27-character label (.c-navigation-2__cta)
navigation-2-link: link (.c-navigation-2__link)
navigation-2-icon: icon placeholder, 18px (.c-navigation-2__icon)
navigation-2-group: inner flex row (.c-navigation-2__group)
navigation-2-text: label text, 16 characters (.c-navigation-2__text)
navigation-2-text-2: label text, 12 characters (.c-navigation-2__text-2)
navigation-2-list: inner flex row (.c-navigation-2__list)
navigation-2-group-2: inner block (.c-navigation-2__group-2)
navigation-2-button: button, 8-character label (.c-navigation-2__button, 2 instances), content not captured
navigation-2-item: inner group (.c-navigation-2__item)
navigation-2-group-3: inner block (.c-navigation-2__group-3)
navigation-2-group-4: inner group (.c-navigation-2__group-4), content not captured
navigation-2-list-2: inner flex row (.c-navigation-2__list-2)
navigation-2-link-2: link, 11-character label (.c-navigation-2__link-2)
navigation-2-item-2: inner group (.c-navigation-2__item-2)
navigation-2-cta-2: link, 16-character label (.c-navigation-2__cta-2)

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <a class="c-navigation-2__cta" href="#">lorem ipsum dolor sit amet</a>
    <a class="c-navigation-2__link" href="#">
      <span class="c-navigation-2__icon" aria-hidden="true"></span>
      <span class="c-navigation-2__group">
        <span class="c-navigation-2__text">lorem ipsum dolo</span>
        <span class="c-navigation-2__text-2">lorem ipsum</span>
      </span>
    </a>
    <ul class="c-navigation-2__list">
      <div class="c-navigation-2__group-2">
        <button class="c-navigation-2__button" type="button">lorem ip</button>
      </div>
      <li class="c-navigation-2__item">
        <div class="c-navigation-2__group-3">
          <button class="c-navigation-2__button" type="button">lorem</button>
          <div class="c-navigation-2__group-4"></div>
        </div>
      </li>
    </ul>
    <ul class="c-navigation-2__list-2">
      <a class="c-navigation-2__link-2" href="#">lorem ipsum</a>
      <li class="c-navigation-2__item-2">
        <a class="c-navigation-2__cta-2" href="#">lorem ipsum dolo</a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 50px;
  max-width: 1680px;
  padding: 8px 12px;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-2__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 10;
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transform-origin: 107.945px 25px;
  translate: 0px -100%;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 20px;
  padding-left: 20px;
}

.c-navigation-2__link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  padding-top: 5px;
  padding-bottom: 5px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-navigation-2__group {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-navigation-2__text {
  display: block;
  box-sizing: border-box;
}

.c-navigation-2__text-2 {
  display: block;
  box-sizing: border-box;
  opacity: 0.6;
}

.c-navigation-2__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px 40px;
  list-style-type: none;
}

.c-navigation-2__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-navigation-2__button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 8px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation-2__item {
  display: list-item;
  flex-grow: 1;
  box-sizing: border-box;
  transform-origin: 386.273px 17px;
  translate: 0px 0%;
}

.c-navigation-2__group-3 {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  max-width: 640px;
  position: relative;
  margin-right: 20px;
}

.c-navigation-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: -6px;
  left: 0px;
  z-index: 10;
  overflow-x: clip;
  overflow-y: clip;
  border-radius: 4px;
}

.c-navigation-2__list-2 {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px auto;
  list-style-type: none;
}

.c-navigation-2__link-2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 8px;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation-2__item-2 {
  display: list-item;
  box-sizing: border-box;
  transform-origin: 68.5078px 17px;
  translate: 0px 0%;
}

.c-navigation-2__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 34px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

States

No hover or focus change was observed.

Verification: flagged, the navigation-3 height did not reproduce the measured 96px after 2 correction attempts.

Anatomy

navigation-3: the component root, a <nav> (.c-navigation-3)
navigation-3-list: inner grid (.c-navigation-3__list)
navigation-3-item: inner group (.c-navigation-3__item, 10 instances)
navigation-3-link: link (.c-navigation-3__link, 10 instances), content not captured
navigation-3-text: label text, 7 characters (.c-navigation-3__text, 9 instances)
navigation-3-group: inner flex row (.c-navigation-3__group, 9 instances), content not captured

Recipe

HTML · CSS

<div class="c-navigation-3-scope">
  <nav class="c-navigation-3">
    <ul class="c-navigation-3__list">
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem i</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ip</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ipsum</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ips</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem i</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ip</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ips</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">
          <span class="c-navigation-3__text">lorem ip</span>
          <span class="c-navigation-3__group"></span>
        </a>
      </li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#"></a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-3-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-3__list {
  display: grid;
  justify-content: space-between;
  flex-grow: 1;
  gap: 4px 40px;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation-3__item {
  display: list-item;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-navigation-3__link {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  cursor: pointer;
  font-family: ShopifyInter, Helvetica, Arial, sans-serif;
  line-height: 18.2px;
  letter-spacing: -0.56px;
  text-decoration-line: none;
}

.c-navigation-3__link::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 47px;
  height: 1px;
  position: absolute;
  top: 17.1875px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF99;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: transform 0.126s linear;
}

.c-navigation-3__text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-navigation-3__group {
  display: inline-flex;
  box-sizing: border-box;
  white-space: nowrap;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

cookie-banner-3: the component root, a <button> (.c-cookie-banner-3)
cookie-banner-3-icon: icon placeholder, 32px (.c-cookie-banner-3__icon)

Recipe

HTML · CSS

<div class="c-cookie-banner-3-scope">
  <button class="c-cookie-banner-3" type="button">
    <span class="c-cookie-banner-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-cookie-banner-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-banner-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-banner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

States

No hover or focus change was observed.

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

Anatomy

cookie-banner-4: the component root, a <button> (.c-cookie-banner-4)
cookie-banner-4-icon: icon placeholder, 28px (.c-cookie-banner-4__icon)

Recipe

HTML · CSS

<div class="c-cookie-banner-4-scope">
  <button class="c-cookie-banner-4" type="button">
    <span class="c-cookie-banner-4__icon" aria-hidden="true"></span>
  </button>
</div>

.c-cookie-banner-4-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-cookie-banner-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-cookie-banner-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease, ease;
  transition-property: background-color, color;
}

.c-cookie-banner-4:hover {
  background-color: #FFFFFF;
}

.c-cookie-banner-4:focus {
  background-color: #FFFFFF;
}

States

hover (cookie-banner-4-hover): background-color #FFFFFF
focus (cookie-banner-4-focus): background-color #FFFFFF

Header (inner, 2)

Verification: desktop flagged, the render came out 4 px narrower than the original after 2 correction attempts; mobile flagged, the render came out 4 px narrower than the original after 2 correction attempts.

Variant observed on https://www.shopify.com/de/editions/spring2026.

Anatomy

header-inner-2: the component root, a <header> (.c-header-inner-2)
header-inner-2-nav: inner flex row (.c-header-inner-2__nav)
header-inner-2-nav-link: link, 27-character label (.c-header-inner-2__nav-link)
header-inner-2-nav-link-2: link (.c-header-inner-2__nav-link-2)
header-inner-2-icon: icon placeholder, 18px (.c-header-inner-2__icon)
header-inner-2-group: inner flex row (.c-header-inner-2__group)
header-inner-2-text: label text, 16 characters (.c-header-inner-2__text)
header-inner-2-text-2: label text, 12 characters (.c-header-inner-2__text-2)
header-inner-2-nav-list: inner flex row (.c-header-inner-2__nav-list)
header-inner-2-group-2: inner block (.c-header-inner-2__group-2)
header-inner-2-cta: the button-ghost-2 button (.c-header-inner-2__cta, 2 instances)
header-inner-2-text-3: label text, 8 characters (.c-header-inner-2__text-3, 2 instances)
header-inner-2-group-3: inner group (.c-header-inner-2__group-3, 2 instances)
header-inner-2-nav-item: inner group (.c-header-inner-2__nav-item)
header-inner-2-inner: inner block (.c-header-inner-2__inner)
header-inner-2-group-4: inner group (.c-header-inner-2__group-4)
header-inner-2-group-5: inner flex row (.c-header-inner-2__group-5)
header-inner-2-group-6: inner group (.c-header-inner-2__group-6)
header-inner-2-group-7: inner flex row (.c-header-inner-2__group-7), content not captured
header-inner-2-nav-list-2: inner flex row (.c-header-inner-2__nav-list-2)
header-inner-2-nav-link-3: link, 11-character label (.c-header-inner-2__nav-link-3)
header-inner-2-nav-link-4: link, 16-character label (.c-header-inner-2__nav-link-4)

Desktop recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <header class="c-header-inner-2">
    <nav class="c-header-inner-2__nav">
      <a class="c-header-inner-2__nav-link" href="#">lorem ipsum dolor sit amet</a>
      <a class="c-header-inner-2__nav-link-2" href="#">
        <span class="c-header-inner-2__icon" aria-hidden="true"></span>
        <span class="c-header-inner-2__group">
          <span class="c-header-inner-2__text">lorem ipsum dolo</span>
          <span class="c-header-inner-2__text-2">lorem ipsum</span>
        </span>
      </a>
      <ul class="c-header-inner-2__nav-list">
        <div class="c-header-inner-2__group-2">
          <button class="c-header-inner-2__cta" type="button">
            <span class="c-header-inner-2__text-3">lorem ip</span>
            <span class="c-header-inner-2__group-3"></span>
          </button>
        </div>
        <li class="c-header-inner-2__nav-item">
          <div class="c-header-inner-2__inner">
            <button class="c-header-inner-2__cta" type="button">
              <span class="c-header-inner-2__text-3">lorem</span>
              <span class="c-header-inner-2__group-3"></span>
            </button>
            <div class="c-header-inner-2__group-4">
              <div class="c-header-inner-2__group-5">
                <div class="c-header-inner-2__group-6"></div>
                <span class="c-header-inner-2__group-7"></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="c-header-inner-2__nav-list-2">
        <a class="c-header-inner-2__nav-link-3" href="#">lorem ipsum</a>
        <a class="c-header-inner-2__nav-link-4" href="#">lorem ipsum dolo</a>
      </ul>
    </nav>
  </header>
</div>

.c-header-inner-2-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-header-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 50px;
  max-width: 1680px;
  padding: 8px 12px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 10;
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transform-origin: 107.945px 25px;
  translate: 0px -100%;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 20px;
  padding-left: 20px;
}

.c-header-inner-2__nav-link-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  padding-top: 5px;
  padding-bottom: 5px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

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

.c-header-inner-2__group {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  opacity: 0.6;
}

.c-header-inner-2__nav-list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px 40px;
  list-style-type: none;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 8px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2__group-3 {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: #FFFFFF;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2__nav-item {
  display: list-item;
  flex-grow: 1;
  box-sizing: border-box;
  transform-origin: 386.273px 17px;
  translate: 0px 0%;
}

.c-header-inner-2__inner {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  max-width: 640px;
  position: relative;
  margin-right: 20px;
}

.c-header-inner-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: -6px;
  left: 0px;
  z-index: 10;
  overflow-x: clip;
  overflow-y: clip;
  border-radius: 4px;
}

.c-header-inner-2__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 46px;
  background-color: #F4F4F4;
  border-radius: 4px;
}

.c-header-inner-2__group-6 {
  display: block;
  box-sizing: border-box;
  width: 490.328px;
  height: 46px;
  padding: 8px 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: text;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: 0%;
  text-transform: none;
  text-align: start;
  appearance: none;
}

.c-header-inner-2__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 16px;
}

.c-header-inner-2__nav-list-2 {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px auto;
  list-style-type: none;
}

.c-header-inner-2__nav-link-3 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  min-height: 34px;
  padding: 5px 8px;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2__nav-link-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 34px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -1%;
  text-decoration-line: none;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2__nav-link:focus {
  outline: 1px solid #739BFF;
  outline-offset: -1px;
  translate: 0px;
}

.c-header-inner-2__nav-link-2:focus {
  outline: 1px solid #739BFF;
  outline-offset: -1px;
}

.c-header-inner-2__cta:hover {
  background-color: #FFFFFF;
  color: #000000;
}

.c-header-inner-2__nav-link-3:hover {
  background-color: #FFFFFF;
  color: #000000;
}

.c-header-inner-2__nav-link-4:hover {
  background-color: #F4F4F4;
}

Mobile anatomy

header-inner-2-mobile: the component root, a <header> (.c-header-inner-2-mobile)
header-inner-2-mobile-nav: inner flex row (.c-header-inner-2-mobile__nav)
header-inner-2-mobile-nav-link: link, 27-character label (.c-header-inner-2-mobile__nav-link)
header-inner-2-mobile-nav-link-2: link (.c-header-inner-2-mobile__nav-link-2)
header-inner-2-mobile-icon: icon placeholder, 24px (.c-header-inner-2-mobile__icon)
header-inner-2-mobile-group: inner flex column (.c-header-inner-2-mobile__group)
header-inner-2-mobile-text: label text, 16 characters (.c-header-inner-2-mobile__text)
header-inner-2-mobile-text-2: label text, 12 characters (.c-header-inner-2-mobile__text-2)
header-inner-2-mobile-nav-list: inner flex row (.c-header-inner-2-mobile__nav-list)
header-inner-2-mobile-nav-link-3: link, 16-character label (.c-header-inner-2-mobile__nav-link-3)
header-inner-2-mobile-nav-item: inner group (.c-header-inner-2-mobile__nav-item)
header-inner-2-mobile-menu-toggle: button (.c-header-inner-2-mobile__menu-toggle)
header-inner-2-mobile-group-2: inner group (.c-header-inner-2-mobile__group-2)

Mobile recipe

HTML · CSS

<div class="c-header-inner-2-mobile-scope">
  <header class="c-header-inner-2-mobile">
    <nav class="c-header-inner-2-mobile__nav">
      <a class="c-header-inner-2-mobile__nav-link" href="#">lorem ipsum dolor sit amet</a>
      <a class="c-header-inner-2-mobile__nav-link-2" href="#">
        <span class="c-header-inner-2-mobile__icon" aria-hidden="true"></span>
        <span class="c-header-inner-2-mobile__group">
          <span class="c-header-inner-2-mobile__text">lorem ipsum dolo</span>
          <span class="c-header-inner-2-mobile__text-2">lorem ipsum</span>
        </span>
      </a>
      <ul class="c-header-inner-2-mobile__nav-list">
        <a class="c-header-inner-2-mobile__nav-link-3" href="#">lorem ipsum dolo</a>
        <li class="c-header-inner-2-mobile__nav-item">
          <button class="c-header-inner-2-mobile__menu-toggle" type="button">
            <span class="c-header-inner-2-mobile__group-2"></span>
          </button>
        </li>
      </ul>
    </nav>
  </header>
</div>

.c-header-inner-2-mobile-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-header-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-inner-2-mobile__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 60px;
  max-width: 1680px;
  padding: 10px 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2-mobile__nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 10;
  background-color: #FFFFFF;
  color: #000000;
  cursor: pointer;
  transform-origin: 107.945px 30px;
  translate: 0px -100%;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 20px;
  padding-left: 20px;
}

.c-header-inner-2-mobile__nav-link-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0%;
  text-decoration-line: none;
  padding-top: 5px;
  padding-bottom: 5px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__text {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  opacity: 0.6;
}

.c-header-inner-2-mobile__nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 0px auto;
  list-style-type: none;
}

.c-header-inner-2-mobile__nav-link-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 34px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-family: Inter-Variable, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0%;
  text-decoration-line: none;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-inner-2-mobile__nav-item {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__menu-toggle {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
}

.c-header-inner-2-mobile__nav-link:focus {
  outline: 1px solid #739BFF;
  outline-offset: -1px;
  translate: 0px;
}

.c-header-inner-2-mobile__nav-link-2:focus {
  outline: 1px solid #739BFF;
  outline-offset: -1px;
}

.c-header-inner-2-mobile__nav-link-3:hover {
  background-color: #F4F4F4;
}

States

header-inner-2-nav-link focus: outline 1px solid #739BFF, outline-offset -1px, translate 0px
header-inner-2-nav-link-2 focus: outline 1px solid #739BFF, outline-offset -1px
header-inner-2-cta hover (header-inner-2-cta-hover): background-color #FFFFFF, color #000000
header-inner-2-nav-link-3 hover (header-inner-2-nav-link-3-hover): background-color #FFFFFF, color #000000
header-inner-2-nav-link-4 hover (header-inner-2-nav-link-4-hover): background-color #F4F4F4
mobile, header-inner-2-mobile-nav-link focus: outline 1px solid #739BFF, outline-offset -1px, translate 0px
mobile, header-inner-2-mobile-nav-link-2 focus: outline 1px solid #739BFF, outline-offset -1px
mobile, header-inner-2-mobile-nav-link-3 hover (header-inner-2-mobile-nav-link-3-hover): background-color #F4F4F4

Verification: desktop flagged, the footer-inner-2 height did not reproduce the measured 93px after 2 correction attempts; mobile flagged, the footer-inner-2-mobile height did not reproduce the measured 128px after 2 correction attempts.

Variant observed on https://www.shopify.com/de/editions/spring2026.

Anatomy

footer-inner-2: the component root, a <footer> (.c-footer-inner-2)
footer-inner-2-group: inner block (.c-footer-inner-2__group)
footer-inner-2-columns: inner flex row (.c-footer-inner-2__columns)
footer-inner-2-column: label text, 13 characters (.c-footer-inner-2__column)
footer-inner-2-column-2: inner flex row (.c-footer-inner-2__column-2)
footer-inner-2-link: link (.c-footer-inner-2__link, 2 instances)
footer-inner-2-text: label text, 31 characters (.c-footer-inner-2__text, 2 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-2-scope">
  <footer class="c-footer-inner-2">
    <div class="c-footer-inner-2__group"></div>
    <div class="c-footer-inner-2__columns">
      <p class="c-footer-inner-2__column">lorem ipsum d</p>
      <div class="c-footer-inner-2__column-2">
        <a class="c-footer-inner-2__link" href="#">
          <span class="c-footer-inner-2__text">lorem ipsum dolor sit amet cons</span>
        </a>
        <a class="c-footer-inner-2__link" href="#">
          <span class="c-footer-inner-2__text">lorem ipsum dolor si</span>
        </a>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-2-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-footer-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1264px;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding-right: 32px;
  padding-bottom: 40px;
  padding-left: 32px;
}

.c-footer-inner-2__group {
  display: block;
  box-sizing: border-box;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF33;
}

.c-footer-inner-2__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  box-sizing: border-box;
  padding-top: 40px;
}

.c-footer-inner-2__column {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: ShopifyInter, Helvetica, Arial, sans-serif;
  line-height: 18.2px;
  letter-spacing: -0.56px;
}

.c-footer-inner-2__column-2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  box-sizing: border-box;
}

.c-footer-inner-2__link {
  display: flex;
  box-sizing: border-box;
  color: #FFFFFFB3;
  cursor: pointer;
  font-family: ShopifyInter, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.1px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: -16px;
  margin-bottom: -16px;
}

.c-footer-inner-2__text {
  display: block;
  box-sizing: border-box;
  background-image: linear-gradient(#FFFFFF99, #FFFFFF99);
}

Mobile anatomy

footer-inner-2-mobile: the component root, a <footer> (.c-footer-inner-2-mobile)
footer-inner-2-mobile-group: inner block (.c-footer-inner-2-mobile__group)
footer-inner-2-mobile-columns: inner flex row (.c-footer-inner-2-mobile__columns)
footer-inner-2-mobile-column: label text, 13 characters (.c-footer-inner-2-mobile__column)
footer-inner-2-mobile-column-2: inner flex row (.c-footer-inner-2-mobile__column-2)
footer-inner-2-mobile-link: link (.c-footer-inner-2-mobile__link, 2 instances)
footer-inner-2-mobile-text: label text, 31 characters (.c-footer-inner-2-mobile__text, 2 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-2-mobile-scope">
  <footer class="c-footer-inner-2-mobile">
    <div class="c-footer-inner-2-mobile__group"></div>
    <div class="c-footer-inner-2-mobile__columns">
      <p class="c-footer-inner-2-mobile__column">lorem ipsum d</p>
      <div class="c-footer-inner-2-mobile__column-2">
        <a class="c-footer-inner-2-mobile__link" href="#">
          <span class="c-footer-inner-2-mobile__text">lorem ipsum dolor sit amet cons</span>
        </a>
        <a class="c-footer-inner-2-mobile__link" href="#">
          <span class="c-footer-inner-2-mobile__text">lorem ipsum dolor si</span>
        </a>
      </div>
    </div>
  </footer>
</div>

.c-footer-inner-2-mobile-scope {
  background-color: #090909;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.c-footer-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1264px;
  color: #FFFFFF;
  font-family: "National2", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding-right: 16px;
  padding-bottom: 40px;
  padding-left: 16px;
}

.c-footer-inner-2-mobile__group {
  display: block;
  box-sizing: border-box;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF33;
}

.c-footer-inner-2-mobile__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  box-sizing: border-box;
  padding-top: 40px;
}

.c-footer-inner-2-mobile__column {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: ShopifyInter, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 19.5px;
  letter-spacing: -0.15px;
}

.c-footer-inner-2-mobile__column-2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  box-sizing: border-box;
}

.c-footer-inner-2-mobile__link {
  display: flex;
  box-sizing: border-box;
  color: #FFFFFFB3;
  cursor: pointer;
  font-family: ShopifyInter, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.3px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: -16px;
  margin-bottom: -16px;
}

.c-footer-inner-2-mobile__text {
  display: block;
  box-sizing: border-box;
  background-image: linear-gradient(#FFFFFF99, #FFFFFF99);
}

States

No hover or focus change was observed.

Button, secondary (6)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-button-secondary-6-scope">
  <a class="c-button-secondary-6" href="#">lorem ipsum dolo</a>
</div>

.c-button-secondary-6-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-6 {
  display: inline-block;
  align-self: flex-start;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 550;
  line-height: 28px;
  text-decoration-line: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-6:hover {
  background-color: #D4D4D8;
}

.c-button-secondary-6:focus {
  outline: 3px solid #751BE9;
  outline-offset: 2px;
}

States

hover (button-secondary-6-hover): background-color #D4D4D8
focus: outline 3px solid #751BE9, outline-offset 2px

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-icon: icon placeholder, 32px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

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

.c-button-ghost-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-button-ghost-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

States

No hover or focus change was observed.

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-4: the component root, a <button> (.c-button-ghost-4)
button-ghost-4-icon: icon placeholder, 28px (.c-button-ghost-4__icon)

Recipe

HTML · CSS

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

.c-button-ghost-4-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
}

.c-button-ghost-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease, ease;
  transition-property: background-color, color;
}

.c-button-ghost-4:hover {
  background-color: #FFFFFF;
}

.c-button-ghost-4:focus {
  background-color: #FFFFFF;
}

States

hover (button-ghost-4-hover): background-color #FFFFFF
focus (button-ghost-4-focus): background-color #FFFFFF

Card (8)

Verification: flagged, the card-8-text-2 y did not reproduce the measured 59px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid; the recipe carries the values they all share
card-8: the component root, a <div> (.c-card-8)
card-8-title: heading, 4 characters (.c-card-8__title)
card-8-body: inner group (.c-card-8__body)
card-8-text: label text, 36 characters (.c-card-8__text)
card-8-text-2: label text, 1 characters (.c-card-8__text-2)

Recipe

HTML · CSS

<div class="c-card-8-scope">
  <div class="c-card-8">
    <h3 class="c-card-8__title">lore</h3>
    <p class="c-card-8__body">
      <span class="c-card-8__text">lorem ipsum dolor sit amet consectet</span>
      <sup class="c-card-8__text-2">l</sup>
    </p>
  </div>
</div>

.c-card-8-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-8 {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-8__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 28px;
  font-weight: 360;
  line-height: 33.6px;
  letter-spacing: -0.28px;
}

.c-card-8__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #D4D4D8;
  font-size: 14px;
  font-weight: 420;
  line-height: 18.2px;
}

.c-card-8__text-2 {
  display: inline;
  box-sizing: border-box;
  position: relative;
  top: -5.25px;
  font-size: 10.5px;
  line-height: 0px;
}

.c-card-8:hover {
  padding: 0px 28px 0px 0px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #3F3F4680;
}

.c-card-8:focus {
  padding: 0px 28px 0px 0px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #3F3F4680;
}

States

hover: padding 0px 28px 0px 0px, border-right-width 1px, border-right-style solid, border-right-color #3F3F4680
focus: padding 0px 28px 0px 0px, border-right-width 1px, border-right-style solid, border-right-color #3F3F4680

Logo

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 5 instances in a 5-column grid; the recipe carries the values they all share
logo: the component root, a <div> (.c-logo)
logo-media: image placeholder, 210x90px (.c-logo__media)

Recipe

HTML · CSS

<div class="c-logo-scope">
  <div class="c-logo">
    <span class="c-logo__media" aria-hidden="true"></span>
  </div>
</div>

.c-logo-scope {
  background-color: #02090A;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 90px;
  color: #FFFFFF;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 210px;
  height: 90px;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Toggle

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

Anatomy

toggle: the component root, a <input> (.c-toggle), 6-character placeholder

Recipe

HTML · CSS

<div class="c-toggle-scope">
  <input class="c-toggle" type="text" placeholder="lorem">
</div>

.c-toggle-scope {
  background-color: #02090A;
  color: #000000;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-toggle {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: Shopify-Inter, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-toggle:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.c-toggle:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

States

hover: top auto, right auto, bottom auto, left auto
focus: top auto, right auto, bottom auto, left auto

Do's and Don'ts

Do

Invert the pill per surface.
- On dark bands, use the white pill: button-primary-3, nav-cta and button-secondary-6 fill with on-primary (#FFFFFF) and hover to #D4D4D8.
- On light sections, use the black pill: button-primary-5 fills with primary (#000000) and hovers to #3F3F46.
- White is not reserved for one variant; button-secondary-2, cookie-consent-2 and cookie-banner-2 share it.
Size buttons by role. Large CTAs (button-primary-5, button-secondary-3, button-secondary-6) are 56px tall with button-primary-5-padding-y/-x at 12px/24px. Header CTAs (button-primary) are 44px. Compact controls (button-ghost-3, button-ghost-4) are 32px.
Use rounded.full for every Shopify-Inter CTA and chip. Reserve rounded.2xl (30px) for the compact Inter cookie pills.
Set display headlines light and tight. Use display-lg (96px/300, -1.92px) or display-md (56px/330, -1.68px), and precede them with a label-strong eyebrow.
Keep section rhythm at section-padding-y (64px) between page sections.
Space card grids with their measured gaps. card-3-grid-gap (40px) for dark stat cards; card-5-grid-gap (24px) and card-5-grid-row-gap (40px) for light feature cards.
Give every pill a visible focus outline. Use 3px solid focus-ring (#751BE9) with a 2px offset, as on button-primary and button-primary-5.
Build depth from tonal swaps first. Use surface-dark and surface-indigo sections and 1px hairlines. Use layered low-alpha shadows like the card-group-2 stack for floating UI.

Don't

Don't use accent (#36F4A4) as a button fill or a large surface. It is measured only as highlight text on dark sections.
Don't bold display type. The Shopify Inter ladder stops at 550 (label-strong, button labels), and headlines sit at 300–400.
Don't add letter-spacing to body tokens (body, body-md, body-lg). Only display tokens, label-strong, caption-tight and micro are tracked.
Don't use mid-grey surfaces on dark bands. Translucent white text (#FFFFFFB3, as in card-2-text) and tinted hairlines (#121C1E in footer-landing-columns) are the dark-mode greys.
Don't introduce square buttons. Outside the edition-page header controls (button-ghost-2, rounded.sm), buttons are pills.
Don't put one heavy blurred shadow on a card. Use the multi-layer stacks from the elevation table, and don't add backdrop blur, which no surface uses.
Don't mix focus-ring-light (#60A5FA) into Shopify-Inter buttons. It belongs to the Inter cookie controls only.

Responsive Behavior

This analysis covers two viewports only, desktop and mobile. No intermediate breakpoints were observed, and no breakpoint pixel values are known.

What changes between the two captures

Header
- The landing header keeps the same 72px height on mobile (header-landing-mobile).
- The desktop link groups collapse behind a hamburger trigger, leaving the 126×36px logo (header-landing-mobile-nav-link-image) and a single text link.
- The edition-page header grows from 50px (header-inner-2) to 60px (header-inner-2-mobile) and gains a 24px menu toggle (header-inner-2-mobile-menu-toggle).
Footer
- The desktop footer's link columns stack into a single flex column on mobile.
- Height grows from 565px (footer-landing) to 1589px (footer-landing-mobile).
- The black surface and muted-light link color are unchanged.
Content
- Per the screenshots, every card grid and split layout collapses to one column.
- Cards stack full width.
- The email capture becomes a stacked field above a full-width pill CTA.
- Headline sizes reduce, but no mobile typography tokens were captured, so the exact mobile scale is unknown.

Touch targets

Large pills (button-primary-5, button-secondary-3) are 56px tall and the header CTA (button-primary) is 44px. Both are comfortable touch targets.
The text input is 46px tall.
Compact controls (button-ghost-3, button-ghost-4, cookie-consent-2) are 32px, below the 44px guideline. On mobile, pad their hit areas rather than shrinking anything further.

Iteration Guide

Reference tokens, never raw hex. Use primary / on-primary for fills and text, surface-* for bands, and muted / muted-light for secondary text. If a new color seems needed, first check whether a zinc step or a translucent white on surface-dark already covers it.
Treat the pill as unbreakable. Every Shopify-Inter CTA uses rounded.full with 550-weight labels. Pick the height from the measured set: 56px (button-primary-5), 44px (button-primary) or 32px (button-ghost-4). Pick the fill by surface: white on dark, black on light.
Keep display type light and tight. New headlines use display-lg or display-md with their negative tracking. Never raise a display weight above 400. National 2 (hero-display, display-xl) is a campaign-only voice; don't spread it to standard pages.
Variants live in component recipes, not in new tokens. Hover fills (#D4D4D8 on white pills, #3F3F46 on black pills) and focus outlines (focus-ring, 3px, 2px offset) are defined per recipe. Copy them from button-primary / button-primary-5 rather than inventing new state colors.
Use the measured spacing tokens. section-padding-y between sections. card-3-grid-gap or card-5-grid-gap / card-5-grid-row-gap inside grids. The 12px/24px pill padding (button-primary-5-padding-y / -x) for CTAs.
Build depth by layering, not blurring. Change the section surface first, then add a 1px hairline, then a multi-layer low-alpha shadow from the elevation table. No backdrop blur.
Keep the accent scarce. accent (#36F4A4) appears only as text on dark bands. If a design needs more than one mint moment per viewport, it has drifted off-system.

Known Gaps

Partial reproduction. Many recipes did not reproduce pixel-exactly. Each is listed with its flag:
- button-primary (flagged: render matched 65% of pixels).
- button-primary-2 (flagged: 86%).
- button-secondary (flagged: 88% on hover).
- button-primary-4 (flagged: 96% on focus).
- card (flagged: 88px taller and 68px wider).
- card-2 (flagged: 84%).
- card-4 (flagged: height 213px not reproduced).
- card-6 (flagged: text y-position).
- card-8 (flagged: text y-position).
- label-chip (flagged: 68px shorter).
- video-player (flagged: 93%).
- toggle (flagged: 1% match on focus).
- Navigation and header recipes: nav, navigation, navigation-2, navigation-3, header-inner, header-inner-2, header-inner-2-mobile. header-landing and header-landing-mobile are flagged as not renderable on their own.
- All footer recipes (flagged: list or group heights not reproduced).
Not verifiable because media covers them:
- logo-list and logo (not verifiable: placed photos and media cover most of them).
- card-7 (not verifiable: placed media covers most of it).
- button-ghost-2 (not verifiable: differs only where a pattern or sprite image paints).
No container max-width or base spacing step was verified. Grid widths and column spans beyond the measured gaps are unknown.
Responsive behavior is two-viewport only. No breakpoint values, tablet layouts or mobile typography tokens were captured.
Animation and motion are not documented. The screenshots show blank bands where scroll animations had not loaded, and transition durations and easing were not measured.
Gradients and glows (green radial glows, concentric rings around the logo) live in imagery and were not extracted as tokens.
Several states were not captured.
- Hover states exist only where recipes measured them.
- Pressed, disabled and error states are missing for buttons and the input.
- Mega-menu dropdown contents were partly not captured.
Only public marketing pages were captured (home, sell, channels, the Spring 2026 edition, checkout). The authenticated Shopify admin and merchant surfaces are outside this system.
National 2 and the Inter / Inter-Variable controls were each seen on one page or embedded surface. Their role across the wider site is unconfirmed.

Extracted from Shopify’s public website, not official brand guidelines.

More like this

Browse all

Business & Professional Services

Magentix Studio

Magentix Studio dresses an AI-first product studio in editorial, art-gallery clothing. The personality is calm and craft-driven: oversized Fraunces serif headlines (often with italic accents like *come together* and *Say hello.*) sit over warm off-white surfaces, while muted sans

Software & SaaS

Figma

Figma's marketing site uses a stark black-and-white monochrome system anchored by its proprietary figmaSans variable font. The design is typographically driven — large display headings at 88px/56px with tight negative letter-spacing contrast against lightweight body copy at weight 330. CTAs use fully-rounded pill shapes (border-radius: 9999px) in solid black with white text. The layout is grid-based with a 1440px max-content width, generous 80px vertical section padding, and a clean white canvas. Depth is minimal — shadows are subtle oklch-based overlays. A lavender/purple accent (#cb9fd2) appears in the footer banner. The overall aesthetic is confident, typographically sophisticated, and brand-forward.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Shopify Design System

Button15

Card8

Extra17

Header6

Footer6

Input1

Overview

Colors

Brand & Accent

Surface

Text

Translucent text on dark surfaces

Hairlines & Borders

Focus & State Colors (component-only)

Gradients

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, primary

Button, primary (2)

Button, primary (3)

Button, secondary

Button, secondary (2)

Button, ghost

Card

Nav

Label chip

Cookie control

Cookie control (2)

Header (landing)

Footer (landing)

Card (2)

Card (3)

Logo list

Navigation

Cookie consent

Cookie consent (2)

Footer (inner)

Button, primary (4)

Button, primary (5)

Button, secondary (3)

Button, secondary (4)

Button, secondary (5)

Card (4)

Card (5)

Card (6)

Cookie banner

Cookie banner (2)

Header (inner)

Button, ghost (2)

Input

Card (7)

Video player

Navigation (2)

Navigation (3)

Cookie banner (3)

Cookie banner (4)

Header (inner, 2)

Footer (inner, 2)

Button, secondary (6)

Button, ghost (3)

Button, ghost (4)

Card (8)

Logo

Toggle

Do's and Don'ts

Do

Don't