Mark
A cube down its body diagonal reads as a hexagon of three rhombi. The three nearest edges make a Y. The panels are the faces; the Y is where they meet. Generated from position, not drawn.
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.
Gradient
One gradient, and it is a ground, not a decoration: white falling to n02 down the vertical. It goes behind a figure — the cube embed, a mark plate, the lab stage — so the field reads as lit rather than filled. It never runs under text, never sits on a control, and never picks up a hue. On the archive it mirrors, surface to ground, so a surface holding the token survives the theme flip.
Opacity
Opacity does not make a new gray, it puts the same gray further back. Six conditions, all of them ink on the paper plate. If a value here would land on a ramp step, use the ramp step: alpha is for things that sit over something you still need to see.
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
The system’s primitive is not a shape, it is a substance. A halftone dot is not a picture of ink, it is ink, and these six are not icons standing for things: they are the material the Shell is made of. So the category is Matter, and everything under it inherits two axes. Matter has constituents, which are the three forms. Matter has states, which are solid and opened. Three by two is six, and nothing else is ever added, because you cannot add a seventh unit to a material without saying what it is made of.
Proton +Y
No vertices, no orientation. The only unit that cannot point, so the only one no turn can misalign.
Electron +X
The only odd-sided unit and the only one with an apex. The only one that can carry direction. Drawn 12% larger to hold equal weight.
Neutron +Z
Tiles with no residue at the grid’s own pitch. The only unit that fills its cell rather than sitting in one, so the only one that reads as area.
Aperture −X
An annulus: the only opening at a constant distance from its boundary. It admits without directing.
Portal −Z
The hole sits at the centroid, below the box center, so it reads as a passage with a direction through it.
Socket −Y
Containment broken at the middle. The frame survives, the fill does not, so it reads as built to receive.
The Shell
Idler’s visual model of an environment: a closed, persistent structure in which agents move, act, and are evaluated.
The Shell
Transmissive
Closed field
Plate
Up +Y
The layer under the top face. Circles ride it.
Right +X
The layer behind the right face. Triangles ride it.
Left +Z
The layer behind the left face. Squares ride it.
Down −Y
The opposite layer, turned away. Sockets ride it.
Back-right −X
The opposite layer. Apertures ride it.
Back-left −Z
The opposite layer. Portals ride it.
One pose
One resting angle. It never tilts.
One form per face
Each face carries one form. A mark takes the form of the face it lands on.
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.
The Shell as editable source, with four presets. Each is a complete, readable sketch rather than a flag on one engine, because the differences between them are worth reading as code. The canvas recompiles as you type.
Shell
The geometric channel, one form per face.
Transmissive
Draws the far side first at GHOST = 0.16, mirrored through the center, then the near side over it.
Closed field
Squares at SIZE = 1.42, so the marks overlap and seal. Plus per-cell grain.
Plate
A plate(x, y, t) function standing in for the satin photograph, sampled per mark.
- Nothing is hidden
- The parameters that matter sit at the top of each sketch as named constants:
PITCH,SIZE,STEM,FLARE,GHOST,GRAIN,AMP. The thing you would actually push on is the first thing you see. The harness only callsdraw(ctx, S, t)and reports errors; every decision about the mark is in the sketch. - Time is a parameter
tis elapsed seconds, so anything written against it animates. The Plate preset already drifts.
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.
References
Where the system sits, and what it is measured against. Each figure below is drawn from our own six units, because a reference you can only look at is weaker than one you can rebuild. The full argument is on the references page.
Manfred Mohr
The cube as a finite alphabet to exhaust, not an object to draw.
Sol LeWitt
Enumeration over composition. Keep what the system honestly made.
Karl Gerstner
Build the program, not the poster.
Vera Molnár
Controlled disorder, because a regular field is dead on the page.
The halftone screen
One mark, one size. Density carries the tone.
Otl Aicher
A sign system from one grid and a fixed set of angles.
Photons
Point fields where density shades and motion leaves one origin.