fix(decoration): strip 4 accent / status-hue leaks across hero surfaces

DESIGN.md 'Tunable-but-Scarce Rule' caps accent at <=10% of any
screen and reserves the accent + status hues for action / status,
never decoration. Four sites were spending those tokens on pure
chrome:

- Subscription.tsx purchased-traffic bar: zone.mainHex linear-gradient
  on a non-status progress bar; the per-purchase bar inherited the
  user's GLOBAL traffic-zone color (a fresh purchase could read
  'critical' just because the user's overall usage was). Replaced
  with solid accent-500 fill — same affordance, honest semantics.

- SubscriptionCardActive tariff badge: zone-colored linear-gradient
  background + zone-colored label. The tariff name has no traffic-zone
  semantics, so tinting it by the global traffic zone was a
  Status-Hue Lockout violation. Switched to glass innerBg/innerBorder.

- Balance hero card: bg-gradient-to-br from-accent-500/10 + glow prop
  on Card. Removed; flat surface, the giant numeric is the affordance.
  Eliminates the SaaS hero-metric template tell.

- Login background: two stacked fixed inset gradients (linear +
  accent radial halo) read as the airdrop / crypto aesthetic
  PRODUCT.md explicitly anti-references. Replaced with the plain
  body bg-dark-950.
This commit is contained in:
c0mrade
2026-05-26 23:26:20 +03:00
parent 312a34f715
commit 75f775064c
4 changed files with 18 additions and 13 deletions

View File

@@ -1046,10 +1046,9 @@ export default function Subscription() {
style={{ background: g.trackBg }}
>
<div
className="absolute inset-0 origin-left rounded-full transition-transform duration-500"
className="absolute inset-0 origin-left rounded-full bg-accent-500 transition-transform duration-500"
style={{
transform: `scaleX(${purchase.progress_percent / 100})`,
background: `linear-gradient(90deg, ${zone.mainHex}, ${zone.mainHex}80)`,
}}
/>
</div>