# 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