Using this system

The Werklist brand guidelines hold the tokens, the components and the rules for WerkOS, the website, documents and the deck.

Who it is for

Designers and engineers who build WerkOS use the tokens, the components and the rules.

Anyone making Werklist material, such as a job advert, a proposal for an employer or a slide, uses the logo, the colors and the type.

An agent can read any page as plain rules and JSON: add ?view=agent to its address, or start from /llms.txt, which lists each page and file.

Where the tokens live

Each token has one value for the light theme and one for the dark theme. In the CSS file the dark values stand on :root and the light values on html[data-theme="light"].

Token files: werklist-tokens.css, werklist-tokens.json and werklist-tokens.print.css in /tokens
Agent files: /llms.txt, /agent/index.json and a text version of each page

:root {
  --brand-blue: #3b82f6;
  /* … */
}

html[data-theme="light"] {
  --brand-blue: #1863dc;
  /* … */
}

Proposing a change

A change to the logo, the typeface or the brand blue starts with an email to brand@werklist.com that gives the reason and the change you propose.

Add rather than remove. A new token has a value in both themes. Renaming or deleting a token breaks the screens that read it, so it waits for a major version.

Versions

The footer shows the current version and the date of its last change. What is new lists what each release changed.

Major: Removes or renames a token or component, or changes a brand color. Screens that use it need work.
Minor: Adds a token, a component or a pattern. Nothing that exists changes.
Patch: Corrects a value or the wording.

NextDownloads

Using this system

Who the Werklist brand guidelines serve, where the tokens live, how to propose a change and how versions are numbered.

Kind: resource
Page: https://design.werklist.com/resources/using-this-system
Version: 2.1.2

Rules

Audience: designers and engineers who build WerkOS, anyone making Werklist material such as a job advert, a proposal for an employer or a slide, and agents that read the site.
An agent reads any page as plain rules and JSON by adding ?view=agent to its address, or starts from /llms.txt.
Token files: /tokens/werklist-tokens.css, /tokens/werklist-tokens.json and /tokens/werklist-tokens.print.css.
Each token has one value for the light theme and one for the dark theme. In the CSS file the dark values stand on :root and the light values on html[data-theme="light"].
Agent files: /llms.txt, /agent/index.json and a text twin of each page.
A change to the logo, the typeface or the brand blue starts with an email to brand@werklist.com that gives the reason and the proposed change.
Add rather than remove. A new token has a value in both themes. Renaming or deleting a token waits for a major version.
A major version removes or renames a token or component, or changes a brand color. Screens that use it need work.
A minor version adds a token, a component or a pattern. Nothing that exists changes.
A patch corrects a value or the wording.
The footer shows the current version and the date of its last change. /resources/what-is-new lists what each release changed.

JSON

{
  "title": "Using this system",
  "path": "/resources/using-this-system",
  "url": "https://design.werklist.com/resources/using-this-system",
  "text": "https://design.werklist.com/agent/resources/using-this-system",
  "summary": "Who the brand guidelines are for, where the tokens live, how to propose a change and how versions are numbered.",
  "version": "2.1.2",
  "kind": "resource",
  "name": "Using this system",
  "purpose": "Who the Werklist brand guidelines serve, where the tokens live, how to propose a change and how versions are numbered.",
  "rules": [
    "Audience: designers and engineers who build WerkOS, anyone making Werklist material such as a job advert, a proposal for an employer or a slide, and agents that read the site.",
    "An agent reads any page as plain rules and JSON by adding ?view=agent to its address, or starts from /llms.txt.",
    "Token files: /tokens/werklist-tokens.css, /tokens/werklist-tokens.json and /tokens/werklist-tokens.print.css.",
    "Each token has one value for the light theme and one for the dark theme. In the CSS file the dark values stand on :root and the light values on html[data-theme=\"light\"].",
    "Agent files: /llms.txt, /agent/index.json and a text twin of each page.",
    "A change to the logo, the typeface or the brand blue starts with an email to brand@werklist.com that gives the reason and the proposed change.",
    "Add rather than remove. A new token has a value in both themes. Renaming or deleting a token waits for a major version.",
    "A major version removes or renames a token or component, or changes a brand color. Screens that use it need work.",
    "A minor version adds a token, a component or a pattern. Nothing that exists changes.",
    "A patch corrects a value or the wording.",
    "The footer shows the current version and the date of its last change. /resources/what-is-new lists what each release changed."
  ]
}

Raw file: https://design.werklist.com/agent/resources/using-this-system