mahnoor·fatima

computational creative direction

ASTANA

Living Brands™: an attention-driven editorial grid for a design magazine

ISSUE 01 Read a story to give it space, hold to commit

SEED 0XA57A RE-SETTING

ASTANA

Volume XI: A design magazine

Living Brands™: Attention-Driven Editorial Grid

The premise

Living Brands™ is a studio built on one refusal: brands are not delivered as PDFs.

A conventional identity hands over a logo, a palette, a type scale: a set of nouns, frozen at the moment of signing. A living identity hands over verbs. Rules, physics, behaviours, an API. The mark is not drawn and then protected; it is grown, and what gets protected is the law it grows under.

The distinction that matters, and the one every client asks about first: this is not animation. An animated logo is a recording, the same fourteen frames forever, however the world around it changes. A living logo is a system with inputs. It behaves differently on a Tuesday than during a launch, not because someone made two files, but because Tuesday is different.

ASTANA is the first commission taken under that premise, and it was chosen precisely because it is the hardest case.

The client

ASTANA is an independent design magazine covering architecture, urbanism and creative practice, reported mostly from the Global South. Essays, interviews, comics, field dispatches. It is read, not looked at.

That last sentence is the whole problem.

Why a magazine is the hard case

Every other living identity gets to be atmospheric. A materials laboratory can let its logo rot into partial illegibility and call it honest. An ambient wellness company can let its mark drift for a whole minute without anyone needing to extract information from it.

A magazine cannot. A magazine that is difficult to read has failed at the only thing it does.

So ASTANA sets the constraint that makes the whole Living Brands thesis falsifiable: behaviour that costs legibility is not behaviour, it is decoration. If a living identity can only be justified where nobody needs to read, it is a novelty. If it can survive a magazine, it is a method.

The research question

What if the identity were not the masthead, but the grid, and what if the grid were alive?

A design magazine’s real signature has never been its logotype. Swap the masthead on a spread from Domus, Emigre or Metropolis and a designer still knows whose page it is, because the identity was always in the proportions: how space is divided, what gets a full bleed, what gets three columns and a hairline.

The grid is the brand. It is also, historically, the most rigid thing in the building: a template, drawn once, obeyed for years.

So: make the grid the organism.

The experiment

Three attempts. The first two failed, and they failed in ways worth keeping on the record, because both are what “living brand” usually means in practice.

Attempt 01: the living masthead

The obvious move. Grow the letterforms of the word ASTANA: reaction-diffusion on the skeleton, filaments bridging the counters, a masthead that is never twice the same.

It worked immediately, and it was worthless.

The masthead occupies perhaps 4% of a cover and 0% of every interior page. The magazine’s behaviour was confined to a corner and left the actual publication, the part with the reading in it, completely untouched. Worse, it was reversible: you could screenshot a good frame, freeze it, and ship a normal magazine with a nice logo. Any behaviour that can be flattened into a still without loss was never load-bearing.

Attempt 01, the living masthead: the wordmark grows over time while the page beneath it never changes Three covers at increasing ages. In each, the ASTANA wordmark thickens and its letters begin to merge, but the columns, rules and block positions underneath are pixel-identical across all three. A fourth panel shows the result flattened to a single still, which ships as an ordinary magazine with no loss. ATTEMPT 01: THE LIVING MASTHEAD the only thing that moves is the 4% nobody reads DISCARDED ASTANA ASTANA ASTANA t = 0t = 12ht = 48h page beneath: pixel-identical FLATTEN ASTANA one still, ships unchanged nothing was lost in freezing it
What Attempt 01 actually produced. The wordmark genuinely grows (letters thicken, counters bridge, no two renders alike) and the magazine underneath is unchanged in every frame. The fourth panel is the test that killed it: flatten the behaviour to a single still and nothing is lost.

Discarded: decoration wearing a system’s clothes.

Attempt 02: content-reactive colour

Second attempt moved inward. Sentiment-analyse each piece; map tone to a palette. Angry criticism runs hot, archival research runs cool, the issue’s colour is the average of what is in it.

This was more defensible and still wrong, for a subtler reason: nothing downstream depended on it. The colour changed and the magazine did not. Page allocation, hierarchy, what got read first: all identical. It was a readout painted on the side of a machine, not a part of the machine.

The test that killed it: if you removed the behaviour, would anything else have to change? No. Then it was never structural.

Attempt 02, content-reactive colour: the palette tracks the writing while the layout stays exactly where it was Three issues tinted hot, neutral and cool according to the sentiment of their contents. The block geometry is identical in all three. A fourth panel overlays all three layouts and finds no boundary has moved: the geometry difference is zero. ATTEMPT 02: CONTENT-REACTIVE COLOUR the readout changed, the machine did not DISCARDED ISSUE 04: polemicISSUE 05: reportageISSUE 06: archive OVERLAY geometry delta: 0 px three issues, one layout hierarchy, order and allocation: untouched
Attempt 02 read the magazine correctly and did nothing with it. Three issues of genuinely different temperament produce three genuinely different palettes. Laid over one another, not a single boundary has moved. The colour was a gauge bolted to the outside of the engine.

