Harvey Design System

harvey.ai

PROEngine v4

Visual system

90% confidence

hero-displayDesign is intelligence made visibleHarveySerifFont72px / 400 / 1.05

display-lgDesign is intelligence made visibleHarveySerifFont48px / 400 / 1.05

display-mdDesign is intelligence made visibleHarveySerifFont32px / 400 / 1.05

display-smDesign is intelligence made visibleHarveySerifFont24px / 400 / 1.05

headlineDesign is intelligence made visibleHarveySansFont32px / 500 / 1.1

title-lgDesign is intelligence made visibleHarveySansFont24px / 500 / 1.3

title-mdDesign is intelligence made visibleHarveySansFont20px / 500 / 1.3

body-lgDesign is intelligence made visibleHarveySansFont20px / 400 / 1.3

button-lgDesign is intelligence made visibleHarveySansFont20px / 400 / 1.05

bodyDesign is intelligence made visibleHarveySansFont16px / 400 / 1.5

body-tightDesign is intelligence made visibleHarveySansFont16px / 400 / 1.3

body-strongDesign is intelligence made visibleHarveySansFont16px / 500 / 1.3

labelDesign is intelligence made visibleHarveySansFont14px / 500 / 1.3

captionDesign is intelligence made visibleHarveySansFont14px / 400 / 1.3

list-itemDesign is intelligence made visibleHarveySansFont14px / 500 / 1.45

nav-linkDesign is intelligence made visibleHarveySansFont14px / 500 / 1

90% confidence

header-inner-gap
4px

header-inner-2-gap
4px

header-inner-3-gap
4px

button-primary-padding-y
7px

button-primary-padding-right
7px

button-ghost-3-padding-y
8px

button-ghost-3-padding-x
8px

header-landing-mobile-gap
10px

header-inner-2-mobile-gap
10px

button-primary-padding-left
12px

footer-landing-mobile-gap
14px

footer-landing-column-gap
16px

footer-landing-gap
16px

footer-inner-gap
16px

card-4-grid-gap
16px

input-2-padding-x
16px

select-padding-left
16px

select-2-padding-left
16px

button-secondary-padding-y
20px

button-secondary-padding-x
20px

input-padding-y
20px

input-padding-left
20px

button-primary-2-padding-x
20px

footer-landing-mobile-column-gap
28px

card-7-grid-gap
32px

input-padding-right
40px

select-padding-right
40px

select-2-padding-right
40px

section-padding-y
64px

card-4-grid-row-gap
64px

card-6-grid-gap
128px

footer-landing-inner-max-width
1728px

footer-landing-mobile-inner-max-width
1728px

header-landing-mobile-inner-max-width
1920px

header-inner-2-inner-max-width
1920px

header-inner-2-mobile-inner-max-width
1920px

90% confidence

xs · 3px

sm · 4px

md · 8px

full · 9999px

Components

Button7

100% match

ghost · desktop

At rest100% match54 measurements match

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

Isolated render of Button, ghost, at rest — Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match54 measurements match

Original Button, ghost (2) on the site, at rest — Original

Isolated render of Button, ghost (2), at rest — Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match39 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match22 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

99% match

secondary · desktop

At rest99% match59 measurements match

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

Isolated render of Button, secondary, at rest — Render

Hover99% match22 measurements match

Original Button, secondary on the site, hover — Original

Isolated render of Button, secondary, hover — Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match38 measurements match

Original Button, secondary (2) on the site, at rest — Original

Isolated render of Button, secondary (2), at rest — Render

Recipe in DESIGN.md

Card7

100% match

desktop

At rest100% match54 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

At rest, instance 2100% match54 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match54 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match54 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match54 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match54 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match95 measurements match

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

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

At rest, instance 2100% match95 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match95 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

8% match

desktop

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

At rest8% match227 measurements match

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

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

At rest, instance 211% match227 measurements match

Original

No image stored

Render

No image stored

At rest, instance 39% match227 measurements match

Original

No image stored

Render

No image stored

At rest, instance 413% match227 measurements match

Original

No image stored

Render

No image stored

At rest, instance 510% match227 measurements match

Original

No image stored

Render

No image stored

At rest, instance 627% match227 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match75 measurements match

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

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

At rest, instance 2100% match75 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match75 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match75 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match75 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match75 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

Group y is 59px, the site has 43px; Body y is 59px, the site has 43px and 1 more.

At rest98% match3 of 45 measurements differ

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

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

Hover98% match19 measurements match

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

Isolated render of Card (5), hover — Render

Focus98% match1 of 19 measurements differ

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

Isolated render of Card (5), focus — Render

At rest, instance 2100% match3 of 45 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match3 of 45 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest100% match341 measurements match

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

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

Hover100% match18 measurements match

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

Isolated render of Card (6), hover — Render

Focus100% match18 measurements match

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

Isolated render of Card (6), focus — Render

At rest, instance 299% match341 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match341 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match43 measurements match

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

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

At rest, instance 2100% match43 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match43 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match43 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra17

98% match

desktop

At rest98% match264 measurements match

Original Announcement banner on the site, at rest — Original

Isolated render of Announcement banner, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

5% match

desktop

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

At rest5% match264 measurements match

Original Banner on the site, at rest — Original

Isolated render of Banner, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match108 measurements match

Original Breadcrumb on the site, at rest — Original

Isolated render of Breadcrumb, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match482 measurements match

Original Footer link columns on the site, at rest — Original

Isolated render of Footer link columns, at rest — Render

Recipe in DESIGN.md

99% match

desktop

At rest100% match200 measurements match

Original Form field group on the site, at rest — Original

Isolated render of Form field group, at rest — Render

At rest, instance 2100% match200 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match200 measurements match

Original

No image stored

Render

No image stored

At rest, instance 499% match200 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

Title y is 0px, the site has 64px; Title height is 302px, the site has 151px and 3 more.

At rest98% match5 of 174 measurements differ

Original Hero on the site, at rest — Original

Isolated render of Hero, at rest — Render

At rest, instance 2100% match5 of 174 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 399% match5 of 174 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 499% match5 of 174 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match482 measurements match

Original Link list on the site, at rest — Original

Isolated render of Link list, at rest — Render

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match32 measurements match

Original

Render

At rest, instance 2100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match32 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match32 measurements match

Original

Render

At rest, instance 2100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match32 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match32 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match440 measurements match

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match482 measurements match

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

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

Recipe in DESIGN.md

100% match

desktop

At rest100% match205 measurements match

Original Pagination on the site, at rest — Original

Isolated render of Pagination, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match22 measurements match

Original Play button on the site, at rest — Original

Isolated render of Play button, at rest — Render

Recipe in DESIGN.md

96% match

desktop

At rest96% match44 measurements match

Original Video player on the site, at rest — Original

Isolated render of Video player, at rest — Render

Recipe in DESIGN.md

Header8

100% match

desktop

At rest100% match434 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Recipe in DESIGN.md

98% match

desktop

At rest100% match812 measurements match

Original Header (inner, 2) on the site, at rest — Original

Isolated render of Header (inner, 2), at rest — Render

Hovernot checked

Original Header (inner, 2) on the site, hover — Original

Isolated render of Header (inner, 2), hover — Render

Focusnot checked

Original Header (inner, 2) on the site, focus — Original

Isolated render of Header (inner, 2), focus — Render

Focus on cta 298% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 299% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 3100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match413 measurements match

Original Header (inner, 3) on the site, at rest — Original

Isolated render of Header (inner, 3), at rest — Render

Recipe in DESIGN.md

5% match

desktop

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

At rest5% match812 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta 25% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 25% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle 35% match22 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle 35% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match388 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element was not visible.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element was not visible.

Nothing was compared for this component.

100% match

mobile

At rest100% match388 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer4

96% match

desktop

At rest96% match64 measurements match

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Hovernot checked

Original Footer (inner) on the site, hover — Original

Isolated render of Footer (inner), hover — Render

Hover on link96% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match1822 measurements match

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Hovernot checked

Original Footer (landing) on the site, hover — Original

Isolated render of Footer (landing), hover — Render

Focusnot checked

Original Footer (landing) on the site, focus — Original

Isolated render of Footer (landing), focus — Render

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

95% match

mobile

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

At rest95% match64 measurements match

Hovernot checked

Hover on link95% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match1213 measurements match

Hovernot checked

Focusnot checked

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Input4

99% match

desktop

At rest100% match26 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Focus99% match22 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

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

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

Hover100% match22 measurements match

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

Isolated render of Input (2), hover — Render

Focus100% match22 measurements match

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

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Select on the site, at rest — Original

Isolated render of Select, at rest — Render

Hover100% match22 measurements match

Original Select on the site, hover — Original

Isolated render of Select, hover — Render

Focus100% match22 measurements match

Original Select on the site, focus — Original

Isolated render of Select, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

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

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

Hover100% match22 measurements match

Original Select (2) on the site, hover — Original

Isolated render of Select (2), hover — Render

Focus100% match22 measurements match

Original Select (2) on the site, focus — Original

Isolated render of Select (2), focus — Render

Recipe in DESIGN.md

DESIGN.md

Harvey

Overview

Harvey reads like a law firm's letterhead rebuilt as software. The palette is almost entirely warm monochrome: Ink (ink, #0F0E0D) on Paper (surface, #FFFFFF), with a ladder of stone greys for secondary text and rules. Large HarveySerifFont headlines at weight 400 carry the editorial voice. Every functional surface (nav, buttons, forms, cards, footer) runs on HarveySansFont at compact 14–24px sizes. The register is calm and expensive. The site never raises its voice with color.

Density is low and the rhythm is airy. Sections breathe on a 64px vertical cadence (section-padding-y) and alternate between off-white bands and near-black bands (customer stories, CTA, footer). Hierarchy comes from three moves:

Typeface switch. Serif means statement, sans means interface.
Size jump. The display ladder leaps from 24px to 72px.
Tonal inversion. A whole band flips to ink.

Weight does almost no work. Only 400 and 500 exist.

