II · Relationship

Every Treatment Is a Promise

What does it mean when something looks like this?

A person looking at a screen is pattern-matching faster than they could describe. Their eyes are asking one question of every distinctive style they meet: what does it mean when something looks like this? Not consciously. They recognize an underlined word, a raised button, a red badge, because they've met them everywhere else, and they read a style they've never seen the same way: by what it looks like it's related to.

So a distinctive shadow, border, fill, weight or radius gets read, whether or not anyone decided what it says.

How a style spreads

It usually goes wrong the same way, and I've done it.

A designer falls in love with a treatment before deciding what it means. A hard offset shadow with a heavy outline, say. It looks great on the first card. It looks great on the button too. Soon it's on the containers, the navigation items, the decorative tiles and the interactive ones, each decision locally right, because the thing genuinely looks good wherever it lands. At no point did anyone write down what it meant. At no point did anyone ask whether it should mean that on every element it was now on.

By the time the design is populated, the treatment has stopped meaning anything. It's everywhere, so it marks nothing. And the person, who was trying to learn the rule, learns that there isn't one.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="170" viewBox="0 0 400 170" role="img" aria-label="four frames of the same screen as a hard offset shadow spreads from one card to the button, the navigation and tiles, and finally everything"><rect x="8" y="8" width="88" height="136" rx="6" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="16" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="41" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="66" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="18.5" y="38.5" width="72" height="34" rx="3" fill="#3a3631"/><rect x="16" y="36" width="72" height="34" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="22" y="44" width="40" height="5" rx="2.5" fill="#c9c2b6"/><rect x="16" y="78" width="72" height="30" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="22" y="86" width="30" height="5" rx="2.5" fill="#e0dad0"/><rect x="16" y="118" width="34" height="14" rx="7" fill="#e0dad0" stroke="#d8d2c8" stroke-width="1"/><rect x="56" y="118" width="32" height="14" rx="3" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><text x="52" y="162" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">one card</text><rect x="106" y="8" width="88" height="136" rx="6" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="114" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="164" y="16" width="20" height="9" rx="2" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><rect x="116.5" y="38.5" width="72" height="34" rx="3" fill="#3a3631"/><rect x="114" y="36" width="72" height="34" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="120" y="44" width="40" height="5" rx="2.5" fill="#c9c2b6"/><rect x="116.5" y="80.5" width="72" height="30" rx="3" fill="#3a3631"/><rect x="114" y="78" width="72" height="30" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="120" y="86" width="30" height="5" rx="2.5" fill="#e0dad0"/><rect x="116.5" y="120.5" width="34" height="14" rx="7" fill="#3a3631"/><rect x="114" y="118" width="34" height="14" rx="7" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="154" y="118" width="32" height="14" rx="3" fill="#eeeae3" stroke="#d8d2c8" stroke-width="1"/><text x="150" y="162" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">and the button</text><rect x="204" y="8" width="88" height="136" rx="6" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="214.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="212" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="239.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="237" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="264.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="262" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="214.5" y="38.5" width="72" height="34" rx="3" fill="#3a3631"/><rect x="212" y="36" width="72" height="34" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="218" y="44" width="40" height="5" rx="2.5" fill="#c9c2b6"/><rect x="214.5" y="80.5" width="72" height="30" rx="3" fill="#3a3631"/><rect x="212" y="78" width="72" height="30" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="218" y="86" width="30" height="5" rx="2.5" fill="#e0dad0"/><rect x="214.5" y="120.5" width="34" height="14" rx="7" fill="#3a3631"/><rect x="212" y="118" width="34" height="14" rx="7" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="254.5" y="120.5" width="32" height="14" rx="3" fill="#3a3631"/><rect x="252" y="118" width="32" height="14" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><text x="248" y="162" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">and the nav, the tiles</text><rect x="304.5" y="10.5" width="88" height="136" rx="6" fill="#3a3631"/><rect x="302" y="8" width="88" height="136" rx="6" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="312.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="310" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="337.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="335" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="362.5" y="18.5" width="20" height="9" rx="2" fill="#3a3631"/><rect x="360" y="16" width="20" height="9" rx="2" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="312.5" y="38.5" width="72" height="34" rx="3" fill="#3a3631"/><rect x="310" y="36" width="72" height="34" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="316" y="44" width="40" height="5" rx="2.5" fill="#c9c2b6"/><rect x="312.5" y="80.5" width="72" height="30" rx="3" fill="#3a3631"/><rect x="310" y="78" width="72" height="30" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="316" y="86" width="30" height="5" rx="2.5" fill="#e0dad0"/><rect x="312.5" y="120.5" width="34" height="14" rx="7" fill="#3a3631"/><rect x="310" y="118" width="34" height="14" rx="7" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><rect x="352.5" y="120.5" width="32" height="14" rx="3" fill="#3a3631"/><rect x="350" y="118" width="32" height="14" rx="3" fill="#fff" stroke="#3a3631" stroke-width="1.3"/><text x="346" y="162" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">everything</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">By the fourth frame the shadow marks nothing, because it marks everything.</figcaption></figure>

The fix isn't to abandon the style. It's to decide, late, what it means, and then audit every instance against the decision.

Weight is rank

Some treatments are loud. A heavy shadow and outline draw the eye; flat things recede beside them. That's useful, when it's intended, because loudness is read as importance: the louder element sits higher in the hierarchy.

So when a container and a button inside it wear the same loud treatment, the layout has said they're at the same level. Structurally they aren't. The spacing says one thing, the treatment says another, and the person's brain tries to reconcile two signals that disagree. The screen feels off in a way they'll call "busy".

Visual weight is hierarchy information. It should sit where the hierarchy sits.

The sentence

The test I use, before any distinctive treatment goes on, is whether I can finish one sentence:

This style means: ___.

The hard shadow applies to primary interactive cards, the things you click to go to a new context. The filled background marks the active navigation item and nothing else. If I can write the sentence, the treatment has a meaning and every future element can be checked against it. If I can't, I'm not ready to use it, however good it looks, because whatever I don't decide, the person will decide for me, from the evidence. A treatment that exists because it looks good is decoration. A treatment that exists because it marks something is language. The sentence is how I find out which one I'm holding.

Where this bends

Pure decoration exists and is allowed. A brand illustration, a texture on a marketing page, a flourish in an empty state. The difference is that honest decoration doesn't resemble a functional treatment; it isn't shaped like a button or a card or a state. The trouble starts only when something that looks like language is being used as ornament.