Skip to content

Deck

The brand deck sets out the Werklist brand guidelines as slides for a meeting. Slides of your own use the same frame.

Present the deck

Open the slides to present them from the browser at full screen.

Send the PDF when the reader opens it alone, on a screen or on paper.

What it covers

  1. About
  2. Logo
  3. Color
  4. Typography
  5. Layout
  6. Iconography
  7. Imagery
  8. Motion
  9. Writing
  10. WerkOS
  11. Components
  12. Patterns
  13. Applications
  14. Accessibility
  15. Using this system
  16. Downloads

Slides of your own

Build a slide on the frame the deck uses: the title at the top left, the lede under it and a chart or picture at the bottom of the safe area, with empty space between.

Keep content slides black on white, and use color only when color is the subject of the slide. The cover and the closing slide are white on black.

Canvas
1920 by 1080 px
Safe area, inset from each edge
140 px
Title
88 px, weight 700
Lede
26 px, weight 400, line height 1.4
Running marks
16 px, weight 500, 72 px from the edge

NextFor agents

Deck

The Werklist brand guidelines as slides, and the slide format for new presentations.

  • Kind: resource
  • Page: https://design.werklist.com/resources/deck
  • Version: 2.1.2

When to use it

  • Present the brand guidelines in a meeting from /deck.
  • Send the PDF when the reader opens it alone.
  • Build a new Werklist slide on the same frame.

When not to use it

  • Color used for decoration.

Rules

  • Content slides are black on white. The cover and the closing slide are white on black.
  • Color appears on a content slide only when color is its subject.
  • The chapters, in order: About, Logo, Color, Typography, Layout, Iconography, Imagery, Motion, Writing, WerkOS, Components, Patterns, Applications, Accessibility, Using this system, Downloads.
  • The PDF is at /brand/werklist-brand-deck-v2.1.pdf.

Anatomy

  • Canvas: 1920 by 1080 px, 16 by 9
  • Safe area: inset 140 px on each edge
  • Title: 88 px, weight 700, top left of the safe area
  • Lede: 26 px, weight 400, line height 1.4, under the title
  • Chart or picture: at the bottom of the safe area
  • Running marks: chapter name at the top left and page number at the bottom right, 16 px, weight 500, 72 px from the edge

JSON

{
  "title": "Deck",
  "path": "/resources/deck",
  "url": "https://design.werklist.com/resources/deck",
  "text": "https://design.werklist.com/agent/resources/deck",
  "summary": "The Werklist brand guidelines as a slide deck, and the frame for slides of your own.",
  "version": "2.1.2",
  "kind": "resource",
  "name": "Deck",
  "purpose": "The Werklist brand guidelines as slides, and the slide format for new presentations.",
  "use": [
    "Present the brand guidelines in a meeting from /deck.",
    "Send the PDF when the reader opens it alone.",
    "Build a new Werklist slide on the same frame."
  ],
  "avoid": [
    "Color used for decoration."
  ],
  "anatomy": [
    {
      "part": "Canvas",
      "measure": "1920 by 1080 px, 16 by 9"
    },
    {
      "part": "Safe area",
      "measure": "inset 140 px on each edge"
    },
    {
      "part": "Title",
      "measure": "88 px, weight 700, top left of the safe area"
    },
    {
      "part": "Lede",
      "measure": "26 px, weight 400, line height 1.4, under the title"
    },
    {
      "part": "Chart or picture",
      "measure": "at the bottom of the safe area"
    },
    {
      "part": "Running marks",
      "measure": "chapter name at the top left and page number at the bottom right, 16 px, weight 500, 72 px from the edge"
    }
  ],
  "rules": [
    "Content slides are black on white. The cover and the closing slide are white on black.",
    "Color appears on a content slide only when color is its subject.",
    "The chapters, in order: About, Logo, Color, Typography, Layout, Iconography, Imagery, Motion, Writing, WerkOS, Components, Patterns, Applications, Accessibility, Using this system, Downloads.",
    "The PDF is at /brand/werklist-brand-deck-v2.1.pdf."
  ]
}

Raw file: https://design.werklist.com/agent/resources/deck