Skip to content
Download assets

Logo

The Werklist logo is the mark, a dot and two slanted strokes, followed by the drawn wordmark. Use the files as they are, in black or white, with room around them.

Which file to use

The app icon also comes as the 192 px icon (12 KB) and as the 180 px icon for the home screen of a phone (11 KB).

Clear space

Keep a margin around the logo as wide as one stroke of the mark, measured from the edge of the file. Keep text, other logos and the edges of photographs outside it.

The band is as wide as the dot of the mark: one stroke.
Around the logo
29 percent of its height
Logo 30 px tall
9 px
Logo 40 px tall
12 px
Logo 14 pt tall, in print
4 pt
Around the mark alone
37 percent of its height

Minimum sizes

Below these sizes the letters lose their shape. When the space is smaller, use the mark alone.

80 px
16 px
Both at their smallest, at actual size.
Logo on screen
80 px wide
Mark on screen
16 px wide
Logo in print
20 mm wide
Mark in print
6 mm wide

Color and ground

Set the logo in black on white and light grounds, and in white on navy, brand blue and photographs. The mark alone may also appear in brand blue on white, at 5.44 to 1. Keep at least 4.5 to 1 between the logo and its ground.

On a photograph, lay navy at 60 percent under the logo. In the dark theme brand blue falls to 3.78 to 1 on the background, so the mark turns white there.

  • Black on white, 21 to 1
  • White on navy, 19.23 to 1
  • White on brand blue, 5.44 to 1
  • White on a photograph under the scrim, 5.05 to 1

Permitted and not permitted

Permitted

  • The files as supplied, scaled in proportion

    Width and height change together.

  • The mark alone in small spaces

    A favicon, an app icon or the picture of a company account.

Not permitted

  • Retyping the wordmark

    Satoshi is not the lettering of the logo.

  • Stretching or rotating

    The proportions of the file are part of the logo.

  • Colors other than black, white and brand blue

    Gradients and tints turn the logo into decoration.

  • Shadows, glows or outlines

    The logo stands flat on its ground.

  • Words inside the clear space

    An employer's logo, a partner's name or a tagline stays outside it.

NextImagery

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

JSON

{
  "title": "Logo",
  "path": "/brand/logo",
  "url": "https://design.werklist.com/brand/logo",
  "text": "https://design.werklist.com/agent/brand/logo",
  "summary": "Which logo file to use where, the space it needs around it and the smallest size it may take.",
  "version": "2.1.2",
  "kind": "brand",
  "name": "Logo",
  "purpose": "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.",
  "use": [
    "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."
  ],
  "avoid": [
    "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."
  ],
  "anatomy": [
    {
      "part": "Mark",
      "measure": "a dot and two slanted strokes with round ends"
    },
    {
      "part": "Wordmark",
      "measure": "a drawing, not a font"
    },
    {
      "part": "Clear space around the logo",
      "measure": "one stroke, 29 percent of its height"
    },
    {
      "part": "Clear space around the mark alone",
      "measure": "37 percent of its height"
    }
  ],
  "tokens": [
    "--brand-true",
    "--navy"
  ],
  "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."
  ]
}

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