Component Triedspaceintelligence

One Object, Many Sizes

Size means seeing more of the same thing.

In a surface where one thing appears as a dot, a row, a card and a page, holding the tension between small views needing less and separate designs per size drifting apart, the design draws every size with one renderer that contracts by shedding and reveals more as it grows. People can then notice a thing at any size, discover by opening what they already recognized and witness the same thing at every distance, and the place gains honest, harmonious and effective.

Context

Anything that has to live at several sizes: a mark on a timeline, a row in a list, a card on a canvas, an open panel, a whole page. It is One Substrate, Many Lenses carried down to the component rung: one record under every view, and one renderer under every size.

Tensions

Small views need less. A dot on a timeline can't carry a description.
Separate designs per size drift apart. Collab OS once had three TaskCards and three EngagementCards.
Kinds don't shrink alike. An action is legible as a dot and a name; an engagement built around its image reads as nothing when small.
Hidden: the Atomic Design habit, where an atom never becomes a page and every size is a new component.

Forces the design applies

contract on expand ↔ contractshrinking: each kind sheds from the bottom up, in a declared order
reveal on reveal ↔ obscuregrowing and opening: more of the same thing, never a different thing
abstract on abstract ↔ groundthe smallest rung: the object as a mark you still recognize

Solution

Draw each thing with one renderer at every size. Size is an input to the card, not a property of the page, and each kind declares what it sheds as it shrinks, so opening a thing shows more of what you already saw.

The generative parameter is each kind's ladder: its floor and its shed order. In Collab OS an action is legible as a dot and a name, so it goes down to a point. An initiative is "never reduced to a point", because "a container that governs other things is not a mark". And some things never shed: "The mark, the title and the owner never go."

 point   line               card                panel  ⇢  space
  ●      ● Draft flow  JB   ┌● Draft flow ───┐   ┌● Draft flow ───────────┐
                            │ JB · Thu    ◇  │   │ description · chips    │
                            └────────────────┘   │ comments · children    │
                                                 └────────────────────────┘
               one renderer:  Card(object, scale, context)

Acts

Strengthens: discover (opening shows more of what you already saw), witness (the same thing is recognizable at every distance), notice (the pattern's own test, "recognisable at 40px without reading a word", is this act).
Weakens: click, in its click-through sense. You don't click to find out what something is, because it's already legible.
Notice joined the acts on 10/10; this was one of five patterns asking for it.

Qualities it gives the place

HonestHarmoniousEffective

Refuses

Bait and switch What opens is not what you saw, so no preview can be trusted.

McLuhan check

Enhances: recognition across scales; the thing as a center you can see from across the room and also step inside.
Retrieves: cartographic generalization, the same river drawn at every map scale.
Obsolesces: a component per size, and the detail page designed apart from the card.
Reverses into: one size fits none, a single renderer bending every kind to one envelope (Collab OS guards with per-kind floors: a box can be "too small to be an engagement"). Or a shed order that drops the one thing that mattered.

Required companion: a never-shed set, declared per kind.

Connections

Completes: One Substrate, Many Lenses
Siblings: Stable Ground
Completed by: none yet
Not yet written: Shed in a Declared Order, Size Changes Animate the Same Parts

Seen in

Collab OS (September): "In Atomic Design, size means a different thing. In Collab OS, size means seeing more of the same thing." And: "An atom never becomes a page."
Collab OS (card grammar): "/initiative/[id] is not a second design, it is an initiative's space given the whole viewport. One renderer, no page-only code path." Its test: "If every kind is recognisable at 40px without reading a word, the language works. If it isn't, we have colour-coded rectangles."
Collab OS (card decisions): "a panel is not "more lifted" than a line; it is the same object with more to say." And: "A card that is too short folds rather than becoming a different card".

Elsewhere

Precedents semantic zoom (Pad and Pad++, Perlin, Fox, Bederson and Hollan, 1993 and 1994) · cartographic generalization · Alexander's strong centers and levels of scale (The Nature of Order, Book 1)

In nature A tree known from across a field by its silhouette, then by branch, bark and leaf as you walk up: the same tree, shedding detail with distance.

Tried. Built in one project, with a live bench that sweeps every size.