## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/cognitions-swe-2/e9966f12-655e-494e-9580-e5330b0ddc92-1789365707-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cognitions-swe-2/e9966f12-655e-494e-9580-e5330b0ddc92-1789365639098-full.webp
- Component on Kage: https://kage.design/component/cognitions-swe-2-chart-2

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to create an original methodology visualization section.

Build a research-method section with a short derivation, a scatter plot, and a line chart. Explain what each visual measures and why it matters before showing the data.

### Design language
- Layout: use a consistent figure template with title, plot, axis labels, caption, and source note; keep both charts the same width and align their plot regions.
- Typography: 14–16px prose, 14px figure titles, 10–11px axis labels, and 11–12px captions; equations use a readable math face.
- Spacing: 24px between derivation and figure, 16px chart internal padding, 28–40px between figures.
- Colour: background `#f8f8f6`, ink `#222222`, primary points/line `#3217e6`, comparison line `#d77e6b`, gridlines `#ededE8`.
- Borders and radius: subtle 1px figure boundary, 0–4px radius, no shadow.
- Interaction: hover states reveal point or series values; allow zoom or a larger view on mobile without hiding captions.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never imply correlation or causation without labeling the relationship.
- Never omit units, sample context, or uncertainty when those are material.