Design system de The Onion

PROMoteur v4

The design system de The Onion est celui d'un journal satirique numérisé : des titres en gothique condensé et audacieux, en noir, un vert forêt distinctif (#006b3a) comme couleur de marque pour les libellés de rubrique, les badges « tendance » et les appels à l'action, le tout sur une toile blanche ou gris clair et sobre. La typographie est l'outil de design principal : les grotesques condensés et semi-condensés d'Adobe Fonts (tablet-gothic, rocky-condensed) dominent les titres, tandis que utopia-std-caption assure le texte courant. La mise en page est dense en information, avec des grilles de cartes serrées, des séparateurs d'articles à bordure inférieure et des rayons de bordure quasi nuls sur les éléments structurels. L'élévation reste minimale, avec seulement quelques ombres discrètes sur les superpositions.

Système visuel

100 % confiance

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 % confiance

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 % confiance

xs · 2px

sm · 8px

full · 9999px

Composants

Buttons2

98 % correspondance

ghost · desktop

Au reposCorrespondance de 100 %21 mesures correspondent

Original

Rendu

SurvolCorrespondance de 98 %18 mesures correspondent

Original

Rendu

Recette dans le DESIGN.md

100 % correspondance

primary · desktop

Au reposCorrespondance de 100 %25 mesures correspondent

Button, primary d’origine sur le site, au repos — Original

Rendu isolé de Button, primary, au repos — Rendu

SurvolCorrespondance de 100 %22 mesures correspondent

Button, primary d’origine sur le site, survol — Original

Rendu isolé de Button, primary, survol — Rendu

Recette dans le DESIGN.md

Inputs4

100 % correspondance

desktop

Au reposCorrespondance de 100 %26 mesures correspondent

Input d’origine sur le site, au repos — Original

SurvolCorrespondance de 100 %22 mesures correspondent

Input d’origine sur le site, survol — Original

FocusCorrespondance de 100 %22 mesures correspondent

Input d’origine sur le site, focus — Original

Recette dans le DESIGN.md

33 % correspondance

desktop

Au focus, son rendu ressemble au site à 33 %, sous le seuil de 97 %.

Au reposCorrespondance de 100 %26 mesures correspondent

Original

Rendu

SurvolCorrespondance de 100 %22 mesures correspondent

Original

Rendu

FocusCorrespondance de 33 %22 mesures correspondent

Original

Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %26 mesures correspondent

Input (3) d’origine sur le site, au repos — Original

Rendu isolé de Input (3), au repos — Rendu

SurvolCorrespondance de 100 %22 mesures correspondent

Input (3) d’origine sur le site, survol — Original

Rendu isolé de Input (3), survol — Rendu

FocusCorrespondance de 100 %22 mesures correspondent

Input (3) d’origine sur le site, focus — Original

Recette dans le DESIGN.md

99 % correspondance

desktop

Au reposCorrespondance de 99 %26 mesures correspondent

Input (4) d’origine sur le site, au repos — Original

Rendu isolé de Input (4), au repos — Rendu

FocusCorrespondance de 99 %22 mesures correspondent

Input (4) d’origine sur le site, focus — Original

Recette dans le DESIGN.md

Cards7

98 % correspondance

desktop

Son rendu ressemble au site à 100 %, sous le seuil de 96 %.

Au reposCorrespondance de 98 %169 mesures correspondent

Card d’origine sur le site, au repos — Original

SurvolCorrespondance de 98 %18 mesures correspondent

Card d’origine sur le site, survol — Original

FocusCorrespondance de 98 %18 mesures correspondent

Card d’origine sur le site, focus — Original

Au repos, instance 2Correspondance de 98 %169 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 100 %169 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

100 % correspondance

desktop

Racine : width vaut 448px, le site a 307px; Group : width vaut 448px, le site a 307px et 2 autres.

Au reposCorrespondance de 100 %4 mesures sur 154 diffèrent

Card (2) d’origine sur le site, au repos — Original

Rendu isolé de Card (2), au repos — Rendu

Au repos, instance 2Correspondance de 100 %4 mesures sur 154 diffèrent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 100 %4 mesures sur 154 diffèrent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

99 % correspondance

desktop

Au reposCorrespondance de 99 %170 mesures correspondent

Card (3) d’origine sur le site, au repos — Original

Rendu isolé de Card (3), au repos — Rendu

Au repos, instance 2Correspondance de 99 %170 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 100 %170 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

99 % correspondance

desktop

Au reposCorrespondance de 99 %170 mesures correspondent

Card (4) d’origine sur le site, au repos — Original

Rendu isolé de Card (4), au repos — Rendu

Au repos, instance 2Correspondance de 99 %170 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 99 %170 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 4Correspondance de 100 %170 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %195 mesures correspondent

