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

@@ -282,18 +282,20 @@ export default function SubscriptionCardActive({
{/* ─── Stats row: Tariff + Days Left ─── */} {/* ─── Stats row: Tariff + Days Left ─── */}
<div className="mb-5 flex gap-2.5"> <div className="mb-5 flex gap-2.5">
{/* Tariff badge — clickable */} {/* Tariff badge — clickable. Neutral chrome: the tariff name has
no traffic-zone semantics, so tinting it by the traffic zone
(DESIGN.md Status-Hue Lockout) was wrong. */}
<Link <Link
to={`/subscriptions/${subscription.id}`} to={`/subscriptions/${subscription.id}`}
className="flex-1 rounded-[14px] p-3.5 transition-all duration-500" className="flex-1 rounded-[14px] p-3.5 transition-colors"
style={{ style={{
background: `linear-gradient(135deg, rgba(${zone.mainVarRaw}, 0.07), rgba(${zone.mainVarRaw}, 0.02))`, background: g.innerBg,
border: `1px solid rgba(${zone.mainVarRaw}, 0.09)`, border: `1px solid ${g.innerBorder}`,
}} }}
> >
<div <div
className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider opacity-70 transition-colors duration-500" className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider"
style={{ color: zone.mainVar }} style={{ color: g.textFaint }}
> >
{t('dashboard.tariff')} {t('dashboard.tariff')}
</div> </div>

View File

@@ -210,9 +210,12 @@ export default function Balance() {
<h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('balance.title')}</h1> <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">{t('balance.title')}</h1>
</motion.div> </motion.div>
{/* Balance Card */} {/* Balance Card — flat surface; the giant numeric carries the
weight. The previous accent gradient + glow leaked accent into
decoration (DESIGN.md Tunable-but-Scarce Rule) and read as the
SaaS hero-metric template. */}
<motion.div variants={staggerItem}> <motion.div variants={staggerItem}>
<Card className="bg-gradient-to-br from-accent-500/10 to-transparent" glow> <Card>
<div className="mb-2 text-sm text-dark-400">{t('balance.currentBalance')}</div> <div className="mb-2 text-sm text-dark-400">{t('balance.currentBalance')}</div>
<div className="text-4xl font-bold text-dark-50 sm:text-5xl"> <div className="text-4xl font-bold text-dark-50 sm:text-5xl">
{formatAmount(balanceData?.balance_rubles || 0)} {formatAmount(balanceData?.balance_rubles || 0)}

View File

@@ -321,9 +321,10 @@ export default function Login() {
safeBottom > 0 ? `${safeBottom + 16}px` : 'calc(1rem + env(safe-area-inset-bottom, 0px))', safeBottom > 0 ? `${safeBottom + 16}px` : 'calc(1rem + env(safe-area-inset-bottom, 0px))',
}} }}
> >
{/* Background gradient */} {/* Flat background — the previous two layered gradients (linear
<div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" /> + accent radial halo) read as the airdrop / crypto aesthetic
<div className="fixed inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent-500/10 via-transparent to-transparent" /> PRODUCT.md explicitly anti-references. Body bg-dark-950 carries
the surface alone. */}
{/* Language switcher */} {/* Language switcher */}
<div <div

View File

@@ -1046,10 +1046,9 @@ export default function Subscription() {
style={{ background: g.trackBg }} style={{ background: g.trackBg }}
> >
<div <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={{ style={{
transform: `scaleX(${purchase.progress_percent / 100})`, transform: `scaleX(${purchase.progress_percent / 100})`,
background: `linear-gradient(90deg, ${zone.mainHex}, ${zone.mainHex}80)`,
}} }}
/> />
</div> </div>