Discarded: telemetry mistaken for physiology.

Attempt 03: the grid re-solves around attention

Third attempt inverted the input. Stop asking what the content feels like. Ask what the readers are doing.

Every story holds a weight. Weight is attention: time spent, returns, depth reached. The page is a binary partition of space, and it continuously re-solves so that each story’s area is its share of the total attention. A piece being read grows. Its neighbours are pushed. Nothing is scheduled, nothing is designed per-issue; the layout is the current state of an argument between stories about who is being read.

This one passed both tests. Remove the behaviour and the magazine cannot lay itself out at all, because the behaviour is the layout engine. And you cannot screenshot it into a static identity, because a still frame of ASTANA is a reading of one particular moment, the way a stopped clock is a time.

Attempt 03, the grid re-solving: the same overlay test, now with every boundary moved The same three-panel test applied to the surviving attempt. One story is being read and grows across the three frames; its neighbours are compressed to pay for it. The fourth panel overlays the first and last states, showing every internal boundary has moved, and notes that removing the behaviour leaves no layout at all. ATTEMPT 03: THE GRID RE-SOLVES the same test, and this time something has to give KEPT READINGREADINGREADING t = 0t = 4st = 11s area is zero-sum: the neighbours pay for it OVERLAY geometry delta: every boundary remove the behaviour: no layout at all
The surviving attempt, put through the same test that failed the other two. Dashed is where the page started, solid orange where eleven seconds of reading left it. Because area is zero-sum there is no such thing as a story growing on its own. Every frame is a decision about who loses space.

Kept.

The computational principle

Page space is a binary space partition: a tree where every internal node is a single cut, horizontal or vertical, at some ratio r, and every leaf is a story.

This structure is chosen for one property: it cannot produce an illegal layout. Cuts are clean edge to edge, blocks are always rectangles, nothing overlaps, nothing orphans. Whatever the weights do, the result is still a magazine grid. The organism is caged by its own geometry, which is exactly the deal a living identity has to make in a place where reading matters.

The dynamics sit on top. Each leaf carries weight; each internal node knows the summed weight of its two subtrees. The node’s target ratio is the fraction belonging to its left child, and each frame the actual ratio eases toward the target:

r ← r + (w(left) / w(left) + w(right) − r) × ease

That is the entire law. Every behaviour in the identity (growth, crowding, hierarchy, the way a long-read slowly annexes a spread) is a consequence of that one line applied recursively, sixty times a second.

The ASTANA engine: a weighted partition tree relaxing into page geometry, driven by a reader-attention feedback loop On the left, a binary tree whose leaves are stories carrying attention weights. In the middle, the relaxation step that turns summed weights into split ratios. On the right, the page those ratios produce, with block areas proportional to weight. Below, a closed loop: attention raises weight, weight claims area, area sets type size, type size affects legibility, legibility returns attention. 01: PARTITION TREE every cut is one node VH HV 3.11.4 0.91.7 2.8 leaf = story · number = attention weight 02: RELAX weights become ratios r ← r + (Σleft / Σboth − r) · ease eased, never snapped: the page re-sets, it does not cut 03: THE PAGE area = share of attention 3.11.4 0.91.7 2.8 04: THE LOOP closed, which is what makes it alive rather than reactive ATTENTIONWEIGHT AREATYPE SIZE LEGIBILITY a story that is easier to read is read more
The engine in four moves. Nothing in the identity is drawn. The page is the current solution to an argument between stories about who is being read.

The behaviour engine

// ASTANA: the whole layout engine is these four passes
const measure = (n) => n.leaf
  ? (n.sum = n.weight)                          // a story's own attention
  : (n.sum = measure(n.a) + measure(n.b));      // a branch owns its children's

const relax = (n, ease) => {
  if (n.leaf) return;
  const target = n.a.sum / (n.sum || 1);        // the share that belongs left
  n.r += (target - n.r) * ease;                 // ease, never snap
  relax(n.a, ease);
  relax(n.b, ease);
};

const place = (n, x, y, w, h) => {
  n.rect = { x, y, w, h };
  if (n.leaf) return;
  if (n.dir === "v") {                          // cut down the page
    const aw = w * n.r;
    place(n.a, x, y, aw, h);
    place(n.b, x + aw, y, w - aw, h);
  } else {                                      // cut across it
    const ah = h * n.r;
    place(n.a, x, y, w, ah);
    place(n.b, x, y + ah, w, h - ah);
  }
};

const read = (story, seconds) => {              // the only input the brand has
  story.weight = Math.min(CEILING, story.weight + seconds * RATE);
};

