Skip to content

Applications

The deck, printed reports and the share card of werklist.com use the same logo and type. Each has its own layout.

Presentations

The brand deck is a set of 16 by 9 slides printed to a PDF. Each slide keeps a large title at the top and the content at the bottom, with open space between them, inside a safe area 140 px from the edge. Slides are black on white and the cover is white on black. Color appears only when color is the subject.

Open the deck

Slide
1920 by 1080 px
PDF page
1440 by 810 pt
Safe area
140 px from each edge
Title
88 px, weight 700
Lede
26 px, weight 400
Running marks
16 px, weight 500, 72 px from the edge

Print

Reports print on A4. The logo sits in the top left corner of the text frame on the cover and the back cover, and nowhere else. Paper stays white whatever theme the reader uses on screen.

The layout of report pages is on the Reports page.

  • Cover
  • Inside page
  • Back cover
The logo on the cover and the back cover, none inside. The text frame is drawn as a guide.
Page
A4, 595 by 842 pt
Top margin
20 mm
Side margins
16 mm
Logo on the cover
57.15 by 14 pt, werklist-logo-black.svg

Social media

Each werklist.com page shares as a card that carries the page's own title in the reader's language. The card is dark navy with the white logo at the top left and the title set large at the bottom left. Nothing else goes on it.

The card of the home page at half its size.
Card
1200 by 630 px
Ground
navy gradient at 135 degrees: #090c16, #0c1b40, #123e8f
Logo
white, 46 px tall, 72 px from the top, 88 px from the left
Title
Satoshi 700, line height 1.12, bottom left
Title size
80 px up to 32 characters, 70 up to 54, 60 up to 78, 50 beyond
Padding
84 px top and bottom, 88 px at the sides

Applications

The brand in presentations, in print and on social media: the deck, the A4 report and the share card of werklist.com.

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

Rules

  • A slide keeps a large title at the top and the content at the bottom, with open space between them.
  • Slides are black on white and the cover is white on black. Color appears only when color is the subject.
  • Reports print on A4. The logo sits on the cover and the back cover, and nowhere else.
  • Paper stays white whatever theme the reader uses on screen.
  • Each werklist.com page shares as a card with the page's own title in the reader's language.
  • The share card carries the white logo at the top left and the title at the bottom left. Nothing else goes on it.

Anatomy

  • Slide: 1920 by 1080 px, printed to a PDF page of 1440 by 810 pt
  • Safe area of a slide: 140 px from each edge
  • Report page: A4, 595 by 842 pt, top margin 20 mm, side margins 16 mm
  • Logo on a report: 57.15 by 14 pt, at the top left corner of the text frame
  • Share card: 1200 by 630 px
  • Ground of the share card: a navy gradient at 135 degrees through #090c16, #0c1b40, #123e8f
  • Logo on the share card: white, 46 px tall, 72 px from the top and 88 px from the left
  • Padding of the share card: 84 px top and bottom, 88 px at the sides

Sizes

  • Slide title: type 88 px, weight 700
  • Slide lede: type 26 px, weight 400
  • Running marks of a slide: type 16 px, weight 500, 72 px from the edge
  • Share card title: type Satoshi 700, line height 1.12, 80 px up to 32 characters, 70 up to 54, 60 up to 78, 50 beyond

JSON

{
  "title": "Applications",
  "path": "/brand/applications",
  "url": "https://design.werklist.com/brand/applications",
  "text": "https://design.werklist.com/agent/brand/applications",
  "summary": "How the brand appears in presentations, in print and on social media.",
  "version": "2.1.2",
  "kind": "brand",
  "name": "Applications",
  "purpose": "The brand in presentations, in print and on social media: the deck, the A4 report and the share card of werklist.com.",
  "anatomy": [
    {
      "part": "Slide",
      "measure": "1920 by 1080 px, printed to a PDF page of 1440 by 810 pt"
    },
    {
      "part": "Safe area of a slide",
      "measure": "140 px from each edge"
    },
    {
      "part": "Report page",
      "measure": "A4, 595 by 842 pt, top margin 20 mm, side margins 16 mm"
    },
    {
      "part": "Logo on a report",
      "measure": "57.15 by 14 pt, at the top left corner of the text frame"
    },
    {
      "part": "Share card",
      "measure": "1200 by 630 px"
    },
    {
      "part": "Ground of the share card",
      "measure": "a navy gradient at 135 degrees through #090c16, #0c1b40, #123e8f"
    },
    {
      "part": "Logo on the share card",
      "measure": "white, 46 px tall, 72 px from the top and 88 px from the left"
    },
    {
      "part": "Padding of the share card",
      "measure": "84 px top and bottom, 88 px at the sides"
    }
  ],
  "sizes": [
    {
      "name": "Slide title",
      "type": "88 px, weight 700"
    },
    {
      "name": "Slide lede",
      "type": "26 px, weight 400"
    },
    {
      "name": "Running marks of a slide",
      "type": "16 px, weight 500, 72 px from the edge"
    },
    {
      "name": "Share card title",
      "type": "Satoshi 700, line height 1.12, 80 px up to 32 characters, 70 up to 54, 60 up to 78, 50 beyond"
    }
  ],
  "rules": [
    "A slide keeps a large title at the top and the content at the bottom, with open space between them.",
    "Slides are black on white and the cover is white on black. Color appears only when color is the subject.",
    "Reports print on A4. The logo sits on the cover and the back cover, and nowhere else.",
    "Paper stays white whatever theme the reader uses on screen.",
    "Each werklist.com page shares as a card with the page's own title in the reader's language.",
    "The share card carries the white logo at the top left and the title at the bottom left. Nothing else goes on it."
  ]
}

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