Card (5) d’origine sur le site, au repos — Original

Rendu isolé de Card (5), au repos — Rendu

Au repos, instance 2Correspondance de 100 %195 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 100 %195 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 4Correspondance de 100 %195 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 5Correspondance de 100 %195 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 6Correspondance de 100 %195 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %187 mesures correspondent

Card (6) d’origine sur le site, au repos — Original

Rendu isolé de Card (6), au repos — Rendu

Recette dans le DESIGN.md

Non vérifiable

desktop

Non vérifiable : des photos, médias ou publicités placés par la page en couvrent la majeure partie et rien d’autre ne diffère, la comparaison ne dit donc rien de la recette.

Au reposCorrespondance de 100 %154 mesures correspondent

Card (7) d’origine sur le site, au repos — Original

Rendu isolé de Card (7), au repos — Rendu

SurvolCorrespondance de 100 %18 mesures correspondent

Card (7) d’origine sur le site, survol — Original

FocusCorrespondance de 100 %18 mesures correspondent

Card (7) d’origine sur le site, focus — Original

Au repos, instance 2Correspondance de 100 %154 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 3Correspondance de 100 %154 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Au repos, instance 4Correspondance de 100 %154 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

Extras8

33 % correspondance

desktop

Au focus, son rendu ressemble au site à 33 %, sous le seuil de 96 %.

Au reposCorrespondance de 100 %26 mesures correspondent

Original

Rendu

FocusCorrespondance de 33 %22 mesures correspondent

Original

Rendu

Recette dans le DESIGN.md

32 % correspondance

desktop

Au focus, son rendu ressemble au site à 32 %, sous le seuil de 96 %.

Au reposCorrespondance de 100 %26 mesures correspondent

Original

Rendu

FocusCorrespondance de 32 %22 mesures correspondent

Original

Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %129 mesures correspondent

Navigation d’origine sur le site, au repos — Original

Rendu isolé de Navigation, au repos — Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %58 mesures correspondent

Navigation (2) d’origine sur le site, au repos — Original

Rendu isolé de Navigation (2), au repos — Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %54 mesures correspondent

Navigation (3) d’origine sur le site, au repos — Original

Rendu isolé de Navigation (3), au repos — Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %126 mesures correspondent

Pagination d’origine sur le site, au repos — Original

Rendu isolé de Pagination, au repos — Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %126 mesures correspondent

Section heading d’origine sur le site, au repos — Original

Rendu isolé de Section heading, au repos — Rendu

Recette dans le DESIGN.md

100 % correspondance

desktop

Au reposCorrespondance de 100 %21 mesures correspondent

Tag d’origine sur le site, au repos — Original

Recette dans le DESIGN.md

Headers2

100 % correspondance

desktop

Group 11 : width vaut 581px, le site a 645px; Link : x vaut 430px, le site a 397px et 1 autre.

Au reposCorrespondance de 100 %3 mesures sur 891 diffèrent

Header d’origine sur le site, au repos — Original

Survolnon vérifié

Header d’origine sur le site, survol — Original

Survol sur logoCorrespondance de 100 %18 mesures correspondent

Original

Aucune image enregistrée

Rendu

Aucune image enregistrée

Recette dans le DESIGN.md

100 % correspondance

mobile

Group 7 : width vaut 260px, le site a 324px; Link : x vaut 65px, le site a 33px et 1 autre.

Au reposCorrespondance de 100 %3 mesures sur 455 diffèrent

Recette dans le DESIGN.md

Footers2

99 % correspondance

desktop

Au reposCorrespondance de 99 %1077 mesures correspondent

Footer d’origine sur le site, au repos — Original

Recette dans le DESIGN.md

95 % correspondance

mobile

Son rendu ressemble au site à 95 %, sous le seuil de 96 %.

Au reposCorrespondance de 95 %1218 mesures correspondent

Recette dans le 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.

Ce fichier DESIGN.md est en anglais, la langue dans laquelle les agents de code IA le lisent.

Extrait du site public de The Onion, pas une charte de marque officielle. Vérifier les polices d’un autre site

Dans le même style

Tout parcourir

Médias, contenu et divertissement · Editorial & Blog

WIRED

WIRED adopte un système de design monochrome à fort contraste, pensé pour l'éditorial, construit autour d'un système typographique propriétaire (Breve Text, WIRED Mono, WiredDisplay, Apercu) et d'une palette chromatique presque nulle. Le noir (#000000) domine avec 2961 occurrences et structure le texte, les bordures, les icônes et les états interactifs. Le blanc (#ffffff) constitue la surface principale. La couleur d'accent n'intervient que avec parcimonie : seul #057dbc apparaît, comme bleu de marque pour les appels à l'abonnement. La mise en page repose sur une grille de récits en plusieurs colonnes structurée, un espacement de base serré de 8px, des surfaces plates sans ombres portées et des angles faiblement arrondis (4px en standard). La typographie est le principal élément distinctif : le corps éditorial utilise Breve Text en 19px, les intitulés de section utilisent WIRED Mono en majuscules avec un interlettrage élargi, et les titres d'affichage utilisent WiredDisplay. L'esthétique d'ensemble est autoritaire, dense en information et centrée sur la lecture.

