# Werklist brand guidelines

> The brand and product guidelines of Werklist: the company, the logo, the foundations, the components of WerkOS as the product draws them, the patterns they form, and tables, charts and reports. A page written for people has a twin in plain text under /agent/ (add .json for the same object as JSON), and /agent/index.json holds all the twins in one file.

* [Every page as JSON](https://design.werklist.com/agent/index.json)

## About

Who Werklist is: its purpose, its values and the people it serves.

* [Overview](https://design.werklist.com/about)
* [Purpose](https://design.werklist.com/about/purpose), as text: https://design.werklist.com/agent/about/purpose
* [Values and culture](https://design.werklist.com/about/values), as text: https://design.werklist.com/agent/about/values
* [Positioning](https://design.werklist.com/about/positioning), as text: https://design.werklist.com/agent/about/positioning

## Brand

The logo, photography, and the brand in print, social media and presentations.

* [Overview](https://design.werklist.com/brand)
* [Logo](https://design.werklist.com/brand/logo), as text: https://design.werklist.com/agent/brand/logo
* [Imagery](https://design.werklist.com/brand/imagery), as text: https://design.werklist.com/agent/brand/imagery
* [Applications](https://design.werklist.com/brand/applications), as text: https://design.werklist.com/agent/brand/applications

## Foundations

The principles, color, type, layout, shape and motion everything else is built from.

* [Overview](https://design.werklist.com/foundations)
* [Design principles](https://design.werklist.com/foundations/principles), as text: https://design.werklist.com/agent/foundations/principles
* [Color](https://design.werklist.com/foundations/color), as text: https://design.werklist.com/agent/foundations/color
* [Typography](https://design.werklist.com/foundations/typography), as text: https://design.werklist.com/agent/foundations/typography
* [Layout](https://design.werklist.com/foundations/layout), as text: https://design.werklist.com/agent/foundations/layout
* [Shape](https://design.werklist.com/foundations/shape), as text: https://design.werklist.com/agent/foundations/shape
* [Elevation and materials](https://design.werklist.com/foundations/elevation), as text: https://design.werklist.com/agent/foundations/elevation
* [Iconography](https://design.werklist.com/foundations/iconography), as text: https://design.werklist.com/agent/foundations/iconography
* [Motion](https://design.werklist.com/foundations/motion), as text: https://design.werklist.com/agent/foundations/motion
* [Accessibility](https://design.werklist.com/foundations/accessibility), as text: https://design.werklist.com/agent/foundations/accessibility
* [Writing](https://design.werklist.com/foundations/writing), as text: https://design.werklist.com/agent/foundations/writing
* [Design tokens](https://design.werklist.com/foundations/tokens), as text: https://design.werklist.com/agent/foundations/tokens

## Components

Each control and surface, with its measures, states and rules.

* [Overview](https://design.werklist.com/components)

### Actions

* [Button](https://design.werklist.com/components/button), as text: https://design.werklist.com/agent/components/button
* [Icon button](https://design.werklist.com/components/icon-button), as text: https://design.werklist.com/agent/components/icon-button
* [Link](https://design.werklist.com/components/link), as text: https://design.werklist.com/agent/components/link
* [Toolbar](https://design.werklist.com/components/toolbar), as text: https://design.werklist.com/agent/components/toolbar

### Inputs

* [Field](https://design.werklist.com/components/field), as text: https://design.werklist.com/agent/components/field
* [Text field](https://design.werklist.com/components/text-field), as text: https://design.werklist.com/agent/components/text-field
* [Text area](https://design.werklist.com/components/text-area), as text: https://design.werklist.com/agent/components/text-area
* [Search field](https://design.werklist.com/components/search-field), as text: https://design.werklist.com/agent/components/search-field
* [Select](https://design.werklist.com/components/select), as text: https://design.werklist.com/agent/components/select
* [Combobox](https://design.werklist.com/components/combobox), as text: https://design.werklist.com/agent/components/combobox
* [Date and time picker](https://design.werklist.com/components/date-picker), as text: https://design.werklist.com/agent/components/date-picker

### Selection

* [Checkbox](https://design.werklist.com/components/checkbox), as text: https://design.werklist.com/agent/components/checkbox
* [Radio](https://design.werklist.com/components/radio), as text: https://design.werklist.com/agent/components/radio
* [Switch](https://design.werklist.com/components/switch), as text: https://design.werklist.com/agent/components/switch
* [Segmented control](https://design.werklist.com/components/segmented-control), as text: https://design.werklist.com/agent/components/segmented-control

### Navigation

* [Header](https://design.werklist.com/components/header), as text: https://design.werklist.com/agent/components/header
* [Side navigation](https://design.werklist.com/components/side-navigation), as text: https://design.werklist.com/agent/components/side-navigation
* [Tabs](https://design.werklist.com/components/tabs), as text: https://design.werklist.com/agent/components/tabs
* [Mobile navigation](https://design.werklist.com/components/mobile-navigation), as text: https://design.werklist.com/agent/components/mobile-navigation
* [Command palette](https://design.werklist.com/components/command-palette), as text: https://design.werklist.com/agent/components/command-palette
* [Human and agent selector](https://design.werklist.com/components/view-selector), as text: https://design.werklist.com/agent/components/view-selector

### Overlays

* [Dialog](https://design.werklist.com/components/dialog), as text: https://design.werklist.com/agent/components/dialog
* [Sheet](https://design.werklist.com/components/sheet), as text: https://design.werklist.com/agent/components/sheet
* [Popover](https://design.werklist.com/components/popover), as text: https://design.werklist.com/agent/components/popover
* [Menu](https://design.werklist.com/components/menu), as text: https://design.werklist.com/agent/components/menu
* [Tooltip](https://design.werklist.com/components/tooltip), as text: https://design.werklist.com/agent/components/tooltip

### Feedback

* [Toast](https://design.werklist.com/components/toast), as text: https://design.werklist.com/agent/components/toast
* [Inline message](https://design.werklist.com/components/inline-message), as text: https://design.werklist.com/agent/components/inline-message
* [Notifications](https://design.werklist.com/components/notifications), as text: https://design.werklist.com/agent/components/notifications
* [Progress](https://design.werklist.com/components/progress), as text: https://design.werklist.com/agent/components/progress
* [Skeleton](https://design.werklist.com/components/skeleton), as text: https://design.werklist.com/agent/components/skeleton
* [Counter](https://design.werklist.com/components/counter), as text: https://design.werklist.com/agent/components/counter
* [Status](https://design.werklist.com/components/status), as text: https://design.werklist.com/agent/components/status

### Content

* [Card](https://design.werklist.com/components/card), as text: https://design.werklist.com/agent/components/card
* [List](https://design.werklist.com/components/list), as text: https://design.werklist.com/agent/components/list
* [Disclosure](https://design.werklist.com/components/disclosure), as text: https://design.werklist.com/agent/components/disclosure
* [Avatar](https://design.werklist.com/components/avatar), as text: https://design.werklist.com/agent/components/avatar
* [Permitted and not permitted](https://design.werklist.com/components/permitted), as text: https://design.werklist.com/agent/components/permitted
* [Stat tile](https://design.werklist.com/components/stat-tile), as text: https://design.werklist.com/agent/components/stat-tile

### Werklist

* [Job card](https://design.werklist.com/components/job-card), as text: https://design.werklist.com/agent/components/job-card
* [WerkAI](https://design.werklist.com/components/werkai), as text: https://design.werklist.com/agent/components/werkai
* [Country mark](https://design.werklist.com/components/country-mark), as text: https://design.werklist.com/agent/components/country-mark

## Patterns

How components work together on a task.

* [Overview](https://design.werklist.com/patterns)
* [Empty states](https://design.werklist.com/patterns/empty-states), as text: https://design.werklist.com/agent/patterns/empty-states
* [Loading](https://design.werklist.com/patterns/loading), as text: https://design.werklist.com/agent/patterns/loading
* [Errors](https://design.werklist.com/patterns/errors), as text: https://design.werklist.com/agent/patterns/errors
* [Forms](https://design.werklist.com/patterns/forms), as text: https://design.werklist.com/agent/patterns/forms
* [Search and filtering](https://design.werklist.com/patterns/search), as text: https://design.werklist.com/agent/patterns/search
* [Navigation](https://design.werklist.com/patterns/navigation), as text: https://design.werklist.com/agent/patterns/navigation
* [Feedback](https://design.werklist.com/patterns/feedback), as text: https://design.werklist.com/agent/patterns/feedback
* [Modality](https://design.werklist.com/patterns/modality), as text: https://design.werklist.com/agent/patterns/modality
* [Undo and destructive actions](https://design.werklist.com/patterns/undo), as text: https://design.werklist.com/agent/patterns/undo
* [Files and uploads](https://design.werklist.com/patterns/files), as text: https://design.werklist.com/agent/patterns/files
* [Printing and export](https://design.werklist.com/patterns/printing), as text: https://design.werklist.com/agent/patterns/printing
* [Generated content](https://design.werklist.com/patterns/generated-content), as text: https://design.werklist.com/agent/patterns/generated-content
* [Marketing pages](https://design.werklist.com/patterns/marketing-pages), as text: https://design.werklist.com/agent/patterns/marketing-pages

## Data

Tables, numbers, charts, maps and reports.

* [Overview](https://design.werklist.com/data)
* [Board grid](https://design.werklist.com/data/board-grid), as text: https://design.werklist.com/agent/data/board-grid
* [Report table](https://design.werklist.com/data/tables), as text: https://design.werklist.com/agent/data/tables
* [Numbers](https://design.werklist.com/data/numbers), as text: https://design.werklist.com/agent/data/numbers
* [Charts](https://design.werklist.com/data/charts), as text: https://design.werklist.com/agent/data/charts
* [Chart catalogue](https://design.werklist.com/data/chart-catalogue), as text: https://design.werklist.com/agent/data/chart-catalogue
* [Maps and flags](https://design.werklist.com/data/maps), as text: https://design.werklist.com/agent/data/maps
* [Reports](https://design.werklist.com/data/reports), as text: https://design.werklist.com/agent/data/reports

## Resources

How to use the guidelines, files to download, the deck and the files for agents.

* [Overview](https://design.werklist.com/resources)
* [Using this system](https://design.werklist.com/resources/using-this-system), as text: https://design.werklist.com/agent/resources/using-this-system
* [Downloads](https://design.werklist.com/resources/downloads), as text: https://design.werklist.com/agent/resources/downloads
* [Deck](https://design.werklist.com/resources/deck), as text: https://design.werklist.com/agent/resources/deck
* [For agents](https://design.werklist.com/resources/agents), as text: https://design.werklist.com/agent/resources/agents
* [What is new](https://design.werklist.com/resources/what-is-new), as text: https://design.werklist.com/agent/resources/what-is-new
* [Usage terms](https://design.werklist.com/resources/usage-terms), as text: https://design.werklist.com/agent/resources/usage-terms

## Token files

* [werklist-tokens.css](https://design.werklist.com/tokens/werklist-tokens.css): CSS custom properties, the dark values on :root and the light values on html[data-theme="light"]
* [werklist-tokens.json](https://design.werklist.com/tokens/werklist-tokens.json): the same tokens as JSON, with both modes
* [werklist-tokens.print.css](https://design.werklist.com/tokens/werklist-tokens.print.css): the print subset, light values only