Five rounded petals turning clockwise around a central squircle. It is a bloom and a device screen at the same time, which is the whole idea: the centre is a phone home button. That reading is what makes the mark Phloom's rather than any wellness brand's, and it is why the squircle's squareness is an invariant rather than a style choice.

The mark carries one flat colour and inherits currentColor. No gradients, no per-petal colours, no outlines, no shadows, no bevels. The creases are cut out of the petals by a mask rather than drawn on top, which is why they stay perfectly registered at every size and why a growing petal appears to draw its own crease.

"Phloom" is always set in Instrument Serif as real text, never as an outlined graphic. That is a rule, and it buys three things: the letters can animate individually, a screen reader announces the brand from the actual word, and the wordmark stays crisp at any size without a second asset.

It also means the symbol beside it is always aria-hidden. Two elements naming the same brand would have a screen reader say "Phloom Phloom".

Instrument Serif has a left side bearing of 0.019em, so a left-aligned heading's ink starts that far inside its layout box. The hero pulls itself back by exactly that much so the ink, not the box, sits on the column edge. A centred lockup needs the opposite treatment, because there the "P" is pulled in by its bearing while the "m" overhangs: measured at 72px, the ink centre sits 1.97px right of the box centre, so the word shifts 0.027emleft to put the pair's ink on the axis.

In every lockup the symbol comes first and the word follows: stacked on the auth card, side by side everywhere else. The pair is centred by ink, not by layout box, because both boxes carry their ink low.

The correction is one number for every lockup, and it was measured rather than eyeballed. The rosette's ink centre sits 3.2% of its box below the box centre, and Instrument Serif's sits about 3% of its font size above its line-box centre, so a naively centred mark reads low by roughly 6% of its own height. Measured before the fix: 3.01px at 52px in the sidebar, 1.67px at 28px in the marketing nav, 6.24px at 100px in the colophon. That is 5.8%, 6.0%, 6.2% of the mark, so a single translate: 0 -6% serves all three and any future lockup, with no per-surface magic number.

It uses the translate property rather than transform on purpose, so it composes with hover scales and with keyframes that own transform instead of silently cancelling them.

The brand loading indicator blooms. Continuous rotation is forbidden outright by the logo rules, and it would be the wrong choice anyway: a five-fold radially symmetric form spinning at spinner speed reads as a smear.

So each cycle presses the home button and unfurls the petals out of it, clockwise, then closes them again. It is a picture of what the mark is.

Where it belongs:page-scale and panel-scale waits. Not the inline spinners inside buttons and table cells. A breath does not read as progress at 16px, and the creases close up below about 24px, so a spinning icon is the right signal for "this button is working" and the brand moment belongs to the full-panel wait.

The audience is VAs and agency operators doing a job, not admiring an interface. So copy is plain, specific, and short. Page titles are Title Case; everything else is sentence case. A label says what the thing is; a description says what it does or what will happen.

The product is Phloom in every user-facing string. The wire protocol and backend are still GADS, and that name never surfaces in the interface.

These are the mistakes the rules exist to prevent, drawn with the real component so the difference is visible rather than described. Every tile is deliberately wrong.

Two bans cannot be shown here at all, and their unshowability is the point: the mark takes currentColor, so it is structurally incapable of carrying a gradient or a per-petal colour. Producing either would mean building a second copy of the artwork, which is itself the first thing the rules forbid.