Chart Prompts

Restyle my chart in the "Cap Rate Spread" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a page from a real estate investment committee memo. Crisp white paper, restrained ink, one warm terracotta accent, and the spread between two rates as the story.

Colors (use these exact values):
- Page: #FFFFFF. Headline ink: #1A1F29. Secondary text: #5E6470. Gridlines: #E6E3DD.
- Primary series: #1F3A5F (deep navy). Comparison series: #8C8579 (warm gray).
- Gap between the two series: #DDE7D6 (pale sage), with its label and peak annotation in #5F7A55.
- Accent: #C2502E (terracotta) for the short header rule, the eyebrow and the spread bracket only.
- Downturn or recession tick bars: #B9B4AA.

Typography (Google Fonts):
- Gelasio 600, 28px, #1A1F29 for the headline, which states the finding in sentence case. Gelasio 700, 28px terracotta for the bracket number.
- Albert Sans for everything else: eyebrow 11px 600 uppercase, 2.2px letter-spacing, terracotta; subtitle 15px #5E6470 with measure, unit and period; axis labels 13px #5E6470; direct series labels 14px 700 in the series color; end values 12px 600; "SPREAD" 12px 700 with 3px letter-spacing; downturn labels 11px italic; source 12px; folio 11px 600 uppercase with 1.8px letter-spacing.

Layout:
- 56px side margins. A 44 x 3 px terracotta rule at top left with the eyebrow beside it, headline about 50px below, subtitle under it.
- Plot from x 88 to 816, top about 168, baseline about 492, leaving 88px on the right for the spread bracket.
- Footer: a 1px #E6E3DD rule at y 556, the source line at left and a folio ("INVESTMENT COMMITTEE | 7") at right.

Axes and grid:
- Horizontal 1px #E6E3DD gridlines at round values, labels right-aligned left of the plot with a % suffix. A 1.2px #1A1F29 zero baseline. No vertical grid, no y-axis line.
- Year labels 30px below the baseline: every other year plus the latest, the latest in 700 #1A1F29.
- Downturn periods: 4px tall #B9B4AA bars 7px under the baseline spanning the period (padded 8px each side), with "Downturn" in 11px italic under the year labels.

Marks:
- Line chart: straight segments; primary 3px navy, comparison 2.25px warm gray, round joins. Fill the area between the two lines with pale sage. Latest points get dots (r 4.5 navy, r 4 gray) with a 2px white ring and small value labels. Mark the widest historical gap with a dotted 1px sage-ink vertical line and a "Peak 540 bps" label above.
- Bar chart: paired thin square bars per period, navy and warm gray, 4px apart, with a pale sage rectangle behind each pair spanning from the lower to the higher value to show the gap; the latest pair gets the terracotta bracket.
- Spread bracket: at the right edge, a 1.5px terracotta bracket from the latest primary value to the latest comparison value with 6px ticks and a 6px nib at its midpoint; the spread in basis points as a 28px Gelasio numeral beside it, "bps" and "latest" below.

Avoid: legends boxes (label series directly), gradients, shadows, more than one accent color, heavy gridlines and chart borders.

When you're done, render the chart and check that the spread in the bracket and headline equals primary minus comparison in basis points, the sage fill sits exactly between the lines, and the bracket text does not clip the right margin.