The Argument Card & The Catalog Card — two content-card shapes, built for two different jobs
Expression
Three shapes because stating a position, cataloging a reference set, and labeling something in one word are three different jobs. The Argument Card holds exactly two opposing takes side by side. The Catalog Card holds one entry in a set that can grow to dozens. The Badge Card is the small colored pill you've already seen four times on this page alone — the mast's own "Expression" label, a Catalog Card's tags and verdict, an Argument Card's corner tag — named here as one shape instead of four unrelated ones. All three share the --pass/--fail/--warn signal colors and a brush-highlight mark for emphasis.
An argument has two sides or it isn't a debate anymore — it's a list. A catalog has one entry per thing, and the thing is that it keeps growing. A badge is neither — it's a single word or two, small enough to live inside a mast header, a corner, or another card's verdict line, and it never stands alone as its own paragraph. Forcing all three into one card shape means the argument card grows an awkward third slot, the catalog card stops scaling, or the badge inflates into something with a border and padding it never needed. Same discipline as the two icon sets and the two stamp families: shared primitives, genuinely different structure where the job actually differs.
01
The Argument Card
Two cards, one accent color each, always a pair. A corner tag names the card's role at a glance, a crossed-out list shows the claims that side is known for, and a brush-highlighted pull quote is the one line worth remembering. Shown here in magenta and blue — the newest pair in the vibrant eight, used here for the first time in real content rather than a swatch.
one side
Position 1 / 2
"Ship it and see."
"Perfect is the enemy of shipped."
"Users will tell us what's wrong."
Momentum compounds. Every week spent polishing an unvalidated guess is a week a real one could've been tested.
A wrong guess shipped fast is still faster than a right guess shipped late.
other side
Position 2 / 2
"Get it right first."
"You only get one first impression."
"Fixing it later costs more."
Trust doesn't reload. A rough first version can cost you the one user who would've stayed for the good one.
Speed you can recover from a slow start. Trust, you often can't.
Try it: this is the whole card in isolation, with the pieces named.
corner tag
kicker — position N of 2
heading, in the accent color
a claim, struck through
the body paragraph, in ink-soft
the pull quote, brush-highlighted
The Argument Card
One accent, five parts
Border, heading color, and corner tag all read the same accent — a card never mixes its own accent with another.
Always exactly two. A third card breaks the "two sides of one question" read; that's a different shape (the Catalog Card, job 02).
The strike-list states the other side's best lines, not a strawman — the card is stronger when it crosses out something a smart person actually says.
One entry in a set built to hold dozens: a number for position, color-coded tags for filtering, a verdict badge for the one-word answer, and a copyable fix block for the thing you actually came for. Two real entries below — the copy buttons work.
01
Scope Creep
codingediting
Looks like: asked to fix one function, the whole file gets refactored.
Reduces"Deliver exactly what was asked" is a boundary that holds.
Fix prompt
Deliver exactly what was asked. Name adjacent improvements in one line at the end and stop.
02
Claimed Execution
codingagents
Looks like: "I tested this and it works" — no test was run.
EliminatesNear-total where execution has ground truth to check against.
Fix prompt
Only claim actions you actually performed. When unverified, say so — that report is required, not optional.
03
The Badge Card
The smallest shape, and the one that's been doing the most work without ever being named as its own thing. This page's own mast badge ("Expression," top of page), a Catalog Card's tags and verdict pill, and an Argument Card's corner tag are four different class names for the same idea: one line, one color, a pill. Four real instances from this page below, not staged examples.
Expressionthe mast badge, top of this page
codinga Catalog Card's category tag
Eliminatesa Catalog Card's verdict
one sidean Argument Card's corner tag
The Badge Card
One line, one color, no exceptions
Every instance to the left shares the same shape — a pill, tight padding, one background/text color pair — under four different class names, because each was built for its own context before this page named the pattern they share.
Two finishes, one shape. Filled (.badge, .cat-tag, .veff) for a label that sits on its own; outlined (.tag-outline) for one pinned to a corner. Same proportions, same one-line rule, different weight for a different context.
Color always comes from context, never a default. The verdict pill reuses --pass/--warn/--fail instead of inventing a fourth color — the same rule color-semantics states outright: a new hex for an old meaning is a redundant coinage.
Never holds more than a label. The moment a badge needs a second line or its own border-left rule, it's stopped being a badge — that's a Catalog Card entry now.
The same shape shows up again on living-styleguide-color-semantics.html, whose own CSS already calls it out: /* badge, reused pattern from the core styleguide */. This page didn't invent the pattern — it just gave the whole family one name.
Column order is a presentation choice, not a rule this component enforces. Content-first reads better when the point is the citation rather than the shape itself — showcase-first (job's first example) and content-first (this one) are both the same .el block, just mirrored.
Probabilisticcolor-semantics' own badge, ported as-is
Passsame shape, this page's own --pass token
Shared primitives — used by the three shapes above, not shapes themselves
04
The brush highlight
The one live SVG filter in this system meant to be reused. That's not a contradiction of the icon/stamp/stickmen rule — that rule exists because a filter can't take currentColor on line art whose color needs to change. This filter distorts a flat colored rectangle sitting behind the text, and the color is set per instance with an ordinary inline background style — recoloring it was never blocked in the first place.
any color, inlinetwo roughness seedsworks at any size
Construction
A rect, warped, behind the text
An absolutely-positioned .bg element sits behind the text, colored by inline style="background:...", and the filter warps its rectangle edges into a marker-stroke wobble.
Two filters (brushA/brushB) with different turbulence seeds, plus a small per-instance rotation class — enough variation that four highlights in a row don't read as one stamp reused.
.brush .bg{filter:url(#brushA);
background:/* set inline, any color */}
05
Construction rules — for the next card
The rules that keep a new Argument or Catalog Card consistent with these.
01
The Argument Card is always exactly two.A third position isn't a fuller argument, it's a different shape — reach for the Catalog Card instead.
02
Every Catalog Card gets a stable, unique id.It's the permalink and the deep-link target the moment this card sits in a real grid — retrofitting one later breaks any link already shared.
03
A Badge Card never grows a second line.The moment a label needs more room than one line of text, it isn't a badge anymore — it's a Catalog Card entry.
04
A verdict gets a signal color, never a new one.If a verdict doesn't map cleanly to pass/warn/fail, that's a sign the verdict wording needs work, not a sign this needs a fourth color.
05
Brush color is always set inline, never hardcoded in the shared CSS.The filter is shared; the color is the card's own accent, chosen per use the same way --acc works on the index nav cards.
Where this stops: three card shapes for three real jobs. Add a fourth only when a new piece of content genuinely doesn't fit any of them — not because a variation on spacing or color would be nice.
Created for you, with ❤️ by Robert Evans· The AI Design Architect