Chart Prompts

Restyle my chart in the "Espresso Modern" 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 mid-century office-machine or appliance catalog. Warm paper, a strict three-color system, friendly rounded forms, a circular model badge and marginal notes, as if the chart were a product spread.

Colors (use these exact values):
- Page: #F4F0E8 (warm off-white).
- Signal orange #E2531D: the hero series, its value labels, the eyebrow, the "FIG." label and the badge.
- Bottle green #23533F: the second series.
- Graphite #3A3A3A: the third series (drawn as a hatch, see Marks), the title, body text, the masthead rule and the footer imprint.
- Light graphite #A8A39A for the 2px baseline. Rules and gridlines #D8D1C3. Secondary text #5E5A54 and axis labels #7A756C.

Typography (Google Fonts):
- Title: Sofia Sans Condensed 800, 42px, all lowercase, -0.6px letter-spacing, graphite, stating the finding.
- Eyebrow: Sofia Sans 700, 11px, uppercase, 2.4px letter-spacing, orange (for example "ROVELLA CATALOG 2026 / PAGE 12").
- Subtitle: Sofia Sans 400, 15px, #5E5A54.
- Category labels: Sofia Sans Condensed 700, 16px, lowercase, graphite.
- Value labels: Sofia Sans 12px, tabular figures; 800 orange for the hero series, 500 graphite for the others.
- Margin notes: Sofia Sans 400, 13px on a 17px line height, graphite. Footer 12px.

Layout:
- 48px side margins. Eyebrow at y 58, title at y 106, subtitle at y 136, then a 2px graphite rule across the page at y 158.
- A circular badge top right (center about 858, 86): a 50px-radius orange disc, an inner dashed 1px off-white ring at radius 43 (2 on, 3 off), "MODEL" in 9px 700 with 2.4px tracking, the model number in Sofia Sans Condensed 800 27px and the model name in 11px, all off-white.
- A left margin column about 170px wide: "FIG. 3" then two or three short notes that state facts from the data, then the key. A 1px #D8D1C3 vertical rule at x 222 separates it from the chart.
- Footer: 1px #D8D1C3 rule at y 540, "Source: ..." left, a lowercase company imprint right in 600 graphite.

Axes and grid:
- Three light 1px #D8D1C3 gridlines with small #7A756C labels on the left; no y-axis line.
- A 2px light graphite #A8A39A baseline.

Marks:
- Bar chart: grouped vertical bars, three per group, 30px wide with 5px gaps, top corners rounded at 7px, square at the baseline. Each bar has a thin offset shadow: the same shape shifted 3px right and 3px up in graphite at 16% opacity, clipped at the baseline. Orange and green bars are solid; the graphite series is a 45 degree hatch (2.4px graphite stripes every 6px on the page color) with a 1.2px graphite outline, so it never relies on color alone. Value labels 8px above each bar.
- Line chart: 3px round-capped lines in orange, green and graphite (the graphite line dashed 6 on, 4 off), with 5px-radius dots at each point ringed 2px in the page color and a soft 3px-right, 3px-up graphite shadow at 16% under the orange line. End labels in the series color.

Labels and annotation:
- The key is an exploded diagram: three small 12 x 18px rounded bar glyphs stepped diagonally (14px right and 22px down each), each with a dotted 0.75px graphite leader (1.5 on, 2 off) ending in a 1.8px dot, then the model code in 700 and the model name in 400 at 12.5px.

Avoid: gradients, glossy effects, more than three data colors, uppercase titles, heavy gridlines and a boxed legend.

When you're done, render the chart and check that the title is lowercase, the hatch pattern is crisp at small size, the shadows never fall below the baseline, and the margin notes are arithmetically true for the data.