Account cards carry identity at a glance (user feedback): the Spending card wears ⚡ + the ark mark in violet beside its label with a violet hairline across the card's crown; Savings wears the bitcoin disc in its orange with an orange crown. The tint is an inset shadow stacked with the card's own — clips to the radius, zero layout shift, so the carousel's equal-height cards stay equal. Kind-locked and single-balance wallets keep their plain label. (Same feedback proposed vertical-only navigation and one global send/receive button — parked, not obviously better than the carousel + per-account model.)

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz

2 files changed, 25 insertions, 5 deletions

diff --git a/src/app.js b/src/app.js
index 3961876..5013058 100644
--- a/src/app.js
+++ b/src/app.js
@@ -24,6 +24,7 @@ import {
   timeAgo,
   SATS,
   BITCOIN_ICON,
+  ARK_MARK,
 } from './format.js';
 
 const wallet = new Wallet();
@@ -3347,9 +3348,19 @@ function balanceCard() {
     const viewSpending = view === 'spending';
     return h('div', { class: 'balance-face' },
       h('div', { class: 'row between', style: 'align-items:center' },
-        h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' },
-          kindLocked ? viewLabel(acc0, view)
-            : hasSpending ? (viewSpending ? t('spendingLabel') : t('savingLabel')) : t('balance')),
+        h('div', { class: 'row', style: 'gap:7px;align-items:center;min-width:0' },
+          // account identity at a glance (user feedback): spending wears
+          // lightning + the ark mark, savings the bitcoin disc — color says
+          // which rail before the label is read
+          hasSpending && !kindLocked
+            ? h('span', {
+                class: 'face-ico ' + (viewSpending ? 'spend' : 'save'),
+                html: viewSpending ? '\u26a1' + ARK_MARK(12) : BITCOIN_ICON(14),
+              })
+            : null,
+          h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' },
+            kindLocked ? viewLabel(acc0, view)
+              : hasSpending ? (viewSpending ? t('spendingLabel') : t('savingLabel')) : t('balance'))),
         manageBtn()),
       h('div', { class: 'amt', style: firstLoad ? 'opacity:.3' : '' },
         firstLoad ? h('span', { class: 'spinner sm', style: 'margin-right:8px' }) : null,
@@ -3631,7 +3642,7 @@ function balanceCard() {
         el._settle = setTimeout(() => settle(el), 130);
       },
     }, ORDER2.map((v) => h('div', {
-      class: 'card balance bal-slide',
+      class: 'card balance bal-slide face-' + v,
       // Tapping the peeking neighbor switches to it outright — the post-render
       // alignment then glides it into place. Guarded against a desktop drag's
       // release click and against buttons riding on the card.
@@ -3657,7 +3668,7 @@ function balanceCard() {
   const heroEl = faceFor(sel);
   applyAnim(heroEl, 'anim-tab-' + (_accDir || 'left'), dtAcc);
   _accDir = null;
-  return h('div', { class: 'card balance' }, heroEl, ...cardExtras());
+  return h('div', { class: 'card balance' + (hasSpending && !kindLocked ? ' face-' + sel : '') }, heroEl, ...cardExtras());
 }
 
 
diff --git a/src/style.css b/src/style.css
index 53f306f..a99212d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -156,6 +156,15 @@ input { scroll-margin-top: 12px; }
 .card + .card { margin-top: 16px; }
 
 /* ---- balance card ---- */
+/* Account identity at a glance: a symbol beside the label and a colored
+   hairline across the card's crown — spending wears lightning + the ark
+   mark (violet), savings the bitcoin disc (orange). Inset shadow stacks
+   with the card's own and clips to the radius; no layout shift. */
+.face-ico { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; flex-shrink: 0; }
+.face-ico.save { color: #f7931a; }
+.face-ico.spend { color: #7c3aed; }
+.balance.face-spending { box-shadow: inset 0 3px 0 rgba(124, 58, 237, .55), var(--shadow); }
+.balance.face-savings { box-shadow: inset 0 3px 0 rgba(247, 147, 26, .6), var(--shadow); }
 .balance .amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--mono); }
 .balance .amt .unit { font-size: 18px; color: var(--muted); margin-left: 6px; font-weight: 600; }
 .balance .usd { color: var(--muted); margin-top: 2px; }