The Onion Design System

theonion.com

PROEngine v4

Visual system

100% confidence

hero-displayDesign is intelligence made visibleRocky Compressed85.1232px / 700 / 1.1

display-lgDesign is intelligence made visibleRocky Compressed65.008px / 800 / 1

display-mdDesign is intelligence made visibleRocky Compressed49.3792px / 400 / 1.1

headline-lgDesign is intelligence made visibleRocky Condensed27.1232px / 400 / 1.1

headline-mdDesign is intelligence made visibleRocky Condensed21.008px / 400 / 1.1

headline-smDesign is intelligence made visibleRocky Condensed16px / 400 / 1.1

title-mdDesign is intelligence made visibleTablet Gothic Semi Condensed21.008px / 600 / 1.1

title-smDesign is intelligence made visibleTablet Gothic Semi Condensed16px / 400 / 1.1

kickerDesign is intelligence made visibleTablet Gothic Condensed16px / 600 / 1.1

body-lgDesign is intelligence made visibleUtopia Std Caption20.3792px / 400 / 1.5

bodyDesign is intelligence made visibleUtopia Std Caption16px / 400 / 1.5

body-smDesign is intelligence made visibleUtopia Std Caption15.7472px / 400 / 1.5

nav-linkDesign is intelligence made visibleTablet Gothic Condensed15.7472px / 500 / 1.5

buttonDesign is intelligence made visibleTablet Gothic Semi Condensed15.7472px / 700 / 1.5

labelDesign is intelligence made visibleTablet Gothic Semi Condensed16px / 400 / 1.25

captionDesign is intelligence made visibleTablet Gothic Condensed14px / 600 / 1.5

microDesign is intelligence made visibleTablet Gothic Semi Condensed13.376px / 700 / 1.5

100% confidence

button-ghost-padding-y
1px

button-ghost-padding-right
13.3851px

button-primary-padding-y
16px

input-padding-y
16px

input-padding-x
16px

input-3-padding-y
16px

input-3-padding-x
16px

input-4-padding-y
16px

input-4-padding-x
16px

section-padding-y
32px

footer-gap
32px

button-primary-padding-x
32px

footer-inner-max-width
1600px

100% confidence

xs · 2px

sm · 8px

full · 9999px

Components

Button2

98% match

ghost · desktop

At rest100% match21 measurements match

Original

Render

Hover98% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original Button, primary on the site, at rest — Original

Isolated render of Button, primary, at rest — Render

Hover100% match22 measurements match

Original Button, primary on the site, hover — Original

Isolated render of Button, primary, hover — Render

Recipe in DESIGN.md

Input4

100% match

desktop

At rest100% match26 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Hover100% match22 measurements match

Original Input on the site, hover — Original

Isolated render of Input, hover — Render

Focus100% match22 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

33% match

desktop

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

At rest100% match26 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus33% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

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

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

Hover100% match22 measurements match

Original Input (3) on the site, hover — Original

Isolated render of Input (3), hover — Render

Focus100% match22 measurements match

Original Input (3) on the site, focus — Original

Isolated render of Input (3), focus — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match26 measurements match

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

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

Focus99% match22 measurements match

Original Input (4) on the site, focus — Original

Isolated render of Input (4), focus — Render

Recipe in DESIGN.md

Card7

98% match

desktop

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

At rest98% match169 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Hover98% match18 measurements match

Original Card on the site, hover — Original

Focus98% match18 measurements match

Original Card on the site, focus — Original

At rest, instance 298% match169 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match169 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Root width is 448px, the site has 307px; Group width is 448px, the site has 307px and 2 more.

At rest100% match4 of 154 measurements differ

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

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

At rest, instance 2100% match4 of 154 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match4 of 154 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest99% match170 measurements match

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

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

At rest, instance 299% match170 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match170 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest99% match170 measurements match

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

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

At rest, instance 299% match170 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match170 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match170 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match195 measurements match

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

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

At rest, instance 2100% match195 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match195 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match195 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match195 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match195 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match187 measurements match

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

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

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match154 measurements match

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

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

Hover100% match18 measurements match

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

Isolated render of Card (7), hover — Render

Focus100% match18 measurements match

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

Isolated render of Card (7), focus — Render

At rest, instance 2100% match154 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match154 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match154 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra8

33% match

desktop

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

At rest100% match26 measurements match

Original

Render

Focus33% match22 measurements match

Original

Render

Recipe in DESIGN.md

32% match

desktop

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

At rest100% match26 measurements match

Original

Render

Focus32% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match129 measurements match

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match58 measurements match

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

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

Recipe in DESIGN.md

100% match

desktop

At rest100% match54 measurements match

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

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

Recipe in DESIGN.md

100% match

desktop

At rest100% match126 measurements match

Original Pagination on the site, at rest — Original

Isolated render of Pagination, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match126 measurements match

Original Section heading on the site, at rest — Original

Isolated render of Section heading, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match21 measurements match

Original Tag on the site, at rest — Original

Isolated render of Tag, at rest — Render

Recipe in DESIGN.md

Header2

100% match

desktop

Group 11 width is 581px, the site has 645px; Link x is 430px, the site has 397px and 1 more.

At rest100% match3 of 891 measurements differ

Original Header on the site, at rest — Original

Isolated render of Header, at rest — Render

Hovernot checked

Original Header on the site, hover — Original

Isolated render of Header, hover — Render

Hover on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Group 7 width is 260px, the site has 324px; Link x is 65px, the site has 33px and 1 more.

At rest100% match3 of 455 measurements differ

Recipe in DESIGN.md

Footer2

99% match

desktop

At rest99% match1077 measurements match

Original Footer on the site, at rest — Original

Isolated render of Footer, at rest — Render

Recipe in DESIGN.md

95% match

mobile

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

At rest95% match1218 measurements match

Recipe in DESIGN.md

DESIGN.md

The Onion

Overview