Chromatic accent is close to nonexistent. Highlighter Yellow (highlight, #F6F202) appears as a rare small mark. Blue exists only as focus-ring tokens. Depth comes from tonal contrast, hairline rules, frosted translucent headers and a single soft shadow tier. Corners stay small (4px on controls, 8px on media cards), so the geometry feels architectural rather than friendly.

Key Characteristics:

Serif display (hero-display 72px, weight 400, -0.9px tracking) over a sans UI layer. Two families, never three.
Warm near-black Ink (primary, #0F0E0D) serves as both text color and inverted-band fill. There is no brand hue.
Only weights 400 and 500. Serif is always 400; 500 is the sans emphasis cut.
Full-width off-white and near-black bands replace cards-with-shadows as the main structuring device.
Frosted headers: translucent fills with blur(16px) backdrop on header-landing, header-inner-2, announcement-banner and their mobile variants.
Small-radius rectilinear controls: rounded.sm (4px) on buttons, inputs, selects and checkboxes.
Hairline rules in Stone Rule (hairline, #CCCAC6) separate stats rows and feature lists. A dark rule (border-dark, #33312C) separates footer zones.
Low density, generous whitespace, 64px section rhythm.

Colors

A warm-neutral, near-monochrome palette. Every grey leans slightly brown so the white canvas never feels clinical. There are no gradients anywhere in the system; fills are always flat.

Brand & Ink

Ink (primary / ink, #0F0E0D): the brand color. It is used for body and heading text, the solid fill of button-primary-2, the hover fill of button-primary, the dark footer (footer-landing background) and inverted bands. Use it in place of pure black for type.
On Ink (on-primary / on-dark, #FFFFFF): text on Ink fills and dark bands, for example the footer-landing root text and footer-landing-heading.
Highlighter Yellow (highlight, #F6F202): the only saturated brand-adjacent hue. It appears as small surface marks on 4 pages. Treat it as a highlighter stroke, never as a button or band fill.

Surfaces

Paper (surface, #FFFFFF): the default page canvas.
Linen (surface-muted, #F2F1F0): a quiet muted panel for low-emphasis blocks.
Charcoal Tile (surface-dark, #1F1D1A): raised tiles inside dark sections, for example the card-4-group-2 fill. It sits one step lighter than Ink, so cards lift through tone alone.
True Black (surface-black, #000000): media and video backdrops only. Never use it for text.
Components also use a warm off-white, #FAFAF9. It appears as the card-6 and hero-group background, as footer-landing-nav-link text, and as the header-landing-cta-2 / footer-landing-link pill fill. It is not a token; map it to surface when rebuilding unless exact parity matters.

Text

Ink (ink, #0F0E0D): primary copy.
Graphite (ink-secondary, #33312C): secondary paragraph copy, for example card-6-body and card-7-body.
Stone (muted, #706D66): tertiary text such as breadcrumbs (breadcrumb-link) and the light legal footer (footer-inner).
Pebble (muted-soft, #8F8B85): eyebrow titles on dark (footer-landing-heading-2, link-list-title), inactive pagination (pagination-link-2) and button-secondary label text. It doubles as the hover fill of footer-landing-link and the focus-ring color in button-primary-2.

Hairlines & Borders

Stone Rule (hairline, #CCCAC6): 1px top rules on card-6-group and card-7, and a 2px top rule on card-5. It is also the hover text color of footer-landing-nav-link.
Field Border (border-strong, #ADABA5): resting 1px border on input-2, select, select-2, checkbox and form-field-group-field. On hover and focus it darkens to Ink.
Dark Rule (border-dark, #33312C): borders on dark surfaces, including footer-landing-columns bottom rule, button-secondary outline and the input outline in the dark newsletter field.

Component & State Colors

These were measured on components and states, never in page sampling:

Focus Halo (focus-ring, #99C8FF): soft blue focus ring.
Focus Blue (focus-ring-strong, #005FCC): high-contrast focus ring.

Use them only for keyboard focus. Visible focus treatments on most recipes are instead grey rings built from Paper and Pebble.

Typography

Font Family

HarveySerifFont (proprietary serif): the display voice. It is used for hero headlines, section titles, the big stats numerals in card-5, the footer-landing-heading and the 28px statement text in headers (header-inner-2-text). It is always weight 400.
HarveySansFont (proprietary grotesque): everything else, including nav, buttons, body, labels, forms, cards and footer. The declared fallback stack is -apple-system, system-ui, Segoe UI, Roboto and Helvetica Neue.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	72px	400	1.05	-0.9px	Serif H1 hero headline, big stat numerals
`display-lg`	48px	400	1.05	-0.48px	Serif page and section H1/H2
`display-md`	32px	400	1.05	-0.32px	Serif H2/H3, blockquotes
`display-sm`	24px	400	1.05	-0.24px	Serif H3, footer statement heading
`headline`	32px	500	1.1	-0.32px	Sans feature titles (`card-6-title`)
`title-lg`	24px	500	1.3	-0.24px	Sans card titles (`card-2-text`, `card-4-body`)
`title-md`	20px	500	1.3	normal	Emphasized lead lines
`body-lg`	20px	400	1.3	normal	Lead paragraphs, card descriptions, active pagination
`button-lg`	20px	400	1.05	-0.24px	Large text buttons / spans
`body`	16px	400	1.5	normal	Default running text, inputs, links
`body-tight`	16px	400	1.3	normal	Labels, compact paragraphs, secondary button text
`body-strong`	16px	500	1.3	normal	Small headings (`card-7-title`), breadcrumbs
`label`	14px	500	1.3	normal	Nav labels, eyebrow titles, footer links
`caption`	14px	400	1.3	normal	Captions, legal text, meta
`list-item`	14px	500	1.45	normal	List rows and list buttons
`nav-link`	14px	500	1	normal	Single-line nav links

Principles

Two weights only. 400 and 500. Weight 600+ is deliberately absent; emphasis comes from switching to the serif or scaling up, not from bolding.
The serif never goes bold. Every display-* token is 400. The headline and title-* tokens are the sans at 500 for UI-ish headings.
Tracking scales with size. Display sizes tighten at roughly -1% of font size (-0.24px at 24px, -0.32px at 32px, -0.48px at 48px). The hero tightens a little further to -0.9px at 72px. Sans text at 20px and below uses normal tracking, except the eyebrow titles, which carry -0.14px (footer-landing-heading-2).
Leading tightens as size grows. Serif display is set solid at 1.05. Sans headings sit at 1.1–1.3. Only long-form body opens to 1.5.
Compact UI scale. Interface type lives at 14–16px. The 20px and 24px sizes are for leads and card titles, not controls.

Note on Font Substitutes

Both families are proprietary.

Serif substitute: Source Serif 4 or Newsreader. Use the regular (400) optical display cut. Keep the 1.05 line height and the negative tracking from the tokens; if the substitute runs wider, tighten an extra -0.01em at 48px and above.
Sans substitute: Inter. Use 400 and 500 only. Inter's x-height is generous, so consider dropping body sizes visually by about 0.5px or keeping line heights as tokenized. Avoid Inter's 600 even if it is tempting for headings.

Layout

Spacing System

No single base step was tokenized. The measured values cluster on a 4/8-multiple rhythm with a few component-specific exceptions.

Token	Value	Measured on
`section-padding-y`	64px	Vertical padding between the page's sections, measured on the page itself rather than a component
`header-inner-gap` / `header-inner-2-gap` / `header-inner-3-gap`	4px	Gap between desktop nav items
`header-landing-mobile-gap` / `header-inner-2-mobile-gap`	10px	Gap in the mobile header logo row
`footer-landing-gap`	16px	Stack gap in the footer logo column
`footer-landing-column-gap`	16px	Column gap of the desktop footer link grid
`footer-landing-mobile-column-gap`	28px	Column gap of the mobile footer link grid
`footer-landing-mobile-gap`	14px	Stack gap inside mobile footer link groups
`footer-inner-gap`	16px	Gap in the light legal footer bar
`button-primary-padding-y`	7px	`button-primary` vertical padding
`button-primary-padding-left` / `button-primary-padding-right`	12px / 7px	`button-primary` asymmetric padding (label left, icon right)
`button-primary-2-padding-x`	20px	Solid Ink button horizontal padding
`button-secondary-padding-y` / `button-secondary-padding-x`	20px / 20px	Outlined dark button
`button-ghost-3-padding-y` / `button-ghost-3-padding-x`	8px / 8px	Icon-only ghost button
`input-padding-y` / `input-padding-left` / `input-padding-right`	20px / 20px / 40px	Dark newsletter input (right side reserves room for the submit icon)
`input-2-padding-x`	16px	Light form input
`select-padding-left` / `select-padding-right`	16px / 40px	Select, right side reserves the chevron
`select-2-padding-left` / `select-2-padding-right`	16px / 40px	Half-width select

Grid & Container

Containers. The header inner row is capped at 1920px (header-inner-2-inner-max-width, header-landing-mobile-inner-max-width). The footer content is capped at 1728px (footer-landing-inner-max-width). The layout is effectively full-bleed with side gutters, not a narrow centered column.
Grid gaps.
- Dark case-study tiles sit 16px apart horizontally (card-4-grid-gap) and 64px apart vertically (card-4-grid-row-gap).
- Alternating text/media feature rows stack with 128px between them (card-6-grid-gap).
- Feature list items stack with 32px between them (card-7-grid-gap).
Column patterns from the screenshots. A two-column hero split places the serif headline left and subcopy plus CTA right. Logo walls run as wide wordmark rows. Article and case-study cards form multi-column rows. Feature blocks split text against media. Stats render as label-left, numeral-right rows divided by hairlines. Article pages narrow to a centered reading column.

Whitespace Philosophy

Whitespace is the luxury signal. Sections are separated by 64px (section-padding-y) plus a band-color change, so content never crowds a transition. Feature rows get very wide separation (card-6-grid-gap). Within components, spacing stays tight and functional: 4px between nav items, 16px between cards. The contrast between generous macro-space and compact micro-space is the system. Don't fill empty space with decoration; let a single serif headline own a band.

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: 64px (vertical padding repeated on the page sections: 3 section edges on 1 page)
footer-landing-column-gap: 16px (footer-landing, column gap of the footer-landing-nav grid)
footer-landing-gap: 16px (footer-landing, gap of footer-landing-group-2)
footer-landing-inner-max-width: 1728px (footer-landing, max width of footer-landing-inner)
header-landing-mobile-gap: 10px (header-landing-mobile, gap of header-landing-mobile-group-7)
header-landing-mobile-inner-max-width: 1920px (header-landing-mobile, max width of header-landing-mobile-inner)
footer-landing-mobile-column-gap: 28px (footer-landing-mobile, column gap of the footer-landing-mobile-nav grid)
footer-landing-mobile-gap: 14px (footer-landing-mobile, gap of footer-landing-mobile-group-4)
footer-landing-mobile-inner-max-width: 1728px (footer-landing-mobile, max width of footer-landing-mobile-inner)
header-inner-gap: 4px (header-inner, gap of header-inner-nav-item)
header-inner-2-gap: 4px (header-inner-2, gap of header-inner-2-nav-item)
header-inner-2-inner-max-width: 1920px (header-inner-2, max width of header-inner-2-inner)
header-inner-2-mobile-gap: 10px (header-inner-2-mobile, gap of header-inner-2-mobile-group-7)
header-inner-2-mobile-inner-max-width: 1920px (header-inner-2-mobile, max width of header-inner-2-mobile-inner)
header-inner-3-gap: 4px (header-inner-3, gap of header-inner-3-nav-item)
footer-inner-gap: 16px (footer-inner, gap of footer-inner)
card-4-grid-gap: 16px (card-4, column gap of the grid its instances sit in)
card-4-grid-row-gap: 64px (card-4, row gap of the grid its instances sit in)
card-6-grid-gap: 128px (card-6, column gap of the grid its instances sit in)
card-7-grid-gap: 32px (card-7, column gap of the grid its instances sit in)
button-primary-padding-y: 7px (button-primary, vertical padding of the root)
button-primary-padding-left: 12px (button-primary, left padding of the root)
button-primary-padding-right: 7px (button-primary, right padding of the root)
button-secondary-padding-y: 20px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 20px (button-secondary, horizontal padding of the root)
input-padding-y: 20px (input, vertical padding of the root)
input-padding-left: 20px (input, left padding of the root)
input-padding-right: 40px (input, right padding of the root)
button-ghost-3-padding-y: 8px (button-ghost-3, vertical padding of the root)
button-ghost-3-padding-x: 8px (button-ghost-3, horizontal padding of the root)
button-primary-2-padding-x: 20px (button-primary-2, horizontal padding of the root)
input-2-padding-x: 16px (input-2, horizontal padding of the root)
select-padding-left: 16px (select, left padding of the root)
select-padding-right: 40px (select, right padding of the root)
select-2-padding-left: 16px (select-2, left padding of the root)
select-2-padding-right: 40px (select-2, right padding of the root)

The card grid lays out in 6 columns; the footer in 11 columns; the card-4 grid in 3 columns at desktop. The footer lays out in 5 columns at mobile.

Elevation & Depth

Level	Treatment	Use
0 · Base surface	No outline; depth from tonal banding: Paper (`surface`, #FFFFFF) or the warm off-white #FAFAF9 on `card-6` and `footer-inner`, against Ink (`primary`, #0F0E0D) on `footer-landing` and `card-3`	Default page sections; dark bands for stories, CTA and footer
1 · Tonal tile	Charcoal (`surface-dark`, #1F1D1A) fill on `card-4-group-2`, sitting on a near-black band	Cards inside dark sections lift by being lighter, not by casting
2 · Hairline	`border-top: 1px solid #CCCAC6` (`hairline`) on `card-6-group`, `card-6-group-6`, `card-7`; `2px solid #CCCAC6` on `card-5` (flagged: the `card-5-group` y did not reproduce the measured 43px); `border-bottom: 1px solid #33312C` (`border-dark`) on `footer-landing-columns`	Stat rows, feature lists, footer column divider
3 · Control outline	`1px solid #ADABA5` (`border-strong`) on `input-2`, `select`, `select-2`, `checkbox`, darkening to `1px solid #0F0E0D` on hover/focus; `1px solid #0F0E0D` on `button-primary`; `1px solid #33312C` on `button-secondary` and `input` (focus `1px solid #FAFAF9`)	Form fields and outlined buttons
4 · Frosted glass	`backdrop-filter: blur(16px)` over translucent fills #0F0E0D99 or #FAFAF9B8 on `header-inner-2-group`, `announcement-banner-group`, `header-landing-mobile-group`, `header-inner-2-mobile-group`; `blur(6px)` with fill #FAFAF933 and `1px solid #FAFAF94D` on `button-secondary-2`	Fixed header bar and announcement strip; glass control over media
5 · Floating shadow	`box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`	Truly floating overlays such as the white cookie modal card
Focus ring	`box-shadow: … #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px …` on `header-inner-2-cta-3` and `footer-landing-link`; `#8F8B85 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px` on `button-primary-2`	Keyboard focus, drawn as a spread ring in Stone (`muted-soft`, #8F8B85), never a blur

Shadow philosophy. Harvey builds depth in layers of restraint. Most hierarchy comes from tonal contrast (off-white sections against Ink bands, Charcoal tiles on black) and from warm hairlines that rule off rows rather than box them. Glass is the signature move for chrome: the fixed header and announcement strip use blur(16px) over a semi-transparent Ink or off-white fill, and the glass button over media uses a lighter blur(6px). Keep that frosting; never swap it for an opaque bar. A real cast shadow belongs to the system as its top tier: a soft, low-opacity two-layer drop (0px 10px 15px -3px plus 0px 4px 6px -4px, both at rgba(0, 0, 0, 0.1)), used on floating overlays like the cookie modal. Do not spread it onto cards, buttons or inputs. Those stay on tonal fills and 1px outlines. Focus is expressed with zero-blur spread rings via box-shadow, so focus states never read as elevation.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	3px	Rare small details (measured on 4 pages, not on any recipe)
`rounded.sm`	4px	The control radius: `button-primary`, `button-primary-2`, `button-secondary`, `input`, `input-2`, `select`, `select-2`, `checkbox`, `form-field-group-field`, the off-white header and footer CTAs (`header-landing-cta-2`, `footer-landing-link`), small card groups (`card-2-group`, `card-4-group`, `card-4-media`)
`rounded.md`	8px	Large media and feature containers: `card-6-group-4`, `video-player-group`, and `card-3` (flagged: the render matched 8% of the original pixels, below the 96% required)
`rounded.full`	9999px	Reserved for round controls, such as the frosted `button-secondary-2` media control; measured on 2 pages

The geometry is crisp and architectural. Corners are softened just enough to feel modern, never enough to feel playful. The rule is simple:

Controls take 4px. Buttons, fields, checkboxes and small CTAs.
Big imagery takes 8px. Media panels, video frames and large feature cards.
Full rounding is the exception. It appears only on circular icon or media controls, never on text buttons or nav items, which stay rectangular.

Logo walls use bare wordmarks with no container shape at all.

Components

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

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-group: inner flex row (.c-button-ghost__group)
button-ghost-label: label text, 8 characters (.c-button-ghost__label)
button-ghost-icon: icon placeholder, 16px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <div class="c-button-ghost__group">
      <span class="c-button-ghost__label">lorem ip</span>
      <span class="c-button-ghost__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-ghost__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

States

No hover or focus change was observed.

Card

Verification: verified against the live page at desktop.

Anatomy

Group: 6 instances in a 6-column grid; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-link: link (.c-card__link)
card-media: image placeholder, 82x58px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <a class="c-card__link" href="#">
      <span class="c-card__media" aria-hidden="true"></span>
    </a>
  </div>
</div>

.c-card-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 96px;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card__link {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 82px;
  height: 58px;
  max-width: 66.6667%;
  max-height: 60%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
  margin-top: 19.2031px;
  margin-bottom: 19.2031px;
}

States

No hover or focus change was observed.

Hero

Verification: flagged, the hero-title y did not reproduce the measured 64px after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid; the recipe carries the values they all share
hero: the component root, a <div> (.c-hero)
hero-group: inner group (.c-hero__group)
hero-group-2: inner grid (.c-hero__group-2, 2 instances)
hero-group-3: inner block (.c-hero__group-3)
hero-title: heading, 35 characters (.c-hero__title)
hero-group-4: inner flex row (.c-hero__group-4), content not captured
hero-group-5: inner block (.c-hero__group-5)
hero-group-6: inner block (.c-hero__group-6), content not captured

Recipe

HTML · CSS

<div class="c-hero-scope">
  <div class="c-hero">
    <section class="c-hero__group">
      <div class="c-hero__group-2">
        <div class="c-hero__group-3">
          <h1 class="c-hero__title">lorem ipsum dolor sit amet consecte</h1>
          <div class="c-hero__group-4"></div>
        </div>
      </div>
      <div class="c-hero__group-5">
        <div class="c-hero__group-2">
          <div class="c-hero__group-6"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-hero-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-hero {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-hero__group {
  display: block;
  box-sizing: border-box;
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-hero__group-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  box-sizing: border-box;
  width: 100%;
  max-width: 1728px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-hero__group-3 {
  box-sizing: border-box;
}

.c-hero__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 75.6px;
  letter-spacing: -0.9px;
}

.c-hero__group-4 {
  display: flex;
  box-sizing: border-box;
}

.c-hero__group-5 {
  display: block;
  box-sizing: border-box;
  margin-top: 64px;
}

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

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner flex row (.c-navigation__item, 6 instances)
navigation-button: button (.c-navigation__button, 4 instances)
navigation-group: inner flex row (.c-navigation__group, 4 instances), content not captured
navigation-link: link (.c-navigation__link, 2 instances)
navigation-group-2: inner block (.c-navigation__group-2, 2 instances), content not captured

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <div class="c-navigation__group-2"></div>
        </a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <div class="c-navigation__group-2"></div>
        </a>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group"></div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-navigation__item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-navigation__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-navigation__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-navigation__link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #0F0E0D;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-navigation__group-2 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

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), content not captured
navigation-2-group: inner flex column (.c-navigation-2__group, 2 instances)
navigation-2-title: heading, 8 characters (.c-navigation-2__title, 2 instances)
navigation-2-list: inner flex column (.c-navigation-2__list, 2 instances)
navigation-2-link: link, 8-character label (.c-navigation-2__link, 16 instances), content not captured
navigation-2-item: inner group (.c-navigation-2__item), content not captured

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <div class="c-navigation-2__group">
      <h3 class="c-navigation-2__title">lorem ip</h3>
      <ul class="c-navigation-2__list">
        <a class="c-navigation-2__link" href="#">lorem ip</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <a class="c-navigation-2__link" href="#">lorem</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum do</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum dolo</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum d</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-navigation-2__group">
      <h3 class="c-navigation-2__title">lorem ips</h3>
      <ul class="c-navigation-2__list">
        <a class="c-navigation-2__link" href="#">lorem ipsu</a>
        <a class="c-navigation-2__link" href="#">lorem ipsum d</a>
        <a class="c-navigation-2__link" href="#">lorem ipsu</a>
        <a class="c-navigation-2__link" href="#">lorem ip</a>
        <a class="c-navigation-2__link" href="#">lorem ips</a>
        <li class="c-navigation-2__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2 {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation-2__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-navigation-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-navigation-2__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation-2__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation-2__item {
  display: list-item;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Close button

Verification: verified against the live page at desktop.

Anatomy

close-button: the component root, a <button> (.c-close-button)
close-button-icon: icon placeholder, 16px (.c-close-button__icon)

Recipe

HTML · CSS

<div class="c-close-button-scope">
  <button class="c-close-button" type="button">
    <span class="c-close-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-close-button-scope {
  background-color: #C7C7C6;
  color: #424140;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-close-button {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-close-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

States

No hover or focus change was observed.

Header (landing)

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

Variant observed on https://www.harvey.ai/.

Anatomy

header-landing: the component root, a <header> (.c-header-landing)
header-landing-group: inner block (.c-header-landing__group)
header-landing-group-2: inner block (.c-header-landing__group-2)
header-landing-group-3: inner grid (.c-header-landing__group-3)
header-landing-group-4: inner flex row (.c-header-landing__group-4)
header-landing-group-5: inner flex row (.c-header-landing__group-5)
header-landing-logo: link (.c-header-landing__logo)
header-landing-logo-text: label text, 80 characters (.c-header-landing__logo-text)
header-landing-logo-text-2: label text, 10 characters (.c-header-landing__logo-text-2)
header-landing-menu-toggle: button (.c-header-landing__menu-toggle)
header-landing-menu-toggle-icon: icon placeholder, 16px (.c-header-landing__menu-toggle-icon)
header-landing-inner: inner flex row (.c-header-landing__inner)
header-landing-group-6: inner flex row (.c-header-landing__group-6)
header-landing-group-7: inner flex row (.c-header-landing__group-7)
header-landing-text: label text, 8 characters (.c-header-landing__text)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-nav-list: inner flex row (.c-header-landing__nav-list)
header-landing-nav-item: inner flex row (.c-header-landing__nav-item, 6 instances)
header-landing-cta: the button-ghost button (.c-header-landing__cta, 3 instances)
header-landing-group-8: inner flex row (.c-header-landing__group-8, 4 instances), content not captured
header-landing-nav-link: link (.c-header-landing__nav-link, 2 instances)
header-landing-group-9: inner block (.c-header-landing__group-9, 2 instances), content not captured
header-landing-menu-toggle-2: button (.c-header-landing__menu-toggle-2)
header-landing-group-10: inner flex row (.c-header-landing__group-10)
header-landing-group-11: inner flex row (.c-header-landing__group-11)
header-landing-group-12: inner flex row (.c-header-landing__group-12)
header-landing-group-13: inner block (.c-header-landing__group-13)
header-landing-menu-toggle-3: button (.c-header-landing__menu-toggle-3), content not captured
header-landing-cta-2: link (.c-header-landing__cta-2)
header-landing-text-2: label text, 14 characters (.c-header-landing__text-2)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <div class="c-header-landing__group"></div>
    <div class="c-header-landing__group-2">
      <div class="c-header-landing__group-3">
        <div class="c-header-landing__group-4">
          <div class="c-header-landing__group-5">
            <a class="c-header-landing__logo" href="#">
              <span class="c-header-landing__logo-text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</span>
              <span class="c-header-landing__logo-text-2">lorem ipsu</span>
            </a>
          </div>
          <button class="c-header-landing__menu-toggle" type="button">
            <span class="c-header-landing__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <div class="c-header-landing__inner">
        <div class="c-header-landing__group-6">
          <div class="c-header-landing__group-7">
            <div class="c-header-landing__text">lorem ip</div>
          </div>
          <nav class="c-header-landing__nav">
            <ul class="c-header-landing__nav-list">
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <a class="c-header-landing__nav-link" href="#">
                  <div class="c-header-landing__group-9"></div>
                </a>
              </li>
              <li class="c-header-landing__nav-item">
                <a class="c-header-landing__nav-link" href="#">
                  <div class="c-header-landing__group-9"></div>
                </a>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__cta" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
              <li class="c-header-landing__nav-item">
                <button class="c-header-landing__menu-toggle-2" type="button">
                  <div class="c-header-landing__group-8"></div>
                </button>
              </li>
            </ul>
          </nav>
          <div class="c-header-landing__group-10">
            <div class="c-header-landing__group-11">
              <div class="c-header-landing__group-12">
                <div class="c-header-landing__group-13">
                  <button class="c-header-landing__menu-toggle-3" type="button"></button>
                </div>
              </div>
              <a class="c-header-landing__cta-2" href="#">
                <p class="c-header-landing__text-2">lorem ipsum do</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-landing__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-header-landing__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-landing__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing__logo-text-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  font-weight: 500;
}

.c-header-landing__menu-toggle {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-header-landing__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

.c-header-landing__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__group-6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-landing__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-landing__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-header-landing__nav-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-landing__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing__group-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-landing__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-9 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__menu-toggle-2 {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-landing__group-11 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
}

.c-header-landing__group-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__group-13 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__menu-toggle-3 {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #FAFAF9;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 12px;
  padding-left: 12px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-header-landing__menu-toggle-3:hover {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-landing__menu-toggle-3:focus {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-landing__cta-2:hover {
  background-color: #8F8B85;
}

.c-header-landing__cta-2:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

Mobile anatomy

header-landing-mobile: the component root, a <header> (.c-header-landing-mobile)
header-landing-mobile-group: inner block (.c-header-landing-mobile__group)
header-landing-mobile-group-2: inner block (.c-header-landing-mobile__group-2)
header-landing-mobile-group-3: inner grid (.c-header-landing-mobile__group-3)
header-landing-mobile-group-4: inner flex row (.c-header-landing-mobile__group-4)
header-landing-mobile-group-5: inner flex row (.c-header-landing-mobile__group-5)
header-landing-mobile-group-6: inner flex row (.c-header-landing-mobile__group-6)
header-landing-mobile-logo: link (.c-header-landing-mobile__logo)
header-landing-mobile-group-7: inner flex row (.c-header-landing-mobile__group-7, 2 instances)
header-landing-mobile-group-8: inner group (.c-header-landing-mobile__group-8, 2 instances), content not captured
header-landing-mobile-logo-text: label text, 10 characters (.c-header-landing-mobile__logo-text, 2 instances)
header-landing-mobile-inner: inner flex row (.c-header-landing-mobile__inner)
header-landing-mobile-group-9: inner flex row (.c-header-landing-mobile__group-9)
header-landing-mobile-group-10: inner flex row (.c-header-landing-mobile__group-10)
header-landing-mobile-text: label text, 8 characters (.c-header-landing-mobile__text)
header-landing-mobile-group-11: inner flex row (.c-header-landing-mobile__group-11)
header-landing-mobile-group-12: inner flex row (.c-header-landing-mobile__group-12)
header-landing-mobile-menu-toggle: button (.c-header-landing-mobile__menu-toggle)
header-landing-mobile-menu-toggle-icon: icon placeholder, 24x25px (.c-header-landing-mobile__menu-toggle-icon)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__group"></div>
    <div class="c-header-landing-mobile__group-2">
      <div class="c-header-landing-mobile__group-3">
        <div class="c-header-landing-mobile__group-4">
          <div class="c-header-landing-mobile__group-5">
            <div class="c-header-landing-mobile__group-6">
              <a class="c-header-landing-mobile__logo" href="#">
                <span class="c-header-landing-mobile__group-7">
                  <span class="c-header-landing-mobile__group-8"></span>
                  <span class="c-header-landing-mobile__logo-text">lorem ipsu</span>
                </span>
                <span class="c-header-landing-mobile__group-7">
                  <span class="c-header-landing-mobile__group-8"></span>
                  <span class="c-header-landing-mobile__logo-text">lorem ipsu</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-landing-mobile__inner">
        <div class="c-header-landing-mobile__group-9">
          <div class="c-header-landing-mobile__group-10">
            <div class="c-header-landing-mobile__text">lorem ip</div>
          </div>
          <div class="c-header-landing-mobile__group-11">
            <div class="c-header-landing-mobile__group-12">
              <button class="c-header-landing-mobile__menu-toggle" type="button">
                <span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing-mobile__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing-mobile__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: left;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-landing-mobile__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 390px;
  background-color: #0F0E0D;
}

.c-header-landing-mobile__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-landing-mobile__group-6 {
  display: flex;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__logo {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  color: #FAFAF9;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -221.88, 0);
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-landing-mobile__group-7 {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding-right: 16px;
  padding-left: 16px;
}

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

.c-header-landing-mobile__logo-text {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  font-weight: 500;
}

.c-header-landing-mobile__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 28px;
  padding-left: 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__group-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-landing-mobile__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-landing-mobile__group-11 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

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

.c-header-landing-mobile__menu-toggle {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  z-index: 30;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-landing-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__logo:focus {
  transform: matrix(1, 0, 0, 1, -276.884, 0);
}

States

header-landing-menu-toggle-3 hover (header-landing-menu-toggle-3-hover): background-color #FAFAF9, color #0F0E0D
header-landing-menu-toggle-3 focus (header-landing-menu-toggle-3-focus): background-color #FAFAF9, color #0F0E0D
header-landing-cta-2 hover (header-landing-cta-2-hover): background-color #8F8B85
header-landing-cta-2 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
mobile, header-landing-mobile-logo focus: transform matrix(1, 0, 0, 1, -276.884, 0)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.harvey.ai/.

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-inner: inner block (.c-footer-landing__inner)
footer-landing-columns: inner flex row (.c-footer-landing__columns)
footer-landing-heading: heading, 50 characters (.c-footer-landing__heading)
footer-landing-link: link (.c-footer-landing__link)
footer-landing-text: label text, 14 characters (.c-footer-landing__text)
footer-landing-columns-2: inner flex row (.c-footer-landing__columns-2)
footer-landing-group: inner flex column (.c-footer-landing__group)
footer-landing-logo: icon placeholder, 45x32px (.c-footer-landing__logo)
footer-landing-group-2: inner flex column (.c-footer-landing__group-2)
footer-landing-inner-2: label text, 60 characters (.c-footer-landing__inner-2)
footer-landing-nav: inner grid (.c-footer-landing__nav)
footer-landing-group-3: inner flex column (.c-footer-landing__group-3, 5 instances), content not captured
footer-landing-heading-2: heading, 8 characters (.c-footer-landing__heading-2, 5 instances)
footer-landing-list: inner flex column (.c-footer-landing__list, 4 instances)
footer-landing-nav-link: link (.c-footer-landing__nav-link, 31 instances)
footer-landing-text-2: label text, 8 characters (.c-footer-landing__text-2, 31 instances)
footer-landing-group-4: inner group (.c-footer-landing__group-4, 31 instances)
footer-landing-nav-link-icon: icon placeholder, 24px (.c-footer-landing__nav-link-icon)

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__inner">
      <section class="c-footer-landing__columns">
        <h3 class="c-footer-landing__heading">lorem ipsum dolor sit amet consectetur adipiscing</h3>
        <a class="c-footer-landing__link" href="#">
          <p class="c-footer-landing__text">lorem ipsum do</p>
        </a>
      </section>
      <div class="c-footer-landing__columns-2">
        <div class="c-footer-landing__group">
          <span class="c-footer-landing__logo" aria-hidden="true"></span>
          <div class="c-footer-landing__group-2">
            <p class="c-footer-landing__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed d</p>
          </div>
        </div>
        <nav class="c-footer-landing__nav">
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ip</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dolor sit</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dolo</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ips</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsu</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsu</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum dol</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem i</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem i</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ip</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem ips</h3>
            <ul class="c-footer-landing__list">
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lore</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum d</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ipsum do</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__text-2">lorem ips</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
              <a class="c-footer-landing__nav-link" href="#">
                <span class="c-footer-landing__nav-link-icon" aria-hidden="true"></span>
                <span class="c-footer-landing__text-2">lorem ipsum dolor si</span>
                <span class="c-footer-landing__group-4"></span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing__group-3">
            <h3 class="c-footer-landing__heading-2">lorem</h3>
          </div>
        </nav>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1728px;
  padding: 64px 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 64px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #33312C;
}

.c-footer-landing__heading {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.24px;
}

.c-footer-landing__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-footer-landing__columns-2 {
  display: flex;
  box-sizing: border-box;
  margin-top: 64px;
}

.c-footer-landing__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  margin-right: 32px;
}

.c-footer-landing__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 224px;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  line-height: 18.2px;
}

.c-footer-landing__nav {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-left: auto;
}

.c-footer-landing__group-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-footer-landing__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-landing__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__nav-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing__group-4 {
  display: block;
  box-sizing: border-box;
  width: 12px;
  position: relative;
  margin-left: 4px;
}

.c-footer-landing__nav-link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-right: 4px;
}

.c-footer-landing__link:hover {
  background-color: #8F8B85;
}

.c-footer-landing__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing__nav-link:hover {
  color: #CCCAC6;
}

Mobile anatomy

footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)
footer-landing-mobile-inner: inner block (.c-footer-landing-mobile__inner)
footer-landing-mobile-group: inner flex column (.c-footer-landing-mobile__group)
footer-landing-mobile-heading: heading, 50 characters (.c-footer-landing-mobile__heading)
footer-landing-mobile-link: link (.c-footer-landing-mobile__link)
footer-landing-mobile-text: label text, 14 characters (.c-footer-landing-mobile__text)
footer-landing-mobile-group-2: inner flex column (.c-footer-landing-mobile__group-2)
footer-landing-mobile-group-3: inner flex column (.c-footer-landing-mobile__group-3)
footer-landing-mobile-logo: icon placeholder, 45x32px (.c-footer-landing-mobile__logo)
footer-landing-mobile-nav: inner grid (.c-footer-landing-mobile__nav)
footer-landing-mobile-group-4: inner flex column (.c-footer-landing-mobile__group-4, 5 instances)
footer-landing-mobile-heading-2: heading, 8 characters (.c-footer-landing-mobile__heading-2, 5 instances)
footer-landing-mobile-list: inner flex column (.c-footer-landing-mobile__list, 5 instances)
footer-landing-mobile-nav-link: link, 8-character label (.c-footer-landing-mobile__nav-link, 35 instances)
footer-landing-mobile-nav-link-icon: icon placeholder, 24px (.c-footer-landing-mobile__nav-link-icon)
footer-landing-mobile-text-2: label text, 20 characters (.c-footer-landing-mobile__text-2)
footer-landing-mobile-group-5: inner flex column (.c-footer-landing-mobile__group-5)
footer-landing-mobile-inner-2: label text, 60 characters (.c-footer-landing-mobile__inner-2)

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__inner">
      <section class="c-footer-landing-mobile__group">
        <h3 class="c-footer-landing-mobile__heading">lorem ipsum dolor sit amet consectetur adipiscing</h3>
        <a class="c-footer-landing-mobile__link" href="#">
          <p class="c-footer-landing-mobile__text">lorem ipsum do</p>
        </a>
      </section>
      <div class="c-footer-landing-mobile__group-2">
        <div class="c-footer-landing-mobile__group-3">
          <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
        </div>
        <nav class="c-footer-landing-mobile__nav">
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ip</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dolor sit</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dolo</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ips</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsu</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsu</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum dol</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem i</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem i</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem ips</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">lore</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum d</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ipsum do</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">
                <span class="c-footer-landing-mobile__nav-link-icon" aria-hidden="true"></span>
                <span class="c-footer-landing-mobile__text-2">lorem ipsum dolor si</span>
              </a>
            </ul>
          </div>
          <div class="c-footer-landing-mobile__group-4">
            <h3 class="c-footer-landing-mobile__heading-2">lorem</h3>
            <ul class="c-footer-landing-mobile__list">
              <a class="c-footer-landing-mobile__nav-link" href="#">l</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ip</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem i</a>
              <a class="c-footer-landing-mobile__nav-link" href="#">lorem ips</a>
            </ul>
          </div>
        </nav>
      </div>
      <div class="c-footer-landing-mobile__group-5">
        <p class="c-footer-landing-mobile__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed d</p>
      </div>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1728px;
  padding: 56px 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding-bottom: 56px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #33312C;
}

.c-footer-landing-mobile__heading {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px 0px 28px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.2px;
  letter-spacing: -0.24px;
}

.c-footer-landing-mobile__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-footer-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-footer-landing-mobile__group-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 56px;
}

.c-footer-landing-mobile__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 56px;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-landing-mobile__nav {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
  margin-bottom: 56px;
}

.c-footer-landing-mobile__group-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__nav-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-landing-mobile__nav-link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-right: 4px;
}

.c-footer-landing-mobile__group-5 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  margin-top: 28px;
}

.c-footer-landing-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 224px;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  line-height: 18.2px;
}

.c-footer-landing-mobile__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing-mobile__nav-link:hover {
  color: #CCCAC6;
}

States

footer-landing-link hover (footer-landing-link-hover): background-color #8F8B85
footer-landing-link focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
footer-landing-nav-link hover (footer-landing-nav-link-hover): color #CCCAC6
mobile, footer-landing-mobile-link focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
mobile, footer-landing-mobile-nav-link hover (footer-landing-mobile-nav-link-hover): color #CCCAC6

Card (2)

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: 3 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-2: the component root, a <a> (.c-card-2)
card-2-group: inner block (.c-card-2__group)
card-2-media: image placeholder, 448x252px (.c-card-2__media)
card-2-group-2: inner flex column (.c-card-2__group-2)
card-2-title: heading, 0 characters (.c-card-2__title)
card-2-text: label text, 28 characters (.c-card-2__text)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <a class="c-card-2" href="#">
    <div class="c-card-2__group">
      <span class="c-card-2__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-2__group-2">
      <h3 class="c-card-2__title">
        <strong class="c-card-2__text">lorem ipsum dolor sit amet c</strong>
      </h3>
    </div>
  </a>
</div>

.c-card-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-2__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 4px;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 448px;
  height: 252px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: scale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.c-card-2__title {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 24px;
  font-weight: 400;
  line-height: 31.2px;
  letter-spacing: -0.24px;
}

.c-card-2__text {
  display: inline;
  box-sizing: border-box;
  font-weight: 500;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

footer-link-column: the component root, a <nav> (.c-footer-link-column), content not captured
footer-link-column-group: inner flex column (.c-footer-link-column__group, 2 instances)
footer-link-column-title: heading, 8 characters (.c-footer-link-column__title, 2 instances)
footer-link-column-list: inner flex column (.c-footer-link-column__list, 2 instances)
footer-link-column-link: link, 8-character label (.c-footer-link-column__link, 16 instances), content not captured
footer-link-column-item: inner group (.c-footer-link-column__item), content not captured

Recipe

HTML · CSS

<div class="c-footer-link-column-scope">
  <nav class="c-footer-link-column">
    <div class="c-footer-link-column__group">
      <h3 class="c-footer-link-column__title">lorem ip</h3>
      <ul class="c-footer-link-column__list">
        <a class="c-footer-link-column__link" href="#">lorem ip</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <a class="c-footer-link-column__link" href="#">lorem</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum do</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum dolo</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum d</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-footer-link-column__group">
      <h3 class="c-footer-link-column__title">lorem ips</h3>
      <ul class="c-footer-link-column__list">
        <a class="c-footer-link-column__link" href="#">lorem ipsu</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsum d</a>
        <a class="c-footer-link-column__link" href="#">lorem ipsu</a>
        <a class="c-footer-link-column__link" href="#">lorem ip</a>
        <a class="c-footer-link-column__link" href="#">lorem ips</a>
        <li class="c-footer-link-column__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-footer-link-column-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-link-column {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-link-column__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-footer-link-column__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-footer-link-column__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-link-column__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-link-column__item {
  display: list-item;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

announcement-banner: the component root, a <header> (.c-announcement-banner)
announcement-banner-group: inner block (.c-announcement-banner__group)
announcement-banner-group-2: inner block (.c-announcement-banner__group-2)
announcement-banner-group-3: inner grid (.c-announcement-banner__group-3)
announcement-banner-group-4: inner flex row (.c-announcement-banner__group-4)
announcement-banner-group-5: inner flex row (.c-announcement-banner__group-5), content not captured
announcement-banner-button: button (.c-announcement-banner__button), content not captured
announcement-banner-group-6: inner flex row (.c-announcement-banner__group-6)
announcement-banner-group-7: inner flex row (.c-announcement-banner__group-7)
announcement-banner-group-8: inner flex row (.c-announcement-banner__group-8), content not captured
announcement-banner-group-9: inner flex row (.c-announcement-banner__group-9), content not captured
announcement-banner-group-10: inner flex row (.c-announcement-banner__group-10), content not captured

Recipe

HTML · CSS

<div class="c-announcement-banner-scope">
  <header class="c-announcement-banner">
    <div class="c-announcement-banner__group"></div>
    <div class="c-announcement-banner__group-2">
      <div class="c-announcement-banner__group-3">
        <div class="c-announcement-banner__group-4">
          <div class="c-announcement-banner__group-5"></div>
          <button class="c-announcement-banner__button" type="button"></button>
        </div>
      </div>
      <div class="c-announcement-banner__group-6">
        <div class="c-announcement-banner__group-7">
          <div class="c-announcement-banner__group-8"></div>
          <nav class="c-announcement-banner__group-9"></nav>
          <div class="c-announcement-banner__group-10"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-announcement-banner-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-announcement-banner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-announcement-banner__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-announcement-banner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-announcement-banner__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-announcement-banner__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #0F0E0D;
}

.c-announcement-banner__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-announcement-banner__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-announcement-banner__button {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-announcement-banner__group-6 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-announcement-banner__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-announcement-banner__group-8 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-announcement-banner__group-9 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-announcement-banner__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

States

No hover or focus change was observed.

Header (inner)

Verification: verified against the live page at desktop.

Variant observed on https://www.harvey.ai/blog/harvey-raises-dollar550m-at-a-dollar155b-valuation-to-help-legal-teams-own-their-intelligence.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-group: inner block (.c-header-inner__group)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner flex row (.c-header-inner__nav-item, 6 instances)
header-inner-cta: the button-ghost button (.c-header-inner__cta, 3 instances)
header-inner-group-2: inner flex row (.c-header-inner__group-2, 4 instances)
header-inner-text: label text, 8 characters (.c-header-inner__text, 4 instances)
header-inner-icon: icon placeholder, 16px (.c-header-inner__icon, 4 instances)
header-inner-nav-link: link, 9-character label (.c-header-inner__nav-link, 2 instances)
header-inner-button: button (.c-header-inner__button)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group"></div>
    <ul class="c-header-inner__nav">
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ip</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ips</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <a class="c-header-inner__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-inner__nav-item">
        <a class="c-header-inner__nav-link" href="#">lorem ip</a>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__cta" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem ips</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner__nav-item">
        <button class="c-header-inner__button" type="button">
          <div class="c-header-inner__group-2">
            <span class="c-header-inner__text">lorem i</span>
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner__group {
  display: block;
  box-sizing: border-box;
  width: 79.8125px;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 535.312px;
  z-index: 10001;
  background-color: #0F0E0D;
  opacity: 0.359248;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner__group-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #0F0E0D;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

States

No hover or focus change was observed.

Button, primary

Verification: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <button> (.c-button-primary)
button-primary-label: label text, 5 characters (.c-button-primary__label)
button-primary-icon: icon placeholder, 18px (.c-button-primary__icon)

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">
    <span class="c-button-primary__label">lorem</span>
    <span class="c-button-primary__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-primary-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-primary {
  display: flex;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-button-primary__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-primary__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-primary:hover {
  background-color: #0F0E0D;
  color: #FAFAF9;
}

.c-button-primary:focus {
  background-color: #0F0E0D;
  color: #FAFAF9;
}

States

hover (button-primary-hover): background-color #0F0E0D, color #FAFAF9
focus (button-primary-focus): background-color #0F0E0D, color #FAFAF9

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary)
button-secondary-group: inner flex row (.c-button-secondary__group)
button-secondary-label: label text, 13 characters (.c-button-secondary__label)
button-secondary-icon: icon placeholder, 16px (.c-button-secondary__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <div class="c-button-secondary__group">
      <span class="c-button-secondary__label">lorem ipsum d</span>
      <span class="c-button-secondary__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 20px;
  background-color: transparent;
  color: #8F8B85;
  border: 1px solid #33312C;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-secondary__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-secondary__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-button-secondary:hover {
  color: #FAFAF9;
}

States

hover (button-secondary-hover): color #FAFAF9

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-group: inner flex row (.c-button-ghost-2__group)
button-ghost-2-label: label text, 8 characters (.c-button-ghost-2__label)
button-ghost-2-icon: icon placeholder, 16px (.c-button-ghost-2__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <span class="c-button-ghost-2__label">lorem ip</span>
      <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-2__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-button-ghost-2__label {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

States

No hover or focus change was observed.

Input

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-input-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 298px;
  height: 63px;
  padding: 20px 40px 20px 20px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #33312C;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-input:focus {
  border: 1px solid #FAFAF9;
  outline: none;
}

States

focus: border 1px solid #FAFAF9, outline none

Card (3)

Verification: flagged, the render matched 8% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 6 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-3: the component root, a <a> (.c-card-3)
card-3-group: inner block (.c-card-3__group)
card-3-group-2: inner block (.c-card-3__group-2)
card-3-group-3: inner block (.c-card-3__group-3, 2 instances), content not captured
card-3-media: image placeholder, 448px (.c-card-3__media)
card-3-group-4: inner block (.c-card-3__group-4)
card-3-group-5: inner flex column (.c-card-3__group-5)
card-3-media-2: image placeholder, 120x57px (.c-card-3__media-2)
card-3-group-6: inner block (.c-card-3__group-6)
card-3-group-7: inner flex column (.c-card-3__group-7)
card-3-title: heading, 98 characters (.c-card-3__title)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <a class="c-card-3" href="#">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3">
          <div class="c-card-3__group-3"></div>
        </div>
      </div>
      <span class="c-card-3__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-3__group-4"></div>
    <div class="c-card-3__group-5">
      <span class="c-card-3__media-2" aria-hidden="true"></span>
      <div class="c-card-3__group-6">
        <div class="c-card-3__group-7">
          <h4 class="c-card-3__title">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit</h4>
        </div>
      </div>
    </div>
  </a>
</div>

.c-card-3-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #0F0E0D;
  color: #FAFAF9;
  border-radius: 8px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__group-3 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 448px;
  height: 448px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(to top, #000000 0%, #00000033 20%);
}

.c-card-3__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition: opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.c-card-3__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 57px;
  max-width: 120px;
  min-height: 32px;
  max-height: 80px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: 32px;
  margin-left: 32px;
}

.c-card-3__group-6 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-3__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  box-sizing: border-box;
  padding: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.2px;
}

States

No hover or focus change was observed.

Card (4)

Verification: verified against the live page at desktop.

Anatomy

Group: 6 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-4: the component root, a <a> (.c-card-4)
card-4-group: inner flex row (.c-card-4__group)
card-4-group-2: inner block (.c-card-4__group-2)
card-4-media: image placeholder, 84x100px (.c-card-4__media)
card-4-body: label text, 71 characters (.c-card-4__body)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <a class="c-card-4" href="#">
    <figure class="c-card-4__group">
      <div class="c-card-4__group-2"></div>
      <span class="c-card-4__media" aria-hidden="true"></span>
    </figure>
    <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</p>
  </a>
</div>

.c-card-4-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAF9;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: none;
}

.c-card-4__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  margin: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 4px;
}

.c-card-4__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #1F1D1A;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card-4__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 84px;
  height: 100px;
  max-width: 300px;
  max-height: 100px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
  border-radius: 4px;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
}

States

No hover or focus change was observed.

Card (5)

Verification: flagged, the card-5-group y did not reproduce the measured 43px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-group: inner block (.c-card-5__group)
card-5-body: label text, 21 characters (.c-card-5__body)
card-5-body-2: label text, 3 characters (.c-card-5__body-2)

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <p class="c-card-5__body">lorem ipsum dolor sit</p>
    </div>
    <p class="c-card-5__body-2">lor</p>
  </div>
</div>

.c-card-5-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-5 {
  display: grid;
  align-items: center;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 32px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 16px;
}

.c-card-5__body {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 20px;
  line-height: 26px;
}

.c-card-5__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 72px;
  line-height: 75.6px;
  letter-spacing: -0.9px;
}

.c-card-5:hover {
  padding: 32px 0px;
}

.c-card-5:focus {
  padding: 32px 0px;
}

States

hover: padding 32px 0px
focus: padding 32px 0px

Play button

Verification: verified against the live page at desktop.

Anatomy

play-button: the component root, a <button> (.c-play-button)

Recipe

HTML · CSS

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

.c-play-button-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-play-button {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

States

No hover or focus change was observed.

Logo carousel

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: 6 instances in a 24-column grid; the recipe carries the values they all share
logo-carousel: the component root, a <li> (.c-logo-carousel)
logo-carousel-media: image placeholder, 93x60px (.c-logo-carousel__media)

Recipe

HTML · CSS

<div class="c-logo-carousel-scope">
  <li class="c-logo-carousel">
    <span class="c-logo-carousel__media" aria-hidden="true"></span>
  </li>
</div>

.c-logo-carousel-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo-carousel {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
  padding-right: 24px;
  padding-left: 24px;
}

.c-logo-carousel__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 93px;
  height: 60px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

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-link: link (.c-pagination__link)
pagination-icon: icon placeholder, 20px (.c-pagination__icon)
pagination-list: inner flex row (.c-pagination__list)
pagination-link-active: link, 1-character label (.c-pagination__link-active)
pagination-link-2: link, 1-character label (.c-pagination__link-2, 5 instances)
pagination-icon-2: icon placeholder, 20px (.c-pagination__icon-2)

Recipe

HTML · CSS

<div class="c-pagination-scope">
  <nav class="c-pagination">
    <a class="c-pagination__link" href="#">
      <span class="c-pagination__icon" aria-hidden="true"></span>
    </a>
    <ul class="c-pagination__list">
      <a class="c-pagination__link-active" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
      <a class="c-pagination__link-2" href="#">l</a>
    </ul>
    <span class="c-pagination__icon-2" aria-hidden="true"></span>
  </nav>
</div>

.c-pagination-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-pagination {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-right: 24px;
}

.c-pagination__link {
  display: block;
  box-sizing: border-box;
  color: #33312C;
  cursor: auto;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-pagination__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-pagination__list {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-pagination__link-active {
  display: inline;
  box-sizing: border-box;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 8px;
  padding-left: 8px;
}

.c-pagination__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #8F8B85;
  cursor: pointer;
  font-size: 20px;
  line-height: 26px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 8px;
  padding-left: 8px;
}

.c-pagination__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  cursor: pointer;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

announcement-banner-2: the component root, a <button> (.c-announcement-banner-2)
announcement-banner-2-icon: icon placeholder, 16px (.c-announcement-banner-2__icon)

Recipe

HTML · CSS

<div class="c-announcement-banner-2-scope">
  <button class="c-announcement-banner-2" type="button">
    <span class="c-announcement-banner-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-announcement-banner-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-announcement-banner-2 {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-announcement-banner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

States

No hover or focus change was observed.

Header (inner, 2)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.harvey.ai/customers.

Anatomy

header-inner-2: the component root, a <header> (.c-header-inner-2)
header-inner-2-group: inner block (.c-header-inner-2__group)
header-inner-2-group-2: inner block (.c-header-inner-2__group-2)
header-inner-2-group-3: inner grid (.c-header-inner-2__group-3)
header-inner-2-group-4: inner flex row (.c-header-inner-2__group-4)
header-inner-2-group-5: inner flex row (.c-header-inner-2__group-5)
header-inner-2-logo: link (.c-header-inner-2__logo)
header-inner-2-logo-text: label text, 80 characters (.c-header-inner-2__logo-text)
header-inner-2-logo-text-2: label text, 10 characters (.c-header-inner-2__logo-text-2)
header-inner-2-menu-toggle: button (.c-header-inner-2__menu-toggle)
header-inner-2-menu-toggle-icon: icon placeholder, 16px (.c-header-inner-2__menu-toggle-icon)
header-inner-2-inner: inner flex row (.c-header-inner-2__inner)
header-inner-2-group-6: inner flex row (.c-header-inner-2__group-6)
header-inner-2-group-7: inner flex row (.c-header-inner-2__group-7)
header-inner-2-text: label text, 8 characters (.c-header-inner-2__text)
header-inner-2-nav: inner flex row (.c-header-inner-2__nav)
header-inner-2-nav-list: inner flex row (.c-header-inner-2__nav-list)
header-inner-2-nav-item: inner flex row (.c-header-inner-2__nav-item, 6 instances)
header-inner-2-cta: the button-ghost-2 button (.c-header-inner-2__cta, 3 instances)
header-inner-2-group-8: inner flex row (.c-header-inner-2__group-8, 4 instances), content not captured
header-inner-2-nav-link: link (.c-header-inner-2__nav-link, 2 instances)
header-inner-2-group-9: inner block (.c-header-inner-2__group-9, 2 instances), content not captured
header-inner-2-menu-toggle-2: button (.c-header-inner-2__menu-toggle-2)
header-inner-2-group-10: inner flex row (.c-header-inner-2__group-10)
header-inner-2-group-11: inner flex row (.c-header-inner-2__group-11)
header-inner-2-group-12: inner flex row (.c-header-inner-2__group-12)
header-inner-2-group-13: inner block (.c-header-inner-2__group-13)
header-inner-2-cta-2: the button-primary button (.c-header-inner-2__cta-2), content not captured
header-inner-2-cta-3: link (.c-header-inner-2__cta-3)
header-inner-2-text-2: label text, 14 characters (.c-header-inner-2__text-2)

Desktop recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <header class="c-header-inner-2">
    <div class="c-header-inner-2__group"></div>
    <div class="c-header-inner-2__group-2">
      <div class="c-header-inner-2__group-3">
        <div class="c-header-inner-2__group-4">
          <div class="c-header-inner-2__group-5">
            <a class="c-header-inner-2__logo" href="#">
              <span class="c-header-inner-2__logo-text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</span>
              <span class="c-header-inner-2__logo-text-2">lorem ipsu</span>
            </a>
          </div>
          <button class="c-header-inner-2__menu-toggle" type="button">
            <span class="c-header-inner-2__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <div class="c-header-inner-2__inner">
        <div class="c-header-inner-2__group-6">
          <div class="c-header-inner-2__group-7">
            <div class="c-header-inner-2__text">lorem ip</div>
          </div>
          <nav class="c-header-inner-2__nav">
            <ul class="c-header-inner-2__nav-list">
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <a class="c-header-inner-2__nav-link" href="#">
                  <div class="c-header-inner-2__group-9"></div>
                </a>
              </li>
              <li class="c-header-inner-2__nav-item">
                <a class="c-header-inner-2__nav-link" href="#">
                  <div class="c-header-inner-2__group-9"></div>
                </a>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__cta" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
              <li class="c-header-inner-2__nav-item">
                <button class="c-header-inner-2__menu-toggle-2" type="button">
                  <div class="c-header-inner-2__group-8"></div>
                </button>
              </li>
            </ul>
          </nav>
          <div class="c-header-inner-2__group-10">
            <div class="c-header-inner-2__group-11">
              <div class="c-header-inner-2__group-12">
                <div class="c-header-inner-2__group-13">
                  <button class="c-header-inner-2__cta-2" type="button"></button>
                </div>
              </div>
              <a class="c-header-inner-2__cta-3" href="#">
                <p class="c-header-inner-2__text-2">lorem ipsum do</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-2__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-inner-2__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-header-inner-2__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-inner-2__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
  box-sizing: border-box;
  color: #0F0E0D;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-2__logo-text-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  font-weight: 500;
}

.c-header-inner-2__menu-toggle {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-header-inner-2__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

.c-header-inner-2__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__group-6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-2__group-7 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-header-inner-2__nav-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner-2__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2__group-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner-2__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-9 {
  display: block;
  box-sizing: border-box;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__menu-toggle-2 {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner-2__group-11 {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100%;
}

.c-header-inner-2__group-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__group-13 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__cta-2 {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 32px;
  padding: 7px 7px 7px 12px;
  background-color: transparent;
  color: #FAFAF9;
  border: 1px solid #FAFAF9;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 12px;
  padding-left: 12px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
}

.c-header-inner-2__cta-2:hover {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-inner-2__cta-2:focus {
  background-color: #FAFAF9;
  color: #0F0E0D;
}

.c-header-inner-2__cta-3:hover {
  background-color: #8F8B85;
}

.c-header-inner-2__cta-3:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px;
  outline: none;
}

Mobile anatomy

header-inner-2-mobile: the component root, a <header> (.c-header-inner-2-mobile)
header-inner-2-mobile-group: inner block (.c-header-inner-2-mobile__group)
header-inner-2-mobile-group-2: inner block (.c-header-inner-2-mobile__group-2)
header-inner-2-mobile-group-3: inner grid (.c-header-inner-2-mobile__group-3)
header-inner-2-mobile-group-4: inner flex row (.c-header-inner-2-mobile__group-4)
header-inner-2-mobile-group-5: inner flex row (.c-header-inner-2-mobile__group-5)
header-inner-2-mobile-group-6: inner flex row (.c-header-inner-2-mobile__group-6)
header-inner-2-mobile-logo: link (.c-header-inner-2-mobile__logo)
header-inner-2-mobile-group-7: inner flex row (.c-header-inner-2-mobile__group-7, 2 instances)
header-inner-2-mobile-group-8: inner group (.c-header-inner-2-mobile__group-8, 2 instances), content not captured
header-inner-2-mobile-logo-text: label text, 10 characters (.c-header-inner-2-mobile__logo-text, 2 instances)
header-inner-2-mobile-inner: inner flex row (.c-header-inner-2-mobile__inner)
header-inner-2-mobile-group-9: inner flex row (.c-header-inner-2-mobile__group-9)
header-inner-2-mobile-group-10: inner flex row (.c-header-inner-2-mobile__group-10)
header-inner-2-mobile-text: label text, 8 characters (.c-header-inner-2-mobile__text)
header-inner-2-mobile-group-11: inner flex row (.c-header-inner-2-mobile__group-11)
header-inner-2-mobile-group-12: inner flex row (.c-header-inner-2-mobile__group-12)
header-inner-2-mobile-menu-toggle: button (.c-header-inner-2-mobile__menu-toggle)
header-inner-2-mobile-menu-toggle-icon: icon placeholder, 24x25px (.c-header-inner-2-mobile__menu-toggle-icon)

Mobile recipe

HTML · CSS

<div class="c-header-inner-2-mobile-scope">
  <header class="c-header-inner-2-mobile">
    <div class="c-header-inner-2-mobile__group"></div>
    <div class="c-header-inner-2-mobile__group-2">
      <div class="c-header-inner-2-mobile__group-3">
        <div class="c-header-inner-2-mobile__group-4">
          <div class="c-header-inner-2-mobile__group-5">
            <div class="c-header-inner-2-mobile__group-6">
              <a class="c-header-inner-2-mobile__logo" href="#">
                <span class="c-header-inner-2-mobile__group-7">
                  <span class="c-header-inner-2-mobile__group-8"></span>
                  <span class="c-header-inner-2-mobile__logo-text">lorem ipsu</span>
                </span>
                <span class="c-header-inner-2-mobile__group-7">
                  <span class="c-header-inner-2-mobile__group-8"></span>
                  <span class="c-header-inner-2-mobile__logo-text">lorem ipsu</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="c-header-inner-2-mobile__inner">
        <div class="c-header-inner-2-mobile__group-9">
          <div class="c-header-inner-2-mobile__group-10">
            <div class="c-header-inner-2-mobile__text">lorem ip</div>
          </div>
          <div class="c-header-inner-2-mobile__group-11">
            <div class="c-header-inner-2-mobile__group-12">
              <button class="c-header-inner-2-mobile__menu-toggle" type="button">
                <span class="c-header-inner-2-mobile__menu-toggle-icon" aria-hidden="true"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2-mobile__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #FAFAF9B8;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-2-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-2-mobile__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-size: 14px;
  line-height: 18.2px;
  text-align: left;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-header-inner-2-mobile__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 390px;
  background-color: #0F0E0D;
}

.c-header-inner-2-mobile__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2-mobile__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-header-inner-2-mobile__group-6 {
  display: flex;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-inner-2-mobile__logo {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  color: #FAFAF9;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, -134.083, 0);
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-inner-2-mobile__group-7 {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding-right: 16px;
  padding-left: 16px;
}

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

.c-header-inner-2-mobile__logo-text {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  font-weight: 500;
}

.c-header-inner-2-mobile__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 28px;
  padding-left: 28px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2-mobile__group-9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-2-mobile__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-2-mobile__text {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: HarveySerifFont, "HarveySerifFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 28px;
  line-height: 39.2px;
}

.c-header-inner-2-mobile__group-11 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

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

.c-header-inner-2-mobile__menu-toggle {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  z-index: 30;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-2-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__logo:focus {
  transform: matrix(1, 0, 0, 1, -188.31, 0);
}

States

header-inner-2-cta-2 hover (header-inner-2-cta-2-hover): background-color #FAFAF9, color #0F0E0D
header-inner-2-cta-2 focus (header-inner-2-cta-2-focus): background-color #FAFAF9, color #0F0E0D
header-inner-2-cta-3 hover (header-inner-2-cta-3-hover): background-color #8F8B85
header-inner-2-cta-3 focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, transparent 0px 0px 0px 0px, outline none
mobile, header-inner-2-mobile-logo focus: transform matrix(1, 0, 0, 1, -188.31, 0)

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-2: the component root, a <button> (.c-button-secondary-2)
button-secondary-2-icon: icon placeholder, 24x25px (.c-button-secondary-2__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">
    <span class="c-button-secondary-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-secondary-2-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-secondary-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 72px;
  aspect-ratio: 1 / 1;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FAFAF933;
  color: #0F0E0D;
  border: 1px solid #FAFAF94D;
  border-radius: 3.35544e+07px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-secondary-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-icon: icon placeholder, 16px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-button-ghost-3 {
  display: inline-flex;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: opacity 0.3s cubic-bezier(0.3, 0.3, 0.3, 1);
}

States

No hover or focus change was observed.

Card (6)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 1-column grid, 128px gap; the recipe carries the values they all share
card-6: the component root, a <div> (.c-card-6)
card-6-group: inner flex row (.c-card-6__group)
card-6-group-2: inner block (.c-card-6__group-2, 2 instances)
card-6-title: heading, 19 characters (.c-card-6__title)
card-6-body: label text, 120 characters (.c-card-6__body)
card-6-group-3: inner flex row (.c-card-6__group-3)
card-6-group-4: inner block (.c-card-6__group-4)
card-6-media: image placeholder, 688x516px (.c-card-6__media)
card-6-media-2: image placeholder, 688x516px (.c-card-6__media-2)
card-6-group-5: inner flex column (.c-card-6__group-5)
card-6-group-6: inner block (.c-card-6__group-6, 4 instances)
card-6-title-2: heading, 14 characters (.c-card-6__title-2, 4 instances)
card-6-body-2: label text, 105 characters (.c-card-6__body-2, 4 instances)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__group-2">
        <h3 class="c-card-6__title">lorem ipsum dolor s</h3>
      </div>
      <p class="c-card-6__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adip</p>
    </div>
    <div class="c-card-6__group-3">
      <div class="c-card-6__group-2">
        <div class="c-card-6__group-4">
          <span class="c-card-6__media" aria-hidden="true"></span>
          <span class="c-card-6__media-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-card-6__group-5">
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum do</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet c</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consect</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor sit amet</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</p>
        </div>
        <div class="c-card-6__group-6">
          <h4 class="c-card-6__title-2">lorem ipsum dolor</h4>
          <p class="c-card-6__body-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur</p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-6-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  max-height: 778px;
  position: sticky;
  top: 106px;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-6__group {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-bottom: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-6__group-2 {
  display: block;
  box-sizing: border-box;
  width: 50%;
}

.c-card-6__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 32px;
  font-weight: 500;
  line-height: 35.2px;
  letter-spacing: -0.32px;
}

.c-card-6__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.c-card-6__group-3 {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-6__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1.33399 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
}

.c-card-6__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 688px;
  height: 516px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-6__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 688px;
  height: 516px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-6__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  box-sizing: border-box;
  width: 40%;
  padding-right: 64px;
}

.c-card-6__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding-top: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-6__title-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.16px;
}

.c-card-6__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  line-height: 20.8px;
}

.c-card-6:hover {
  z-index: 1;
}

.c-card-6:focus {
  z-index: 1;
}

States

hover: z-index 1
focus: z-index 1

Card (7)

Verification: verified against the live page at desktop.

Anatomy

Group: 4 instances in a 1-column grid, 32px gap; the recipe carries the values they all share
card-7: the component root, a <div> (.c-card-7)
card-7-title: heading, 14 characters (.c-card-7__title)
card-7-body: label text, 105 characters (.c-card-7__body)

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <div class="c-card-7">
    <h4 class="c-card-7__title">lorem ipsum do</h4>
    <p class="c-card-7__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet c</p>
  </div>
</div>

.c-card-7-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-7 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-top: 16px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #CCCAC6;
}

.c-card-7__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.16px;
}

.c-card-7__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #33312C;
  line-height: 20.8px;
}

States

No hover or focus change was observed.

Video player

Verification: verified against the live page at desktop.

Anatomy

video-player: the component root, a <button> (.c-video-player)
video-player-group: inner group (.c-video-player__group)

Recipe

HTML · CSS

<div class="c-video-player-scope">
  <button class="c-video-player" type="button">
    <div class="c-video-player__group"></div>
  </button>
</div>

.c-video-player-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-video-player {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-video-player__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
  line-height: 0px;
}

States

No hover or focus change was observed.

Link list

Verification: verified against the live page at desktop.

Anatomy

link-list: the component root, a <nav> (.c-link-list), content not captured
link-list-group: inner flex column (.c-link-list__group, 2 instances)
link-list-title: heading, 8 characters (.c-link-list__title, 2 instances)
link-list-list: inner flex column (.c-link-list__list, 2 instances)
link-list-link: link, 8-character label (.c-link-list__link, 16 instances), content not captured
link-list-item: inner group (.c-link-list__item), content not captured

Recipe

HTML · CSS

<div class="c-link-list-scope">
  <nav class="c-link-list">
    <div class="c-link-list__group">
      <h3 class="c-link-list__title">lorem ip</h3>
      <ul class="c-link-list__list">
        <a class="c-link-list__link" href="#">lorem ip</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <a class="c-link-list__link" href="#">lorem</a>
        <a class="c-link-list__link" href="#">lorem ipsum do</a>
        <a class="c-link-list__link" href="#">lorem ipsum dolor sit</a>
        <a class="c-link-list__link" href="#">lorem ipsum dolo</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <a class="c-link-list__link" href="#">lorem ipsum d</a>
        <a class="c-link-list__link" href="#">lorem ipsum</a>
      </ul>
    </div>
    <div class="c-link-list__group">
      <h3 class="c-link-list__title">lorem ips</h3>
      <ul class="c-link-list__list">
        <a class="c-link-list__link" href="#">lorem ipsu</a>
        <a class="c-link-list__link" href="#">lorem ipsum d</a>
        <a class="c-link-list__link" href="#">lorem ipsu</a>
        <a class="c-link-list__link" href="#">lorem ip</a>
        <a class="c-link-list__link" href="#">lorem ips</a>
        <li class="c-link-list__item"></li>
      </ul>
    </div>
  </nav>
</div>

.c-link-list-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-link-list {
  display: inline-grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-link-list__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.c-link-list__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #8F8B85;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  letter-spacing: -0.14px;
}

.c-link-list__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-link-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  color: #FAFAF9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-link-list__item {
  display: list-item;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

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

Anatomy

banner: the component root, a <header> (.c-banner)
banner-group: inner block (.c-banner__group)
banner-group-2: inner block (.c-banner__group-2)
banner-group-3: inner grid (.c-banner__group-3)
banner-group-4: inner flex row (.c-banner__group-4)
banner-group-5: inner flex row (.c-banner__group-5), content not captured
banner-button: button (.c-banner__button), content not captured
banner-group-6: inner flex row (.c-banner__group-6)
banner-group-7: inner flex row (.c-banner__group-7)
banner-group-8: inner flex row (.c-banner__group-8), content not captured
banner-group-9: inner flex row (.c-banner__group-9), content not captured
banner-group-10: inner flex row (.c-banner__group-10), content not captured

Recipe

HTML · CSS

<div class="c-banner-scope">
  <header class="c-banner">
    <div class="c-banner__group"></div>
    <div class="c-banner__group-2">
      <div class="c-banner__group-3">
        <div class="c-banner__group-4">
          <div class="c-banner__group-5"></div>
          <button class="c-banner__button" type="button"></button>
        </div>
      </div>
      <div class="c-banner__group-6">
        <div class="c-banner__group-7">
          <div class="c-banner__group-8"></div>
          <nav class="c-banner__group-9"></nav>
          <div class="c-banner__group-10"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-banner-scope {
  background-color: #0F0E0D;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-banner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-banner__group {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0F0E0D99;
  backdrop-filter: blur(16px);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-banner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-banner__group-3 {
  display: grid;
  grid-template-rows: 1fr;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-size: 14px;
  line-height: 18.2px;
  text-align: center;
  padding-right: 32px;
  padding-left: 32px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: grid-template-rows, color, background-color;
}

.c-banner__group-3::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1440px;
  background-color: #FAFAF9;
}

.c-banner__group-4 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-banner__group-5 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.c-banner__button {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 32px;
  background-color: transparent;
  color: #0F0E0D;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  margin-right: -8px;
}

.c-banner__group-6 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  max-width: 1920px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-banner__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-banner__group-8 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-banner__group-9 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  margin-right: auto;
  margin-left: 16px;
}

.c-banner__group-10 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

breadcrumb: the component root, a <nav> (.c-breadcrumb)
breadcrumb-list: inner flex row (.c-breadcrumb__list)
breadcrumb-item: inner group (.c-breadcrumb__item, 2 instances)
breadcrumb-link: link (.c-breadcrumb__link)
breadcrumb-text: label text, 8 characters (.c-breadcrumb__text, 2 instances)
breadcrumb-text-active: label text, 14 characters (.c-breadcrumb__text-active)

Recipe

HTML · CSS

<div class="c-breadcrumb-scope">
  <nav class="c-breadcrumb">
    <ol class="c-breadcrumb__list">
      <li class="c-breadcrumb__item">
        <a class="c-breadcrumb__link" href="#">
          <span class="c-breadcrumb__text">lorem ip</span>
          <span class="c-breadcrumb__text">l</span>
        </a>
      </li>
      <li class="c-breadcrumb__item">
        <span class="c-breadcrumb__text-active">lorem ipsum do</span>
      </li>
    </ol>
  </nav>
</div>

.c-breadcrumb-scope {
  background-color: #FAFAF9;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-breadcrumb {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0E0D;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-breadcrumb__item {
  display: list-item;
  box-sizing: border-box;
  color: #706D66;
  font-weight: 500;
  line-height: 20.8px;
}

.c-breadcrumb__link {
  display: inline;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-breadcrumb__text-active {
  display: inline;
  box-sizing: border-box;
  color: #0F0E0D;
}

States

No hover or focus change was observed.

Header (inner, 3)

Verification: verified against the live page at desktop.

Variant observed on https://www.harvey.ai/platform/command-center.

Anatomy

header-inner-3: the component root, a <nav> (.c-header-inner-3)
header-inner-3-nav: inner flex row (.c-header-inner-3__nav)
header-inner-3-nav-item: inner flex row (.c-header-inner-3__nav-item, 6 instances)
header-inner-3-cta: the button-ghost button (.c-header-inner-3__cta, 2 instances)
header-inner-3-group: inner flex row (.c-header-inner-3__group, 4 instances)
header-inner-3-text: label text, 8 characters (.c-header-inner-3__text, 4 instances)
header-inner-3-icon: icon placeholder, 16px (.c-header-inner-3__icon, 4 instances)
header-inner-3-nav-link: link, 9-character label (.c-header-inner-3__nav-link, 2 instances)
header-inner-3-button: button (.c-header-inner-3__button, 2 instances)

Recipe

HTML · CSS

<div class="c-header-inner-3-scope">
  <nav class="c-header-inner-3">
    <ul class="c-header-inner-3__nav">
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__cta" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ip</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__cta" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ips</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <a class="c-header-inner-3__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-inner-3__nav-item">
        <a class="c-header-inner-3__nav-link" href="#">lorem ip</a>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__button" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem ips</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
      <li class="c-header-inner-3__nav-item">
        <button class="c-header-inner-3__button" type="button">
          <div class="c-header-inner-3__group">
            <span class="c-header-inner-3__text">lorem i</span>
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </button>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-3-scope {
  background-color: #0F0E0D;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-3 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FAFAF9;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-inner-3__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner-3__nav-item {
  display: flex;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.3, 0.3, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-3__cta {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-3__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
  line-height: 18.2px;
}

.c-header-inner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-3__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 100%;
  color: #FAFAF9;
  cursor: pointer;
  line-height: 18.2px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.7, 0.3, 1);
  transition-property: color, background-color, border-color, fill, stroke;
}

.c-header-inner-3__button {
  display: block;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  background-color: transparent;
  color: #FAFAF9;
  border: 0;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

States

No hover or focus change was observed.

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-button-primary-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  padding: 0px 20px;
  background-color: #0F0E0D;
  color: #FAFAF9;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: all 0.2s ease-in-out;
}

.c-button-primary-2:hover {
  background-color: #33312C;
}

.c-button-primary-2:focus {
  box-shadow: #8F8B85 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px;
  outline: none;
}

States

hover (button-primary-2-hover): background-color #33312C
focus: box-shadow #8F8B85 0px 0px 0px 2px, #8F8B85 0px 0px 0px 4px, outline none

Input (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-input-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-input-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-input-2:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-input-2:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

States

hover: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D
focus: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D, outline none

Select

Verification: verified against the live page at desktop.

Anatomy

select: the component root, a <select> (.c-select), 9-character placeholder

Recipe

HTML · CSS

<div class="c-select-scope">
  <select class="c-select"><option>lorem ips</option></select>
</div>

.c-select-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-select {
  display: block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 736px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 40px 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: default;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-select:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-select:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

States

hover: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D
focus: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D, outline none

Select (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-select-2-scope">
  <select class="c-select-2"><option>lorem ips</option></select>
</div>

.c-select-2-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-select-2 {
  display: block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 40px 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: default;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-select-2:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-select-2:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
  outline: none;
}

States

hover: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D
focus: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D, outline none

Form field group

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
form-field-group: the component root, a <div> (.c-form-field-group)
form-field-group-group: inner flex column (.c-form-field-group__group)
form-field-group-group-2: inner flex column (.c-form-field-group__group-2, 2 instances)
form-field-group-group-3: inner group (.c-form-field-group__group-3, 2 instances)
form-field-group-text: label text, 1 characters (.c-form-field-group__text, 2 instances)
form-field-group-text-2: label text, 11 characters (.c-form-field-group__text-2, 2 instances)
form-field-group-field: inner group (.c-form-field-group__field, 2 instances)
form-field-group-group-4: inner block (.c-form-field-group__group-4)

Recipe

HTML · CSS

<div class="c-form-field-group-scope">
  <div class="c-form-field-group">
    <div class="c-form-field-group__group">
      <div class="c-form-field-group__group-2">
        <label class="c-form-field-group__group-3">
          <div class="c-form-field-group__text">l</div>
          <span class="c-form-field-group__text-2">lorem ipsum</span>
        </label>
        <div class="c-form-field-group__field"></div>
      </div>
    </div>
    <div class="c-form-field-group__group-4">
      <div class="c-form-field-group__group-2">
        <label class="c-form-field-group__group-3">
          <div class="c-form-field-group__text">l</div>
          <span class="c-form-field-group__text-2">lorem ipsu</span>
        </label>
        <div class="c-form-field-group__field"></div>
      </div>
    </div>
  </div>
</div>

.c-form-field-group-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-form-field-group {
  display: inline-grid;
  justify-content: center;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  text-align: left;
}

.c-form-field-group__group {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 26px;
  position: relative;
}

.c-form-field-group__group-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  margin-top: auto;
  margin-bottom: 16px;
}

.c-form-field-group__group-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: fit-content;
  position: relative;
  color: #0F0E0D;
  cursor: default;
  font-size: 16px;
  line-height: 20.8px;
  margin-bottom: 8px;
}

.c-form-field-group__text {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  right: -10px;
  padding-left: 5px;
}

.c-form-field-group__field {
  display: block;
  box-sizing: border-box;
  width: 352px;
  height: 48px;
  min-height: 30.4px;
  padding: 0px 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: text;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.2s ease-in-out;
}

.c-form-field-group__group-4 {
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Logo item

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: 6 instances in a 19-column grid; the recipe carries the values they all share
logo-item: the component root, a <li> (.c-logo-item)
logo-item-media: image placeholder, 93x60px (.c-logo-item__media)

Recipe

HTML · CSS

<div class="c-logo-item-scope">
  <li class="c-logo-item">
    <span class="c-logo-item__media" aria-hidden="true"></span>
  </li>
</div>

.c-logo-item-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-logo-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
  padding-right: 24px;
  padding-left: 24px;
}

.c-logo-item__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 93px;
  height: 60px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Checkbox

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-checkbox-scope {
  background-color: #FAFAF9;
  color: #333333;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
}

.c-checkbox {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: transparent;
  color: #0F0E0D;
  border: 1px solid #ADABA5;
  border-radius: 4px;
  cursor: pointer;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: border-color 0.2s ease-in-out;
}

.c-checkbox:hover {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  border: 1px solid #0F0E0D;
}

.c-checkbox:focus {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  outline: none;
}

States

hover: top auto, right auto, bottom auto, left auto, border 1px solid #0F0E0D
focus: top auto, right auto, bottom auto, left auto, outline none

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.

Variant observed on https://www.harvey.ai/contact-sales.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-link: link, 8-character label (.c-footer-inner__link, 2 instances)
footer-inner-text: label text, 28 characters (.c-footer-inner__text)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <a class="c-footer-inner__link" href="#">lorem ip</a>
    <a class="c-footer-inner__link" href="#">lorem</a>
    <span class="c-footer-inner__text">lorem ipsum dolor sit amet c</span>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px;
  position: relative;
  z-index: 10;
  background-color: #FAFAF9;
  color: #706D66;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-footer-inner__link {
  display: block;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  font-weight: 500;
}

.c-footer-inner__link:hover {
  color: #0F0E0D;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-link: link, 8-character label (.c-footer-inner-mobile__link, 2 instances)
footer-inner-mobile-text: label text, 28 characters (.c-footer-inner-mobile__text)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
    <a class="c-footer-inner-mobile__link" href="#">lorem</a>
    <span class="c-footer-inner-mobile__text">lorem ipsum dolor sit amet c</span>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FAFAF9;
  color: #FFFFFF;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-inner-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 28px;
  position: relative;
  z-index: 10;
  background-color: #FAFAF9;
  color: #706D66;
  font-family: HarveySansFont, "HarveySansFont Fallback", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
}

.c-footer-inner-mobile__link {
  display: block;
  box-sizing: border-box;
  color: #706D66;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  font-weight: 500;
}

.c-footer-inner-mobile__link:hover {
  color: #0F0E0D;
}

States

footer-inner-link hover (footer-inner-link-hover): color #0F0E0D
mobile, footer-inner-mobile-link hover (footer-inner-mobile-link-hover): color #0F0E0D

Do's and Don'ts

Do

Set headlines in the serif at 400. Use hero-display, display-lg, display-md or display-sm, all HarveySerifFont at weight 400 with their negative tracking. Keep UI copy in HarveySansFont.
Use only weights 400 and 500. 500 is the sans emphasis cut (label, body-strong, headline).
Keep controls at rounded.sm (4px). The site does this across button-primary, button-secondary, button-primary-2, input-2, select and checkbox. Large media cards take rounded.md (8px) (card-6-group-4, video-player-group).
Use the measured control heights. Compact outlined CTAs are 32px (button-primary). The solid Ink CTA and form fields are 48px (button-primary-2, input-2, select, select-2). The dark newsletter field and its button are 63px (input, button-secondary). Nav buttons fill the 72px bar (button-ghost, navigation-button).
Reserve the solid Ink fill for the main CTA. Solid Ink (primary, #0F0E0D) is the main CTA fill (button-primary-2), hovering to ink-secondary. The compact button-primary is outlined in Ink and fills with Ink on hover and focus.
Keep the frosted header. Fixed headers and banners use translucent fills with blur(16px) (header-landing-group, announcement-banner-group). The frosted media control uses blur(6px) (button-secondary-2).
Separate list and stat rows with hairlines. Use a 1px hairline top rule (card-6-group, card-7) and a 2px rule for stats (card-5). On dark, use border-dark (footer-landing-columns).
Space sections at 64px. Use section-padding-y between sections and alternate off-white and Ink bands for structure.

Don't

Don't introduce a brand hue. There is no blue or purple accent. highlight (#F6F202) is a rare marker, and focus-ring / focus-ring-strong are for focus only.
Don't bold the serif, and don't add weights. No 300 or 600+.
Don't put drop shadows on cards or buttons. The soft shadow (rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px) belongs to floating overlays only. Dark-section cards lift with surface-dark.
Don't make the header opaque. Never replace the frosted blur with a solid fill.
Don't pill-round text buttons or nav items. Keep rounded.full for round icon or media controls.
Don't use pure black for text. surface-black is for media backdrops; text is ink.
Don't add a third typeface. No mono and no display script.
Don't use gradients for fills. Every fill is flat.

Responsive Behavior

Scope

This analysis is two-viewport only (desktop and mobile). No intermediate breakpoints were observed, so none are specified here.

What changes on mobile

Header. The header keeps its 106px stack of announcement bar plus nav (header-landing-mobile, header-inner-2-mobile). The desktop nav links and ghost CTAs collapse into a single hamburger toggle (header-landing-mobile-menu-toggle, 24x25px icon). The frosted blur(16px) layer remains, sitting on a translucent off-white fill (header-landing-mobile-group, #FAFAF9B8). The announcement strip is solid Ink (header-landing-mobile-group-3, #0F0E0D). The logo row tightens to a 10px gap (header-landing-mobile-gap).
Footer. The dark footer stays footer-landing-mobile on #0F0E0D. Its link columns re-flow into a narrower grid with a wider 28px column gap (footer-landing-mobile-column-gap) and 14px stacks (footer-landing-mobile-gap). The footer grows from 699px (footer-landing) to 1435px (footer-landing-mobile) as columns stack. The light legal bar footer-inner-mobile (flagged: the render matched 95% of the original pixels, below the 96% required) reduces its padding to 28px.
Content. In the screenshots, the two-column hero, card rows and text/media feature splits all stack to a single column. Cards go full-width, logo walls drop to fewer columns, and the cookie modal stacks its buttons.
Type. Serif statement text in the header keeps 28px (header-landing-mobile-text). The rest of the display ladder was not separately measured at mobile.

Touch targets

Comfortable. The main touch-sized controls are 48px: button-primary-2, input-2, select.
Small. Compact icon buttons are 32px (close-button, button-ghost-3). The mobile menu toggle measures only 24x25px (header-landing-mobile-menu-toggle). When rebuilding, pad these hit areas toward 44–48px without changing their visual size.

Iteration Guide

Reference tokens, never hex. Use ink, ink-secondary, muted, muted-soft, hairline, border-strong, border-dark, surface, surface-muted, surface-dark. If you need the warm off-white seen in components (#FAFAF9), map it to surface unless the task demands exact parity.
Respect the two-family, two-weight rule. Serif tokens (hero-display, display-lg, display-md, display-sm) are always 400. Sans tokens use 400 or 500. A new size must follow the tracking curve (about -1% of size for 24px and up, normal for 20px and below) and the leading curve (1.05 for display, 1.3 for UI, 1.5 for long body).
Build variants from existing recipes.
- Solid CTA: button-primary-2 (Ink fill, 48px, rounded.sm).
- Compact outlined CTA: button-primary (32px, 1px Ink border).
- Dark-band outlined: button-secondary.
- Nav items: ghost buttons (button-ghost, button-ghost-2).
- Forms: input-2, select and checkbox with a border-strong resting border that turns Ink on hover and focus.
Elevation boundaries are fixed. Tone first (surface-dark tiles on Ink bands), hairlines second, blur(16px) frosted glass for anything pinned, and the soft shadow only for true overlays. Focus uses spread-only box-shadow rings. Never shadow a card.
Radius is binary. rounded.sm for controls and small cards, rounded.md for large media. rounded.full only for circular icon or media controls. Don't invent intermediate radii.
Keep the macro rhythm. Sections separate with section-padding-y (64px) and band color flips. Card rows use card-4-grid-gap / card-4-grid-row-gap, feature rows card-6-grid-gap, lists card-7-grid-gap.
Color accent stays rare. highlight may appear as a small mark at most once per view. Blue (focus-ring, focus-ring-strong) is reserved for focus states. Never introduce new hues.

Known Gaps

Pages. All 5 captured pages succeeded: home, a blog article, customers, platform/command-center and contact-sales. No grounded values were dropped, but auth-walled product surfaces (the actual Harvey app) were not reachable.
Flagged recipes. These did not reproduce exactly and should be treated as approximate:
- hero (flagged: the hero-title y did not reproduce the measured 64px)
- header-landing (flagged: the render matched 5% of the original pixels, below the 96% required)
- banner (flagged: the render matched 5% of the original pixels)
- card-3 (flagged: the render matched 8% of the original pixels)
- card-5 (flagged: the card-5-group y did not reproduce the measured 43px)
- footer-inner-mobile (flagged: the render matched 95% of the original pixels)
Unverifiable recipes. card-2, logo-carousel and logo-item are not verifiable: photos and media covered most of each component, so the comparison could not be judged.
Focus-ring colors. focus-ring (#99C8FF) and focus-ring-strong (#005FCC) were measured only on component states, never in page sampling. Their exact application points are uncertain; the visible focus rings on recipes use Paper and Pebble greys.
Untokenized colors.
- The warm off-white #FAFAF9 is used widely in recipes but is not a palette token.
- form-field-group carries #333333 text at 13px, likely from an embedded third-party form. It sits outside the type ladder.
- Helvetica appeared once on one page.
Interaction coverage. Hover and focus states were captured only where listed on recipes (buttons, inputs, footer links, header CTAs). Active and pressed states, menu-open states, dropdown panels and the mobile navigation drawer were not captured.
Motion. Animation, transitions, carousel behavior of the logo wall and video playback were not observable.
Responsive. Only desktop and mobile viewports were captured, so breakpoint values and tablet layouts are unknown.
rounded.xs (3px). Measured on pages but on no recipe, so its exact usage is unconfirmed.
Soft shadow. The overlay shadow was measured on one page only, presumably the cookie modal.

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

More like this

Browse all

AI & Machine Learning · AI Products & Assistants

Anthropic

Anthropic's design system is a restrained, typographically-led identity built around two custom typefaces — Anthropic Serif and Anthropic Sans — set against a warm ivory background (#faf9f5). The palette is deliberately minimal: near-black (#141413) on warm off-white, with muted stone tones for secondary text and borders. Large-scale serif display type anchors the editorial voice, while a dark-panel section (near-black background with ivory text) creates dramatic contrast. The overall aesthetic communicates intellectual seriousness and safety-first mission through generous whitespace, high typographic contrast, and zero decorative ornamentation.

AI & Machine Learning · AI Products & Assistants

Paperclip

Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. The hero is defined by a vivid multi-color gradient illustration of stacked pill/capsule shapes in magenta, violet, teal, orange, and yellow — creating a chromatic, energetic visual identity against the dark field. Typography pairs Inter Tight (condensed, heavy headlines with negative letter-spacing) with Inter (body/UI) and JetBrains Mono (code/status). The primary CTA uses a white pill-shaped button on dark background. A semantic green (#22c55e) status system signals agent and task states throughout the product UI. Navigation is minimal and flat with a subtle bottom border.

AI & Machine Learning · AI Products & Assistants

xAI

xAI's marketing site uses a warm off-white surface palette anchored by --color-ivory (#f9f8f6) and --color-white (#ffffff), with near-black #0a0a0a as the dominant text and foreground color. The typographic system is split between universalSansDisplay for large display headings (60–72px, tight negative letter-spacing), universalSans for body and UI copy, and GeistMono for code and terminal contexts. Radius language is dominated by 9999px pill shapes on CTAs and tags, with 12px and 6px for cards and inputs. Elevation is minimal — cards use a soft multi-layer drop shadow while most surfaces are flat. The overall tone is technical-premium: restrained color, generous whitespace, and a strong monospace code aesthetic signaling developer credibility.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Harvey Design System

Button7

Card7

Extra17

Header8

Footer4

Input4

Overview

Colors

Brand & Ink

Surfaces

Text

Hairlines & Borders

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, ghost

Card

Hero

Navigation

Navigation (2)

Close button

Header (landing)

Footer (landing)

Card (2)

Footer link columns

Announcement banner

Header (inner)

Button, primary

Button, secondary

Button, ghost (2)

Input

Card (3)

Card (4)

Card (5)

Play button

Logo carousel

Pagination

Announcement banner (2)

Header (inner, 2)

Button, secondary (2)

Button, ghost (3)

Card (6)

Card (7)

Video player

Link list

Banner

Breadcrumb

Header (inner, 3)

Button, primary (2)

Input (2)

Select

Select (2)

Form field group

Logo item

Checkbox

Footer (inner)

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes on mobile

Touch targets

Iteration Guide

Known Gaps

More like this

Anthropic