# Fintech home > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The home screen of "Fjord Bank", a consumer banking app in an iOS 26-style language. A near-black balance card sits on a cool light grey page; the amount is set large in tabular numerals with the currency and decimals de-emphasised. An eye button hides the balance by blurring it (12px) rather than swapping to asterisks, so the card keeps its shape and the number re-focuses when shown again. Below: four circular quick actions (the first filled with the accent), then transactions grouped by day in inset white groups with two-letter merchant initials as coloured avatars and a per-day net total. The top bar is translucent glass that content scrolls under. ## Reference behaviour 1. Initial state: top bar shows "Fjord Bank / Personal · EUR" and a 36px avatar with initials "SH". Balance card shows "€12,480.55", the masked account number, and a green "+€1,240.00 this month" chip. Balance is visible. 2. Scroll: the page scrolls under the fixed glass top bar (20px blur, 160% saturation, 72% page-colour fill, 1px hairline bottom border). The top bar does not resize. 3. Tap the eye: the amount and account number blur (`filter: blur(12px)` / `blur(6px)`) and the amount drops to 70% opacity over 320ms `cubic-bezier(.2,.7,.2,1)`. The icon swaps to a crossed eye; `aria-pressed` becomes true and the label becomes "Show balance". The card height does not change. 4. Tap again: blur returns to 0 and opacity to 1 over 320ms. 5. Press a quick action: its circle scales to 0.9 over 160ms and returns on release. Send is filled with `--accent` and white; the other three are white with a hairline border. 6. Press a transaction row: its background flashes to `--bg` while pressed. Rows are buttons (they would open a detail screen). 7. The "Nord Post" row is pending: avatar at 55% opacity, amount in `--ink-3` at weight 500, subtitle "Pending · Card 4901". 8. Incoming amounts (salary) are green `--positive` with a leading "+"; outgoing are `--ink` with a leading "−" (U+2212, not a hyphen). ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54 status) glass top bar, 102 tall │ │ Fjord Bank (SH) │ │ Personal · EUR │ │────────────────────────────────────────│ hairline │ 118 ┌──────────────────────────────┐ │ │ │ Everyday account 👁 │ │ balance card, r22, dark │ │ € 12,480.55 (40px tabular) │ │ │ │ NO71 3000 1284 4901 · Everyday│ │ │ │ [↑ +€1,240.00 this month] │ │ │ └──────────────────────────────┘ │ │ (○) (○) (○) (○) │ quick actions 56px │ Send Request Top up Cards │ │ Activity Statements │ │ TODAY −€63.30 │ │ ┌──────────────────────────────────┐ │ │ │ [NP] Nord Post Pending −€8.90│ │ rows 64px │ │ [BB] Brød & Bønner 08:12 −€6.40│ │ │ │ [LM] Loam Market 07:48 −€48.00│ │ │ └──────────────────────────────────┘ │ │ YESTERDAY, 28 SEP +€2,176.20 │ │ ┌──────────────────────────────────┐ │ │ │ [TS] Tessel Studio +€2,300.00│ │ │ │ ... │ │ └────────────────────────────────────────┘ ``` - `
`: fixed, `height:102px; padding:54px 20px 0`, flex row; `

` 17/600 with a 12px sub-line; `