Design system The Onion

PROSilnik v4

The Onion to zdigitalizowany satyryczny dziennik: pogrubione, wąskie nagłówki gotyckie w kolorze czarnym, charakterystyczny leśny zielony akcent marki (#006b3a) używany w etykietach sekcji, odznakach trendów i wezwaniach do działania, a wszystko to na surowym, białym lub jasnoszarym tle. Typografia jest głównym narzędziem projektowym: nagłówki dominują wąskie i półwąskie groteski z Adobe Fonts (tablet-gothic, rocky-condensed), a tekst artykułów opiera się na utopia-std-caption. Układ jest gęsty informacyjnie, z ciasnymi siatkami kart, separatorami artykułów w postaci dolnych obramowań i niemal zerowymi promieniami zaokrągleń elementów konstrukcyjnych. Elewacja jest minimalna: kilka subtelnych cieni występuje wyłącznie w nakładkach.

System wizualny

100% pewność

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% pewność

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% pewność

xs · 2px

sm · 8px

full · 9999px

Komponenty

Buttons2

98% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

HoverZgodność 98%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

primary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 25

Oryginalny Button, primary na stronie, spoczynek — Oryginał

Osobny render: Button, primary, spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 22

Oryginalny Button, primary na stronie, hover — Oryginał

Osobny render: Button, primary, hover — Render

Receptura w DESIGN.md

Inputs4

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 26

Oryginalny Input na stronie, spoczynek — Oryginał

Osobny render: Input, spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 22

Oryginalny Input na stronie, hover — Oryginał

FocusZgodność 100%Zgodne pomiary: 22

Oryginalny Input na stronie, focus — Oryginał

Receptura w DESIGN.md

33% zgodność

desktop

Przy focus, zgodność renderu ze stroną to 33%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 26

Oryginał

Render

HoverZgodność 100%Zgodne pomiary: 22

Oryginał

Render

FocusZgodność 33%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 26

Oryginalny Input (3) na stronie, spoczynek — Oryginał

Osobny render: Input (3), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 22

Oryginalny Input (3) na stronie, hover — Oryginał

Osobny render: Input (3), hover — Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginalny Input (3) na stronie, focus — Oryginał

Osobny render: Input (3), focus — Render

Receptura w DESIGN.md

99% zgodność

desktop

SpoczynekZgodność 99%Zgodne pomiary: 26

Oryginalny Input (4) na stronie, spoczynek — Oryginał

Osobny render: Input (4), spoczynek — Render

FocusZgodność 99%Zgodne pomiary: 22

Oryginalny Input (4) na stronie, focus — Oryginał

Osobny render: Input (4), focus — Render

Receptura w DESIGN.md

Cards7

98% zgodność

desktop

Zgodność renderu ze stroną to 100%, poniżej progu 96%.

SpoczynekZgodność 98%Zgodne pomiary: 169

Oryginalny Card na stronie, spoczynek — Oryginał

HoverZgodność 98%Zgodne pomiary: 18

Oryginalny Card na stronie, hover — Oryginał

FocusZgodność 98%Zgodne pomiary: 18

Oryginalny Card na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 98%Zgodne pomiary: 169

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 169

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Element główny width: 448px, na stronie 307px; Group width: 448px, na stronie 307px i jeszcze 2.

SpoczynekZgodność 100%Różne pomiary: 4 z 154

Oryginalny Card (2) na stronie, spoczynek — Oryginał

Osobny render: Card (2), spoczynek — Render

Spoczynek, wystąpienie 2Zgodność 100%Różne pomiary: 4 z 154

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Różne pomiary: 4 z 154

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

99% zgodność

desktop

SpoczynekZgodność 99%Zgodne pomiary: 170

Oryginalny Card (3) na stronie, spoczynek — Oryginał

Osobny render: Card (3), spoczynek — Render

Spoczynek, wystąpienie 2Zgodność 99%Zgodne pomiary: 170

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 170

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

99% zgodność

desktop

SpoczynekZgodność 99%Zgodne pomiary: 170

Oryginalny Card (4) na stronie, spoczynek — Oryginał

Osobny render: Card (4), spoczynek — Render

Spoczynek, wystąpienie 2Zgodność 99%Zgodne pomiary: 170

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 99%Zgodne pomiary: 170

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 170

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 195

Oryginalny Card (5) na stronie, spoczynek — Oryginał

Osobny render: Card (5), spoczynek — Render

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 195

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 195

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 195

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 5Zgodność 100%Zgodne pomiary: 195

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 6Zgodność 100%Zgodne pomiary: 195

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 187

Oryginalny Card (6) na stronie, spoczynek — Oryginał

Osobny render: Card (6), spoczynek — Render

Receptura w DESIGN.md

Nie do sprawdzenia

desktop

Nie do sprawdzenia: zdjęcia, multimedia lub reklamy umieszczone w nim przez stronę zakrywają większość elementu, a poza tym nic się nie różni, więc porównanie nic nie mówi o recepturze.

SpoczynekZgodność 100%Zgodne pomiary: 154

Oryginalny Card (7) na stronie, spoczynek — Oryginał

Osobny render: Card (7), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card (7) na stronie, hover — Oryginał

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Card (7) na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 154

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 154

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 154

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Extras8

33% zgodność

desktop

Przy focus, zgodność renderu ze stroną to 33%, poniżej progu 96%.

SpoczynekZgodność 100%Zgodne pomiary: 26

Oryginał

Render

FocusZgodność 33%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

32% zgodność

desktop

Przy focus, zgodność renderu ze stroną to 32%, poniżej progu 96%.

SpoczynekZgodność 100%Zgodne pomiary: 26

Oryginał

Render

FocusZgodność 32%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 129

Oryginalny Navigation na stronie, spoczynek — Oryginał

Osobny render: Navigation, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 58

Oryginalny Navigation (2) na stronie, spoczynek — Oryginał

Osobny render: Navigation (2), spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 54

Oryginalny Navigation (3) na stronie, spoczynek — Oryginał

Osobny render: Navigation (3), spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 126

Oryginalny Pagination na stronie, spoczynek — Oryginał

Osobny render: Pagination, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 126

Oryginalny Section heading na stronie, spoczynek — Oryginał

Osobny render: Section heading, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginalny Tag na stronie, spoczynek — Oryginał

Receptura w DESIGN.md

Headers2

100% zgodność

desktop

Group 11 width: 581px, na stronie 645px; Link x: 430px, na stronie 397px i jeszcze 1.

SpoczynekZgodność 100%Różne pomiary: 3 z 891

Oryginalny Header na stronie, spoczynek — Oryginał

Osobny render: Header, spoczynek — Render

Hoverniesprawdzony

Oryginalny Header na stronie, hover — Oryginał

Hover na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

Group 7 width: 260px, na stronie 324px; Link x: 65px, na stronie 33px i jeszcze 1.

SpoczynekZgodność 100%Różne pomiary: 3 z 455

Receptura w DESIGN.md

Footers2

99% zgodność

desktop

SpoczynekZgodność 99%Zgodne pomiary: 1077

Oryginalny Footer na stronie, spoczynek — Oryginał

Osobny render: Footer, spoczynek — Render

Receptura w DESIGN.md

95% zgodność

mobile

Zgodność renderu ze stroną to 95%, poniżej progu 96%.

SpoczynekZgodność 95%Zgodne pomiary: 1218

Receptura w DESIGN.md

DESIGN.md

The Onion

Overview

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

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

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

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

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

Key Characteristics:

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

Colors

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

Brand & Accent

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

Surface

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

Text

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

Hairlines & Borders

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

Component & State Colors

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

Typography

Font Family

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

Hierarchy

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

Principles

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

Note on Font Substitutes

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

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

Layout

Spacing System

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

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

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

Grid & Container

The widest measured container is the footer inner wrapper, capped at 1600px (footer-inner-max-width).
The footer's main row spaces its groups at 32px (footer-gap).
The same 32px step separates the cards of card-7 (not verifiable: what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged).

The screenshots show these page patterns:

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

Whitespace Philosophy

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

Measured Layout

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

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

Elevation & Depth

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

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

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

Shapes

Border Radius Scale

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

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

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

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

Components

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

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.

Ten plik DESIGN.md jest po angielsku, bo w tym języku czytają go agenci AI do kodowania.

Wyodrębnione z publicznej strony The Onion, to nie są oficjalne wytyczne marki. Sprawdź fonty innej strony

Podobne

Zobacz wszystkie

Media, treści i rozrywka · Editorial & Blog

WIRED

WIRED-owa dokumentacja systemu projektowego to wysokokontrastowa, redakcyjna struktura w skali szarości, oparta na zastrzeżonym systemie typograficznym (Breve Text, WIRED Mono, WiredDisplay, Apercu) i niemal zerowej palecie barw. Czerń (#000000), występująca w 2961 wystąpieniach, dominuje w tekście, obramowaniach, ikonach i stanach interaktywnych. Biel (#ffffff) stanowi główną powierzchnię. Kolor akcentu pojawia się oszczędnie: jedynie #057dbc, niebieski marki, używany jest w przyciskach wezwania do subskrypcji. Układ opiera się na uporządkowanej, wielokolumnowej siatce tekstów, z ciasnym podstawowym odstępem 8 px, płaskimi powierzchniami bez cieni i minimalnym zaokrągleniem narożników (standardowo 4 px). Kluczowym wyróżnikiem jest typografia: tekst artykułów składa się krojem Breve Text w rozmiarze 19 px, etykiety sekcji używają WIRED Mono, pisanego wielkimi literami z rozstrzeleniem, a nagłówki wyświetlane korzystają z WiredDisplay. Całość sprawia wrażenie autorytatywnej, gęstej informacyjnie i zorientowanej przede wszystkim na płynność czytania.

Podróże, transport i logistyka

Airbnb

Design system Airbnb opiera się na jednym zastrzeżonym zmiennym kroju pisma (Airbnb Cereal VF) i niemal monochromatycznej palecie neutralnych barw, z głębokim węglem (#222222) i jasnymi szarościami jako podstawą. Firmowy koral-róż „Rausch" (#ff385c) jest zarezerwowany wyłącznie dla głównych przycisków wezwania do działania i logo. Układ to responsywna siatka kart ze zdjęciami, z dużym udziałem obrazu w stosunku do tekstu, miękkimi, 20-pikselowymi zaokrągleniami rogów kart oraz wielowarstwowym systemem ambientowych cieni, który tworzy subtelną głębię bez ostrych kontrastów. Pasek wyszukiwania, w kształcie pigułki, jest wyraźnie wyeksponowany i łączy główną akcję użytkownika w jednym miejscu.

Handel i retail · E-commerce Store

IKEA

IKEA-owa globalna strona główna opiera się na odważnym, płaskim systemie projektowym, którego głównym elementem jest ikoniczny żółty IKEA (#ffdb00) jako powierzchnia najważniejszych działań, a niebieski IKEA (#0058a3) pełni rolę akcentu logo marki. Cały system typograficzny opiera się na jednym, autorskim kroju pisma – Noto IKEA – w wagach 400 i 700, w ściśle określonej skali, od 14px dla tekstu podstawowego po 51px dla nagłówków wyróżniających. Wyniesienie elementów nad tło osiągnięte jest wyłącznie dzięki kontrastowi barw i strukturze układu, bez cieni. Układ korzysta z kontenera o maksymalnej szerokości 90rem z odstępem siatki 1,5rem na desktopie oraz spójnego tokenu zaokrąglenia 8px stosowanego do elementów interaktywnych. Ciepłe, lekko kremowe tło (#fffefb) łagodzi surowość tekstu w kolorze #111111, tworząc czytelne, wysokokontrastowe i dostępne doświadczenie lektury.

Oprogramowanie i SaaS · Productivity & Notes

Notion

Strona główna marketingowa Notion łączy głęboko granatową sekcję hero (#02093a) z jasnym tłem treści (#f6f5f4), stosując niestandardowy krój pisma NotionInter we wszystkich rolach tekstowych. Układ opiera się na siatce 12-kolumnowej z odstępami 28px, a język zaokrągleń łączy dwie wartości: 8px dla kart i 9999px dla pigułek. Elementy pływające otrzymują wielowarstwowy, stopniowo narastający system cieni. Niebieski marki (#2537b1) wyznacza przyciski wezwania do działania i akcenty, a semantyczna skala szarości (od gray-200 do gray-900) porządkuje hierarchię tekstu i powierzchni.

Narzędzia deweloperskie i infrastruktura · Developer Tools & IDEs

Railway

Design system Railway to ciemne, nastawione na twórców platformy deweloperskiej. Opiera się na głęboko granatowo-czarnych powierzchniach (#13111c, #0b0b0f) i wysokokontrastowym, lekko kremowym tekście (#f7f7f8) oraz charakterystycznym fioletowym akcentem marki (#853bce / #553f83). Nagłówek sekcji hero używa kroju IBM Plex Serif, nadającego mu redakcyjny ciężar, podczas gdy Inter obsługuje całą treść interfejsu, a JetBrains Mono i SF Mono pełnią rolę w kontekstach kodu. Wyniesienie elementów osiągnięto za pomocą wewnętrznych, białych obramówek z łagodnym blaskiem (rgba(255,255,255,0.2), 1.5px inset) zamiast cieni, co nadaje interfejsowi estetykę szklanych paneli. System odstępów oparty jest na wielokrotnościach 4px z wyraźnym rytmem 8/12/16/24/32. Promienie zaokrągleń są małe, przy czym dominuje 4px, a dla kart i kontenerów hero stosowane są selektywnie 8px i 16px.

Usługi biznesowe i profesjonalne

Shopify

Strona główna marketingowa Shopify opiera się na dynamicznym, pełnoekranowym wideo w sekcji hero, z niemal czarnym tłem (#02090a), które wyraźnie kontrastuje z białym paskiem nawigacji nad nim. Główny akcent marki to intensywna miętowa zieleń (#36f4a4), używana oszczędnie do wyróżnień i stanów interaktywnych. Typografia łączy NeueHaasGrotesk w nagłówkach display i redakcyjnych z Inter-Variable w tekstach interfejsu. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px). Cały system jest pewny siebie, o wysokim kontraście i aspiracyjny, zaprojektowany tak, by zamieniać odwiedzających w sprzedawców.

Podobne palety

Supabase

Design system The Onion

Komponenty

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

Podobne

WIRED

Airbnb

IKEA

Notion

Railway

Shopify

Podobne palety