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 in two states. Fill is matter, a hole is an opening in it. The six units make a constrained combinatorial grammar: they repeat, tile, mask, extrude, invert and animate without introducing any vocabulary from outside the set.
- Consistency
- Every larger composition is visibly built from the same source material.
- Variation without drift
- Graphics can change dramatically while staying recognizable.
- Boolean logic
- Fill and subtraction map directly onto vector operations.
- Motion readiness
- Holes can open and fills can propagate.
- Multi-scale legibility
- The same units work as icons, patterns, Shell faces and environmental graphics.
- Machine-like construction
- The system reads as procedural and generative rather than hand-decorated.
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. One or both outer layers of an axis, in either direction.
One pose
The Shell holds a single resting angle and never tilts.
Shapes persist
A shape only ever moves. A circle stays a circle through every turn.
Walk and return
It travels a set number of turns out, then comes back along the same path.
Faces retire by angle
A face fades as it turns away from you, before its marks could crowd.
One mark, one size
Every mark is drawn at the same size, everywhere, in every state.
The silhouette is the Shell
Nothing is stamped over the field. What you see is the object itself.
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.