System Requirements Document

1. Introduction

This System Requirements Document (SRD) defines the requirements for a visual redesign of the authenticated online banking dashboard currently implemented as a single server-rendered PHP page (dashboard.php) for a UK building society online banking service.

The redesign is presentation-layer only. Its purpose is to modernise the look, feel, layout, component styling, theming, motion, and responsive behaviour of the dashboard while preserving the existing application behaviour that the page depends on.

The redesign adopts a Dieter Rams–informed visual language — honest controls, a strict modular grid, warm-grey surfaces, and a single saturated signal accent — so that the dashboard reads as a disciplined instrument panel rather than a generic blue-on-white SaaS template. The visual language is applied to the chrome, surfaces, typography, grid, and motion surrounding the preserved regions; it never alters the preserved regions themselves.

The following areas are explicitly out of redesign scope and must remain functionally and structurally untouched:

• The database — no schema changes, no new tables, no altered column names, and no changed query semantics. Existing queries, joins, and persistence behaviour must be preserved exactly.
• Page URLs — every existing page filename and route (e.g. dashboard.php, profile.php, edit-profile.php, security.php, make_transfer.php, internal_transfer.php, intern-transfer.php, history.php, statement.php, Bill_payments.php, card-settings.php, cheque-deposit.php, loan.php, crypto.php, support.php, beneficiary.php, virtualcards.php, airtime.php, giftcards.php, all_services.php, open_account.php, edit_pass.php, logout.php, login.php) must remain unchanged and must remain the navigation targets of their respective links.
• The receipt modal — the transaction receipt modal's structure, content, fields, actions, styling hooks, print behaviour, and data binding must not be altered by the redesign.
• The side navigation menu — the sidebar and mobile offcanvas menu (section groupings, item labels, icons, ordering, badges, and link targets) must not be changed; only the surrounding chrome may be restyled where it does not alter the menu itself.

The receipt modal and the sidebar's internal structure are rendered untouched inside the new grid; only their surrounding chrome (backdrop, panel container, close-button hit area) is restyled, and the modal's own markup, fields, actions, and print behaviour are left exactly as they are.

2. System Overview

The system is a server-rendered, session-authenticated retail and digital-asset banking dashboard. On load, the page:

1. Starts a session and redirects unauthenticated visitors to login.php when no acc_no session value exists.
2. Loads the signed-in account record through the existing user/data-access class and constants.php.
3. Runs an auto-refund routine that credits back any failed outgoing transfers that have not yet been refunded, marks them as refunded so they are not reprocessed, and re-reads the account row so displayed balances reflect the refund.
4. Resolves an account status value with session precedence, and derives a display label and status class (active / inactive / unknown).
5. Renders a fixed top navbar, a desktop sidebar, a mobile offcanvas menu, and a main content area containing a welcome banner, balance card, flip debit card, stat cards, an account actions bar, a multi-panel account summary card, a quick services grid, a recent transactions list with filter chips and per-transaction receipt modals, a share sheet, account insight cards, and a footer.
6. Supports a light/dark theme toggle, a live clock, copy-to-clipboard of the account number, transaction filtering, receipt PDF/Share actions, and a scroll-snap account slider on small screens.

The redesigned dashboard body is a vertical stack of ruled panels on a strict 12-column modular grid: welcome banner, then a 3-up KPI row (balance, income, outgoing), then a 2/1 split of recent transactions (left) and quick actions plus activity sparkline (right). Every panel has a header row with a left-aligned title and a right-aligned action or timestamp, separated by a 1px warm rule.

The redesign preserves the entire functional topology above and changes only the visual language, layout composition, theming tokens, component styling, motion, and responsive breakpoint behaviour.

3. Functional Requirements

3.1 Session, Account Context and Data Integrity

• FR-1. As an unauthenticated visitor, I want to be redirected to the login page when no account session exists, so that the dashboard is never rendered without an authenticated session.
• FR-2. As an authenticated account holder, I want the dashboard to load my account record from the existing data source, so that every panel shows my own data.
• FR-3. As an account holder, I want any failed outgoing transfer that has not yet been refunded to be automatically credited back to both my available and total balance when I load the dashboard, so that my balances are corrected without manual intervention.
• FR-4. As an account holder, I want refunded transactions to be marked as refunded so that the same transaction is never refunded twice on a subsequent page load.
• FR-5. As an account holder, I want the balances shown on the page to be re-read after a refund is applied, so that the displayed figures reflect the correction immediately.
• FR-6. As an account holder, I want the failed-transaction matching to use the same identifier semantics as the Recent Transactions query, so that refunds and transaction history stay consistent.
• FR-7. As an account holder, I want my account status to be resolved with session precedence and fall back to the stored record, so that the status shown after an OTP/session handoff is not lost.
• FR-8. As an account holder, I want my account status displayed as a human-readable label with a distinct active / inactive / unknown visual treatment, so that I can immediately judge the state of my account.
• FR-9. As a maintainer, I want all database queries, table names, column names, and persistence behaviour to remain unchanged by the redesign, so that the redesign introduces no data-layer risk.
• FR-10. As a maintainer, I want all existing page filenames and link targets to remain unchanged by the redesign, so that navigation and bookmarks continue to work.

3.1a Presentation-Layer Redesign Scope

• FR-10a. As an account holder, I want the dashboard's visual language rebuilt around a Dieter Rams–informed instrument-panel aesthetic — warm off-white ground, paper-white ruled panels, graphite chrome, and a single Braun-orange signal accent — so that the interface feels dependable, ordered, and quiet rather than like a marketing page.
• FR-10b. As an account holder, I want the dashboard body composed on a strict 12-column modular grid (24px gutters, 1200px max content width; 8 columns at 768px; single column at 375px) with a fixed 64px top navbar and a fixed 264px desktop sidebar, so that every panel aligns to a shared rhythm.
• FR-10c. As an account holder, I want every panel to carry a header row with a left-aligned title and a right-aligned action or timestamp separated by a 1px warm rule, so that the label/value discipline of a control panel is applied consistently to banking data.
• FR-10d. As an account holder, I want the redesign to be presentation-only — no new application layers, no client framework, no build step, and no new third-party services, analytics, or tracking — so that the existing server-rendered stack is preserved.

3.2 Top Navigation Bar

