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:

<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

§ 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.

.done {
  --box-bg: lavender;
  --accent: rebeccapurple;
}