Letter stickers
Single letters in Display Black, set in circles of brand color and scattered at angles, like labels slapped on crates. They spell words loosely, overlap freely and break the grid on purpose.
Mix primary and secondary colors, rotate freely, let stickers overlap each other and the page edge.
Use stickers for anything that must be read quickly, like navigation or instructions.
Sticker playground
Stickers have weight. They drop in, pile up, roll and bounce off the walls. Grab one and fling it. On a phone, tilt it and they slide toward the low side (on iPhone, tap “Use tilt” or the stickers once and allow motion access).
Sliding scale
The palette as one continuous field. See Color.
Grid and hairlines
Everything sits on a 12-column grid: 24px gutters and 48px margins on screens, four columns on phones. The faint vertical hairlines on every page of this guide run down the middle of those gutters, left visible so you can see things line up.
Pages are organized with heavy and hairline rules rather than boxes: a full-width rule above each title, a lighter rule above each section, and a rule above the footer line. The rule carries the structure; color and type do the rest. This site follows the same system.
Section title
Column
Column
Column
More to come: the illustration style and personality chart in the Figma file will be added here.