Clusters and guides

Clusters and guides are a pair. A guide is a line you place on the canvas: a center line, or a line a set distance in from an edge. A cluster is an ordered set of elements, or whole groups, that stack along that guide with the spacing you choose between them. Usually it's a heading, a subheading and a CTA, but any element can be a member: a picture, a logo, an icon. Put the two together and you've described a layout that keeps its shape no matter what the words are. "Stack these three, 24 pixels apart, centered on this guide." "Sit this block against a line 80 pixels up from the bottom edge."

This pairing is the single most useful thing you can set up to make a template keep looking right when the content changes.

Why it matters

When someone rewrites the copy, the text reflows. A one line headline becomes two, a subheading gets longer. Without a cluster, every element keeps its old fixed position and they collide or drift apart. With a cluster, BrandFit lays the members out again with the right spacing and slides the whole stack back onto its guide. You change the words, the composition holds. Nobody moves a box, and an agent spends nothing working out where things go.

What a cluster does

• Stacks its members along an axis (usually top to bottom) with a set gap between them. Members stack in the order the cluster panel lists them, and the arrows on each row change that order. The gap is measured between what you actually see: the letters of a text element, the painted edges of a button or a highlighted line, the picture edges of an image.
• Snaps the stack to its guide, and there are two ways to do that. Along the stacking axis, an anchor moves the cluster as one unit: pin the bottom of a vertical stack and the whole block sits above that line. Across the stacking axis, an anchor lines every member up individually: pin center-x on a vertical stack and each member centers itself on the guide. The editor names the two "pin position" and "align members".
• Skips whatever is hidden. Hide a member, on one format or on all of them, and the stack closes up around it with no leftover gap.

A cluster only decides where its members sit, never how big they are. That is the other rules' job, and it's why the two never pull against each other.

A cluster with no anchor still stacks, but it won't hold a place on the canvas: the first member stays where it is and the rest re-flow after it. Anchoring is what pins the result somewhere.

So a cluster is how you center a block, or pin it to an edge with precise padding, and have it stay that way as the text grows or shrinks.

The rest of BrandFit respects your clusters

Because the cluster decides where its members sit, the other rules that move things leave cluster members alone. The rules that change size (fit the text, shrink an overflow) still do their job, and the cluster simply lays the members out again around the new size. So nothing tugs the same element two ways, and the layout settles instead of looping.

Making one

In the editor, open the Guide panel in the right sidebar. Add a guide, or use one that's already there. Then hit + on the Clusters section for an empty cluster, add each element to it from the member picker, and set its axis, the gap between members, and the guide it anchors to. The stack arranges itself as you edit.

Selecting any member on the canvas shows a Part of a cluster tag above the stack. Click it to jump straight to that cluster's settings in the sidebar.

Worked example: a centered block that survives longer copy

Say you have a heading, a subheading, and a button, and you want the block to stay centered on the canvas even when the heading later wraps onto more lines.

1. Add a vertical guide. New guides land at the center of the format, which is exactly where you want this one.
2. Make the cluster. Add the three elements as members, axis vertical, gap 24.
3. Anchor the cluster's center-x to that guide. Now every member is centered as a block, whatever its line count. A headline that wraps to two lines stays centered; so does the element below it.
4. Decide the vertical behavior with a second anchor. Add a horizontal guide and pick the edge that matches your intent:
   • top keeps the stack hanging from a fixed height, growing downward.
   • center-y keeps the whole block vertically centered, so it grows evenly in both directions as its contents get taller.
   • bottom pins the stack near the bottom edge, growing upward. Good for CTA blocks over a photo.

One vertical and one horizontal anchor together fully place the block, and the two axes never fight each other.

Two different things can change here, and only one of them is automatic. Longer copy is free. A heading that wraps from one line to four re-flows the stack on its own, because a cluster stacks whole elements and a wrapped heading is simply a taller member. A new element is not. Drop a fourth element on the canvas and it sits where you dropped it until you add it to the cluster's member list. Once it's a member it joins the stack at the position you give it, and everything after it shifts to make room.

Pin one position per axis. A stack doesn't stretch between two anchors, so pinning both the top and the bottom of a vertical stack won't hold it to a fixed height: the last anchor you added is the one that decides, and the other quietly does nothing. Pin edge always adds an anchor rather than replacing one, so delete the old row when you change your mind about which edge holds the stack.

An element belongs to one cluster at a time. The "add member" picker only offers what no other cluster has claimed, so you never end up with two stacks arguing over the same element.

Choosing the gap

• The cluster's gap is the default rhythm between consecutive members, in pixels, measured between what renders rather than between the element boxes. For text stacks, 16 to 32 is a good starting range.
• Gap before, per member. Each row in the cluster panel has its own "gap before" input that overrides the space before that one member, along whichever axis the cluster stacks on. The classic use is extra air before the button: gap 24 between the text elements, 40 before the CTA. Clear the field and it falls back to the cluster's gap.
• Both can differ per format, so a tall story can breathe more than a square.

Anchor cheat sheet

You want	Guide	Anchor edge
Block centered horizontally	Vertical guide at center	center-x
Block centered vertically, grows both ways	Horizontal guide at center	center-y
Fixed padding from the left edge	Vertical guide set in from the left	left
Stack sits above the bottom edge, grows upward	Horizontal guide near the bottom	bottom
Headline always starts at the same height	Horizontal guide at that height	top

Guides and formats

A new guide shows on every format. It starts at a proportionally scaled position on each one (a line 90% down the square starts 90% down the story), and dragging it on a format moves it on that format only: one conceptual line, tuned per aspect ratio. This is what makes guides safe to anchor clusters to: the anchor follows the same line everywhere.

You can still scope a guide to a single format with the "Applies to" toggle, for a line that only makes sense on one aspect ratio. A format-scoped guide simply doesn't exist on other formats. It's listed dimmed under "On other formats" in the panel, and any anchor bound to it is inactive there (the cluster stacks but doesn't pin). The anchor row warns you when that's the case and offers to show the guide on all formats.

The cluster's gap, axis, and anchors can each be overridden per format, so the same cluster can sit tight on a square and use the full height on a tall story without forking the layout. Set it once, then adjust only the formats that need it. Membership and stack order stay the same everywhere.

Pinning a cluster where it is

The fastest way to anchor a cluster is Pin edge in the cluster's anchor section: it creates a guide exactly at the cluster's current edge on the format you're viewing and binds it in one step. Nothing moves: the stack is simply pinned where it already sits, and the new guide appears on every format at a proportional position you can drag to fine-tune. "Pin position" choices hold the stack in place along its stacking axis; "Align members" choices line every member up on the guide (e.g. all left edges, or all centers).

Clusters and groups

They sound alike but do opposite things.

	Group	Cluster
Inside	Frozen. Children keep their exact relative positions.	Flexible. Members reflow to the gap you set.
Moves as	One rigid unit	A stack that adapts to its content
Use for	A logo lockup, a card that must stay pixel identical	A heading, subheading, and button that should reflow when copy changes

A group can even be a member of a cluster: the cluster treats the whole group as one block in the stack.

Next: the rules and building a template that just works.