Commit to one directionCommit to one direction

Hedged vs committed

Pick a direction; hover or tap a label.

/* Tone: editorial. Ink on paper, set like a magazine. */
.card {
  font-family: Didot, "Bodoni 72", Georgia, serif;
  background: #f3ede2; color: #1b1a17;
  border-radius: 0; border-block: 3px double #1b1a17;
  box-shadow: 0 24px 30px -28px rgb(0 0 0 / .45);
}
.card h3 { font-style: italic; font-weight: 400; }
.cta::after { transform: scaleX(0); transform-origin: left;
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1); }
.cta:hover::after { transform: scaleX(1); }

Coherence meter

Change any choice. The meter counts how many still agree.

/* Tone: brutalist. Every token answers to it. */
:root {
  --font-display: "Arial Black", "Helvetica Neue", sans-serif;
  --font-label: "Courier New", monospace;
  --radius: 0;             /* a 28px pill is a maximalist choice */
  --border: 3px solid #000;
  --shadow: 8px 8px 0 #000;
  --motion: 0ms;           /* instant, not springy */
}

The middle is the muddle

Drag the dial. Only the two ends read as designed.

/* Pick an end. Both are designs. */
.card[data-tone="minimal"] { --weight: 250; --radius: 0;    --border: 1px; --stripes: 0; }
.card[data-tone="maximal"] { --weight: 900; --radius: 26px; --border: 4px; --stripes: 1; }

/* Not this: two half-decisions averaged into none. */
/* .card { --weight: 575; --radius: 13px; --border: 2.5px; --stripes: .5; } */

Why it matters, pros and cons