ease is the single most consequential number in the identity. At 1.0 the page snaps and reading becomes impossible, because text jumps out from under the eye. At 0.01 the magazine is a still image with a rumour of movement. ASTANA ships at 0.07: a spread visibly re-sets over three or four seconds, slowly enough that you can finish the sentence you are on.

Editorial guidelines used to specify leading. This one specifies easing.

Living typography

Type size is not chosen. It is derived from allocated area, size ∝ √area, which means the typography is a direct readout of the attention economy on that page. A 48pt headline is not an editor’s judgement about importance. It is a measurement of importance, taken a moment ago.

This produces the system’s sharpest rule, the legibility ladder. As a block loses area it does not reflow into something cramped and unreadable. It sheds, in a fixed order:

  1. Body copy thins, then goes.
  2. The headline steps down through the scale.
  3. The headline truncates to as many lines as fit.
  4. The kicker goes.
  5. The block holds as a ruled rectangle: present, titled, unread.

A story is never illegible. It is only ever less said. That inversion is what let the living identity into a magazine at all: the system degrades by saying less, never by saying it worse.

Motion rules

  • Reading is the input. Dwell time raises weight. Nothing else does. Not clicks, not shares.
  • Attention decays. Every weight bleeds slowly toward a floor, so yesterday’s lead story surrenders the spread without an editor demoting it.
  • Neighbours feel it. Because area is zero-sum, a story growing is always another story shrinking. There is no free space in ASTANA.
  • Idle drift. With no readers the issue still breathes on a slow per-story cycle: the magazine is never a static object, even unread.
  • Nothing snaps. Every ratio is eased. A layout that re-cut instantly would be unreadable, and unreadable is the one thing this system is not allowed to be.

Editorial metabolism

The issue is not a fixed set of pieces laid out well. It has a birth and death rate.

Commissioning splits the largest block along its long axis, so the new story is literally carved out of the space the best-read piece had accumulated. Success funds the next commission, structurally.

Retiring removes a leaf whose weight has sat at the floor with no recent attention; its sibling inherits the whole cut. Nothing is archived by an editor deciding it is old. It is archived because it stopped being read.

An issue of ASTANA is therefore never closed. There is no “final” layout to sign off, which is the part clients find hardest, and the part that makes the thing alive.

The deliverable

ASTANA received no logo files. The handover was:

  • astana.js: the engine, the eight verbs below, and the constraint set
  • The ratio spec: legal bounds on ease, weight ceiling and floor, minimum legible block area, the legibility ladder in order
  • The metabolism policy: commission and retirement thresholds
  • A conformance test: an automated check that a given state is on-brand

That last item replaces the brand police. “On-brand” is not a human judgement about whether a layout looks right; it is any state the engine can reach within the constraint set, and it is machine-checkable. The guidelines are executable.

const issue = new Astana(canvas);

issue.Read(story, seconds);     // the primary input: attention raises weight
issue.Commission(parent);       // split a block; a new story takes half
issue.Retire(story);            // starved leaf collapses into its sibling
issue.Feature(story, weight);   // editorial override, bounded and time-limited
issue.Settle();                 // run relaxation to equilibrium, no easing
issue.Freeze();                 // snapshot the exact state, this is what prints
issue.Ease(value);              // set the tempo of re-setting
issue.Conform();                // assert the current state is inside the spec

Feature() is the concession to editors, and it is deliberately the ugliest verb in the API: bounded, expiring, and logged. An editor can insist a story matters. They cannot insist forever.

Print

Print is where a living identity usually admits defeat. ASTANA does not, because print is redefined as an instrument rather than an output.

A printed issue is Freeze(), a timestamped sample of the live grid. The cover carries the moment it was taken. Two copies printed a week apart are legitimately different objects, and both are on-brand, because the brand was never the arrangement; it was the law that produced it.

The magazine’s own archive becomes the most interesting artefact it owns: a run of frozen states is a visual record of what its readership cared about, quarter by quarter, drawn by nobody.

What the experiment showed

The two failed attempts share one flaw, and naming it is the real output of this project: behaviour that nothing depends on is decoration. The living masthead could be screenshotted away. The reactive colour could be deleted with no downstream consequence. Both were alive in the sense that they moved, and dead in the sense that they mattered to nothing.

The test that survived: remove the behaviour, does the artefact still work? If yes, it was ornament. In ASTANA the answer is no. Delete the engine and there is no layout, because there was never a template underneath.

What I would carry into the next commission: a living identity is not a system that changes, it is a system with consequences. The grid was the right place to put the life precisely because the grid is load-bearing. Every decision the organism makes costs another story its space. Behaviour without scarcity is animation. Behaviour under scarcity is a brand making a choice.

And the constraint the magazine imposed turned out to be the gift. Forcing the system to stay readable is what forced it to be structural, because the only behaviour worth the legibility risk was behaviour that did the layout’s actual work.