Design System The Onion

PROEngine v4

The Onion adalah sistem desain sebuah koran satire digital: judul bergaya gothic sempit yang tebal dalam warna hitam, aksen hijau hutan yang khas (#006b3a) untuk label bagian, lencana tren, dan CTA, semuanya diletakkan di atas kanvas putih/abu-abu terang yang tegas. Tipografi menjadi alat desain utama. Huruf grotesk sempit dan semi-sempit dari Adobe Fonts (tablet-gothic, rocky-condensed) mendominasi judul, sementara utopia-std-caption menangani teks isi. Tata letaknya padat informasi, dengan grid kartu yang rapat, pemisah artikel berupa garis batas bawah, dan sudut yang nyaris tidak membulat pada elemen struktural. Elevasinya minimal, hanya beberapa bayangan halus pada lapisan overlay.

Sistem visual

100% keyakinan

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

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

xs · 2px

sm · 8px

full · 9999px

Komponen

Buttons2

98% kecocokan

ghost · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 98%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%25 ukuran cocok

Button, primary asli di situs, diam — Asli

Render terpisah dari Button, primary, diam — Render

HoverKecocokan 100%22 ukuran cocok

Button, primary asli di situs, hover — Asli

Render terpisah dari Button, primary, hover — Render

Resep di DESIGN.md

Inputs4

100% kecocokan

desktop

DiamKecocokan 100%26 ukuran cocok

Render terpisah dari Input, diam — Render

HoverKecocokan 100%22 ukuran cocok

Render terpisah dari Input, hover — Render

FocusKecocokan 100%22 ukuran cocok

Render terpisah dari Input, focus — Render

Resep di DESIGN.md

33% kecocokan

desktop

Saat focus, hasil render-nya 33% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 100%26 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 33%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%26 ukuran cocok

Render terpisah dari Input (3), diam — Render

HoverKecocokan 100%22 ukuran cocok

Render terpisah dari Input (3), hover — Render

FocusKecocokan 100%22 ukuran cocok

Render terpisah dari Input (3), focus — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%26 ukuran cocok

Render terpisah dari Input (4), diam — Render

FocusKecocokan 99%22 ukuran cocok

Render terpisah dari Input (4), focus — Render

Resep di DESIGN.md

Cards7

98% kecocokan

desktop

Hasil render-nya 100% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 98%169 ukuran cocok

Render terpisah dari Card, diam — Render

HoverKecocokan 98%18 ukuran cocok

Render terpisah dari Card, hover — Render

FocusKecocokan 98%18 ukuran cocok

Render terpisah dari Card, focus — Render

Diam, instance 2Kecocokan 98%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Root width bernilai 448px, sedangkan situs memakai 307px; Group width bernilai 448px, sedangkan situs memakai 307px dan 2 lainnya.

DiamKecocokan 100%4 dari 154 ukuran berbeda

Render terpisah dari Card (2), diam — Render

Diam, instance 2Kecocokan 100%4 dari 154 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%4 dari 154 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%170 ukuran cocok

Render terpisah dari Card (3), diam — Render

Diam, instance 2Kecocokan 99%170 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%170 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%170 ukuran cocok

Render terpisah dari Card (4), diam — Render

Diam, instance 2Kecocokan 99%170 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%170 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%170 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%195 ukuran cocok

Render terpisah dari Card (5), diam — Render

Diam, instance 2Kecocokan 100%195 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%195 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%195 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%195 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%195 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%187 ukuran cocok

Render terpisah dari Card (6), diam — Render

Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%154 ukuran cocok

Render terpisah dari Card (7), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (7), hover — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Card (7), focus — Render

Diam, instance 2Kecocokan 100%154 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%154 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%154 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras8

33% kecocokan

desktop

Saat focus, hasil render-nya 33% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%26 ukuran cocok

Asli

Render

FocusKecocokan 33%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

32% kecocokan

desktop

Saat focus, hasil render-nya 32% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%26 ukuran cocok

Asli

Render

FocusKecocokan 32%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%129 ukuran cocok

Render terpisah dari Navigation, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%58 ukuran cocok

Navigation (2) asli di situs, diam — Asli

Render terpisah dari Navigation (2), diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%54 ukuran cocok

Navigation (3) asli di situs, diam — Asli

Render terpisah dari Navigation (3), diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%126 ukuran cocok

Render terpisah dari Pagination, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%126 ukuran cocok

Section heading asli di situs, diam — Asli

Render terpisah dari Section heading, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%21 ukuran cocok

Resep di DESIGN.md

Headers2

100% kecocokan

desktop

Group 11 width bernilai 581px, sedangkan situs memakai 645px; Link x bernilai 430px, sedangkan situs memakai 397px dan 1 lainnya.

DiamKecocokan 100%3 dari 891 ukuran berbeda

Render terpisah dari Header, diam — Render

Hovertidak dicek

Render terpisah dari Header, hover — Render

Hover pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

Group 7 width bernilai 260px, sedangkan situs memakai 324px; Link x bernilai 65px, sedangkan situs memakai 33px dan 1 lainnya.

DiamKecocokan 100%3 dari 455 ukuran berbeda

Resep di DESIGN.md

Footers2

99% kecocokan

desktop

DiamKecocokan 99%1077 ukuran cocok

Render terpisah dari Footer, diam — Render

Resep di DESIGN.md

95% kecocokan

mobile

Hasil render-nya 95% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 95%1218 ukuran cocok

Resep di 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.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik The Onion, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

Media, Konten & Hiburan · Editorial & Blog

WIRED

WIRED-nin sistem desainnya adalah kerangka monokrom berkontras tinggi yang digerakkan oleh editorial dan dibangun di atas sistem tipografi milik sendiri (Breve Text, WIRED Mono, WiredDisplay, Apercu) dengan palet kromatik yang hampir nol. Hitam (#000000) mendominasi dengan 2961 kemunculan, menjadi penopang teks, garis tepi, ikon, dan status interaktif. Putih (#ffffff) menjadi permukaan utama. Warna aksen dipakai sangat hemat, hanya #057dbc sebagai biru merek untuk CTA berlangganan. Tata letaknya menggunakan grid cerita multi-kolom yang tertata, dengan spasi dasar 8px yang rapat, permukaan datar tanpa box shadow, dan radius sudut minimal (4px sebagai standar). Tipografi adalah pembeda utama: badan editorial memakai Breve Text 19px, label bagian memakai WIRED Mono dalam huruf kapital dengan letter-spacing yang dilebarkan, dan judul display memakai WiredDisplay. Keseluruhan estetikanya berwibawa, padat informasi, dan mengutamakan alur membaca.

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Palet serupa

Supabase

Design System The Onion

Komponen

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

Serupa dengan ini

WIRED

Airbnb

IKEA

Notion

Railway

Shopify

Palet serupa