# Logo

The Werklist logo is the mark, a dot and two slanted strokes with round ends, followed by the drawn wordmark. It is used from its files, in black or white, with a clear space of one stroke around it.

* Kind: brand
* Page: https://design.werklist.com/brand/logo
* Version: 2.1.2

## When to use it

* werklist-logo-black.svg on white and light grounds.
* werklist-logo-white.svg on navy, brand blue and photographs under a navy scrim at 60 percent.
* The mark alone where the logo would be under 80 px wide, or where the name already sits nearby.
* werklist-blue-logomark.svg, the mark in brand blue, on white only.
* The app icon files for the WerkOS app.

## When not to use it

* Retyping the wordmark in Satoshi or any other typeface.
* Stretching, rotating, outlines, shadows, glows, gradients or tints.
* Brand blue in the dark theme, where it falls to 3.78 to 1 on the background.
* A photograph under the logo without the scrim.
* Words or other logos inside the clear space.

## Rules

* The logo is black or white. The mark alone may also be brand blue, #1863dc, on white.
* On screen the logo takes the ink of the text around it: black in the light theme, white in the dark theme.
* Clear space is one stroke of the mark, measured from the edge of the file: 9 px for a logo 30 px tall, 12 px at 40 px and 4 pt at 14 pt in print.
* The logo is at least 80 px wide on screen and 20 mm in print.
* The mark alone is at least 16 px wide on screen and 6 mm in print.
* Keep at least 4.5 to 1 between the logo and its ground.
* Contrast: black on white 21 to 1, white on navy 19.23 to 1, white on brand blue 5.44 to 1, the blue mark on white 5.44 to 1.
* On a photograph, a navy scrim at 60 percent sits under the logo. White on the scrim keeps 5.05 to 1 even where the picture is white.

## Anatomy

* Mark: a dot and two slanted strokes with round ends
* Wordmark: a drawing, not a font
* Clear space around the logo: one stroke, 29 percent of its height
* Clear space around the mark alone: 37 percent of its height

## Tokens

* --brand-true
* --navy