Voyage, transport et logistique

Airbnb

Le système de design d'Airbnb repose sur une unique police variable propriétaire (Airbnb Cereal VF) et sur une palette neutre presque monochrome, ancrée par un anthracite profond (#222222) et des gris clairs. Le rose corail signature de la marque, « Rausch » (#ff385c), est réservé exclusivement aux appels à l'action principaux et au logo. La mise en page est une grille responsive de cartes photo, avec des rapports image-texte généreux, des coins arrondis de 20px sur les cartes et un système d'ombres ambiantes à plusieurs couches qui crée une profondeur subtile sans contraste marqué. La barre de recherche, en forme de pilule bien visible, regroupe l'action principale de l'utilisateur.

Commerce et distribution · E-commerce Store

IKEA

IKEA présente sur sa page d'accueil mondiale un système de design affirmé et à plat, dont l'élément central est le jaune IKEA (#ffdb00), utilisé comme surface d'action principale, tandis que le bleu IKEA (#0058a3) sert d'accent au logo de la marque. Toute la typographie repose sur une police personnalisée unique, Noto IKEA, déclinée en graisses 400 et 700 selon une échelle étroitement définie, des textes courants à 14px jusqu'aux titres d'affichage à 51px. La hiérarchie visuelle passe entièrement par le contraste des couleurs et la structure de la mise en page, sans recours aux ombres. La mise en page s'appuie sur un conteneur d'une largeur maximale de 90rem, avec un espacement de grille de 1,5rem sur ordinateur, et un rayon de bordure homogène de 8px appliqué aux éléments interactifs. Le fond blanc cassé (#fffefb) apporte de la chaleur face au texte #111111 très contrasté, pour une lecture à fort contraste et accessible.

Logiciels et SaaS · Productivity & Notes

Notion

La page d'accueil marketing de Notion associe une section héros bleu marine profond (#02093a) à un corps de page clair (#f6f5f4), avec une police personnalisée (NotionInter) pour tous les rôles de texte. Le design repose sur une grille de 12 colonnes avec des gouttières de 28px, un langage de rayons double (8px pour les cartes, 9999px pour les pastilles) et un système d'ombres progressives à plusieurs couches pour les éléments flottants. Le bleu de marque (#2537b1) guide les boutons d'appel à l'action et les accents, tandis qu'une échelle de gris sémantique (de gray-200 à gray-900) structure toute la hiérarchie des textes et des surfaces.

Développeurs et infrastructure · Developer Tools & IDEs

Railway

Le système de design de Railway est une interface de plateforme pour développeurs pensée d'abord pour le mode sombre, reposant sur des surfaces bleu marine presque noir (#13111c, #0b0b0f), un texte blanc cassé à fort contraste (#f7f7f8) et un accent violet distinctif (#853bce / #553f83). La section héros utilise IBM Plex Serif pour un poids éditorial, tandis qu'Inter assure tout le texte de l'interface et que JetBrains Mono / SF Mono sont réservées aux contextes de code. L'élévation repose sur des bordures à lueur blanche en retrait (rgba(255,255,255,0.2) 1.5px inset) plutôt que sur des ombres portées, ce qui donne à l'interface une esthétique de panneaux en verre. Le système d'espacement est basé sur une grille de 4px, avec un rythme marqué de 8/12/16/24/32. Les rayons de bordure sont serrés (4px dominant), avec des valeurs de 8px et 16px appliquées sélectivement aux cartes et aux conteneurs du héros.

Services aux entreprises

Shopify

Le site marketing de Shopify s'ouvre sur un héros vidéo plein écran et spectaculaire, dont le fond quasi noir (#02090a) contraste fortement avec la barre de navigation blanche située au-dessus. L'accent de marque principal est un vert menthe éclatant (#36f4a4), utilisé avec parcimonie pour les mises en avant et les états interactifs. La typographie repose sur deux familles : NeueHaasGrotesk pour les titres display et éditoriaux, et Inter-Variable pour le texte d'interface. Les boutons d'appel à l'action adoptent des formes pilule entièrement arrondies (border-radius: 9999px). L'ensemble du système est affirmé, très contrasté et aspirationnel, conçu pour convertir les visiteurs en marchands.

Palettes similaires

Supabase

Design system de The Onion

Composants

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

Dans le même style

WIRED

Airbnb

IKEA

Notion

Railway

Shopify

Palettes similaires