# Marketing pages

The anatomy of a werklist.com page: frame, header, photographic hero, proof figures, job list, closing call to action and footer.

* Kind: pattern
* Page: https://design.werklist.com/patterns/marketing-pages
* Version: 2.1.2

## When to use it

* Pages on werklist.com in every language: the home page, employers, industries, job pages.
* Any brand page that an employer or a worker reads.

## When not to use it

* A dark marketing page, except an industry page.
* Figures without a live source.
* Decorative charts, labels in capitals, pill buttons and cards with borders.
* Text on a photograph without the scrim.

## Rules

* Light in both themes. Industry pages are the one exception: they are dark.
* Content spans the frame. The hero and long copy limit their line length.
* Every figure has a live source or is removed.
* No decorative charts in stat tiles.
* No labels in capitals, no eyebrows, no pills. Footer headings are in sentence case.
* Text on a photograph always sits on the scrim.
* The hero photograph is 2752 by 960 px, 1280 by 447 px on phones, and fills the card from its center.

## Anatomy

* Frame: at most 1440 px, centered; padding 24 px, 32 px from 1024 px (--frame, --pad)
* Header: 72 px, 64 px after 80 px of scroll; see the Header component (--header-h, --header-h-condensed)
* Hero card: at least 340 px high, 420 px from 768 px, 480 px from 1024 px; radius 12 px, 16 px from 768 px; navy under the photograph; padding 24 by 40 px, 48 px from 768 px, 80 px at the sides from 1024 px (--radius-xl, --radius-2xl, --navy)
* Headline: 28 to 56 px as the window grows, weight 700, line 1.15, tracked in by 0.03 em, at most 680 px wide, lines balanced
* Paragraph: 14 to 17 px as the window grows, weight 500, line 1.6, at most 760 px wide, white at 92 percent (--on-brand)
* Button pair: large buttons, 48 px, both as wide as the longer label, 8 px apart, 12 px from 640 px; stacked at full width below 640 px (--space-2, --space-3)
* Scrim: a gradient from navy at 66 percent at the left edge to clear where the text column ends; the same in both themes (--navy)
* Proof figures: 2 columns 8 px apart, 5 columns 12 px apart from 768 px; each tile holds a number and its label, without a chart (--space-2, --space-3)
* Job list: a list of job cards, 8 px apart, 12 px from 768 px; Load more as a secondary button 16 px below (--space-2, --space-3, --space-4)
* Long copy: body type in two columns from 1024 px, one below; lines of at most 75 characters (--type-body)
* Phone call to action bar: fixed at the bottom below 768 px; padding 12 by 16 px, at least 12 px or the safe area at the bottom; one sentence at 13/18 and a 44 px primary button with radius 8 px (--surface-1, --elevation-2, --radius-lg, --layer-sticky)

## States

* Hero, photograph loading: The navy of the card shows until the photograph appears (--navy)
* Job list, nothing matches: One sentence in a neutral well: No roles match those filters yet. (--tint-neutral, --radius-xl)
* Job list, more to load: Load more, a secondary button
* Header scrolled: A translucent surface at 92 percent with a 10 px blur

## Keyboard

* Tab: Skip link, header, hero buttons, filters, each job card, Load more, footer
* Enter: Follows the focused link or presses the focused button

## Accessibility

* One level 1 heading: the hero headline. Job cards sit under a level 2 heading, Open roles. When the design shows no visible heading, the heading is there for screen readers only.
* The hero photograph is decorative and hidden from screen readers.
* With the scrim, the white headline and paragraph reach 4.5 to 1 against the lightest part of the photograph under them.
* With reduced motion, counts and entrances do not animate, and figures show their final value.
* The phone bar does not cover focused content: the page ends with space as tall as the bar.

## Content

* Headline: what Werklist does, in the reader's words; no question, no exclamation.
* Reference paragraph: Werklist helps companies hire reliable workers through local recruitment, international sourcing, documentation support, and end-to-end placement coordination.
* Buttons: a verb and its object: Talk to sales, Hire workers, See how it works.
* Figures: the unit in the label; counts from live data only.
* Empty filter: No roles match those filters yet.

## Tokens

* --frame
* --pad
* --header-h
* --header-h-condensed
* --space-2
* --space-3
* --space-4
* --radius-xl
* --radius-2xl
* --radius-lg
* --type-body
* --tint-neutral
* --elevation-2
* --layer-sticky
* --surface-1
* --brand-true
* --on-brand
* --navy