Marketing pages

Each werklist.com page leads one reader to one next step. It runs across the full frame, opens on a photograph with one headline, and shows only figures that come from live data.

Who reads it

Workers arrive looking for a role and a salary they can trust. Employers arrive looking for proof that Werklist can place reliable workers with their documents in order. The home page puts the job board first and the case for employers second.

A marketing page stays light in both themes. Industry pages are the one exception: they are dark.

The frame

Content spans the whole frame. The hero and long copy limit their line length, and long copy runs in two columns from 1024 px.

Frame: 1440 px, centered; --frame
Side padding: 24 px, 32 px from 1024 px; --pad
Gap between blocks: 8 px, 12 px from 768 px; --space-2, --space-3

The hero

One photograph, one headline and at most two buttons. The headline says what Werklist does in the reader's words, and the paragraph under it names the services.

A scrim runs from the left edge under the text, so white type reads on any picture. Both buttons take the width of the longer label, and below 640 px they stack at full width.

Cross-border hiring for blue-collar talent

Werklist helps companies hire reliable workers through local recruitment, international sourcing, documentation support, and end-to-end placement coordination.

Cross-border hiring for blue-collar talent

Werklist helps companies hire reliable workers through local recruitment, international sourcing, documentation support, and end-to-end placement coordination.

Card height: 340 px, 420 px from 768 px, 480 px from 1024 px
Corner: 12 px, 16 px from 768 px; --radius-xl, --radius-2xl
Padding: 24 by 40 px, 48 px from 768 px, 80 px at the sides from 1024 px
Headline: 28 to 56 px, weight 700, up to 680 px wide
Buttons: Large, 48 px, equal width, 8 px apart, 12 px from 640 px
Scrim: Navy at 66 percent, clear where the text ends; --navy

Proof

A figure comes from live data or it does not appear: open roles are counted from the job board. The tile shows its number and its label, without a chart.

Open roles2
Countries hiring2

A mock-up with sample figures. On werklist.com each figure is counted from the live job board.

Grid: 2 columns, 5 from 768 px
Gap: 8 px, 12 px from 768 px; --space-2, --space-3

The job list

Open roles are job cards in one column, 8 px apart and 12 px from 768 px. The first batch comes with the page, and Load more adds the next.

A filter that matches nothing says No roles match those filters yet, and keeps the filters in view.

Asking for the next step

Employer and industry pages close with a call to action that repeats the hero's primary button. On phones, employer pages keep a bar at the bottom with one sentence and one button.

Cross-border hiring for blue-collar talent

Werklist helps companies hire reliable workers through local recruitment, international sourcing, documentation support, and end-to-end placement coordination.

Tell us your trade and headcount.

Phone bar: a 44 px button, 16 px side padding; --space-4
Bottom padding: 12 px or the safe area, whichever is larger; --space-3

Figures, photographs and labels

Permitted

A figure counted from the job board
Open roles changes the day a role is published.
Two columns for long copy
Each line stays under 75 characters at 1440 px.

Not permitted

Figures typed into the page
Nobody can check them, and they go stale.
White text on a photograph without a scrim
A bright patch in the picture drops the headline below readable contrast.
A label in capitals above a heading
Say it as one sentence instead.

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

JSON

{
  "title": "Marketing pages",
  "path": "/patterns/marketing-pages",
  "url": "https://design.werklist.com/patterns/marketing-pages",
  "text": "https://design.werklist.com/agent/patterns/marketing-pages",
  "summary": "How a werklist.com page is put together: the frame, the photograph and its headline, the proof, the job list and the call to action.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Marketing pages",
  "purpose": "The anatomy of a werklist.com page: frame, header, photographic hero, proof figures, job list, closing call to action and footer.",
  "use": [
    "Pages on werklist.com in every language: the home page, employers, industries, job pages.",
    "Any brand page that an employer or a worker reads."
  ],
  "avoid": [
    "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."
  ],
  "anatomy": [
    {
      "part": "Frame",
      "measure": "at most 1440 px, centered; padding 24 px, 32 px from 1024 px",
      "token": "--frame, --pad"
    },
    {
      "part": "Header",
      "measure": "72 px, 64 px after 80 px of scroll; see the Header component",
      "token": "--header-h, --header-h-condensed"
    },
    {
      "part": "Hero card",
      "measure": "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",
      "token": "--radius-xl, --radius-2xl, --navy"
    },
    {
      "part": "Headline",
      "measure": "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"
    },
    {
      "part": "Paragraph",
      "measure": "14 to 17 px as the window grows, weight 500, line 1.6, at most 760 px wide, white at 92 percent",
      "token": "--on-brand"
    },
    {
      "part": "Button pair",
      "measure": "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",
      "token": "--space-2, --space-3"
    },
    {
      "part": "Scrim",
      "measure": "a gradient from navy at 66 percent at the left edge to clear where the text column ends; the same in both themes",
      "token": "--navy"
    },
    {
      "part": "Proof figures",
      "measure": "2 columns 8 px apart, 5 columns 12 px apart from 768 px; each tile holds a number and its label, without a chart",
      "token": "--space-2, --space-3"
    },
    {
      "part": "Job list",
      "measure": "a list of job cards, 8 px apart, 12 px from 768 px; Load more as a secondary button 16 px below",
      "token": "--space-2, --space-3, --space-4"
    },
    {
      "part": "Long copy",
      "measure": "body type in two columns from 1024 px, one below; lines of at most 75 characters",
      "token": "--type-body"
    },
    {
      "part": "Phone call to action bar",
      "measure": "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",
      "token": "--surface-1, --elevation-2, --radius-lg, --layer-sticky"
    }
  ],
  "states": [
    {
      "name": "Hero, photograph loading",
      "change": "The navy of the card shows until the photograph appears",
      "tokens": [
        "--navy"
      ]
    },
    {
      "name": "Job list, nothing matches",
      "change": "One sentence in a neutral well: No roles match those filters yet.",
      "tokens": [
        "--tint-neutral",
        "--radius-xl"
      ]
    },
    {
      "name": "Job list, more to load",
      "change": "Load more, a secondary button",
      "tokens": []
    },
    {
      "name": "Header scrolled",
      "change": "A translucent surface at 92 percent with a 10 px blur",
      "tokens": []
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Skip link, header, hero buttons, filters, each job card, Load more, footer"
    },
    {
      "key": "Enter",
      "action": "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."
  ],
  "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."
  ],
  "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"
  ]
}

Raw file: https://design.werklist.com/agent/patterns/marketing-pages