---
name: collapsed-brand-tokens
description: manufaktura-wygody brand palette collapses several furni.to color tokens to the same beige, causing invisible text; how to fix at usage sites
metadata:
  type: project
---

# Collapsed brand color tokens (manufaktura-wygody)

This storefront is a clone of furni.to. In the manufaktura-wygody brand palette, several
distinct furni.to tokens all resolve to the SAME beige **#BDB1A1** (see
`apps/storefront/src/styles/brand-tokens.css`, which is AUTO-GENERATED — do not hand-edit):

- `brand-accent`, `brand-secondary`, `brand-highlight-premium`, `brand-highlight-lime`,
  `brand-highlight-red`, `brand-highlight-purple` → all **#BDB1A1** beige.

**Why:** the original furni.to `brand-accent` was a vibrant green, so old code pairs it with
`text-white`. After the collapse to beige, those pairings render **beige-on-white** or
**white-on-beige** = invisible / very low contrast. User complained "text is invisible."

Non-collapsed tokens that ARE usable:
- `brand-highlight-sale` = warm brown **#9A8264** (the only visible on-brand accent on light bg).
- `brand-primary` / `brand-text` = near-black #282828; `brand-text-inverse`/white = #FFFFFF.
- `brand-surface` #F5F5F5, `brand-bg` #FFFFFF, `brand-border` #E7E3DA, `brand-text-muted` #7A736A.

## Fix at the usage site (never edit the tokens/config)

Do NOT touch `brand-tokens.css`, `brand.config.ts`, or `products-*.ts` — fix the className:

1. Beige foreground on LIGHT bg → `text-brand-highlight-sale` (warm brown). Same for SVG
   `stroke="var(--color-brand-accent)"` → `stroke="var(--color-brand-highlight-sale)"`.
   Exception: beige text on a DARK bg (`bg-brand-primary` etc.) is already visible — leave it.
2. White/inverse text on a BEIGE bg (`bg-brand-accent ... text-white`) → keep the beige bg,
   change text to `text-brand-text`. The repo's already-correct pattern is
   `bg-brand-accent text-brand-text` (used in CookieConsent buttons).
3. Discounted PRICE styled `text-brand-highlight-premium` (beige on white card) → use
   `text-brand-highlight-sale` — it's the sale color, semantically correct and visible.
4. Leave cosmetic beige alone: `border-brand-accent`, `ring-brand-accent`,
   `focus:*-brand-accent`, `hover:*-brand-accent` (hover-only), `accent-brand-accent`,
   progress-bar/toggle fills.

Contrast note: `#9A8264` warm brown on white ≈ 3.65:1 — passes AA for large/bold text
(prices, headings) and graphics (3:1), borderline for small body text.

Off-limits dirs (owned by other agents in the split): `src/components/home/`,
`src/components/layout/`.