• FR-11. As an account holder, I want a fixed top navigation bar containing the brand logo, so that the service identity is always visible while I scroll.
• FR-12. As a mobile account holder, I want a hamburger control in the navbar that opens the side navigation offcanvas, so that I can reach navigation on small screens.
• FR-13. As an account holder, I want a theme switcher control in the navbar with an icon and a "Dark" label, so that I can toggle between light and dark presentation.
• FR-14. As an account holder, I want a notification bell control with a numeric unread badge, so that I can see that notifications are waiting.
• FR-15. As an account holder, I want a user profile dropdown showing my full name and account ID along with my avatar initials and an online indicator, so that I can confirm which account I am signed into.
• FR-16. As an account holder, I want the profile dropdown to contain My Profile, Settings, and Sign Out entries with their existing destinations, so that I can reach account actions from the navbar.

The navbar is restyled as a graphite band (#2A2A28) with a 1px lighter top edge (inset highlight) and a single low, tight elevation (0 1px 0 #E2DED6, 0 8px 24px rgba(28,27,25,0.06)). The theme switcher keeps its icon and "Dark" label but is restyled as a graphite pill with an orange active dot. The brand logo mark is rendered in graphite on light surfaces and in the light ink on the graphite navbar.

3.3 Side Navigation (Menu Content Locked)

• FR-17. As an account holder, I want a desktop sidebar with a logo block, a user identity strip (avatar initials, full name, account ID, "Online" indicator), section headers, and sectioned navigation items, so that navigation is organised and scannable.
• FR-18. As an account holder, I want the sidebar's existing section groupings and items preserved exactly — Overview (Dashboard), My Account (Personal Details, Update Details, Security Settings), Payments & Transfers (UK Bank Transfer, Internal Transfer (NBS), International Payments, Transaction History, Account Statements, Bill Payments), Cards & Products (Card Management, Cheque Deposit, Loans & Mortgages, Digital Assets), and Support (Help & Support) — so that the redesign does not disturb my navigation model.
• FR-19. As an account holder, I want the "New" badge on the Internal Transfer (NBS) item preserved, so that newly added functionality remains discoverable.
• FR-20. As an account holder, I want the "Secure online banking" reassurance note, the sidebar divider, and the destructive-styled Sign Out item preserved, so that security messaging and the sign-out affordance remain in place.
• FR-21. As an account holder, I want the active navigation item visually distinguished, so that I know which section I am in.
• FR-22. As a mobile account holder, I want an offcanvas version of the same navigation with a logo bar, a close control, the user identity strip, and the same section groupings and items, so that mobile navigation matches desktop navigation exactly.

The sidebar's internal structure — section headers, item labels, icons, ordering, badges, and link targets — is untouched. Only the surrounding chrome is restyled: section headers become uppercase 11px Archivo labels with 0.08em tracking separated by 1px warm rules, and the active item is marked by a 3px solid #E8590C left rail plus a graphite-tinted row background — a control-panel indicator, not a glow. The offcanvas chrome (backdrop, panel container, close-button hit area) is restyled to match; the offcanvas menu content is unchanged.

3.4 Welcome Banner and Identity Block

• FR-23. As an account holder, I want a welcome banner greeting me by name under a "Secure Client Access" label, so that the dashboard opens with a personalised context.
• FR-24. As an account holder, I want a date pill showing today's date and a live-updating clock pill, so that I always know the current date and time on the page.
• FR-25. As an account holder, I want an account status pill in the banner with an icon and my resolved status label, so that account standing is visible at the top of the page.
• FR-26. As an account holder, I want my primary account number displayed in a pill with a one-click copy control that confirms the copy action by swapping the icon, so that I can quickly reuse my account number.
• FR-27. As an account holder, I want a compact activity sparkline of bars in the banner, so that I get a light-weight visual sense of activity.

The banner is restyled as a full-width warm off-white panel with a 1px warm rule beneath it — not a centred SaaS hero, no gradient, no blob, no blue CTA. Left side: a small uppercase "SECURE CLIENT ACCESS" label in 11px Archivo with 0.08em tracking, then the greeting set in Archivo 700 at clamp(28px, 4vw, 44px) with the name in graphite, and the balance figure directly beneath it in tabular Fira Sans at the same display size preceded by a small currency glyph. Right side: a horizontal row of three pills — date, live clock (tabular numerals), and the account status pill with a filled dot and human-readable label in signal green/orange/red — followed by the primary account number in a pill with a copy button that swaps to a check on click. Below the pills, a compact 96px-tall sparkline of 28 thin signal-orange bars with a 1px baseline rule. At 375px the banner stacks: label, greeting, balance, then pills wrapped in two rows, then full-width sparkline; every element stays inside the viewport and nothing overlaps.

3.5 Balances, Cards and Stat Cards

• FR-28. As an account holder, I want a savings account balance card showing my total balance prominently and my available funds in a secondary strip, so that I can read both figures at a glance.
• FR-29. As an account holder, I want the balance card to display a pulsing "System Secure" indicator and my session IP address, so that I have visible security assurance.
• FR-30. As an account holder, I want a debit card visual that flips between front and back, so that I can view the card face and the reverse-side information.
• FR-31. As an account holder, I want the debit card front to show the card brand mark, network circles, the masked card number, my name in capitals, and the valid-thru date, so that the card reads as a real card.
• FR-32. As an account holder, I want the debit card back to show a magnetic stripe, a CVV strip, and the issuer ownership notice, so that the reverse side is presented realistically.
• FR-33. As an account holder, I want stat cards for Available Loan and Credit Rating, with the credit rating accompanied by a progress indicator and a scale denominator, so that secondary financial indicators are visible alongside my balance.
• FR-34. As a mobile account holder, I want the balance card and debit card presented as a swipeable scroll-snap slider with paging dots, so that both fit comfortably on a small screen.

The balance card, debit card, and stat cards are restyled as flat, ruled, warm panels with 8px radius and 1px #E2DED6 hairlines — no drop-shadowed floating cards. The balance card's deep-blue gradient is replaced by a graphite panel with the balance figure set in tabular Fira Sans at display size; the pulsing "System Secure" indicator uses the signal green #2F6B4F; the session IP line keeps its monospace treatment. The debit card front keeps its gold brand value (#B18638) as a fixed brand token and is restyled as a flat gold panel with a 1px lighter top edge; the back keeps its deep-navy brand value. The credit-rating progress indicator is drawn in signal orange #E8590C on the warm ground.

3.6 Account Actions Bar and Account Summary

• FR-35. As an account holder, I want a row of quick action tiles containing View Statements (PDF & CSV export), Authorised Users (manage payees), Leicester BS Mobile (app settings), and All Services (full menu), each with an icon and a sub-label, so that common tasks are one tap away.
• FR-36. As an account holder, I want a multi-panel account summary card containing a Digital Assets panel, a Total Transactions panel, an Open a Business Account panel, and an Account Manager panel, so that account-wide information is consolidated into a single surface.
• FR-37. As a digital-asset holder, I want the Digital Assets panel to show a persisted portfolio total, a wallet count, and per-coin rows with coin name, symbol, fiat value, coin amount, and a percentage change indicator styled as up, down, or neutral, so that I can read my crypto position at a glance.
• FR-38. As a digital-asset holder, I want the Digital Assets panel to be marked with a LIVE badge and a live dot, and to link to the existing crypto management page, so that I can move from summary to management.
• FR-39. As an account holder, I want the Total Transactions panel to show my transaction count and my last activity date (or a "No activity" fallback), with a link to my transaction history, so that I can judge recent account activity.
• FR-40. As a prospective business customer, I want an "Open a business account" panel labelled Business Banking with a NEW pill, supporting copy, and a "Get started" call to action linking to the existing account-opening page, so that I can begin a business account application.
• FR-41. As an account holder, I want an Account Manager panel showing my assigned manager's image or initials fallback and name (or "Not Assigned"), a role label, clickable email and telephone contact rows when those values exist, and a Secure Message action linking to support, so that I can contact my dedicated advisor.
• FR-42. As an account holder, I want the Account Manager avatar accompanied by an online indicator, so that the contact appears reachable.

The account actions bar and the multi-panel account summary card are restyled as flat, ruled, warm panels: the summary card's decorative radial glow orbs are removed in favour of 1px warm hairlines dividing the Digital Assets, Total Transactions, Business Banking, and Account Manager panels. The Digital Assets panel's violet tint is replaced by the warm surface #FBFAF7 with the LIVE badge and live dot drawn in signal orange; the Account Manager panel's blue gradient is replaced by a graphite header band with the avatar and contact rows on the warm surface. The Business Banking panel's NEW pill is drawn in signal orange.

3.7 Quick Banking Services

• FR-43. As an account holder, I want a "Quick Banking Services" section with a header, a supporting tagline, and a "10 Services" badge, so that the service catalogue is clearly introduced.
• FR-44. As an account holder, I want the service grid to contain exactly ten tiles — Pay Bills, Transfer, Invest, Security, Gift Cards, Support, Buy Crypto, Beneficiary, Virtual Cards, and Airtime — each with a distinct coloured icon and a label, so that the full service set remains available at a glance.
• FR-45. As an account holder, I want the Transfer tile to open a dropdown listing UK Bank Transfer, Internal Transfer (NBS) with a "New" badge, and International Payments, each linking to its existing destination, so that all transfer types are reachable from one tile.
• FR-46. As an account holder, I want each service tile to show a directional affordance (chevron or arrow) and to respond to hover and press states, so that tiles read as interactive.
• FR-47. As an account holder, I want each service tile to route to its existing page (bill payments, transfers, crypto/invest, security, gift cards, support, beneficiary, virtual cards, airtime), so that tile behaviour matches current navigation.

The service grid is restyled as a ruled grid of flat warm tiles with 8px radius and 1px #E2DED6 hairlines. Each tile keeps its distinct icon but the icon is drawn as a 16px stroke icon (1.5px stroke, rounded caps) in signal orange #E8590C on the warm ground rather than a multicolour gradient; the tile label is set in Archivo 600 sentence case, and the directional chevron is drawn in graphite. Hover and press states use a 1–2px upward translation with a 120–180ms ease-out transition and no bounce or spring.

3.8 Recent Transactions

• FR-48. As an account holder, I want a Recent Transactions card with a title marked LIVE and a "View all" control linking to full transaction history, so that I can inspect recent activity and escalate to the full list.
• FR-49. As an account holder, I want a summary strip above the list showing Total Money In, Total Money Out, and transaction count, so that I can see aggregate movement at a glance.
• FR-50. As an account holder, I want filter chips for All, Debit, Credit, Bills, and Crypto with a single active chip state, so that I can narrow the list by transaction category.
• FR-51. As an account holder, I want the transaction list to be scrollable and to show the six most recent transactions ordered newest first, so that the most relevant activity is immediately visible.
• FR-52. As an account holder, I want transactions grouped under date labels that read "Today", "Yesterday", or a formatted date, so that I can orient activity in time.
• FR-53. As an account holder, I want each transaction row to show a category-appropriate icon (outgoing, incoming, bill, or crypto), the counterparty name, the transaction type, and the date and time, so that I can identify each entry.
• FR-54. As an account holder, I want each transaction row to show a signed amount with outgoing and incoming distinguished by sign and colour, so that direction is unambiguous.
• FR-55. As an account holder, I want each transaction row to show a normalised status label — Successful, Failed, Refunded, or Pending — with a matching status indicator, so that the outcome of each transaction is clear.
• FR-56. As an account holder, I want an empty state with an icon, a "No recent transactions" title, and an explanatory subtitle when there is no activity, so that the empty list is understandable.
• FR-57. As an account holder, I want to open a receipt modal for any transaction row by selecting it, so that I can inspect a full confirmation for that transaction.

The transactions card is restyled as a flat warm panel with a 1px warm rule under its header row; the 4px gradient accent bar is replaced by a 1px warm hairline. Each transaction row is a two-column label/value pair with an 11px uppercase Archivo label on the left and a tabular Fira Sans value right-aligned on a shared baseline, separated by 1px warm hairlines. Money-in amounts use signal green #2F6B4F; money-out amounts use signal red #B4231F; the status label uses the same signal colours for Successful, Failed, Refunded, and Pending. Filter chips are restyled as flat warm pills with a 4px radius; the active chip is marked by a graphite fill with light ink, and chip transitions run at 0.15s.

3.9 Receipt Modal (Redesign-Excluded)

• FR-58. As an account holder, I want the receipt modal to be preserved exactly as it is, including its watermark, header with logo and status badge, reference number, amount box, sender/beneficiary/account number/destination bank/type/date-time information grid, processing timeline, QR verification token, Close/PDF/Share actions, and legal footer, so that the official confirmation output is not altered by the redesign.
• FR-59. As an account holder, I want the receipt modal's existing responsive and print behaviour preserved, so that the receipt remains legible on small screens and when printed.
• FR-60. As an account holder, I want each receipt to retain its reference value, derived fallback reference, verification QR code, and per-transaction data attributes used by the PDF and Share actions, so that receipt actions keep working unchanged.

The receipt modal's own markup, fields, actions, styling hooks, print behaviour, and data binding are untouched. Only the surrounding chrome — the backdrop, the panel container that hosts the modal, and the close-button hit area — is restyled to match the new visual language.

3.10 Share Sheet, Insights, Support and Notifications

• FR-61. As an account holder, I want selecting Share on a receipt to open a bottom share sheet with a backdrop, a handle, a titled header, a close control, and a row of share destination options, so that I can distribute my receipt confirmation.
• FR-62. As an account holder, I want a PDF action on the receipt that shows a generating/disabled state while it works, so that I get feedback during export.
• FR-63. As an account holder, I want a "Recently Cleared Tax" insight card listing HM Revenue & Customs, Financial Conduct Authority, and Payment Systems Regulator, with a "Pay All Bills" action linking to bill payments, so that regulatory payment context is visible.
• FR-64. As an account holder, I want a Support insight card marked LIVE with a "Need Help?" prompt, a priority support desk message, and a "Start Chat" action linking to support, so that I can escalate to assistance.
• FR-65. As an account holder, I want a "Recent Updates" notification card showing my last transaction notification (with amount and a relative time label) plus fixed rate and branch news notices, so that account and product updates surface on the dashboard.
• FR-66. As an account holder, I want a dashboard footer with the service's informational text, so that the page closes with an institutional band.

The share sheet is restyled as a flat warm panel with a 1px warm rule under its titled header; the backdrop is a plain warm-grey scrim rather than a blurred glass effect. The insight cards and the Recent Updates card are restyled as flat, ruled, warm panels with 1px #E2DED6 hairlines; the LIVE badges and live dots are drawn in signal orange. The footer band is restyled as a graphite band with light ink, replacing the blue #165788 band.

3.11 Theming, Motion and Responsive Behaviour

• FR-67. As an account holder, I want a dark theme that re-tokenises page background, surfaces, borders, text, tables, forms, dropdowns, modals, sidebar, offcanvas, welcome banner, and status badges, so that the entire dashboard is consistently dark rather than partially inverted.
• FR-68. As an account holder, I want my theme choice to switch through a single toggle control that updates its icon and label, so that switching is a one-tap action.
• FR-69. As a mobile account holder, I want breakpoint-specific layout adaptations at tablet, small-tablet, phone, and very-small-phone widths — ranging from sidebar collapse and offcanvas navigation to condensed cards, compact typography, and re-gridded service tiles, so that the dashboard stays usable at every width.
• FR-70. As an account holder, I want hover, press, flip, fade, slide-up, pulse, and scale motion applied to cards, tiles, rows, chips, and sheets, so that the interface feels responsive and current.
• FR-71. As an account holder, I want animations and decorative effects that do not obstruct reading, clicking, or printing, so that enhancement never degrades usability.
• FR-72. As an account holder printing a receipt, I want non-essential interface elements marked as no-print, so that only the receipt content prints.

The motion tempo is restrained and mechanical: 120–180ms ease-out on hover, focus, and state changes; no bounce, no spring, no particle effects. The clock's seconds digit ticks with a 1-frame opacity swap. The copy button confirms by swapping its icon with a 140ms cross-fade. The account status pill changes colour instantly on state change with a 120ms background transition. The sparkline bars animate their height once on mount over 400ms with a stagger of 20ms per bar, then stay still. Scroll-reveal is limited to a single 200ms fade-up on the first panel row. With prefers-reduced-motion all of the above resolve to instant state changes.

4. User Personas

• Retail Account Holder — the signed-in owner of a savings/current account with an associated debit card, transaction history, assigned account manager, and optionally a digital-asset portfolio. Primary actor for the dashboard, its balances, transaction list, receipts, quick services, and support surfaces. Uses both desktop (sidebar) and mobile (offcanvas, swipe slider) form factors with identical capabilities.
• Prospective Business Customer — a signed-in user who engages the "Open a business account" panel to start a business banking application. Distinct action path: enter the business banking panel from the account summary card and proceed to the account-opening destination.
• Account Manager (external contact) — the assigned advisor presented in the summary card with photo/initials, role, email, and telephone. Appears as a contact surface rather than an authenticated actor within the dashboard.
• Integration System Actor (QR code service) — an external service used to render the receipt verification token image inside the receipt modal.

The redesign does not add, remove, or re-scope personas. The Retail Account Holder, Prospective Business Customer, Account Manager (external contact), and Integration System Actor (QR code service) remain the complete persona set, and every persona's capabilities and destinations are unchanged by the presentation-layer redesign.

5. Core User Flows

Flow A — Retail Account Holder: Load, Review, Drill Down

1. User reaches the dashboard while authenticated; the page redirects to login if no session exists.
2. The system loads the account record and applies the auto-refund routine for any unrefunded failed transfers, then re-reads balances.
3. The welcome banner shows the user's name, date, live clock, account status, and copyable account number.
4. The user reads the savings balance and available funds, then flips the debit card to view the reverse side.
5. The user scans the Available Loan and Credit Rating stat cards.
6. The user selects a quick action (View Statements, Authorised Users, Mobile settings, or All Services) or a quick service tile (with the Transfer tile expanding to UK Bank Transfer, Internal Transfer, or International Payments).
7. The user reviews the Recent Transactions card: reads total in/out, applies a filter chip, and scans date-grouped rows.
8. The user selects a transaction row to open the receipt modal, then closes it, downloads a PDF, or opens the share sheet and picks a destination.
9. The user optionally reviews the account summary panels (Digital Assets, Total Transactions, Business Banking, Account Manager) and the insight/notification cards, then signs out from the sidebar, offcanvas, or profile dropdown.

Flow B — Mobile Account Holder: Navigation and Slider

1. User opens the dashboard on a phone; the fixed navbar condenses to the compact height with the hamburger, theme toggle, bell, and avatar.
2. The user taps the hamburger to open the offcanvas navigation with the logo bar, identity strip, the same section groupings, and the close control.
3. The user selects a destination or dismisses the offcanvas to remain on the dashboard.
4. In the balance section, the user swipes horizontally between the balance card and the debit card, using the paging dots to track position.
5. The user scrolls the transaction card, taps a filter chip, and opens a receipt, which renders in its compact scrollable form.

Flow C — Prospective Business Customer: Open a Business Account

1. The user reaches the account summary card and selects the Business Banking panel marked NEW.
2. The user reads the panel's supporting copy and selects "Get started".
3. The user is routed to the existing business account opening page (URL unchanged).

Flow D — Theming

1. The user selects the theme toggle in the navbar.
2. The interface switches between light and dark token sets; surface, text, border, table, form, modal, sidebar, offcanvas, banner, and status badge treatments all update.
3. The toggle's icon and label reflect the active theme.

The flows above are unchanged in their steps, destinations, and outcomes. The redesign changes only the visual presentation of each step — the surfaces, typography, grid, and motion through which the same steps are performed.

6. Visuals, Colors and Theme

The source material defines an explicit brand token system that the redesign must retain:

Light mode brand tokens

• Primary: #005488; Primary dark: #002659; Primary mid: #004e92
• Accent: #70942d; Gold: #B18638
• Page background: #f4f6f9; Surfaces: #ffffff, #f8fafc, #f1f5f9
• Text: primary #1e293b, muted #64748b, faint #94a3b8
• Borders: #e5e9f0
• Card radius: 14px; navbar height: 64px; sidebar width: 288px
• Shadows: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12)