The Onion dresses satire in the full authority of a legacy broadsheet. The page is ink on paper: Ink (ink, #000000) text on Paper (surface, #FFFFFF). A single brand accent, Onion Green (primary, #006B3A), marks links, section kickers and branded blocks. The deadpan seriousness of the layout is the joke's setup, so nothing should look playful, glossy or app-like.

Type carries the hierarchy, not color or depth. Three proprietary families split the work. Rocky Compressed and Rocky Condensed set headlines at very large sizes and tight leading. Utopia Std Caption carries reading text. Tablet Gothic Condensed and Semi Condensed handle navigation, kickers, buttons and metadata. Density is newspaper-like: many stacked story modules separated by grey hairlines rather than boxed in cards.

Structure comes from rules and tonal blocks, in a few forms:

1px and 2px Hairline (hairline, #E6E6E6) rules divide masthead zones, stories and section headers.
Solid fills mark major zones: the black footer, the yellow newsletter band (highlight, #FEEB80) and pale grey panels (surface-subtle, #F3F3F3).

Shadow is almost absent: one faint shadow was observed on a single page.

Key Characteristics:

Broadsheet parody: a three-part masthead, a date and weather nav row, and repeated section modules topped by a giant compressed headline.
One brand accent, primary #006B3A, for links, kickers, active pagination and tags. Black (ink) is the primary button fill.
Serif body (Utopia Std Caption, body 16px / 1.5) set against compressed serif display (hero-display 85.1232px).
Condensed sans (Tablet Gothic) for every piece of UI chrome: nav, buttons, labels, captions.
Separation by hairlines: 1px hairline rules, plus a 2px top rule on section headers.
Square, print-like geometry. Pills (rounded.full) appear only on small chips, icons and avatars.
Letter spacing is normal across the entire type ladder; compression comes from the typefaces themselves.

Colors

The palette is a newspaper palette: black ink, white paper, grey rules, one green and one yellow. All values below are flat fills. The site uses no gradients; the only texture seen is the ghosted newsprint imagery inside promo panels, which is artwork, not CSS.

Brand & Accent

Onion Green (primary, #006B3A): the sole brand color. Use it for:
- kicker text above headlines (card-6-text), section-label text in cards (card-5-group-6) and the masthead tagline (header-logo-text);
- pagination text and the active-page fill (pagination-text-active);
- tag fills (tag);
- the hover color of ghost links (button-ghost-hover).
Never use it for body copy.
Mint (primary-tint, #94D1B4): a soft tint of the brand green. On the page it appears as accent text on avatar and opinion backgrounds. In components it is the hover border of text inputs (input, input-3).
Newsletter Yellow (highlight, #FEEB80): a full-bleed band behind the newsletter signup. Use it as a section surface only, never as text or a small accent.

Surface

Paper (surface, #FFFFFF): the page background and the fill for inputs (input, input-3, input-4).
Pale Panel (surface-subtle, #F3F3F3): ad placeholders and quiet panels. It is the only tonal step above paper.
Ink as surface (ink, #000000): the footer block (footer-group-2), the social chips in the footer (footer-item-2) and the primary button fill (button-primary).

Text

Ink (ink, #000000): headlines, body, nav links and input text. It is by far the dominant color.
Newsprint Grey (muted, #676767): dek and excerpt text (card-6-body), masthead taglines (header-text-2) and bylines and timestamps (card-5-group-7).
On Primary (on-primary, #FFFFFF): text on green fills (tag, pagination-text-active).
On Dark (on-dark, #FFFFFF): all footer text and the links in the dark footer navigation (navigation-2, navigation-3). Text on the black button uses it too.

Hairlines & Borders

Hairline (hairline, #E6E6E6) is the structural rule color:
- 1px side rules on the masthead (header-inner-2);
- a 2px top plus 1px bottom rule on section headers (section-heading-group-3, header-group-16);
- 1px story dividers (card-5-group);
- the inactive pagination fill (pagination-cta).
Slate (muted-border, #686E77): a rare border grey, seen on one page only. Keep it for secondary control outlines.
Controls take a 1px ink border (input, button-primary).
Inside the footer, dividers are translucent white #FFFFFF26 (footer-group-8). The footer social chips take a 1px primary border (footer-item-2).

Component & State Colors

Focus Blue (focus-ring, #005FCC): measured only on component focus states, never in page sampling. Reserve it for keyboard focus indication.
Small form controls switch to a 1px primary border on focus (checkbox, consent-text). Text inputs switch to a 1px primary-tint border on hover.

Typography

Font Family

Family	Role
Rocky Compressed (fallback Georgia, Times, serif)	Display headlines: the page H1, the section heading titles (`section-heading-title`), the lead story title (`card-6-title`) and the footer headings (`footer-heading`).
Rocky Condensed	Story headlines in modules and lists (`headline-lg`, `headline-md`, `headline-sm`).
Utopia Std Caption (fallback Georgia, Times, serif)	Running text, excerpts and list items (`body-lg`, `body`, `body-sm`). It is the most-used family on the site.
Tablet Gothic Condensed (fallback Helvetica Neue, Arial, sans-serif)	Nav links (`nav-link`), kickers (`kicker`), captions and pagination (`caption`).
Tablet Gothic Semi Condensed	Buttons, inputs, labels, titles in sans, footer navigation and micro text (`title-md`, `title-sm`, `button`, `label`, `micro`).

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	85.1232px	700	1.1	normal	Page H1 and section heading titles (`section-heading-title`).
`display-lg`	65.008px	800	1	normal	Lead story headline (`card-6-title`) and article H1.
`display-md`	49.3792px	400	1.1	normal	Secondary display headlines (H2).
`headline-lg`	27.1232px	400	1.1	normal	Featured module headlines.
`headline-md`	21.008px	400	1.1	normal	Standard story headlines in lists (H3 and H4).
`headline-sm`	16px	400	1.1	normal	Compact related-link headlines.
`title-md`	21.008px	600	1.1	normal	Sans module titles (H2 and H3).
`title-sm`	16px	400	1.1	normal	Small sans headings (H3).
`kicker`	16px	600	1.1	normal	Section kickers above headlines.
`body-lg`	20.3792px	400	1.5	normal	Article body and lead deks.
`body`	16px	400	1.5	normal	Default running text and list items.
`body-sm`	15.7472px	400	1.5	normal	Excerpts and secondary paragraphs.
`nav-link`	15.7472px	500	1.5	normal	Top nav items (`navigation-item`) and ghost links (`button-ghost`).
`button`	15.7472px	700	1.5	normal	Primary button label (`button-primary`) and kicker text (`card-6-text`).
`label`	16px	400	1.25	normal	Form labels and inline sans links.
`caption`	14px	600	1.5	normal	Pagination (`pagination`) and small metadata.
`micro`	13.376px	700	1.5	normal	Smallest bold labels, plus footer legal text at weight 400 (`footer-text-2`).

Principles

Weights by family. Each family keeps a narrow weight range:
- Rocky goes heavy (700 and 800) only at display sizes and stays at 400 for headline sizes.
- Utopia is always 400.
- Tablet Gothic spans 400, 500, 600 and 700. Weight 500 belongs only to nav-link.
Letter spacing. It is normal on every token. The condensed and compressed cuts provide all the tightness. Never add tracking to fake compression, and never letter-space the uppercase kickers.
Line height comes in two regimes:
- 1 to 1.1 for all headlines, titles and kickers, so stacked headlines sit tight like newsprint;
- 1.5 for reading and UI text.
- label alone uses 1.25.
Serif reads, sans navigates. Utopia is for content you read; Tablet Gothic is for content you click or scan. Rocky is for headlines only.
The scale is irregular (15.7472px, 21.008px, 27.1232px). Use the tokens as given; don't round them into a modular scale.

Note on Font Substitutes

All three families are commercial: Rocky, Tablet Gothic and Utopia Std.

Rocky Compressed and Rocky Condensed: use Roboto Serif with its width axis pulled to the narrowest setting, or Oswald if a sans compromise is acceptable. Keep line height at 1 to 1.1 and expect to reduce size by about 5% to match the set width.
Tablet Gothic Condensed and Semi Condensed: use Barlow Condensed and Barlow Semi Condensed, which match closely. Map 500, 600 and 700 directly.
Utopia Std Caption: use Source Serif 4 at optical size 'caption' or text, or keep the declared Georgia fallback. Hold line height at 1.5.

Layout

Spacing System

No base step was derived. The verified spacing tokens are:

Token	Value	Read on
`section-padding-y`	32px	The vertical rhythm between the page's sections, measured on the page itself rather than on a component.
`footer-gap`	32px	The gap of `footer-group-3`, the footer's main flex row.
`button-primary-padding-y` / `button-primary-padding-x`	16px / 32px	`button-primary`.
`button-ghost-padding-y` / `button-ghost-padding-right`	1px / 13.3851px	`button-ghost`. These text links are nearly padding-free.
`input-padding-y` / `input-padding-x`	16px / 16px	`input`.
`input-3-padding-y` / `input-3-padding-x`	16px / 16px	`input-3`.
`input-4-padding-y` / `input-4-padding-x`	16px / 16px	`input-4`.

Two values do most of the work: 16px is the control inset, and 32px is both section spacing and the larger gap.

Grid & Container

The widest measured container is the footer inner wrapper, capped at 1600px (footer-inner-max-width).
The footer's main row spaces its groups at 32px (footer-gap).
The same 32px step separates the cards of card-7 (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).

The screenshots show these page patterns:

Masthead: a centered, framed page with three zones (print promo, logo with tagline, partner logo) divided by vertical hairlines. Below it sit a thin nav row with date and weather and a scrolling newswire ticker.
Homepage: a wide main column of stacked story modules beside a narrower right sidebar holding Trending, ads, the American Voices carousel and Opinion.
Section pages: a hero story followed by rows with the thumbnail on the left and the headline and excerpt on the right.
Article pages: a narrow reading column with a sticky left share rail and a right sidebar.

Whitespace Philosophy

Whitespace is newspaper whitespace. Stories sit close together and are separated by hairline rules rather than by large gaps. Breathing room is concentrated between whole sections (section-padding-y) and around ads. Inside modules, let the tight 1.1 headline leading and the 1px dividers do the separating. Controls get a generous 16px inset (input-padding-x, button-primary-padding-y), so forms read as substantial, print-style boxes rather than compact app fields.

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: 32px (vertical padding repeated on the page sections: 2 section edges on 2 pages)
footer-gap: 32px (footer, gap of footer-group-3)
footer-inner-max-width: 1600px (footer, max width of footer-inner)
button-primary-padding-y: 16px (button-primary, vertical padding of the root)
button-primary-padding-x: 32px (button-primary, horizontal padding of the root)
button-ghost-padding-y: 1px (button-ghost, vertical padding of the root)
button-ghost-padding-right: 13.3851px (button-ghost, right padding of the root)
input-padding-y: 16px (input, vertical padding of the root)
input-padding-x: 16px (input, horizontal padding of the root)
input-3-padding-y: 16px (input-3, vertical padding of the root)
input-3-padding-x: 16px (input-3, horizontal padding of the root)
input-4-padding-y: 16px (input-4, vertical padding of the root)
input-4-padding-x: 16px (input-4, horizontal padding of the root)

Elevation & Depth

Level	Treatment	Use
Flat surface	Solid fills with no lift: `surface` #FFFFFF, `surface-subtle` #F3F3F3, `highlight` #FEEB80, and `ink` #000000 (`footer-group-2`).	Page body, ad panels, the newsletter band, the footer block.
Hairline	1px `hairline` #E6E6E6 rules. A 2px top plus 1px bottom pair on section headers (`section-heading-group-3`, `header-group-16`). Footer dividers are 1px `#FFFFFF26` (`footer-group-8`).	Masthead dividers, story separators (`card-5-group`), section header rules.
Outline	1px solid #000000 border (`button-primary`, `input`, `input-3`, `input-4`). On hover, inputs move to 1px #94D1B4. On focus, small controls move to 1px #006B3A (`checkbox`).	Form controls and the primary button.
Shadow	`rgba(18, 25, 97, 0.08) 0px 1px 4px 0px`	A single faint, low-offset shadow observed on one page. It is the system's only lift tier and is reserved for small floating elements.
Blur	None measured.	—

Shadow philosophy. Depth in The Onion's system comes from ink and rules, the way a printed page builds it.

Ranking content: use a tonal block (black footer, yellow band, pale grey panel) or a hairline frame, never a shadow.
Lift: the one measured shadow, rgba(18, 25, 97, 0.08) 0px 1px 4px 0px, is a whisper-light, cool-tinted 1px/4px drop. It is the only lift tier. Use it sparingly and only where something truly floats above the page.
Never: stack it, darken it, or apply it to cards and story modules; these stay unlifted and are divided by hairlines.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	2px	Barely-softened corners, seen once. Use it for small rectangular section-label tabs at most.
`rounded.sm`	8px	The single soft-corner step, observed across all five pages. Use it for contained media or panels that need softening.
`rounded.full`	9999px	Pills and circles: the masthead chips (`header-item`), round arrow icons next to 'Read the Latest' links, social and share icons, and columnist avatars.

The geometry is print-rectilinear. Square corners are the default for nearly everything, including:

story images and ad blocks;
section heading rules;
the email inputs (input, input-3, input-4);
the black Submit button (button-primary).

Rounding is the exception and is binary. Either a corner is essentially square, or the element is a full pill or circle (rounded.full). Pills and circles are reserved for small utility details: icons, avatars and masthead chips. Never round a story card, a headline block or a primary button into a pill.

Components

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

Button, primary

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary {
  display: inline-block;
  align-self: flex-end;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 16px 32px;
  position: relative;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  cursor: pointer;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-button-primary:hover {
  opacity: 0.5;
}

States

hover: opacity 0.5

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-button-ghost {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 1px 13.3851px 1px 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
}

.c-button-ghost:hover {
  color: #006B3A;
}

States

hover (button-ghost-hover): color #006B3A

Input

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 219px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input:hover {
  border: 1px solid #94D1B4;
}

.c-input:focus {
  outline: none;
}

States

hover: border 1px solid #94D1B4
focus: outline none

Input (2)

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

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="text" placeholder="l">
</div>

.c-input-2-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-input-2 {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-input-2:hover {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #94D1B4;
}

.c-input-2:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}

States

hover: min-width 0px, min-height 0px, top auto, right auto, bottom auto, left auto, border 1px solid #94D1B4
focus: min-width 0px, min-height 0px, top auto, right auto, bottom auto, left auto, border 1px solid #006B3A

Card

Verification: flagged, the render came out 8 px taller than the original (instance 3) 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 <li> (.c-card)
card-group: inner group (.c-card__group)
card-group-2: inner flex row (.c-card__group-2)
card-group-3: inner group (.c-card__group-3)
card-link: link (.c-card__link), content not captured
card-group-4: inner block (.c-card__group-4)
card-group-5: inner block (.c-card__group-5), content not captured
card-title: heading, 0 characters (.c-card__title), content not captured

Recipe

HTML · CSS

<div class="c-card-scope">
  <li class="c-card">
    <article class="c-card__group">
      <div class="c-card__group-2">
        <figure class="c-card__group-3">
          <a class="c-card__link" href="#"></a>
        </figure>
        <div class="c-card__group-4">
          <div class="c-card__group-5"></div>
          <h3 class="c-card__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
}

.c-card__group-2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card__link::before {
  content: "";
  display: block;
  width: 116px;
  height: 4px;
  position: absolute;
  top: 77.5156px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

.c-card:hover {
  transform-origin: 153.352px 50.9609px;
}

.c-card:focus {
  transform-origin: 153.352px 50.9609px;
}

States

hover: transform-origin 153.352px 50.9609px
focus: transform-origin 153.352px 50.9609px

Card (2)

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

Anatomy

Group: 3 instances in a 3-column grid; the recipe carries the values they all share
card-2: the component root, a <li> (.c-card-2)
card-2-group: inner flex column (.c-card-2__group)
card-2-group-2: inner group (.c-card-2__group-2)
card-2-link: link (.c-card-2__link), content not captured
card-2-group-3: inner block (.c-card-2__group-3)
card-2-group-4: inner block (.c-card-2__group-4), content not captured
card-2-title: heading, 0 characters (.c-card-2__title), content not captured

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <li class="c-card-2">
    <div class="c-card-2__group">
      <figure class="c-card-2__group-2">
        <a class="c-card-2__link" href="#"></a>
      </figure>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4"></div>
        <h3 class="c-card-2__title"></h3>
      </div>
    </div>
  </li>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-block;
  flex-shrink: 0;
  flex-basis: calc(33.3333% - 21.3333px);
  border-spacing: 0px;
  width: 306.667px;
  min-width: calc(33.3333% - 21.3333px);
  max-width: calc(33.3333% - 21.3333px);
  position: relative;
  color: #000000;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-2::before {
  content: "";
  display: block;
  width: 1px;
  height: 533px;
  position: absolute;
  top: 0px;
  right: 321.688px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-card-2__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-2__group-2 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  width: 100%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-2__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-2__link::before {
  content: "";
  display: block;
  width: 307px;
  height: 4px;
  position: absolute;
  top: 172.5px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-2__group-3 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

States

No hover or focus change was observed.

Card (3)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
card-3: the component root, a <li> (.c-card-3)
card-3-group: inner group (.c-card-3__group)
card-3-group-2: inner flex row (.c-card-3__group-2)
card-3-group-3: inner group (.c-card-3__group-3)
card-3-link: link (.c-card-3__link), content not captured
card-3-group-4: inner block (.c-card-3__group-4)
card-3-group-5: inner block (.c-card-3__group-5), content not captured
card-3-title: heading, 0 characters (.c-card-3__title), content not captured

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <li class="c-card-3">
    <article class="c-card-3__group">
      <div class="c-card-3__group-2">
        <figure class="c-card-3__group-3">
          <a class="c-card-3__link" href="#"></a>
        </figure>
        <div class="c-card-3__group-4">
          <div class="c-card-3__group-5"></div>
          <h3 class="c-card-3__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-3 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

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

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

.c-card-3__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-3__link::before {
  content: "";
  display: block;
  width: 116px;
  height: 4px;
  position: absolute;
  top: 116.281px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-3__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-3__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: label text, 4 characters (.c-navigation__item, 8 instances)
navigation-button: button, 4-character label (.c-navigation__button)
navigation-group: inner group (.c-navigation__group)
navigation-icon: icon placeholder, 9px (.c-navigation__icon)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">lore</li>
      <li class="c-navigation__item">lorem</li>
      <li class="c-navigation__item">lorem ip</li>
      <li class="c-navigation__item">lorem ipsum d</li>
      <li class="c-navigation__item">lorem</li>
      <li class="c-navigation__item">lorem i</li>
      <li class="c-navigation__item">lorem ipsum dol</li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">lore</button>
        <span class="c-navigation__group">
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </span>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.8736px;
  border-spacing: 0px;
  position: relative;
  color: #000000;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-navigation__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation__item {
  display: flex;
  align-items: center;
  position: relative;
}

.c-navigation__button {
  display: block;
  box-sizing: border-box;
  padding: 1px 13.3851px 1px 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}

.c-navigation__group {
  display: block;
  align-self: center;
  width: 9.44832px;
  height: 9.44832px;
  line-height: 0px;
  margin-left: -9.44832px;
}

.c-navigation__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  margin-top: 1.18104px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation-2: the component root, a <nav> (.c-navigation-2)
navigation-2-list: inner flex column (.c-navigation-2__list)
navigation-2-item: label text, 10 characters (.c-navigation-2__item, 8 instances)

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <ul class="c-navigation-2__list">
      <li class="c-navigation-2__item">lorem ipsu</li>
      <li class="c-navigation-2__item">lore</li>
      <li class="c-navigation-2__item">lorem</li>
      <li class="c-navigation-2__item">lorem ip</li>
      <li class="c-navigation-2__item">lorem ipsum d</li>
      <li class="c-navigation-2__item">lorem</li>
      <li class="c-navigation-2__item">lorem i</li>
      <li class="c-navigation-2__item">lorem</li>
    </ul>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #000000;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-spacing: 0px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  font-weight: 400;
  line-height: 30.5688px;
}

.c-navigation-2__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation-2__item {
  display: flex;
  align-items: center;
  position: relative;
  text-align: left;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation-3: the component root, a <nav> (.c-navigation-3)
navigation-3-list: inner flex column (.c-navigation-3__list)
navigation-3-item: label text, 6 characters (.c-navigation-3__item, 6 instances)

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">lorem</li>
      <li class="c-navigation-3__item">lorem ip</li>
      <li class="c-navigation-3__item">lorem ipsum dol</li>
      <li class="c-navigation-3__item">lorem ipsum dol</li>
      <li class="c-navigation-3__item">lorem ipsum dolor</li>
      <li class="c-navigation-3__item">lore</li>
    </ul>
  </nav>
</div>

.c-navigation-3-scope {
  background-color: #000000;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  border-spacing: 0px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  font-weight: 400;
  line-height: 30.5688px;
}

.c-navigation-3__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-navigation-3__item {
  display: flex;
  align-items: center;
  position: relative;
  text-align: left;
}

States

No hover or focus change was observed.

Header

Verification: desktop flagged, the header-group-11 width did not reproduce the measured 645px after 2 correction attempts; mobile flagged, the header-mobile-group-7 width did not reproduce the measured 324px after 2 correction attempts.

Anatomy

header: the component root, a <header> (.c-header)
header-group: inner block (.c-header__group)
header-inner: inner block (.c-header__inner)
header-group-2: inner block (.c-header__group-2)
header-inner-2: inner block (.c-header__inner-2)
header-group-3: inner flex row (.c-header__group-3)
header-inner-3: inner block (.c-header__inner-3)
header-group-4: inner flex column (.c-header__group-4, 3 instances)
header-logo: link (.c-header__logo)
header-group-5: inner group (.c-header__group-5)
header-logo-image: image placeholder, 307x84px (.c-header__logo-image)
header-logo-text: label text, 31 characters (.c-header__logo-text)
header-group-6: inner group (.c-header__group-6, 3 instances)
header-group-7: inner flex row (.c-header__group-7)
header-group-8: inner flex row (.c-header__group-8)
header-text: label text, 23 characters (.c-header__text)
header-group-9: inner flex row (.c-header__group-9)
header-group-10: inner flex row (.c-header__group-10), content not captured
header-inner-4: inner block (.c-header__inner-4)
header-group-11: inner block (.c-header__group-11)
header-link: link (.c-header__link)
header-link-image: image placeholder, 581x93px (.c-header__link-image)
header-group-12: inner group (.c-header__group-12)
header-text-2: label text, 28 characters (.c-header__text-2)
header-group-13: inner flex row (.c-header__group-13)
header-inner-5: inner block (.c-header__inner-5)
header-nav: inner flex row (.c-header__nav)
header-nav-list: inner flex row (.c-header__nav-list), content not captured
header-inner-6: inner block (.c-header__inner-6)
header-image: image placeholder, 307x82px (.c-header__image)
header-group-14: inner flex row (.c-header__group-14)
header-inner-7: inner flex row (.c-header__inner-7)
header-group-15: inner group (.c-header__group-15)
header-link-2: link, 10-character label (.c-header__link-2)
header-nav-2: inner flex row (.c-header__nav-2)
header-item: inner group (.c-header__item, 6 instances), content not captured
header-group-16: inner group (.c-header__group-16)

Desktop recipe

HTML · CSS

<div class="c-header-scope">
  <header class="c-header">
    <div class="c-header__group">
      <div class="c-header__inner">
        <div class="c-header__group-2"></div>
      </div>
      <div class="c-header__inner-2">
        <div class="c-header__group-3">
          <div class="c-header__inner-3">
            <div class="c-header__group-4">
              <a class="c-header__logo" href="#">
                <figure class="c-header__group-5">
                  <span class="c-header__logo-image" aria-hidden="true"></span>
                </figure>
                <p class="c-header__logo-text">lorem ipsum dolor sit amet cons</p>
              </a>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-7">
              <div class="c-header__group-8">
                <p class="c-header__text">lorem ipsum dolor sit a</p>
                <div class="c-header__group-9">
                  <p class="c-header__group-10"></p>
                </div>
              </div>
            </div>
          </div>
          <div class="c-header__inner-4">
            <div class="c-header__group-4">
              <div class="c-header__group-11">
                <a class="c-header__link" href="#">
                  <span class="c-header__link-image" aria-hidden="true"></span>
                </a>
              </div>
              <p class="c-header__group-12">
                <em class="c-header__text-2">lorem ipsum dolor sit amet c</em>
              </p>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-13">
              <div class="c-header__inner-5">
                <nav class="c-header__nav">
                  <ul class="c-header__nav-list"></ul>
                </nav>
              </div>
            </div>
          </div>
          <div class="c-header__inner-6">
            <div class="c-header__group-4">
              <span class="c-header__image" aria-hidden="true"></span>
            </div>
            <div class="c-header__group-6"></div>
            <div class="c-header__group-14">
              <div class="c-header__inner-7">
                <p class="c-header__group-15">
                  <a class="c-header__link-2" href="#">lorem ipsu</a>
                </p>
                <ul class="c-header__nav-2">
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                  <li class="c-header__item"></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="c-header__group-16"></div>
      </div>
    </div>
  </header>
</div>

.c-header-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding-right: 28.8px;
  padding-bottom: 16px;
  padding-left: 28.8px;
}

.c-header__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-header__group-2 {
  display: block;
  height: 16px;
}

.c-header__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  padding-right: 28.8px;
  padding-left: 28.8px;
  margin-right: auto;
  margin-left: auto;
  border-right-width: 1px;
  border-left-width: 1px;
  border-right-style: solid;
  border-left-style: solid;
  border-right-color: #E6E6E6;
  border-left-color: #E6E6E6;
}

.c-header__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-header__inner-3 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
}

.c-header__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 127px;
}

.c-header__logo {
  display: block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-header__group-5 {
  display: block;
  margin: 0px 0px 16px;
}

.c-header__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 307px;
  height: 84px;
  max-width: 100%;
  aspect-ratio: auto 752 / 206;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

.c-header__logo-text {
  display: block;
  margin: 0px 0px 12px;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  text-align: center;
}

.c-header__group-6 {
  display: block;
  margin: 16px auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E6E6E6;
  color: #E6E6E6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-header__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 32px;
}

.c-header__group-8 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header__text {
  display: block;
  margin: 0px;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-header__group-9 {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  position: relative;
  padding-left: 8px;
  margin-left: 8px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #E6E6E6;
}

.c-header__group-10 {
  display: flex;
  align-items: center;
  margin: 0px;
  cursor: pointer;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.c-header__inner-4 {
  display: block;
  flex-basis: calc(50% - 16px);
  min-width: calc(50% - 16px);
  max-width: calc(50% - 16px);
  position: relative;
}

.c-header__inner-4::before {
  content: "";
  display: block;
  width: 1px;
  height: 192px;
  position: absolute;
  top: 0px;
  right: 660.406px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-header__group-11 {
  display: block;
  box-sizing: border-box;
  line-height: 0px;
}

.c-header__link {
  display: inline-block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-header__link-image {
  display: inline-block;
  flex-shrink: 0;
  width: 581px;
  height: 93px;
  max-width: 650px;
  aspect-ratio: auto 646 / 103;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header__group-12 {
  display: block;
  margin: 0px;
  color: #676767;
  font-size: 17.1472px;
  line-height: 25.7208px;
  text-align: center;
}

.c-header__text-2 {
  display: inline;
  font-style: italic;
}

.c-header__group-13 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
  height: 32px;
}

.c-header__inner-5 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-header__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.8736px;
  position: relative;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 500;
  line-height: 23.6208px;
}

.c-header__nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-header__inner-6 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
  position: relative;
}

.c-header__inner-6::before {
  content: "";
  display: block;
  width: 1px;
  height: 192px;
  position: absolute;
  top: 0px;
  right: 321.703px;
  bottom: 0px;
  left: -16px;
  background-color: #E6E6E6;
}

.c-header__image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 307px;
  height: 82px;
  max-width: 100%;
  aspect-ratio: auto 376 / 100;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-header__group-14 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  position: relative;
}

.c-header__inner-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 768px;
  margin-left: auto;
}

.c-header__group-15 {
  display: block;
  margin: 0px;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  line-height: 23.6208px;
  white-space: nowrap;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #E6E6E6;
}

.c-header__group-15::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.c-header__link-2 {
  display: inline;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-header__nav-2 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  overflow-x: scroll;
  overflow-y: auto;
  white-space: nowrap;
  list-style-type: disc;
}

.c-header__item {
  display: block;
  color: #006B3A;
  border-radius: 9999px;
  transition: transform 0.1s ease;
}

.c-header__group-16 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

.c-header__logo:hover {
  opacity: 0.5;
}

Mobile anatomy

header-mobile: the component root, a <header> (.c-header-mobile)
header-mobile-group: inner block (.c-header-mobile__group)
header-mobile-group-2: inner group (.c-header-mobile__group-2)
header-mobile-logo: image placeholder, 390x260px (.c-header-mobile__logo)
header-mobile-group-3: inner block (.c-header-mobile__group-3)
header-mobile-inner: inner block (.c-header-mobile__inner)
header-mobile-group-4: inner block (.c-header-mobile__group-4)
header-mobile-inner-2: inner block (.c-header-mobile__inner-2)
header-mobile-group-5: inner flex row (.c-header-mobile__group-5)
header-mobile-inner-3: inner block (.c-header-mobile__inner-3, 2 instances)
header-mobile-group-6: inner flex column (.c-header-mobile__group-6)
header-mobile-group-7: inner block (.c-header-mobile__group-7)
header-mobile-link: link (.c-header-mobile__link)
header-mobile-link-image: image placeholder, 260x41px (.c-header-mobile__link-image)
header-mobile-group-8: inner group (.c-header-mobile__group-8)
header-mobile-text: label text, 28 characters (.c-header-mobile__text)
header-mobile-group-9: inner group (.c-header-mobile__group-9)
header-mobile-group-10: inner flex row (.c-header-mobile__group-10)
header-mobile-group-11: inner flex row (.c-header-mobile__group-11)
header-mobile-group-12: inner flex row (.c-header-mobile__group-12), content not captured
header-mobile-nav: inner flex row (.c-header-mobile__nav), content not captured
header-mobile-group-13: inner group (.c-header-mobile__group-13)

Mobile recipe

HTML · CSS

<div class="c-header-mobile-scope">
  <header class="c-header-mobile">
    <div class="c-header-mobile__group">
      <figure class="c-header-mobile__group-2">
        <span class="c-header-mobile__logo" aria-hidden="true"></span>
      </figure>
    </div>
    <div class="c-header-mobile__group-3">
      <div class="c-header-mobile__inner">
        <div class="c-header-mobile__group-4"></div>
      </div>
      <div class="c-header-mobile__inner-2">
        <div class="c-header-mobile__group-5">
          <div class="c-header-mobile__inner-3">
            <div class="c-header-mobile__group-6">
              <div class="c-header-mobile__group-7">
                <a class="c-header-mobile__link" href="#">
                  <span class="c-header-mobile__link-image" aria-hidden="true"></span>
                </a>
              </div>
              <p class="c-header-mobile__group-8">
                <em class="c-header-mobile__text">lorem ipsum dolor sit amet c</em>
              </p>
            </div>
            <div class="c-header-mobile__group-9"></div>
            <div class="c-header-mobile__group-10">
              <div class="c-header-mobile__inner-3">
                <div class="c-header-mobile__group-11">
                  <div class="c-header-mobile__group-12"></div>
                  <nav class="c-header-mobile__nav"></nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-header-mobile__group-13"></div>
      </div>
    </div>
  </header>
</div>

.c-header-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-header-mobile__group-2 {
  display: block;
  margin: 0px 0px 16px;
  cursor: pointer;
}

.c-header-mobile__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 390px;
  height: 260px;
  max-width: 100%;
  aspect-ratio: auto 3000 / 2000;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

.c-header-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}

.c-header-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-mobile__group-4 {
  display: block;
  height: 16px;
}

.c-header-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
  border-right-width: 1px;
  border-left-width: 1px;
  border-right-style: solid;
  border-left-style: solid;
  border-right-color: #E6E6E6;
  border-left-color: #E6E6E6;
}

.c-header-mobile__group-5 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-header-mobile__inner-3 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-header-mobile__group-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__group-7 {
  display: block;
  box-sizing: border-box;
  line-height: 0px;
}

.c-header-mobile__link {
  display: inline-block;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  text-align: center;
  transition: all 0.35s ease;
}

.c-header-mobile__link-image {
  display: inline-block;
  flex-shrink: 0;
  width: 260px;
  height: 41px;
  max-width: 650px;
  aspect-ratio: auto 646 / 103;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-mobile__group-8 {
  display: block;
  margin: 0px;
  color: #676767;
  font-size: 14.1967px;
  line-height: 21.2951px;
  text-align: center;
}

.c-header-mobile__text {
  display: inline;
  font-style: italic;
}

.c-header-mobile__group-9 {
  display: block;
  margin: 16px auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E6E6E6;
  color: #E6E6E6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-header-mobile__group-10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
  height: 32px;
}

.c-header-mobile__group-11 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__group-12 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-mobile__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10.6951px;
  position: relative;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21.3902px;
  font-weight: 500;
  line-height: 32.0853px;
}

.c-header-mobile__group-13 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 16px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

States

header-logo hover: opacity 0.5

Verification: desktop verified against the live page at desktop; mobile flagged, the render matched 95% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-group: inner block (.c-footer__group)
footer-group-2: inner block (.c-footer__group-2)
footer-inner: inner block (.c-footer__inner, 2 instances)
footer-group-3: inner flex row (.c-footer__group-3)
footer-inner-2: inner block (.c-footer__inner-2)
footer-group-4: inner group (.c-footer__group-4)
footer-logo: image placeholder, 786x131px (.c-footer__logo)
footer-group-5: inner block (.c-footer__group-5, 2 instances)
footer-columns: inner flex row (.c-footer__columns)
footer-column: inner flex column (.c-footer__column)
footer-group-6: inner block (.c-footer__group-6, 2 instances)
footer-text: label text, 33 characters (.c-footer__text, 2 instances)
footer-list: inner group (.c-footer__list)
footer-item: inner group (.c-footer__item), content not captured
footer-group-7: inner flex row (.c-footer__group-7), content not captured
footer-column-2: inner block (.c-footer__column-2)
footer-columns-2: inner flex row (.c-footer__columns-2)
footer-inner-3: inner block (.c-footer__inner-3, 4 instances)
footer-heading: heading, 8 characters (.c-footer__heading, 2 instances)
footer-nav: inner flex column (.c-footer__nav)
footer-list-2: inner flex column (.c-footer__list-2), content not captured
footer-nav-2: inner flex column (.c-footer__nav-2)
footer-list-3: inner flex column (.c-footer__list-3), content not captured
footer-inner-4: inner block (.c-footer__inner-4)
footer-group-8: inner group (.c-footer__group-8)
footer-columns-3: inner flex row (.c-footer__columns-3)
footer-columns-4: inner flex row (.c-footer__columns-4)
footer-text-2: label text, 6 characters (.c-footer__text-2, 2 instances)
footer-text-3: label text, 9 characters (.c-footer__text-3)
footer-text-4: label text, 14 characters (.c-footer__text-4, 4 instances)
footer-list-4: inner flex row (.c-footer__list-4)
footer-item-2: inner group (.c-footer__item-2, 6 instances)
footer-link: link (.c-footer__link, 6 instances)
footer-link-icon: icon placeholder, 16px (.c-footer__link-icon, 6 instances)
footer-text-5: label text, 9 characters (.c-footer__text-5, 6 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__group"></div>
    <div class="c-footer__group-2">
      <div class="c-footer__inner">
        <div class="c-footer__group-3">
          <div class="c-footer__inner-2">
            <figure class="c-footer__group-4">
              <span class="c-footer__logo" aria-hidden="true"></span>
            </figure>
            <div class="c-footer__group-5"></div>
          </div>
        </div>
        <div class="c-footer__columns">
          <div class="c-footer__column">
            <div class="c-footer__group-6">
              <p class="c-footer__text">lorem ipsum dolor sit amet consec</p>
              <ul class="c-footer__list">
                <li class="c-footer__item"></li>
              </ul>
            </div>
            <div class="c-footer__group-5"></div>
            <div class="c-footer__group-6">
              <p class="c-footer__text">lorem ipsum dolor sit amet consectetur</p>
              <div class="c-footer__group-7"></div>
            </div>
          </div>
          <div class="c-footer__column-2">
            <div class="c-footer__columns-2">
              <div class="c-footer__inner-3">
                <h2 class="c-footer__heading">lorem ip</h2>
                <nav class="c-footer__nav">
                  <ul class="c-footer__list-2"></ul>
                </nav>
              </div>
              <div class="c-footer__inner-3">
                <h2 class="c-footer__heading">lorem i</h2>
                <nav class="c-footer__nav-2">
                  <ul class="c-footer__list-3"></ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-footer__inner-4"></div>
      <div class="c-footer__group-8"></div>
      <div class="c-footer__inner">
        <div class="c-footer__columns-3">
          <div class="c-footer__inner-3">
            <div class="c-footer__columns-4">
              <p class="c-footer__text-2">lorem</p>
              <p class="c-footer__text-3">lorem ips</p>
              <p class="c-footer__text-4">lorem ipsum do</p>
              <p class="c-footer__text-4">lorem ipsum d</p>
              <p class="c-footer__text-4">lorem ipsum</p>
              <p class="c-footer__text-4">lore</p>
              <p class="c-footer__text-2">lorem ipsum dolor sit</p>
            </div>
          </div>
          <div class="c-footer__inner-3">
            <ul class="c-footer__list-4">
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem ip</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link" href="#">
                  <span class="c-footer__link-icon" aria-hidden="true"></span>
                  <span class="c-footer__text-5">lorem</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer__group {
  display: block;
  height: 64px;
}

.c-footer__group-2 {
  display: block;
  box-sizing: border-box;
  padding: 16px 28.8px 32px;
  background-color: #000000;
}

.c-footer__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__inner-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer__group-4 {
  display: block;
  width: 100%;
  margin: 0px 0px 16px;
  text-align: center;
}

.c-footer__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 786px;
  height: 131px;
  max-width: 100%;
  aspect-ratio: auto 786 / 131;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer__group-5 {
  display: block;
  height: 32px;
}

.c-footer__columns {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: calc(41.6667% - 18.6667px);
  min-width: calc(41.6667% - 18.6667px);
  max-width: calc(41.6667% - 18.6667px);
}

.c-footer__group-6 {
  display: block;
  box-sizing: border-box;
}

.c-footer__text {
  display: block;
  margin: 0px 0px 12px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  text-transform: uppercase;
  text-align: left;
}

.c-footer__list {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer__item {
  display: list-item;
}

.c-footer__group-7 {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer__column-2 {
  display: block;
  flex-basis: calc(33.3333% - 21.3333px);
  min-width: calc(33.3333% - 21.3333px);
  max-width: calc(33.3333% - 21.3333px);
  margin-left: calc(25% + 8px);
}

.c-footer__columns-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__inner-3 {
  display: block;
  flex-basis: calc(50% - 16px);
  min-width: calc(50% - 16px);
  max-width: calc(50% - 16px);
}

.c-footer__heading {
  display: block;
  margin: 0px 0px 16px;
  color: #FFFFFF;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 36.7472px;
  font-weight: 800;
  line-height: 40.4219px;
  text-align: left;
}

.c-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  line-height: 30.5688px;
}

.c-footer__list-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer__nav-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20.3792px;
  line-height: 30.5688px;
}

.c-footer__list-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer__inner-4 {
  display: block;
  height: 32px;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__group-8 {
  display: block;
  margin: 12px -28.8px 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF26;
  color: #FFFFFF26;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF26;
}

.c-footer__columns-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer__columns-4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer__text-2 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 20.064px;
  text-align: left;
}

.c-footer__text-3 {
  display: block;
  margin: 0px 0px 0px -4px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 13.376px;
  text-align: left;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer__text-4 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.376px;
  line-height: 13.376px;
  text-align: left;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer__list-4 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-footer__item-2 {
  display: block;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #006B3A;
  transition: transform 0.1s ease;
}

.c-footer__link {
  display: flex;
  align-items: center;
  padding: 4px;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

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

.c-footer__text-5 {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-group: inner block (.c-footer-mobile__group, 7 instances)
footer-mobile-group-2: inner block (.c-footer-mobile__group-2)
footer-mobile-inner: inner block (.c-footer-mobile__inner, 2 instances)
footer-mobile-group-3: inner flex row (.c-footer-mobile__group-3)
footer-mobile-inner-2: inner block (.c-footer-mobile__inner-2)
footer-mobile-group-4: inner group (.c-footer-mobile__group-4)
footer-mobile-logo: image placeholder, 358x60px (.c-footer-mobile__logo)
footer-mobile-columns: inner flex row (.c-footer-mobile__columns, 3 instances)
footer-mobile-column: inner flex column (.c-footer-mobile__column)
footer-mobile-group-5: inner block (.c-footer-mobile__group-5, 2 instances)
footer-mobile-text: label text, 33 characters (.c-footer-mobile__text, 2 instances)
footer-mobile-list: inner group (.c-footer-mobile__list)
footer-mobile-item: inner group (.c-footer-mobile__item), content not captured
footer-mobile-group-6: inner flex column (.c-footer-mobile__group-6), content not captured
footer-mobile-column-2: inner block (.c-footer-mobile__column-2, 5 instances)
footer-mobile-heading: heading, 8 characters (.c-footer-mobile__heading, 2 instances)
footer-mobile-nav: inner flex column (.c-footer-mobile__nav)
footer-mobile-list-2: inner flex column (.c-footer-mobile__list-2), content not captured
footer-mobile-nav-2: inner flex column (.c-footer-mobile__nav-2)
footer-mobile-list-3: inner flex column (.c-footer-mobile__list-3), content not captured
footer-mobile-inner-3: inner block (.c-footer-mobile__inner-3)
footer-mobile-group-7: inner group (.c-footer-mobile__group-7)
footer-mobile-columns-2: inner flex row (.c-footer-mobile__columns-2)
footer-mobile-text-2: label text, 6 characters (.c-footer-mobile__text-2, 2 instances)
footer-mobile-text-3: label text, 9 characters (.c-footer-mobile__text-3)
footer-mobile-text-4: label text, 14 characters (.c-footer-mobile__text-4, 4 instances)
footer-mobile-list-4: inner flex row (.c-footer-mobile__list-4)
footer-mobile-item-2: inner group (.c-footer-mobile__item-2, 6 instances)
footer-mobile-link: link (.c-footer-mobile__link, 6 instances)
footer-mobile-link-icon: icon placeholder, 16px (.c-footer-mobile__link-icon, 6 instances)
footer-mobile-text-5: label text, 9 characters (.c-footer-mobile__text-5, 6 instances)
footer-mobile-inner-4: inner block (.c-footer-mobile__inner-4)
footer-mobile-group-8: inner group (.c-footer-mobile__group-8)
footer-mobile-image: image placeholder, 358x88px (.c-footer-mobile__image)

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__group"></div>
    <div class="c-footer-mobile__group-2">
      <div class="c-footer-mobile__inner">
        <div class="c-footer-mobile__group-3">
          <div class="c-footer-mobile__inner-2">
            <figure class="c-footer-mobile__group-4">
              <span class="c-footer-mobile__logo" aria-hidden="true"></span>
            </figure>
            <div class="c-footer-mobile__group"></div>
          </div>
        </div>
        <div class="c-footer-mobile__columns">
          <div class="c-footer-mobile__column">
            <div class="c-footer-mobile__group-5">
              <p class="c-footer-mobile__text">lorem ipsum dolor sit amet consec</p>
              <ul class="c-footer-mobile__list">
                <li class="c-footer-mobile__item"></li>
              </ul>
            </div>
            <div class="c-footer-mobile__group"></div>
            <div class="c-footer-mobile__group-5">
              <p class="c-footer-mobile__text">lorem ipsum dolor sit amet consectetur</p>
              <div class="c-footer-mobile__group-6"></div>
            </div>
            <div class="c-footer-mobile__group"></div>
          </div>
          <div class="c-footer-mobile__column-2">
            <div class="c-footer-mobile__columns">
              <div class="c-footer-mobile__column-2">
                <h2 class="c-footer-mobile__heading">lorem ip</h2>
                <nav class="c-footer-mobile__nav">
                  <ul class="c-footer-mobile__list-2"></ul>
                </nav>
                <div class="c-footer-mobile__group"></div>
              </div>
              <div class="c-footer-mobile__column-2">
                <h2 class="c-footer-mobile__heading">lorem i</h2>
                <nav class="c-footer-mobile__nav-2">
                  <ul class="c-footer-mobile__list-3"></ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-footer-mobile__inner-3"></div>
      <div class="c-footer-mobile__group-7"></div>
      <div class="c-footer-mobile__inner">
        <div class="c-footer-mobile__columns">
          <div class="c-footer-mobile__column-2">
            <div class="c-footer-mobile__columns-2">
              <p class="c-footer-mobile__text-2">lorem</p>
              <p class="c-footer-mobile__text-3">lorem ips</p>
              <p class="c-footer-mobile__text-4">lorem ipsum do</p>
              <p class="c-footer-mobile__text-4">lorem ipsum d</p>
              <p class="c-footer-mobile__text-4">lorem ipsum</p>
              <p class="c-footer-mobile__text-4">lore</p>
              <p class="c-footer-mobile__text-2">lorem ipsum dolor sit</p>
            </div>
            <div class="c-footer-mobile__group"></div>
          </div>
          <div class="c-footer-mobile__column-2">
            <ul class="c-footer-mobile__list-4">
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem ips</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem ip</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem i</span>
                </a>
              </li>
              <li class="c-footer-mobile__item-2">
                <a class="c-footer-mobile__link" href="#">
                  <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
                  <span class="c-footer-mobile__text-5">lorem</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="c-footer-mobile__inner-4">
        <div class="c-footer-mobile__group"></div>
        <figure class="c-footer-mobile__group-8">
          <span class="c-footer-mobile__image" aria-hidden="true"></span>
        </figure>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-mobile {
  display: block;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-mobile__group {
  display: block;
  height: 32px;
}

.c-footer-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  padding: 16px 16px 32px;
  background-color: #000000;
}

.c-footer-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer-mobile__inner-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__group-4 {
  display: block;
  width: 100%;
  margin: 0px 0px 16px;
  text-align: center;
}

.c-footer-mobile__logo {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 358px;
  height: 60px;
  max-width: 100%;
  aspect-ratio: auto 786 / 131;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-mobile__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-footer-mobile__column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-footer-mobile__text {
  display: block;
  margin: 0px 0px 12px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14.1092px;
  font-weight: 700;
  line-height: 21.1638px;
  text-transform: uppercase;
  text-align: center;
}

.c-footer-mobile__list {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-mobile__item {
  display: list-item;
}

.c-footer-mobile__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-mobile__column-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-footer-mobile__heading {
  display: block;
  margin: 0px 0px 16px;
  color: #FFFFFF;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 28.5467px;
  font-weight: 800;
  line-height: 31.4014px;
  text-align: center;
}

.c-footer-mobile__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16.2737px;
  line-height: 24.4106px;
}

.c-footer-mobile__list-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer-mobile__nav-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16.2737px;
  line-height: 24.4106px;
}

.c-footer-mobile__list-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 1;
  gap: 16px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  list-style-type: none;
}

.c-footer-mobile__inner-3 {
  display: block;
  height: 32px;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-7 {
  display: block;
  margin: 12px -16px 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF26;
  color: #FFFFFF26;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF26;
}

.c-footer-mobile__columns-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.c-footer-mobile__text-2 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 13.9215px;
  text-align: center;
}

.c-footer-mobile__text-3 {
  display: block;
  margin: 0px 0px 0px -4px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 9.281px;
  text-align: center;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer-mobile__text-4 {
  display: block;
  margin: 0px;
  color: #FFFFFF;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.281px;
  line-height: 9.281px;
  text-align: center;
  padding-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #FFFFFF;
}

.c-footer-mobile__list-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-footer-mobile__item-2 {
  display: block;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #006B3A;
  transition: transform 0.1s ease;
}

.c-footer-mobile__link {
  display: flex;
  align-items: center;
  padding: 4px;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-footer-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-mobile__text-5 {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-footer-mobile__inner-4 {
  display: block;
  box-sizing: border-box;
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-8 {
  display: block;
  margin: 0px 0px 16px;
}

.c-footer-mobile__image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 358px;
  height: 88px;
  max-width: 100%;
  aspect-ratio: auto 1024 / 251;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
  cursor: pointer;
}

States

No hover or focus change was observed.

Input (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-3-scope">
  <input class="c-input-3" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-3-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 689px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input-3:hover {
  border: 1px solid #94D1B4;
}

.c-input-3:focus {
  outline: none;
}

States

hover: border 1px solid #94D1B4
focus: outline none

Card (4)

Verification: verified against the live page at desktop.

Anatomy

Group: 4 instances in a 1-column grid; the recipe carries the values they all share
card-4: the component root, a <li> (.c-card-4)
card-4-group: inner group (.c-card-4__group)
card-4-group-2: inner flex row (.c-card-4__group-2)
card-4-group-3: inner group (.c-card-4__group-3)
card-4-link: link (.c-card-4__link), content not captured
card-4-group-4: inner block (.c-card-4__group-4)
card-4-group-5: inner block (.c-card-4__group-5), content not captured
card-4-title: heading, 0 characters (.c-card-4__title), content not captured

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <li class="c-card-4">
    <article class="c-card-4__group">
      <div class="c-card-4__group-2">
        <figure class="c-card-4__group-3">
          <a class="c-card-4__link" href="#"></a>
        </figure>
        <div class="c-card-4__group-4">
          <div class="c-card-4__group-5"></div>
          <h3 class="c-card-4__title"></h3>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

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

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

.c-card-4__group-3 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-4__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-4__link::before {
  content: "";
  display: block;
  width: 200px;
  height: 4px;
  position: absolute;
  top: 133.469px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-4__group-4 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-4__group-5 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-4__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 27.1232px;
  font-weight: 400;
  line-height: 29.8355px;
}

States

No hover or focus change was observed.

Card (5)

Verification: verified against the live page at desktop.

Anatomy

Group: 6 instances in a 1-column grid; the recipe carries the values they all share
card-5: the component root, a <li> (.c-card-5)
card-5-group: inner group (.c-card-5__group)
card-5-group-2: inner flex row (.c-card-5__group-2)
card-5-group-3: inner block (.c-card-5__group-3)
card-5-group-4: inner group (.c-card-5__group-4), content not captured
card-5-group-5: inner block (.c-card-5__group-5)
card-5-group-6: inner block (.c-card-5__group-6), content not captured
card-5-title: heading, 0 characters (.c-card-5__title), content not captured
card-5-group-7: inner block (.c-card-5__group-7), content not captured

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <li class="c-card-5">
    <article class="c-card-5__group">
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3">
          <figure class="c-card-5__group-4"></figure>
        </div>
        <div class="c-card-5__group-5">
          <div class="c-card-5__group-6"></div>
          <h3 class="c-card-5__title"></h3>
          <div class="c-card-5__group-7"></div>
        </div>
      </div>
    </article>
  </li>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E6E6E6;
}

.c-card-5__group-2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-card-5__group-3 {
  display: block;
  flex-basis: calc(25% - 24px);
  min-width: calc(25% - 24px);
  max-width: calc(25% - 24px);
}

.c-card-5__group-4 {
  display: block;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-5__group-5 {
  display: block;
  flex-basis: calc(66.6667% - 10.6667px);
  min-width: calc(66.6667% - 10.6667px);
  max-width: calc(66.6667% - 10.6667px);
  position: relative;
}

.c-card-5__group-6 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-5__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 27.1232px;
  font-weight: 400;
  line-height: 29.8355px;
}

.c-card-5__group-7 {
  display: block;
  box-sizing: border-box;
  color: #676767;
  font-size: 15.7472px;
  line-height: 23.6208px;
}

States

No hover or focus change was observed.

Section heading

Verification: verified against the live page at desktop.

Anatomy

section-heading: the component root, a <header> (.c-section-heading)
section-heading-group: inner flex row (.c-section-heading__group)
section-heading-group-2: inner block (.c-section-heading__group-2)
section-heading-title: heading, 4 characters (.c-section-heading__title)
section-heading-group-3: inner group (.c-section-heading__group-3)
section-heading-group-4: inner block (.c-section-heading__group-4)

Recipe

HTML · CSS

<div class="c-section-heading-scope">
  <header class="c-section-heading">
    <div class="c-section-heading__group">
      <div class="c-section-heading__group-2">
        <h1 class="c-section-heading__title">lore</h1>
      </div>
    </div>
    <div class="c-section-heading__group-3"></div>
    <div class="c-section-heading__group-4"></div>
  </header>
</div>

.c-section-heading-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-section-heading__group-2 {
  display: block;
  flex-basis: 100%;
  min-width: 100%;
  max-width: 100%;
}

.c-section-heading__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 85.1232px;
  font-weight: 700;
  line-height: 93.6355px;
  text-align: center;
}

.c-section-heading__group-3 {
  display: block;
  height: 3px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #E6E6E6;
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 2px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #E6E6E6;
  border-bottom-color: #E6E6E6;
}

.c-section-heading__group-4 {
  display: block;
  height: 32px;
}

States

No hover or focus change was observed.

Pagination

Verification: verified against the live page at desktop.

Anatomy

pagination: the component root, a <nav> (.c-pagination)
pagination-group: inner flex row (.c-pagination__group)
pagination-text-active: label text, 1 characters (.c-pagination__text-active)
pagination-cta: link, 1-character label (.c-pagination__cta, 3 instances)
pagination-text: label text, 1 characters (.c-pagination__text)
pagination-link: link, 4-character label (.c-pagination__link)

Recipe

HTML · CSS

<div class="c-pagination-scope">
  <nav class="c-pagination">
    <div class="c-pagination__group">
      <span class="c-pagination__text-active">l</span>
      <a class="c-pagination__cta" href="#">l</a>
      <a class="c-pagination__cta" href="#">l</a>
      <span class="c-pagination__text">l</span>
      <a class="c-pagination__cta" href="#">lor</a>
    </div>
    <a class="c-pagination__link" href="#">lore</a>
  </nav>
</div>

.c-pagination-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  color: #006B3A;
  font-family: tablet-gothic-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.c-pagination__group {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  gap: 8px;
}

.c-pagination__text-active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #006B3A;
  color: #FFFFFF;
  transition: all 0.35s ease;
}

.c-pagination__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #E6E6E6;
  color: #006B3A;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-pagination__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #E6E6E6;
  transition: all 0.35s ease;
}

.c-pagination__link {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  color: #006B3A;
  cursor: pointer;
  text-decoration-line: none;
  text-align: right;
  transition: all 0.35s ease;
}

States

No hover or focus change was observed.

Checkbox

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

Anatomy

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

Recipe

HTML · CSS

<div class="c-checkbox-scope">
  <input class="c-checkbox" type="text" placeholder="l">
</div>

.c-checkbox-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-checkbox {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-checkbox:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}

States

focus: min-width 0px, min-height 0px, top auto, right auto, bottom auto, left auto, border 1px solid #006B3A

Input (4)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-4-scope">
  <input class="c-input-4" type="email" placeholder="lorem ipsum dolor sit am">
</div>

.c-input-4-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 463px;
  height: 57px;
  max-width: 100%;
  padding: 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: text;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
}

.c-input-4:focus {
  outline: none;
}

States

focus: outline none

Card (6)

Verification: verified against the live page at desktop.

Anatomy

card-6: the component root, a <header> (.c-card-6)
card-6-group: inner block (.c-card-6__group, 2 instances)
card-6-text: label text, 8 characters (.c-card-6__text)
card-6-title: heading, 68 characters (.c-card-6__title)
card-6-body: label text, 43 characters (.c-card-6__body)
card-6-group-2: inner block (.c-card-6__group-2)
card-6-group-3: inner block (.c-card-6__group-3)
card-6-group-4: inner group (.c-card-6__group-4)
card-6-media: image placeholder, 758x427px (.c-card-6__media)
card-6-group-5: inner block (.c-card-6__group-5)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <header class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__text">lorem ip</div>
      <h1 class="c-card-6__title">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</h1>
      <p class="c-card-6__body">lorem ipsum dolor sit amet consectetur adip</p>
      <div class="c-card-6__group-2"></div>
    </div>
    <div class="c-card-6__group">
      <div class="c-card-6__group-3">
        <figure class="c-card-6__group-4">
          <span class="c-card-6__media" aria-hidden="true"></span>
        </figure>
      </div>
      <div class="c-card-6__group-5"></div>
    </div>
  </header>
</div>

.c-card-6-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

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

.c-card-6__text {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-6__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-compressed, Georgia, Times, "Times New Roman", serif;
  font-size: 65.008px;
  font-weight: 800;
  line-height: 65.008px;
}

.c-card-6__body {
  display: block;
  box-sizing: border-box;
  margin: 8px 0px 0px;
  color: #676767;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 27.1232px;
  line-height: 40.6848px;
}

.c-card-6__group-2 {
  display: block;
  height: 32px;
}

.c-card-6__group-3 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-card-6__group-4 {
  display: block;
  margin: 0px 0px 16px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-6__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 758px;
  height: 427px;
  max-width: 100%;
  aspect-ratio: auto 1600 / 900;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: bottom;
  background-color: currentcolor;
}

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

States

No hover or focus change was observed.

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: 4 instances in a 4-column grid, 32px gap; the recipe carries the values they all share
card-7: the component root, a <li> (.c-card-7)
card-7-group: inner flex column (.c-card-7__group)
card-7-group-2: inner group (.c-card-7__group-2)
card-7-link: link (.c-card-7__link), content not captured
card-7-group-3: inner block (.c-card-7__group-3)
card-7-group-4: inner block (.c-card-7__group-4), content not captured
card-7-title: heading, 0 characters (.c-card-7__title), content not captured

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <li class="c-card-7">
    <div class="c-card-7__group">
      <figure class="c-card-7__group-2">
        <a class="c-card-7__link" href="#"></a>
      </figure>
      <div class="c-card-7__group-3">
        <div class="c-card-7__group-4"></div>
        <h3 class="c-card-7__title"></h3>
      </div>
    </div>
  </li>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-7 {
  display: list-item;
  border-spacing: 0px;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-7__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-7__group-2 {
  display: block;
  flex-grow: 1.2;
  flex-basis: 0%;
  width: 100%;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-7__link {
  display: block;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #000000;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

.c-card-7__link::before {
  content: "";
  display: block;
  width: 307px;
  height: 4px;
  position: absolute;
  top: 204.469px;
  right: 0px;
  bottom: -4px;
  left: 0px;
  z-index: 99;
  transition: all 0.15s linear;
}

.c-card-7__group-3 {
  display: block;
  flex-grow: 1.8;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-card-7__group-4 {
  display: block;
  box-sizing: border-box;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15.7472px;
  font-weight: 700;
  line-height: 23.6208px;
  margin-bottom: 8px;
}

.c-card-7__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: rocky-condensed, Georgia, Times, "Times New Roman", serif;
  font-size: 21.008px;
  font-weight: 400;
  line-height: 23.1088px;
}

.c-card-7:hover {
  position: static;
}

.c-card-7:focus {
  position: static;
}

States

hover: position static
focus: position static

Tag

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-tag-scope">
  <a class="c-tag" href="#">lorem</a>
</div>

.c-tag-scope {
  background-color: #FFFFFF;
  color: #006B3A;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.c-tag {
  display: inline-block;
  border-spacing: 0px;
  padding: 4px 16px;
  background-color: #006B3A;
  color: #FFFFFF;
  cursor: pointer;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration-line: none;
  transition: all 0.35s ease;
}

States

No hover or focus change was observed.

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

Anatomy

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

Recipe

HTML · CSS

<div class="c-consent-text-scope">
  <input class="c-consent-text" type="text" placeholder="l">
</div>

.c-consent-text-scope {
  background-color: #FEEB80;
  color: #000000;
  font-family: utopia-std-caption, Georgia, Times, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.c-consent-text {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  max-width: 100%;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  cursor: default;
  font-family: tablet-gothic-semi-condensed, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.35s ease-in-out;
  margin-top: 3px;
  margin-right: 3px;
  margin-left: 4px;
}

.c-consent-text:focus {
  min-width: 0px;
  min-height: 0px;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #006B3A;
}

States

focus: min-width 0px, min-height 0px, top auto, right auto, bottom auto, left auto, border 1px solid #006B3A

Do's and Don'ts

Do

Do use Onion Green (primary, #006B3A) for kickers, section-label text and pagination. Kickers include card-6-text and section labels include card-5-group-6. Pagination uses green as text (pagination) and as the active fill (pagination-text-active).
Do fill primary actions with black. button-primary uses ink #000000 with on-dark text, a 1px #000000 border and a 57px height. The same black fill also covers the footer (footer-group-2) and the footer social chips (footer-item-2), so black is the brand's heavy block color rather than an action-only color.
Do keep form controls on the shared 57px height. It is used by button-primary, input, input-3 and input-4, all with the 16px inset (input-padding-x, input-padding-y).
Do separate stories and sections with hairlines: 1px hairline #E6E6E6 (card-5-group), and the 2px top plus 1px bottom pair on section headers (section-heading-group-3).
Do space page sections on the 32px rhythm (section-padding-y). Cap wide containers at 1600px (footer-inner-max-width), as the 807px-tall footer does.
Do set headlines in Rocky with tight leading: hero-display at 1.1, display-lg at 1. Set reading text in body (Utopia, 1.5).
Do stick to the observed radii: rounded.sm 8px and rounded.xs 2px, plus rounded.full for pills and circles such as header-item.
Do reserve the single shadow tier, rgba(18, 25, 97, 0.08) 0px 1px 4px 0px, for genuinely floating elements.

Don't

Don't introduce a second accent hue. Green (primary), its tint (primary-tint) and the yellow band (highlight) are the whole accent set.
Don't add letter spacing. Every typography token is normal, and compression comes from the condensed cuts.
Don't set body copy in Tablet Gothic or UI chrome in Utopia. Sans is for navigation (nav-link), buttons (button) and labels (label) only.
Don't box stories in shadowed cards. Cards (card-5, card-6) are unlifted and sit on surface with hairline dividers.
Don't pill-round buttons or inputs. button-primary and the inputs stay square-cornered.
Don't use focus-ring #005FCC or primary-tint #94D1B4 as decorative color. They are state colors for focus and hover borders.
Don't round the irregular type sizes (15.7472px, 21.008px) to a tidy scale. Use the tokens.

Responsive Behavior

Two-Viewport Analysis

This extraction captured one desktop and one mobile viewport only. No breakpoint values were observed, so everything below compares those two states.

Collapsing Behavior

Masthead: the three-zone desktop masthead (header, 246px tall) becomes a stacked mobile header (header-mobile, 466px tall; flagged: the header-mobile-group-7 width did not reproduce the measured 324px after 2 correction attempts).
- A full-width print-promo image sits on top (header-mobile-logo, 390x260px).
- The logo image shrinks to 260x41px (header-mobile-link-image).
- The tagline drops from 17.1472px (header-text-2) to 14.1967px (header-mobile-text).
- The nav row collapses to a 'Menu' link.
Main grid: the main column and sidebar collapse into a single column of stacked modules with full-width images. The newsletter input and button run full-width.
Footer: the two-column footer stacks vertically and grows from 807px (footer) to 1676px (footer-mobile; flagged: the render matched 95% of the original pixels, below the 96% required after 2 correction attempts).
- Footer headings scale from 36.7472px (footer-heading) to 28.5467px (footer-mobile-heading).
- Footer legal text drops from 13.376px (footer-text-2) to 9.281px (footer-mobile-text-2).
- The footer logo narrows from 786x131px (footer-logo) to 358x60px (footer-mobile-logo).

Touch Targets

Form controls and the primary button keep a 57px height (input, button-primary), comfortably touch-sized. Two targets are smaller:

tag chips are 32px tall.
Footer social links are 16px icons with only 4px padding (footer-mobile-link). When rebuilding, pad these to a larger hit area without changing the visual icon size.

Iteration Guide

Reference tokens, not hex. Write primary, ink, hairline, surface-subtle, highlight rather than raw values. focus-ring and primary-tint are state colors for focus and hover borders; keep them out of static layouts.
Keep the three-family split intact.
- Rocky for headlines: hero-display through headline-sm.
- Utopia for reading: body-lg, body, body-sm.
- Tablet Gothic for UI chrome: nav-link, button, label, kicker, caption, micro.
A new text style must fit one of these roles before it gets a new token.
Never add letter spacing or shadows to create emphasis. Emphasis comes from Rocky size and weight (700 or 800 at display sizes only) and from green kickers. The one shadow, rgba(18, 25, 97, 0.08) 0px 1px 4px 0px, is reserved for floating elements.
Divide with rules. New modules get a section heading: a hero-display title over a 2px top plus 1px bottom hairline pair, as in section-heading. Stories inside a module are split by 1px hairline lines, as in card-5.
Controls share one geometry. Use 57px height, a 1px ink border, 16px inset (input-padding-x) and square corners. Primary actions are black-filled (button-primary); secondary actions are text links in nav-link that turn primary on hover (button-ghost-hover).
Radii are limited to rounded.xs, rounded.sm and rounded.full. Full rounding goes only on chips, icons and avatars.
Spacing comes from the measured steps. Use 32px between sections (section-padding-y, footer-gap) and 16px inside controls. Cap wide containers at footer-inner-max-width.

Known Gaps

Coverage: all five sampled pages were captured (home, news, local and two articles). No values were dropped by grounding. Membership, account and paywalled surfaces were not reached.
Flagged recipes did not reproduce exactly:
- header (flagged: the header-group-11 width did not reproduce the measured 645px after 2 correction attempts)
- header-mobile (flagged: the header-mobile-group-7 width did not reproduce the measured 324px)
- footer-mobile (flagged: the render matched 95% of the original pixels, below the 96% required)
- card (flagged: the render came out 8 px taller than the original)
- card-2 (flagged: the width did not reproduce the measured 307px)
- input-2, checkbox and consent-text (flagged: renders matched 32–33% of original pixels on focus)
Unverifiable: card-7 (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).
Card contents: most card recipes report the link, title and label content as not captured. Card headline styling is therefore inferred from the page-level typography tokens, not from card recipes.
Shadow: the single shadow was seen on one page only, and the element carrying it was not tied to any recipe.
Radii: rounded.xs (2px) was observed only once, and radius values for the section-label tabs and avatars were not tied to recipes.
States:
- Hover was measured only for button-ghost (text turns primary) and the inputs (border turns primary-tint).
- The button-primary hover and header-logo hover were recorded as existing, but their changes were not captured.
- Active and pressed states are unknown.
- Focus-ring usage of focus-ring #005FCC was seen only on components, never in page sampling.
Motion: the scrolling newswire ticker, the American Voices carousel and the sticky share rail were seen in screenshots, but their animation timing and sticky offsets were not measured.
Responsive: only two viewports were captured, so intermediate breakpoints and tablet layouts are unknown.
Licensed fonts: Rocky, Tablet Gothic and Utopia Std were not verified for rendering. The substitutes are recommendations, not measurements.

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

More like this

Browse all

Media, Content & Entertainment · Editorial & Blog

WIRED

WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic palette. Black (#000000) dominates at 2961 hits, anchoring text, borders, icons, and interactive states. White (#ffffff) provides the primary surface. Accent color is used sparingly — only #057dbc appears as a brand blue for subscribe CTAs. The layout uses a structured multi-column story grid with tight 8px base spacing, flat surfaces with no box shadows, and minimal border-radius (4px standard). Typography is the primary differentiator: editorial body uses Breve Text at 19px, section labels use WIRED Mono in uppercase with tracked letterspacing, and display headlines use WiredDisplay. The overall aesthetic is authoritative, information-dense, and read-flow-first.

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.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

The Onion Design System

Button2

Input4

Card7

Extra8

Header2

Footer2

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, primary

Button, ghost

Input

Input (2)

Card

Card (2)

Card (3)

Navigation

Navigation (2)

Navigation (3)

Header

Footer

Input (3)

Card (4)

Card (5)

Section heading

Pagination

Checkbox

Input (4)

Card (6)

Card (7)

Tag

Consent text

Do's and Don'ts

Do

Don't

Responsive Behavior

Two-Viewport Analysis

Collapsing Behavior

Touch Targets

Iteration Guide

Known Gaps

More like this

WIRED

Airbnb

IKEA

Notion

Railway

Shopify