Design principles

Use these principles to settle a design question the rest of the system leaves open. Each one says what it changes in a design.

Is it needed

Before a field, a column or a label goes on a screen, ask what a recruiter would lose without it. If the answer is nothing, leave it out.

A WerkOS screen opens on its task, such as the candidates for a welding job in Split, not on a banner about itself. A heading names its subject, with no label above it.

Both themes at once

WerkOS ships a light theme and a dark theme together. Design and check both at the same time, not light first and dark later.

A color is a token with a value for each theme, and a hex code in a component breaks one of the two. Paper stays white in both themes: report pages, slides and PDFs.

Light theme

Dark theme

Restraint

Let the content carry the screen. Use the Werklist blue as the one accent on neutral ground, separate things with space, and write labels in sentence case.

A view has one primary button. Buttons are flat, with no gradient or glow, and a surface is set apart by its fill instead of a border.

Permitted

A heading in sentence case that names its subject
People scan headings, so the heading does the work.
A gray box with rounded corners and no border
Its fill sets it apart from the page.

Not permitted

An uppercase label above a heading
It repeats the heading louder, and people learn to skip it.
A badge, tag or pill added for decoration
The screen looks like a template, and a real status loses its weight.

NextColor

Design principles

The principles that settle a design question the components, foundations and patterns leave open.

Kind: foundation
Page: https://design.werklist.com/foundations/principles
Version: 2.1.2

Rules

Is it needed: before a field, a column or a label goes on a screen, ask what a recruiter would lose without it. If the answer is nothing, leave it out. A screen opens on its task, and a heading names its subject with no label above it.
Both themes at once: design and check light and dark together. A color is a token with a value for each theme. Paper stays white in both: report pages, slides and PDFs.
Restraint: the Werklist blue is the one accent on neutral ground, space separates things, labels are in sentence case, buttons are flat and a view has one primary button. A surface is set apart by its fill, not a border.

JSON

{
  "title": "Design principles",
  "path": "/foundations/principles",
  "url": "https://design.werklist.com/foundations/principles",
  "text": "https://design.werklist.com/agent/foundations/principles",
  "summary": "The principles that settle design questions at Werklist, and what each one changes in a design.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Design principles",
  "purpose": "The principles that settle a design question the components, foundations and patterns leave open.",
  "rules": [
    "Is it needed: before a field, a column or a label goes on a screen, ask what a recruiter would lose without it. If the answer is nothing, leave it out. A screen opens on its task, and a heading names its subject with no label above it.",
    "Both themes at once: design and check light and dark together. A color is a token with a value for each theme. Paper stays white in both: report pages, slides and PDFs.",
    "Restraint: the Werklist blue is the one accent on neutral ground, space separates things, labels are in sentence case, buttons are flat and a view has one primary button. A surface is set apart by its fill, not a border."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/principles