Dark mode tokens ([data-theme="dark"])

• Background #0f1117; Surfaces #1a1d27, #21263a, #2a2f45
• Text primary #e2e8f0, muted #94a3b8, faint #64748b
• Border #2d3450; deeper shadows for elevation
• Sidebar/offcanvas gradient #092c4c → #06375c; active nav item inverted to white with #06375c text
• Link accent #60a5fa; active-field focus ring rgba(96,165,250,0.15)
• Status badge variants: active green (rgba(34,197,94,0.16) / #86efac), inactive red (rgba(239,68,68,0.16) / #fca5a5), unknown slate

Typography and identity

• Font: Inter (weights 400/500/600/700/800), with system UI fallback stack
• Monospace treatment for account numbers, card numbers, dates on the card, and the balance-card IP line

Semantic colour usage

• Money in / success: green (#16a34a); money out / failure: red (#e11d48–#dc2626); bill: blue (#2563eb); crypto/digital assets: violet (#7c3aed); warning/pending: amber (#d97706); informational/refunded: sky (#0284c7)
• Service tile icon gradients span blue, green, amber, red, cyan, slate, violet, teal, dark, and pink families, one per service

Surfaces with distinctive treatment

• Balance card: linear-gradient(135deg, #004e92 → #000428)
• Debit card front: gold linear-gradient(135deg, #B18638 → #8A6420); back: linear-gradient(135deg, #002659 → #00122e)
• Welcome banner: linear-gradient(135deg, #e8edf3 → #d8e2ec)
• Account summary card: light surface #F4F6F9 with decorative radial glow orbs
• Digital-assets panel: violet-tinted linear-gradient(150deg, #faf8ff → #f0ebff)
• Account-manager top panel: linear-gradient(150deg, #002659 → #005488 → #0369a1)
• Transactions card: white with a 4px gradient accent bar (#005488 → #008000 → #70942d)
• Footer band: #165788

The palette is authoritative and must be carried into the redesign rather than replaced.

6.1 Redesign Visual Language (Dieter Rams–Informed)

The redesign adopts a Dieter Rams–informed visual language — honest controls, signal colour, and nothing decorative that is not also useful — applied to the chrome, surfaces, typography, grid, and motion surrounding the preserved regions. The brand tokens above remain authoritative for the preserved regions (the receipt modal and the side navigation menu) and for the fixed brand values (the brand colour tokens, the accent colour, and the gold used for the debit card). The redesign's own visual language is defined below.

Palette (light mode)

• Background: #F2F0EB (warm off-white ground)
• Surface: #FBFAF7 (paper-white panels)
• Text: #1C1B19 (near-black ink)
• Primary: #2A2A28 (graphite — top navbar, primary buttons, active sidebar rail)
• Accent: #E8590C (Braun orange — the single saturated signal)
• Muted: #6E6A63
• Secondary signal green: #2F6B4F (permitted only for "active" account state and positive balance deltas)
• Signal red: #B4231F (permitted only for destructive Sign Out and negative deltas)
• Proportions: ~70% warm ground, ~20% surface, ~7% graphite, ~3% signal orange
• Never use blue or indigo anywhere in the redesign's own chrome, surfaces, or accents.

Signal-orange usage (reserved)

• The active nav indicator (3px left rail on the sidebar's active item)
• The account status pill when active
• The copy-success icon swap
• The primary CTA on the dashboard
• The live clock's seconds tick
• The sparkline bars

Typography

• Headings: Archivo in 600/700 weight, tight tracking (-0.01em to -0.02em), sentence case for section headers and uppercase small-caps for labels (letter-spacing 0.08em, 11–12px).
• Body: Fira Sans.
• Numerals: tabular, set in Fira Sans with 'tnum' enabled so balances, account numbers, and clock digits align in columns.
• Scale: 1.250 modular, mobile → desktop via clamp(): display 28→44px (greeting/balance), h2 22→28px, h3 18→22px, body 15→16px, label 11→12px uppercase, micro 11px.
• Line-height: 1.15 for display, 1.5 for body, 1.3 for labels.

Shape language

• Honest rounded rectangles: 8px radius on cards and panels, 6px on buttons and inputs, 4px on pills and badges, 2px on the sparkline bars.
• Borders are 1px solid #E2DED6 (warm hairline) — never drop-shadowed floating cards.
• The only shadow is a single low, tight elevation on the top navbar and the open profile dropdown: 0 1px 0 #E2DED6, 0 8px 24px rgba(28,27,25,0.06).
• No blobs, no glass, no gradient fills.
• The sidebar's active item is marked by a 3px solid #E8590C left rail plus a graphite-tinted row background — a control-panel indicator, not a glow.

Layout

• A strict 12-column modular grid on a 1280px canvas with 24px gutters and a max content width of 1200px; 8-column at 768px; single column at 375px.
• Fixed 64px top navbar (logo left, theme switcher + bell + profile right).
• Desktop sidebar is a fixed 264px column, scrollable independently, with section headers as uppercase 11px labels separated by 1px warm rules.
• The dashboard body is a vertical stack of ruled panels: welcome banner, then a 3-up KPI row (balance, income, outgoing), then a 2/1 split of recent transactions (left) and quick actions + activity sparkline (right).
• Every panel has a header row with a left-aligned title and a right-aligned action or timestamp, separated by a 1px rule.
• The receipt modal and the sidebar's internal structure are rendered untouched inside this grid; only their surrounding chrome (backdrop, panel container, close-button hit area) is restyled.

Motion

• Restrained and mechanical: 120–180ms ease-out on hover, focus, and state changes; no bounce, no spring, no particle effects.
• The clock's seconds digit ticks with a 1-frame opacity swap.
• The copy button confirms by swapping its icon with a 140ms cross-fade.
• The account status pill changes colour instantly on state change with a 120ms background transition.
• The sparkline bars animate their height once on mount over 400ms with a stagger of 20ms per bar, then stay still.
• Scroll-reveal is limited to a single 200ms fade-up on the first panel row.
• With prefers-reduced-motion all of the above resolve to instant state changes.

Imagery

• No photography, no illustration, no 3D.
• Visual interest comes from data itself: tabular numerals, ruled rows, the activity sparkline of thin bars, small 16px stroke icons (1.5px stroke, rounded caps) for nav, status, and actions, and the bank's existing logo mark rendered in graphite.
• Diagrams and sparklines are drawn in signal orange on the warm ground.
• The receipt modal keeps whatever imagery it already has.

Hero direction

• The dashboard opens on a full-width warm off-white banner panel with a 1px warm rule under it, not a centred SaaS hero.
• Left side: a small uppercase "SECURE CLIENT ACCESS" label in 11px Archivo with 0.08em tracking, then the greeting set in Archivo 700 at clamp(28px, 4vw, 44px) — "Good afternoon, [First Name]" — with the name in graphite and the balance figure directly beneath it in tabular Fira Sans at the same display size, preceded by a small currency glyph.
• Right side: a horizontal row of three pills — date, live clock (tabular numerals), and the account status pill with a filled dot and human-readable label in signal green/orange/red — followed by the primary account number in a pill with a copy button that swaps to a check on click.
• Below the pills, a compact 96px-tall sparkline of 28 thin signal-orange bars with a 1px baseline rule.
• The whole banner is bounded by the grid, uses no gradient, no blob, and no blue button, and reads as an instrument panel header rather than a marketing hero.
• At 375px the banner stacks: label, greeting, balance, then pills wrapped in two rows, then full-width sparkline; every element stays inside the viewport and nothing overlaps.

Signature moves

• A ruled instrument-panel header: the dashboard's first panel is a warm off-white banner with a 1px warm rule, a left-aligned "SECURE CLIENT ACCESS" label, an oversized Archivo greeting at clamp(28px, 4vw, 44px), and a right-aligned row of three control pills (date, live clock, account status) plus the account-number copy pill — no centred headline, no gradient, no blue CTA.
• Signal-orange as the only accent: active sidebar rail, active nav dot, copy-success icon, primary CTA, and sparkline bars all use #E8590C against warm grey; the account status pill uses green/orange/red as a state signal, so colour always means something.
• Label/value rows everywhere: every KPI, transaction row, and detail line is a two-column pair with an 11px uppercase Archivo label on the left and a tabular Fira Sans value right-aligned on a shared baseline, separated by 1px warm hairlines.
• A 28-bar activity sparkline drawn as thin 2px-radius signal-orange bars on a 1px baseline, animating height once on mount with a 20ms stagger, then holding still — data as the only decorative element.
• A graphite top navbar and graphite primary buttons with a 1px lighter top edge (inset highlight) and a 6px radius, so controls read as physical switches rather than flat rectangles; the theme switcher keeps its icon and "Dark" label but is restyled as a graphite pill with an orange active dot.

Avoid

• Any blue or indigo in the primary/accent band (#0057FF, #2563EB, #4F46E5, #6366F1, #7C3AED) — the palette is warm grey with Braun orange only.
• Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body — use Archivo and Fira Sans.
• Gradient-blob heroes, glassmorphism, frosted panels, and soft multicolour gradients.
• A grid of identical hover-lift cards with drop shadows; panels are flat, ruled, and warm.
• Touching the receipt modal's structure, fields, actions, styling hooks, print behaviour, or data binding.
• Changing the side navigation's section groupings, item labels, icons, ordering, badges, or link targets.
• Changing any page filename, route, or database query.
• Bouncy, springy, or particle-based motion; the tempo is restrained and mechanical.

Readable text and needed content stay whole at every viewport

• Headlines, wordmarks, labels, numbers, item images, cards, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them.
• Crops, bleeds, and off-edge placement are for decoration only: shapes, textures, rules, and background art.
• The one exception is moving content: moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design; judge it by whether it actually moves or scrolls and whether every item becomes fully readable as it passes, never by the item cut at the edge in a still frame.
• With prefers-reduced-motion it stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.
• Where a direction, requirement, brief, or finding asks to crop, clip, or run readable text or needed content off an edge, keep it whole and carry the gesture with decoration instead; this rule takes precedence.

Forbidden template

• The generic indigo/blue-on-white SaaS template is forbidden for this project.

7. Signature Design Concept

"Secure Premium Banking Surface" — a layered, card-based dashboard that reads as an institutional banking product rather than a generic admin template.

Defining characteristics:

1. Nested card hierarchy. Large rounded surfaces (14–20px radius) hold sub-panels divided by hairline rules, so the account summary, transactions, and services areas each read as a single composed instrument rather than a stack of detached boxes.
2. Identity continuity. The user's initials, full name, and account ID appear consistently in the navbar dropdown, the sidebar identity strip, the offcanvas identity strip, and the avatar treatments — reinforcing "this is my money" throughout.
3. Two hero instruments. The balance card (deep blue gradient with a pulsing security dot and session IP) and the flip debit card sit side by side on desktop and become a swipeable slider on mobile, making them the visual anchor of the page.
4. Live-state signalling. Small "LIVE" pills, pulsing dots, and status badges communicate that data is current, applied consistently to the transactions card, digital-assets panel, and support card.
5. Restrained institutional chrome. A white fixed navbar, a tinted sidebar with soft-shadow separation, and a solid footer band frame the content in a way that feels like an established building society.
6. Complete dual-theme parity. Dark mode is a full re-tokenisation of every surface — not an inverted filter — so the redesign holds up in either presentation.

The redesign reinterprets this concept through the Dieter Rams–informed visual language in §6.1: the nested card hierarchy becomes a stack of flat, ruled, warm panels; identity continuity is preserved across the navbar dropdown, sidebar identity strip, offcanvas identity strip, and avatar treatments; the two hero instruments (balance card and flip debit card) become flat graphite and gold panels rather than gradient surfaces; live-state signalling is drawn in signal orange; the institutional chrome becomes a graphite navbar, a warm sidebar, and a graphite footer band; and dual-theme parity is preserved as a full re-tokenisation of every surface.

8. Interaction Model & Motion Direction

Interaction model

• Fixed navbar with scroll-independent controls; desktop sidebar fixed at 288px; mobile navigation via offcanvas triggered from the navbar hamburger.
• Card-based content with click-through navigation on tiles, rows, pills, and panels; the transfer tile opens a positioned dropdown menu rather than navigating directly.
• Transaction filtering via a single-select chip group that toggles row visibility by category.
• Row-level drill-down into a receipt modal per transaction; the modal owns its own Close/PDF/Share action set.
• Bottom share sheet for distributing receipts, dismissed via a backdrop tap or the close control.
• Horizontal scroll-snap slider with synced paging dots for the balance and card instruments on mobile.
• Single-control theme toggle affecting the whole document via a theme attribute on the root element.

Motion direction

• Debit card flip: 0.75s cubic-bezier(0.4, 0, 0.2, 1) on hover/tap, with preserved 3D perspective on both faces.
• Tile and button hover: small upward translation (1–2px), icon scale (~1.08–1.10), background-gradient fade-in, chevron nudge.
• Service icon hover: spring-like lift using cubic-bezier(.34,1.56,.64,1).
• Transaction rows: coloured left accent stripe expanding on hover, tinted background gradient sweep, subtle row separator inset.
• Filter chips: 0.15s transitions across background, colour, border, and shadow for the active state.
• Transfer dropdown: 0.18s fade-and-rise entry animation anchored above the tile on desktop and below it on mobile.
• Share sheet: 0.25s slide-up with an animated drag handle and blurred backdrop.
• Status pulses: green secure dot (pulse-green), accent live dots (asc-live), services badge pulse (qbs-pulse), crypto live dot (cwp-pulse).
• Theme toggle: 0.15s background, colour, and border transitions on the control.
• All motion is decorative and non-blocking; reduced-motion users must still be able to operate every control.

The interaction model above is unchanged in its topology — fixed navbar, 264px desktop sidebar, offcanvas mobile navigation, click-through tiles/rows/pills/panels, transfer tile dropdown, single-select transaction filter chips, row-level receipt modal drill-down, bottom share sheet, horizontal scroll-snap slider with synced paging dots, and a single-control theme toggle on the root element. The redesign changes only the visual presentation of these interactions and the motion tempo: the motion direction above is superseded by the restrained, mechanical tempo defined in §6.1 (120–180ms ease-out, no bounce, no spring, no particle effects), with the debit card flip, tile hover, transaction row accent, filter chip, transfer dropdown, share sheet, status pulses, and theme toggle all restyled to that tempo.

9. Non-Functional Requirements

• NFR-1 — Data-layer immutability. No database schema, table, column, or query change is permitted. Existing data-access calls and their parameter bindings must be reused as-is.
• NFR-2 — URL stability. Every page filename and navigation target in the current implementation must remain identical; the redesign must not introduce, rename, or remove routes.
• NFR-3 — Receipt integrity. The receipt modal's markup structure, field set, data attributes, QR token, PDF and Share handlers, print styles, and legal footer must remain unchanged.
• NFR-4 — Menu integrity. The side navigation and offcanvas navigation must keep the same section headers, item labels, icons, ordering, badges, and link targets.
• NFR-5 — Responsiveness. The interface must adapt across desktop (≥992px), tablet (≤991.98px), phone (≤767.98px), small phone (≤575.98px), and very small phone (≤400px) breakpoints, with no horizontal overflow and no clipped content.
• NFR-6 — Theme parity. Every surface, control, table, form element, dropdown, modal, and navigation region must have a deliberate dark-mode treatment; no light-only remnants may remain visible in dark mode.
• NFR-7 — Accessibility. Interactive controls must expose appropriate accessible names (aria-label), the current navigation item must be marked (aria-current="page"), and decorative elements must not be exposed to assistive technology.
• NFR-8 — Rendering performance. Fonts must be loaded non-blockingly (preconnect plus asynchronous stylesheet activation), CDN assets must be served with explicit integrity/version pinning where already present, and animation must rely on compositor-friendly properties (transform, opacity) rather than layout-triggering properties.
• NFR-9 — Visual consistency. Spacing, radii, shadow levels, typography scale, and semantic colour usage must be drawn from the shared token set rather than ad-hoc values.
• NFR-10 — Print behaviour. Print output must isolate the receipt and suppress navigation, action bars, and other non-essential chrome.
• NFR-11 — Compatibility. The redesign must render correctly in modern evergreen browsers including current Chrome, Edge, Firefox, and Safari, and on iOS/Android mobile browsers.
• NFR-12 — Data transparency for placeholders. Any figure not sourced from persisted account data must not be presented as if it were. Where the current implementation shows static values, they must remain clearly the same static values — the redesign must not fabricate additional computed metrics.
• NFR-13 — Information density on mobile. Mobile layouts must prioritise the balance, card, and transaction list, collapsing secondary panels into compact stacked or horizontally scrollable forms without losing any function.

NFR-14 — Redesign visual language. The redesign's own chrome, surfaces, typography, grid, and motion must follow the Dieter Rams–informed visual language in §6.1: warm off-white ground, paper-white ruled panels, graphite chrome, a single Braun-orange signal accent, Archivo headings, Fira Sans body with tabular numerals, 8px/6px/4px/2px radii, 1px warm hairlines, and a restrained mechanical motion tempo. No blue or indigo may appear in the redesign's own chrome, surfaces, or accents, and the generic indigo/blue-on-white SaaS template is forbidden.

NFR-15 — Preserved-region integrity. The receipt modal and the side navigation menu (sidebar and offcanvas) must remain structurally and behaviourally untouched by the redesign; only their surrounding chrome (backdrop, panel container, close-button hit area) may be restyled, and the modal's own markup, fields, actions, styling hooks, print behaviour, and data binding must remain exactly as they are.

10. Tech Stack

The redesign introduces no new application layers. It restyles the existing server-rendered dashboard within its existing stack:

• Server runtime: PHP (procedural page script with a session bootstrap and a shared constants.php include).
• Data access: The existing user/data-access class executing PDO prepared statements against the existing accounts, transfer, and user-crypto-portfolio queries — unchanged.
• Session/auth: Existing PHP session-based access check with redirect to the existing login page. No new identity mechanism is introduced.
• Markup: Semantic HTML5 (nav, aside, main, section) in a single server-rendered document.
• Styling: Hand-authored CSS using custom properties (design tokens) with a document-level theme attribute for dark mode; no CSS framework beyond the existing utility layer.
• UI foundation: Bootstrap 5.3.3 (CSS from CDN) for grid, dropdowns, modals, and offcanvas behaviour; Bootstrap Icons 1.11.3 for iconography.
• Typography: Inter via Google Fonts, loaded non-blockingly, with system-UI fallback.
• Client behaviour: Vanilla JavaScript for theme toggling, live clock, account-number copy, transaction filtering, transfer dropdown toggle, PDF generation state, and receipt share sheet. No client framework or build step is added.
• External service: QR code image endpoint for the receipt verification token (inside the unchanged receipt modal).

The redesign's own visual language is implemented within this stack: hand-authored CSS custom properties for the warm-grey palette, Archivo and Fira Sans loaded non-blockingly via Google Fonts with system-UI fallback, and vanilla JavaScript for the restrained mechanical motion (clock tick, copy-icon cross-fade, status-pill transition, sparkline mount animation, scroll-reveal fade-up) with prefers-reduced-motion resolving all motion to instant state changes. No new application layers, client frameworks, build steps, third-party services, analytics, or tracking are introduced.

11. Assumptions and Constraints

• C-1. The scope is a presentation-layer redesign. Backend logic, data access, and route structure are frozen.
• C-2. The receipt modal, side navigation menu, page URLs, and database are explicitly excluded from the redesign and must be preserved byte-for-byte in behaviour.
• C-3. The dashboard remains a single authenticated page that renders all panels; the redesign does not split it into multiple routes or introduce client-side routing.
• C-4. Existing session variables, account-status resolution logic, and the failed-transfer auto-refund routine remain functionally intact; the redesign only styles their outputs.
• C-5. Data shown in the dashboard continues to come from the existing account, transfer, and crypto-portfolio queries; no new queries are required to support the redesign.
• C-6. Certain figures on the page (for example the loan figure, credit rating, card number mask, card expiry, CVV, and informational notices) are presentation values rather than new data requirements; the redesign must not convert them into data-layer requirements.
• C-7. The brand colour tokens, accent colour, and gold used for the debit card are fixed brand values and are not open to re-theming.
• C-8. Bootstrap 5.3.3 and Bootstrap Icons 1.11.3 are retained as the UI foundation; the redesign works within them rather than replacing them.
• C-9. The dark theme is a first-class presentation mode, not an optional extra; both themes must be complete and tested.
• C-10. Mobile must be treated as a primary form factor given the sidebar-to-offcanvas navigation switch and the mobile-only swipe slider.
• C-11. No new third-party services, analytics, or tracking may be introduced by the redesign.
• C-12. The redesign must not degrade existing accessibility affordances — accessible names, current-page marking, and keyboard-operable controls.

C-13. The redesign's own visual language is the Dieter Rams–informed system in §6.1; the brand colour tokens, accent colour, and gold used for the debit card remain fixed brand values for the preserved regions and are not open to re-theming.

C-14. The receipt modal and the side navigation menu are rendered untouched inside the new grid; only their surrounding chrome is restyled, and the modal's own markup, fields, actions, styling hooks, print behaviour, and data binding are left exactly as they are.

12. Glossary

• Dashboard — the authenticated landing page (dashboard.php) that aggregates balances, cards, services, transactions, and account information.
• Account Number (acc_no) — the identifier for the signed-in account; used for session lookup and displayed in the identity strip and navbar dropdown.
• Available Funds (a_bal) — the immediately usable balance shown on the balance card.
• Total Balance (t_bal) — the overall balance shown prominently on the balance card.
• Auto-Refund — the page-load routine that credits back unrefunded failed outgoing transfers and marks them refunded.
• Account Status — the resolved state of the account (active/enabled/verified/approved, inactive/disabled/suspended/blocked/closed, or unknown) shown as a labelled badge.
• Receipt Modal — the per-transaction official confirmation dialog containing amount, parties, reference, timeline, verification QR, and Close/PDF/Share actions; excluded from redesign.
• Share Sheet — the bottom overlay presented when sharing a receipt, containing share destinations.
• Quick Banking Services — the ten-tile service grid providing fast access to common banking functions.
• Transfer Dropdown — the popover expanding from the Transfer tile to expose UK Bank Transfer, Internal Transfer (NBS), and International Payments.
• Digital Assets / Crypto Wallets — the user's persisted crypto holdings (e.g. Bitcoin, Tether) shown with fiat value, coin amount, and change indicator.
• Account Manager — the assigned advisor displayed with photo/initials, contact details, and a Secure Message action.
• Business Banking Panel — the "Open a business account" call to action in the account summary card.
• Insight Card — a compact informational card in the dashboard insights row (for example Recently Cleared Tax or Support).
• Filter Chip — a single-select control that narrows the transaction list to All, Debit, Credit, Bills, or Crypto.
• Status Label — the normalised transaction outcome shown per row: Successful, Failed, Refunded, or Pending.
• Design Tokens — the custom-property set (--primary, --surface, --border, etc.) that drives both light and dark presentations.
• Offcanvas — the mobile slide-in navigation panel replicating the desktop sidebar.
• Account Slider — the mobile scroll-snap carousel holding the balance card and debit card with paging dots.
• Redesign Visual Language — the Dieter Rams–informed system in §6.1 (warm off-white ground, paper-white ruled panels, graphite chrome, Braun-orange signal accent, Archivo/Fira Sans typography, 8px/6px/4px/2px radii, 1px warm hairlines, restrained mechanical motion) applied to the chrome, surfaces, typography, grid, and motion surrounding the preserved regions.
• Preserved Regions — the receipt modal and the side navigation menu (sidebar and offcanvas), which are rendered untouched inside the new grid; only their surrounding chrome is restyled.