Mark
Favicon
The symbol alone, in a square tile. The tile carries the silhouette, so the mark holds at 16px against light or dark browser chrome.
Clearspace
One module, 1x, taken from the lockup itself: the gap between mark and logotype is 0.5x, so 1x is twice it. Keep 1x clear on every side. Nothing sets inside it: no type, no rule, no edge of an image.
Color
Five minerals. One accent at a time, no more.
Grayscale
Twelve steps, near-neutral gray. 01 is the paper plate, 12 is the dark plate, structure pulls from between. Even lightness steps, one held hue. The archive ground sits below the ramp and is its own token.
Typography
EB Garamond says the things worth saying. Tekio is what you actually read. Numbers are always PX Grotesk. Weight stops at 500.
Intelligence as structure
UsageCreative / campaign.
Intelligence as a structure of relationships
UsageAll headings. Scale down for H2 / H3.
Intelligence as a structure of relationships. Nodes connect, signals travel.
UsageThe claim line. That is the whole job.
Intelligence as a structure of relationships. Nodes connect, signals travel, paths thicken where the work flows.
UsageReading text.
Why Idler
Intelligence as a structure of relationships. Nodes connect, signals travel, paths thicken where the work flows.
UsageEyebrows, meta, captions, buttons. Set in the body ink, not a faded one: a term list is stated, not whispered.
01
1234567890
UsageNumbers, pass@k, IDs.
Atoms
Three forms. Each one solid, or opened by a hole. That makes six units, and every graphic in the system is built out of them: repeated, masked, cut into each other. Nothing outside the six ever gets used.
- Consistency
- Scale anything up and the same six units are still visible in it.
- Variation without drift
- The output can get strange and still read as this system.
- Boolean logic
- Fill and hole are union and subtract. The drawing tool already speaks it.
- Motion readiness
- A hole can open. A fill can spread.
- Multi-scale legibility
- The same unit works at 16px and at the size of a wall.
- Machine-like construction
- It reads as something a machine drew, because it is.
The Shell
Idler’s visual model of an environment: a closed, persistent structure in which agents move, act, and are evaluated.
One move
A layer turn, either direction. Never the middle.
One pose
One resting angle. It never tilts.
Shapes persist
A shape moves. It never becomes another.
Walk and return
It turns out, then retraces its path.
Faces retire by angle
A face fades out as it turns away.
One mark, one size
Every mark the same size, in every state.
The silhouette is the Shell
Nothing is stamped on top. The object is the mark.
Applications
Buttons, inputs, tags, tabs, progress and states. Every value here is read from the tokens in 08, and nothing in this section sets a color of its own.
Tokens
Values are read from :root. Reference a state token, never a mineral. Source: docs/color-system.md.