Practice
Learning
New work, broken into steps you can repeat.
Brand · 03
Iconography
A family of marks, not a set of icons.
Six companions to the Z, built from the same four quarter-circles. They take the color of whatever they sit on: Light on navy, navy on Light. Never lime, and never a fifth color.
3.1
Pictograms
One radius, half the side of an 80 by 80 square. Rearranged, the same modules make every glyph.
Lime is allowed here: a construction guide, used once.
3.2
Files
The Light and navy files are recolors of the same drawing. Pick by contrast with the ground.
3.3
On cards
On a card the glyph is cropped and run past an edge. A whole glyph, centered, reads as an icon. A cropped one reads as artwork the card is sitting on.
Glyph
Placement
Right. The glyph runs past the corner, and the card sits on it.
3.4
Usage
Inline the SVG with fill="currentColor" so the glyph follows the text color of its container.
<span style="color:var(--light)"><svg viewBox="0 0 80 80" fill="currentColor" aria-hidden="true">…</svg></span>
3.5
Treatments
| Treatment | Use on |
|---|---|
| Light | Navy and Blue grounds, cards, and dark slides. The default. |
| Navy | Light grounds, print on paper, and inverted sections. |
| Never | Lime, a fifth color, a gradient, an outline, or a glyph shrunk to sit inside a circle. |