Chart Prompts

Restyle my chart in the "Paint Chip" 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 paint store's color strip pinned beside a clean sales chart. Crisp white paper, one graduated color family, and the swatch card doubling as the legend.

Colors (use these exact values):
- Page: #FFFFFF. Swatch card: #F7F5F0 with a soft shadow (0 1.5px 3px blur, #3A3226 at 14% opacity).
- Series ramp, lightest to darkest (one per series, in this order): #A9BD89 (Mist), #739B5C (Sage), #467748 (Moss), #225335 (Juniper), #073120 (Forest). With fewer series, take evenly spaced steps from the same ramp; with more, add steps between them without breaking the light-to-dark order.
- Text ink: #23291F. Secondary text and tick labels: #857E72. Gridlines: #ECE7DF, baseline #C9C2B6.

Typography (Google Fonts):
- Playfair Display 700 for the title, 28px, ink, sentence case, stating the finding.
- Mulish for everything else: subtitle 15px #857E72 with measure, unit and period; card brand line 13px 800 uppercase with 3.2px letter-spacing; card caption 11px; swatch names 13px 700; swatch codes 11px 500 with 1px letter-spacing; tick labels 12px; end labels 12px (name 700 in ink, value 400 in #857E72, right-aligned in its own column); source 11px.

Layout:
- A tall paint strip card on the left: x 40, y 36, 176 x 528, 3px corner radius. Inside: brand line and a one-line caption at the top, then one swatch per series stacked from lightest (top) to darkest, each 156 x 80 with 5px gaps and square corners. Each swatch prints its full name (13px 700), a code such as "FH-101" under it, and a two-digit position number ("01") at the bottom right. Text on the two lightest swatches is ink #23291F; on darker swatches it is white at 85 to 100% opacity. A short caption under the strip ("Interior eggshell, 1 gal").
- Title at x 262, baseline 76; subtitle at baseline 104. Plot from x 306 to 830, y 148 to 510, leaving about 110px at the right for end labels.
- Footer line at baseline 566: "Source: illustrative data" at left under the plot, a unit note right-aligned at x 912.

Axes and grid:
- Horizontal gridlines only, 1px #ECE7DF, about four intervals; the zero line 1px #C9C2B6. No axis lines, no ticks.
- Y tick labels right-aligned 14px left of the plot; x category labels centered 24px below the baseline.

Marks:
- Line chart: smooth monotone curves, round caps and joins. Stroke width grows with the ramp step: 2.4px for the lightest, adding 0.3px per step (3.6px for the fifth). Draw lightest first so darker lines sit on top. Each line ends in a 12 x 12 square chip of its own color with a 2px white outline, then a direct label: short name, then the last value in a right-aligned column; nudge labels apart to keep at least 18px between baselines. Order the series so the ramp reads top to bottom like the strip when the data allows.
- Bar chart: square-cornered bars (about 60% of the band) filled with the ramp colors in strip order; for grouped bars keep the light-to-dark order inside every group. Just above each bar end place a 12 x 12 square chip of the bar's color with a 2px white outline, with the value in Mulish 12px beside it. Zero baseline #C9C2B6.

Avoid: any hue outside the green ramp in the data, legends separate from the swatch card, rounded bars, dashed lines, markers at every point, heavy axes, and gradients.

When you're done, render the chart and check that every swatch on the strip matches exactly one series color in the same order, the end chips line up with their labels without collisions, the palest line is still visible on white, and the title's claim is true for the data.