# Portfolio dashboard > **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 a brokerage account at an invented fund house, Halyard. One glance answers three questions in order: what is it worth ($412,806.37 set in a 64px Spectral serif), how did it get here (a value chart with range tabs you can scrub point by point), and is it still shaped the way I asked (an allocation ring and a deep-pine rebalance card that names the exact dollar move). Below sits a holdings table with weight bars. The mood is a private bank statement, not a trading terminal: sage-grey ground, one pine accent, no red unless something actually fell. The detail worth copying is the rebalance card's split bar, which previews the after-trade mix in place when you press "Preview the trade". ## Reference behaviour 1. Initial state: range tab **1Y** is selected; the chart draws its line left to right over 700ms; the scrub cursor already sits on Jul 19, 2026 and the readout reads `Jul 19, 2026 · $403,033.16 +7.65%`, so the first frame shows the scrub feature. 2. Under the total, a pale pine chip reads `+$2,148.90 today` with an up triangle, then `+0.52% since Tuesday close`, then the range delta `+$38,412.78 (10.26%) over the past year` with the figure in `--up` 600. 3. Moving the pointer across the chart snaps a 1px vertical rule and a 10px ringed dot to the nearest data point; the readout (right of the tabs) updates to ` · `. Leaving the chart hides the cursor (160ms fade) and the readout returns to `Hover or use the arrow keys to read a point`. 4. Clicking a range tab (1D, 1W, 1M, 3M, YTD, 1Y, ALL) regenerates the series, redraws the line with the 700ms draw, updates the five x-axis labels and the range-delta sentence ("over today", "over the past week", "this year", "all time, since Mar 2019"). All series end at the current total. 5. A dashed baseline is drawn at the range's starting value so up/down for the range reads at a glance. 6. Hovering or focusing an allocation legend row dims every other ring segment to 28% opacity and thickens the matching segment from 16px to 20px stroke. 7. "Preview the trade" toggles `aria-pressed`. On: the split bar animates (320ms) from 59.8 / 25.2 / 15.0 to 55 / 30 / 15, the left caption reads `After 55.0 / 30.0 / 15.0`, and the button reads "Back to current mix". Off reverses. 8. Holdings rows tint to `#F1F4F2` on hover. Day change is green for positive, rust for negative, ink for zero. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────────┐ │ [H] Halyard Portfolio Activity Transfers Documents Joint ··4417 (IM) │ 60 ├──────────────────────────────────────────────────────────────────────────────┤ │ pad 28 │ │ ┌ perf card (1fr) ───────────────────────────────┐ ┌ alloc card 384 ────────┐ │ │ │ TOTAL VALUE │ │ ALLOCATION │ │ │ │ $412,806.37 (64px serif, cents in --ink-3) │ │ (ring 124) legend × 6 │ │ │ │ [+$2,148.90 today] +0.52% … +$38,412 over 1Y │ └────────────────────────┘ │ │ │ [1D 1W 1M 3M YTD 1Y ALL] readout ▸ │ ┌ rebalance card ────────┐ │ │ │ chart 228 tall, area fill, dashed baseline │ │ REBALANCE SUGGESTED │ │ │ │ x-axis: 5 labels ("Nov 2025" for 1Y/ALL, "Oct 21" for 1W to YTD, "9:30 AM" for 1D) │ │ serif sentence 17px │ │ │ └─────────────────────────────────────────────────┘ │ split bar 8px, keys │ │ │ │ [Preview] [Remind me] │ │ │ └────────────────────────┘ │ │ ┌ holdings card (full width) ───────────────────────────────────────────────┐ │ │ │ Holdings Prices delayed 15 min · Oct 28 … │ │ │ │ FUND SHARES PRICE TODAY VALUE WEIGHT ▬▬▬ 59.8% │ │ │ └───────────────────────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────────────────────┘ grid: minmax(0,1fr) 384px, gap 20, perf spans 2 rows, align-items start ``` - `

`: brand (26px rounded-square mark + 19px Spectral wordmark), `