## 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-1789365708-8.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-3

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

Build an evaluation section with methodological framing followed by two comparison charts. Make sensitive or fairness-related findings easy to interpret with explicit labels, uncertainty context, and captions.

### Design language
- Layout: prose introduction, first horizontal grouped bar chart, explanatory caption, second categorical chart, then a short interpretation.
- Typography: body 14–16px, chart titles 14–16px semibold, labels 10–12px, captions 11–12px.
- Spacing: 28–40px between charts, 16px around legends, and 20px after captions.
- Colour: neutral `#f8f8f6`, text `#202020`, primary violet `#3518e8`, plus accessible coral, green, ochre, and lavender comparison hues; verify contrast.
- Borders and radius: 1px neutral chart rules, 0–4px radius, no visual noise.
- Interaction: tooltips expose exact values and sample sizes; legend toggles are keyboard accessible; provide a text summary for screen readers.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never use culturally loaded colours or labels without context.
- Never hide error bars, denominators, or evaluation limitations.