---
id: w5/m2/t001
title: Capture reference layout pattern from beancount-dashboard
worker: worker5
status: done
estimate: 30m
depends_on: []
---

## Objective

Before touching any dashboard page, extract the concrete visual patterns from the beancount-dashboard reference (`https://beancount.io/ledger/open_ledger/example` — the reports/overview page) so later tasks have a real, non-guessed target to match rather than ad hoc restyling.

## Context

- Reference source (read-only, not part of this repo): `/Volumes/nvme4tbfish/projects/web-beancount/beancount-dashboard/src/features/reports/overview/` — `index.tsx` (page composition), `components/overview-stat-card.tsx`, `components/overview-metrics-panel.tsx` (stat-card grid pattern), `components/income-expenses-chart.tsx`/`cash-flow-sankey.tsx` (chart panel treatment).
- Reference chrome: `/Volumes/nvme4tbfish/projects/web-beancount/beancount-dashboard/src/common/components/ledger-layout/` (sidebar + header shell the reference page sits inside — analogous to `dashboard/src/common/components/dashboard-layout/` in this repo).
- Our current dashboard shell already reuses this app's shadcn/Tailwind tokens (`dashboard/src/style.css`) and `Card`/`Table`/`Badge` primitives (`dashboard/src/common/components/ui/`) — the goal is consistent density/spacing/typography **reusing our existing component kit**, not importing beancount's own components or CSS.

## Steps

1. Read the reference files above; note concrete measurements/patterns worth reusing: card padding/gap scale, stat-card composition (label + value + trend), section heading style, header height, sidebar width/spacing.
2. Write a short pattern note (e.g. as a code comment block or a short section in `dashboard/CLAUDE.md`) capturing: spacing scale to standardize on (e.g. `space-y-6` between sections, `gap-4` in card grids), the stat-card shape to reuse for future dashboard content, and any typography scale (heading sizes) worth locking in.
3. Identify every page/component this milestone will touch (login-page, register-page, forgot-password-page, settings-page, logout-page, routes/index.tsx, dashboard-layout, dashboard-sidebar) so later tasks apply the *same* pattern consistently rather than each inventing its own spacing.

## Files

- `dashboard/CLAUDE.md` (add the pattern note)

## Acceptance criteria

- [ ] A concrete, written pattern (spacing scale, card shape, typography) exists in `dashboard/CLAUDE.md`, citing the specific reference files it was drawn from.
- [ ] The list of pages/components t003–t005 will touch is enumerated and unambiguous.

## Out of scope

- Any actual visual changes to dashboard pages (later tasks).
