Colors

A notan in paper has exactly three colors: the face of the sheet, its reverse, and whatever it lies on. The three color cards hold them, as “Front”, “Back” and “Ground”. Drag one card's swatch onto another and the two colors change places.

What it does

The cards sit under the heading “Colors” on the Color tab of the inspector. On a phone they are in the color sheet that opens from the round color chip, with a small picture of the design kept at the top so you can watch your changes land.

Each card has, from left to right, a swatch with a grip, the color's name, its hex code beneath the name, and a padlock. Under them are sliders for whichever “Color space” is chosen: the RYB paint mixer (red, yellow, blue, white and black) to start with, or CMYK, HSV or RGB.

• Select a color by clicking its swatch or its name. Its marker becomes the one you move on the color wheel.
• Type a color into the hex field, as three or six hexadecimal digits, with or without the #.
• Lock a color with its padlock, so harmonies are built around it and leave it alone. One color at a time.
• Swap two colors by pressing on a swatch and dragging it onto another card. After a few pixels the swatch lifts out of its slot. Drop it on another card and the two swatches fly past each other, then the colors trade places. Drop it anywhere else and it glides home. A paint recipe travels with the color it mixed.
• Rotate all three with the two arrows under the color wheel, “Rotate colors backward” and “Rotate colors forward”. Forward sends the front's color to the back, the back's to the ground, and the ground's to the front; backward runs the other way.

A swap moves colors, not locks. The padlock belongs to the card: lock the Back, swap Back and Front, and the Back card is still the locked one, now holding the color the front had. An armed harmony stays armed through a swap.

A new design starts with a black front, a black back and a white ground. The artwork export paints with the same three: the ground over the whole frame, the flipped pieces in the back color, and the sheet in the front color on top. The cut-lines file ignores color.

Why it works this way

Three cards because there are three physical things: two sides of one sheet, and a surface under it. Everything visible in a notan is one of the three. Naming them by role rather than by color (“Front”, not “Black”) keeps the cards meaningful whatever colors you choose.

Swapping is a single gesture because it is one of the most useful experiments in notan. Exchange two colors and the same cut becomes a different picture: a dark figure on light becomes a light one on dark, and the eye's sense of which shape is the figure can flip with it. A swap loses nothing, so you can try it and swap back. Rotation does the same for all three at once, cycling through every assignment of three colors to three roles in three presses.

The swatch lifts only after the pointer has traveled a little, so a plain click selects the color and does not start a drag.

The metaphor

The cards borrow from the paper maker's sample book and the framer's corner samples: each card is a material you might pick up and try against the others. Dragging a swatch onto another card is the digital version of turning a sheet over, or sliding a cut onto a different mount board.

The metaphor holds for the ground, which in life is a free choice: the same cut can lie on any table. It breaks for the front and back. Real paper comes with its two sides already decided; to get a red face and a green back you must find a paper made that way or glue two sheets together, and the edge of every cut will show the paper's core. In the app the two sides are independent. You can give a sheet any back, including one identical to its front, which no two-color paper would ever be sold as. Real papers also come in a few hundred colors from a catalog, not sixteen million from a slider.

A history

In art

Three-color thinking is old in drawing. Venetian artists of the sixteenth century often drew on blue paper, with black chalk for the shadows and white for the lights: the paper was the middle value, and every drawing was a composition in three. Arthur Wesley Dow made the same structure a lesson. His Composition of 1899, built on ideas he had absorbed as assistant to the scholar Ernest Fenollosa, taught notan first in two values, then in three.

Henri Matisse, in the cut-outs of his last years, worked with the same three things this app does: sheets of paper painted with gouache, a pair of scissors, and a ground, often a white wall, to pin them to. His book Jazz, published in 1947, reproduced cut-paper designs as prints.

In printing

The chiaroscuro woodcut was printing's three-color picture. Lucas Cranach and Hans Burgkmair were printing woodcuts from several blocks in Germany by around 1510, and in 1516 Ugo da Carpi obtained a privilege in Venice for what he called a new way of printing light and dark. A key block carried the dark lines, a tone block laid down a middle color, and gaps cut in the tone block let the paper's white show through as highlights: a dark, a middle and a light, with the paper as one of the three.

Printers also practice the swap. Type “reversed out”, printed as paper-colored letters knocked out of a dark area, is the same design with figure and ground exchanged, and every printer knows it reads differently: heavier, louder, harder at small sizes.

In technology

Painting software has swapped colors for decades. Photoshop keeps a foreground and a background color in two overlapping squares, with a curved arrow to swap them (the X key) and a tiny icon to reset them to black and white (the D key). Studio Notan's drag is that arrow, for three colors instead of two.

Early color computing made the limit of a few colors a design material. IBM's Color Graphics Adapter of 1981 could show four colors at its 320 by 200 resolution: a background color you could choose, plus one of two fixed sets of three, cyan, magenta and white, or green, red and yellow. Games made a virtue of palettes by swapping them: in Super Mario Bros. of 1985, Luigi is Mario drawn from the same pixels in different colors. The geometry stays; the palette changes. That is exactly what a swap does to a notan.

In professional software

Every drawing program keeps a small set of current colors and a quick way to swap them. The professional habit that matches Studio Notan’s cards is to name colors by the job they do and to change them in one place.

• Adobe Photoshop. The foreground and background colors sit in two overlapping squares near the foot of the toolbar. X swaps them and D resets them to black and white.
• Adobe Illustrator. A shape has a fill and a stroke, shown as two squares in the toolbar. X chooses which one you are editing, ⇧X (Shift+X) swaps their colors, and D restores the default white fill and black stroke. Edit a global swatch and every object that uses it changes at once, and ‘Recolor Artwork’ can reassign a whole set of colors together.
• Figma. Styles and variables name a color once and apply it everywhere. A collection of variables can hold modes, such as light and dark, and switching a frame to another mode changes all its colors together, much as a swap or a rotation does here.
• Autodesk AutoCAD. Objects usually take their color ‘ByLayer’, from the layer they sit on, and layers are named for what they are rather than how they look. Change a layer’s color in the ‘Layer Properties Manager’ and everything on it follows. In drawings for a laser cutter, a layer or color often stands for an operation, such as cut or score, not for a color at all.

What carries over. Name colors by role, not by appearance: front, back and ground here; lead, accent and background in a brand. Treat a swap as a quick design test: the same artwork with two colors exchanged is worth one keystroke to look at. One difference to expect: Photoshop and Illustrator swap a pair, while a notan has three roles, which is why this app adds rotation.

Try this

1. Drag the Ground swatch onto the Front card. The sheet takes the ground's color and the ground the sheet's: the notan inverts.
2. Press the forward rotate arrow three times, stopping each time to look. Three presses bring you back where you started.
3. Lock the Back, then swap the Back and Front colors. The lock stays on the Back card.

Going further

• One chapter for each color: Front, Back and Ground.
• The controls on each card: Lock, Hex color codes and Color space; and Color harmonies for setting all three at once.
• Books: Arthur Wesley Dow, Composition; Josef Albers, Interaction of Color.