The Onion Tasarım Sistemi

PROMotor v4

The Onion'un tasarım sistemi, dijitalleştirilmiş bir satirik gazete gibi: siyah renkli, kalın ve dar gotik başlıklar; bölüm etiketleri, trend rozetleri ve CTA'lar için kullanılan ayırt edici orman yeşili marka vurgusu (#006b3a); tüm bunların sert beyaz/açık gri zemin üzerinde yer alması. Tipografi temel tasarım aracı: başlıklarda Adobe Fonts'tan dar ve yarı dar grotesk yazı tipleri (tablet-gothic, rocky-condensed) baskın, gövde metninde ise utopia-std-caption kullanılıyor. Yerleşim bilgi yoğunluğu yüksek; sıkı kart ızgaraları, makale ayırıcı olarak alt kenarlıklar ve yapısal öğelerde neredeyse sıfır köşe yuvarlaklığı var. Yükseklik efekti minimal: yalnızca katmanlı öğelerde birkaç ince gölge kullanılıyor.

Görsel sistem

%100 güven

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 güven

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 güven

xs · 2px

sm · 8px

full · 9999px

Bileşenler

Buttons2

%98 eşleşme

ghost · desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

Hover%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

primary · desktop

Durağan%100 eşleşme25 ölçüm eşleşiyor

Sitedeki orijinal Button, primary, durağan — Orijinal

Button, primary için ayrı render, durağan — Render

Hover%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Button, primary, hover — Orijinal

Button, primary için ayrı render, hover — Render

DESIGN.md içindeki tarif

Inputs4

%100 eşleşme

desktop

Durağan%100 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Input, durağan — Orijinal

Input için ayrı render, durağan — Render

Hover%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input, hover — Orijinal

Focus%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input, focus — Orijinal

DESIGN.md içindeki tarif

%33 eşleşme

desktop

Focus durumunda, siteye %33 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme26 ölçüm eşleşiyor

Orijinal

Render

Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%33 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Input (3), durağan — Orijinal

Input (3) için ayrı render, durağan — Render

Hover%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input (3), hover — Orijinal

Input (3) için ayrı render, hover — Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input (3), focus — Orijinal

Input (3) için ayrı render, focus — Render

DESIGN.md içindeki tarif

%99 eşleşme

desktop

Durağan%99 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Input (4), durağan — Orijinal

Input (4) için ayrı render, durağan — Render

Focus%99 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input (4), focus — Orijinal

Input (4) için ayrı render, focus — Render

DESIGN.md içindeki tarif

Cards7

%98 eşleşme

desktop

Siteye %100 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%98 eşleşme169 ölçüm eşleşiyor

Sitedeki orijinal Card, durağan — Orijinal

Hover%98 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, hover — Orijinal

Focus%98 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, focus — Orijinal

Durağan, örnek 2%98 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Kök width değeri 448px, sitede ise 307px; Group width değeri 448px, sitede ise 307px ve 2 tane daha.

Durağan%100 eşleşme154 ölçümden 4 tanesi farklı

Sitedeki orijinal Card (2), durağan — Orijinal

Card (2) için ayrı render, durağan — Render

Durağan, örnek 2%100 eşleşme154 ölçümden 4 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme154 ölçümden 4 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%99 eşleşme

desktop

Durağan%99 eşleşme170 ölçüm eşleşiyor

Sitedeki orijinal Card (3), durağan — Orijinal

Card (3) için ayrı render, durağan — Render

Durağan, örnek 2%99 eşleşme170 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme170 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%99 eşleşme

desktop

Durağan%99 eşleşme170 ölçüm eşleşiyor

Sitedeki orijinal Card (4), durağan — Orijinal

Card (4) için ayrı render, durağan — Render

Durağan, örnek 2%99 eşleşme170 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%99 eşleşme170 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme170 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme195 ölçüm eşleşiyor

Sitedeki orijinal Card (5), durağan — Orijinal

Card (5) için ayrı render, durağan — Render

Durağan, örnek 2%100 eşleşme195 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme195 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme195 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%100 eşleşme195 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 6%100 eşleşme195 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme187 ölçüm eşleşiyor

Sitedeki orijinal Card (6), durağan — Orijinal

Card (6) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

Doğrulanamaz

desktop

Doğrulanamaz: sayfanın içine yerleştirdiği fotoğraflar, medya veya reklamlar öğenin çoğunu kaplıyor ve başka hiçbir şey farklı değil, bu yüzden karşılaştırma tarif hakkında bir şey söylemiyor.

Durağan%100 eşleşme154 ölçüm eşleşiyor

Sitedeki orijinal Card (7), durağan — Orijinal

Card (7) için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (7), hover — Orijinal

Card (7) için ayrı render, hover — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (7), focus — Orijinal

Card (7) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme154 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme154 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme154 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Extras8

%33 eşleşme

desktop

Focus durumunda, siteye %33 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme26 ölçüm eşleşiyor

Orijinal

Render

Focus%33 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%32 eşleşme

desktop

Focus durumunda, siteye %32 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme26 ölçüm eşleşiyor

Orijinal

Render

Focus%32 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme129 ölçüm eşleşiyor

Sitedeki orijinal Navigation, durağan — Orijinal

Navigation için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme58 ölçüm eşleşiyor

Sitedeki orijinal Navigation (2), durağan — Orijinal

Navigation (2) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme54 ölçüm eşleşiyor

Sitedeki orijinal Navigation (3), durağan — Orijinal

Navigation (3) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme126 ölçüm eşleşiyor

Sitedeki orijinal Pagination, durağan — Orijinal

Pagination için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme126 ölçüm eşleşiyor

Sitedeki orijinal Section heading, durağan — Orijinal

Section heading için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Sitedeki orijinal Tag, durağan — Orijinal

DESIGN.md içindeki tarif

Headers2

%100 eşleşme

desktop

Group 11 width değeri 581px, sitede ise 645px; Link x değeri 430px, sitede ise 397px ve 1 tane daha.

Durağan%100 eşleşme891 ölçümden 3 tanesi farklı

Sitedeki orijinal Header, durağan — Orijinal

Header için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header, hover — Orijinal

logo üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Group 7 width değeri 260px, sitede ise 324px; Link x değeri 65px, sitede ise 33px ve 1 tane daha.

Durağan%100 eşleşme455 ölçümden 3 tanesi farklı

DESIGN.md içindeki tarif

Footers2

%99 eşleşme

desktop

Durağan%99 eşleşme1077 ölçüm eşleşiyor

Sitedeki orijinal Footer, durağan — Orijinal

Footer için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%95 eşleşme

mobile

Siteye %95 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%95 eşleşme1218 ölçüm eşleşiyor

DESIGN.md içindeki tarif

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.

Buttons

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

Inputs

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

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

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

Cards

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.

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.

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

Navigation

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.

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

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.

Bu DESIGN.md dosyası, AI kodlama ajanlarının onu okuduğu dil olan İngilizcedir.

The Onion web sitesinin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Başka bir sitenin fontlarını kontrol et

Benzerleri

Tümüne göz at

Medya, İçerik ve Eğlence · Editorial & Blog

WIRED

WIRED'ın tasarım sistemi, özel bir yazı tipi sistemi (Breve Text, WIRED Mono, WiredDisplay, Apercu) etrafında kurulmuş, yüksek kontrastlı ve editoryal odaklı bir tek renkli çerçevedir ve neredeyse hiç renk kullanmaz. Siyah (#000000), 2961 kullanımla baskındır; metinleri, kenarlıkları, ikonları ve etkileşimli durumları belirler. Birincil yüzey beyaz (#ffffff) tonundadır. Vurgu rengi çok seyrek kullanılır: abone ol çağrılarında marka mavisi olarak yalnızca #057dbc görülür. Yerleşim, sıkı 8px temel boşluklarla düzenlenmiş çok sütunlu bir haber ızgarasına dayanır; yüzeyler düzdür, gölge yoktur ve standart köşe yuvarlaklığı 4px'tir. Tipografi temel ayırt edici unsurdur: editoryal gövde metni 19px Breve Text ile, bölüm etiketleri büyük harfli ve harf aralığı açılmış WIRED Mono ile, büyük başlıklar ise WiredDisplay ile yazılır. Genel izlenim otoriter, bilgi yoğun ve önce okuma akışını gözeten bir estetiktir.

Seyahat, Ulaşım ve Lojistik

Airbnb

Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.

Ticaret ve Perakende · E-commerce Store

IKEA

IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.

Yazılım ve SaaS · Productivity & Notes

Notion

Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.

Geliştirici ve Altyapı · Developer Tools & IDEs

Railway

Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.

İş ve Profesyonel Hizmetler

Shopify

Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.

Benzer paletler

Supabase

The Onion Tasarım Sistemi

Bileşenler

Buttons2

Inputs4

Cards7

Extras8

Headers2

Footers2

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

Buttons

Inputs

Cards

Navigation

Header

Footer

Section heading

Pagination

Checkbox

Tag

Consent text

Do's and Don'ts

Do

Don't

Responsive Behavior

Two-Viewport Analysis

Collapsing Behavior

Touch Targets

Iteration Guide

Known Gaps

Benzerleri

WIRED

Airbnb

IKEA

Notion

Railway

Shopify

Benzer paletler