Skip to content
Download assets

Imagery

Werklist pictures show people at their work and the cities they work in. Inside WerkOS the only pictures are people's own photos and the files they upload.

Portraits

One person against a deep blue wall, in soft light, looking at their work or into the camera. Put a portrait beside a form, such as the one where a candidate sends a CV, so the form has a face.

Composition of a portrait beside the form it gives a face to.
Ratio
2 to 3

The home page hero

Composition of the home page hero: the headline on the left, portraits on the right.

On the home page, portraits sit in rounded frames on the right of a navy field, leaving the left half free for the headline. Text does not cross a face.

Industries

Each industry has one scene with a painted finish: warm light, visible texture, people and machines where the work happens. Show the scenes as a set at one ratio, with the industry named below each.

The set has 9 scenes: agriculture, construction, healthcare, hospitality, IT, management, manufacturing, metal industry, and retail and logistics.

Composition of an industry scene: people at work in front of the machine, light from above.
Ratio
3 to 2

Places

A branch page opens on its own city seen from above in daylight, with a landmark a local would know. Show the city where the branch is, not a skyline that could be anywhere.

Composition of a branch city: rows of roofs seen from above and one landmark.
Ratio
16 to 9

People together

Where Werklist talks about how its people work together, use a candid moment of a group, caught while it happens instead of posed.

Composition of a group: people close together, the nearest cut by the frame.

Text on a photograph

Put text on a photograph only over a scrim of navy at 60 percent under the words. White type then keeps 5.05 to 1 even where the picture is white. The photograph and its scrim look the same in the light and the dark theme.

  1. The picture
  2. The scrim, navy at 60 percent
  3. The words, clear of the face
Scrim under text or the logo
navy at 60 percent
--navy
White text over the scrim, on a white area
5.05 to 1

Files and loading

Save photographs as WebP at twice the largest size they appear. Use PNG only when a picture needs a transparent background, and SVG for flat artwork.

Give each picture a fixed box filled with flat gray until it loads, so the page does not jump on a slow connection. Load the first picture of a page at once and the rest as the reader scrolls.

A photograph takes the corner radius of the surface that holds it, 12 px on its own, and has no shadow. It is not inverted or dimmed in the dark theme.

Leave the alt text empty when a picture only sets the scene or a caption already names it. Otherwise describe what it shows in one sentence.

Format
WebP, PNG for transparency, SVG for flat artwork
Resolution
twice the largest displayed size
Fill while loading
flat gray
--surface-2
Radius on its own
12 px
--radius-xl

Permitted and not permitted

Permitted

  • People at their work

    A welder at the bench, a care assistant on a ward.

  • The city where the branch is

    Zagreb for the Zagreb office.

Not permitted

  • Stock handshakes and generic skylines

    They could belong to any company.

  • Text across a face

    Move the words to the empty side of the picture.

  • Mascots and 3D characters

    Werklist shows real people at real work.

  • Decorative pictures inside WerkOS

    Screens start at their toolbar and carry the work itself.

NextApplications

Imagery

Werklist pictures show people at their work and the cities they work in. Inside WerkOS the only pictures are people's own photos and the files they upload.

  • Kind: brand
  • Page: https://design.werklist.com/brand/imagery
  • Version: 2.1.2

When to use it

  • A portrait of one person against a deep blue wall, beside a form such as the one where a candidate sends a CV.
  • On the home page, portraits in rounded frames on the right of a navy field, with the headline on the left.
  • One scene per industry with a painted finish, shown as a set at one ratio, each captioned with its industry.
  • The city of a branch from above in daylight, with a landmark a local would know.
  • A candid moment of a group where Werklist talks about how its people work together.

When not to use it

  • Stock handshakes and generic skylines.
  • Text across a face.
  • Mascots and 3D characters.
  • Decorative pictures inside WerkOS.

Rules

  • A portrait is 2 to 3.
  • An industry scene is 3 to 2. The set has 9 scenes, one for each industry.
  • A branch city is 16 to 9.
  • Text or the logo on a photograph sits on a navy scrim at 60 percent. White text on it keeps 5.05 to 1 even where the picture is white.
  • Text does not cross a face.
  • The photograph and its scrim look the same in the light and the dark theme. A photograph is not inverted or dimmed, and has no shadow.
  • Save photographs as WebP at twice the largest size they appear. Use PNG only for a transparent background, and SVG for flat artwork.
  • Give each picture a fixed box filled with flat gray until it loads. Load the first picture of a page at once and the rest as the reader scrolls.

Anatomy

  • Frame: a box of fixed ratio with the corner radius of the surface that holds it, 12 px on its own (--radius-xl)
  • Fill while loading: flat gray (--surface-2)
  • Scrim: navy at 60 percent under text or the logo (--navy)

Accessibility

  • Leave the alt text empty when a picture only sets the scene or a caption already names it.
  • Otherwise describe what the picture shows in one sentence.

Tokens

  • --navy
  • --surface-2
  • --radius-xl

JSON

{
  "title": "Imagery",
  "path": "/brand/imagery",
  "url": "https://design.werklist.com/brand/imagery",
  "text": "https://design.werklist.com/agent/brand/imagery",
  "summary": "The kinds of photograph Werklist publishes, where each belongs, and how text sits on a picture.",
  "version": "2.1.2",
  "kind": "brand",
  "name": "Imagery",
  "purpose": "Werklist pictures show people at their work and the cities they work in. Inside WerkOS the only pictures are people's own photos and the files they upload.",
  "use": [
    "A portrait of one person against a deep blue wall, beside a form such as the one where a candidate sends a CV.",
    "On the home page, portraits in rounded frames on the right of a navy field, with the headline on the left.",
    "One scene per industry with a painted finish, shown as a set at one ratio, each captioned with its industry.",
    "The city of a branch from above in daylight, with a landmark a local would know.",
    "A candid moment of a group where Werklist talks about how its people work together."
  ],
  "avoid": [
    "Stock handshakes and generic skylines.",
    "Text across a face.",
    "Mascots and 3D characters.",
    "Decorative pictures inside WerkOS."
  ],
  "anatomy": [
    {
      "part": "Frame",
      "measure": "a box of fixed ratio with the corner radius of the surface that holds it, 12 px on its own",
      "token": "--radius-xl"
    },
    {
      "part": "Fill while loading",
      "measure": "flat gray",
      "token": "--surface-2"
    },
    {
      "part": "Scrim",
      "measure": "navy at 60 percent under text or the logo",
      "token": "--navy"
    }
  ],
  "accessibility": [
    "Leave the alt text empty when a picture only sets the scene or a caption already names it.",
    "Otherwise describe what the picture shows in one sentence."
  ],
  "tokens": [
    "--navy",
    "--surface-2",
    "--radius-xl"
  ],
  "rules": [
    "A portrait is 2 to 3.",
    "An industry scene is 3 to 2. The set has 9 scenes, one for each industry.",
    "A branch city is 16 to 9.",
    "Text or the logo on a photograph sits on a navy scrim at 60 percent. White text on it keeps 5.05 to 1 even where the picture is white.",
    "Text does not cross a face.",
    "The photograph and its scrim look the same in the light and the dark theme. A photograph is not inverted or dimmed, and has no shadow.",
    "Save photographs as WebP at twice the largest size they appear. Use PNG only for a transparent background, and SVG for flat artwork.",
    "Give each picture a fixed box filled with flat gray until it loads. Load the first picture of a page at once and the rest as the reader scrolls."
  ]
}

Raw file: https://design.werklist.com/agent/brand/imagery