Colorways

A colorway is a group of shades of a color, with specific roles. For instance, here is the .ok colorway in the missing.css source code:

.ok {
    --box-bg: var(--ok-bg);
    --accent: var(--ok-fg);
    --graphical-fg: var(--ok-graphical-fg);
}

The following colorways are provided by default:

.plain is the default.
.info is used to highlight information without any emotional affect.
.ok is used to indicate successes, insertions, desired states.
.warn is used to warn the user, although there may not necessarily be a bad situation.
.bad is used for errors, deletions, failure states.

Applying the colorway class to an element will not change its appearance by default. Use the .bg, .color and .border classes to use an aspect of the colorway:

Example: Colorway classes

<p><b class="ok color border">Do:</b> Use color to help users scan information
    quickly
<p><b class="bad color">Don't:</b> Use color as the only way to communicate
    a piece of information

Do: Use color to help users scan information quickly

Don't: Use color as the only way to communicate a piece of information

§ Custom colorways

If you want, you can make your own colorway simply with a class that sets the appropriate CSS variables. We recommend naming your colorways after their purpose, as opposed to their specific color.

Example: Defining a custom colorway

/* style.css */
.done {
  --box-bg: lavender;
  --accent: rebeccapurple;
}

<!-- markup.html -->
<h2>Pull requests</h2>

<h3>Add "ok" colorway</h3>
<p>Authored by alice@example.com &middot; 
<chip class="ok color">Open</chip>

<h3>Add "done" colorway</h3>
<p>Authored by bob@example.com &middot; 
<chip class="done color">Merged</chip>

<h3 class="<h4>">Add "red" colorway</h3>
<p>Authored by alice@example.com &middot; 
<chip class="bad color">Closed</chip>

Pull requests

Add "ok" colorway

Authored by alice@example.com · Open

Add "done" colorway

Authored by bob@example.com · Merged

Add "red" colorway

Authored by alice@example.com · Closed