Checkpoint 1 · OPP-CHIP · 2026-09-22

Pick the opposite chip look

You flagged it in the app at 02:33Z on buruk: "for opposite pill we need a different pill like inverse or orange." Below are three real-code, real-data looks — pick one, or say none of them.

buruk · sense 1 · CT2 vocabulary card The "Challenge" section (similar / opposite / informal) Phone-first, 390px, dark app frame
Read this first

What's real, and one thing I had to reconstruct

Where the code decides this today

The chip has no relation-specific color — only its text differs

Every relation chip — similar, opposite, formal, informal — renders through the exact same span, with the exact same two classes, regardless of which relation it is:

// web/src/components/carousel/ClusterMemberItem.tsx:722-728 member.relation && ( <span data-testid="cluster-member-relation-tag" className="text-xs px-2 py-0.5 rounded-full bg-bg-tertiary text-text-secondary" > {RELATION_LABEL[member.relation]} </span> )

The label text alone is what's supposed to carry the meaning (ClusterMemberItem.tsx:52-57):

const RELATION_LABEL: Record<Relation, string> = { similar: '≈ similar', opposite: '↔ opposite', // ← the ↔ mark is ALREADY here today formal: 'formal', informal: 'informal', }

Two things worth knowing before you pick: (1) bg-bg-tertiary = #1E2337, text-text-secondary = #9CABC1 — a muted grey pill, identical for every relation kind, at 11px inside the pill. (2) the "↔" you asked for is technically already in the label today — it's just small, mid-grey, and inline with the word, so it doesn't read as a deliberate mark. That's why Variant B below doesn't just add ↔ again; it changes weight/size instead, and offers ≠ as an alternative glyph. The one color already used elsewhere in this card for "pay attention" is --hero-gold: #F59E0B (the ⚠ meaning-shift chip a few lines above this one, same file) — that's the warm color Variant A and C reuse, rather than inventing a new one.

Pick one

Three looks

Same buruk card, same Challenge section, same two members (baik = opposite, jahat = similar) in every variant. Only the opposite chip's styling changes.
A Warm colour
buruk — study card
buruk
/ˈbu.ruʔ/
BOO-rook
Challenge0 of 2 reviewed
Words to tell apart from buruk: similar, opposite, informal
Word↔ opposite
baik+
📖 Learn 🔊
Word≈ similar
jahat+
📖 Learn 🔊
Changed: chip background/text only — bg-hero-gold/15 text-hero-gold font-semibold (the same orange already used for the ⚠ meaning-shift chip on this card). Shape, size and label text ("↔ opposite") are unchanged from today.
B Inverse mark, today's colour
buruk — study card
buruk
/ˈbu.ruʔ/
BOO-rook
Challenge0 of 2 reviewed
Words to tell apart from buruk: similar, opposite, informal
Word opposite
baik+
📖 Learn 🔊
Word≈ similar
jahat+
📖 Learn 🔊
Changed: pill colour is untouched (still bg-bg-tertiary text-text-secondary) — only the mark is bolder and bigger, and swapped from ↔ to ≠. I picked ≠ over reusing ↔ because ↔ is already in today's label (see the section above) and evidently wasn't legible enough at 11px/500 to register as "opposite" — ≠ reads unambiguously as "not this" to a learner, where ↔ can also read as "swap" or "sync."
C Both
buruk — study card
buruk
/ˈbu.ruʔ/
BOO-rook
Challenge0 of 2 reviewed
Words to tell apart from buruk: similar, opposite, informal
Word opposite
baik+
📖 Learn 🔊
Word≈ similar
jahat+
📖 Learn 🔊
Changed: A's colour and B's bold ≠ mark together — bg-hero-gold/15 text-hero-gold font-semibold plus the enlarged, bolded ≠ prefix.