## 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-1789365706-4.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-feature-grid

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

Build a research finding section that pairs explanatory text and bullets with a horizontal stacked bar chart, then an expandable example or case detail. The hierarchy should move from claim to evidence to inspectable detail.

### Design language
- Layout: use a single article column; place the heading and prose first, chart second, and a full-width accordion row last.
- Typography: heading 24–30px, body 14–16px with 1.55 line-height, bullet text matching body, chart labels 10–12px.
- Spacing: 20–28px between paragraphs, 28–40px before the chart, 24px after the chart, and 12px inside the accordion.
- Colour: neutral canvas `#f8f8f6`, text `#1b1b1b`, chart primary `#3518e8`, secondary segments in coral, teal, tan, and charcoal; keep the palette interpretable.
- Borders and radius: chart and accordion use 1px `#e5e5e0` rules, with 0–4px radius and no shadow.
- Interaction: accordion opens inline; chart legend can toggle series; all controls support keyboard focus.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never turn research bullets into marketing claims without evidence.
- Never hide the chart's legend or units.