## 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/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130640-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130514699-full.webp
- Component on Kage: https://kage.design/component/kerno-1-0-feature-grid-4

## Before you start
Ask what quality, compliance, or reliability checks the user's product provides and which checks are essential, optional, or still emerging. Use those answers to build a truthful matrix.

Create a feature section with an introductory title and short paragraph, then a two-column layout: a large framed illustration or diagram on the left and a 2-by-4 or similar gate matrix on the right. Each gate card should have an icon or status dot, a short title, one-line description, and a small count or state. Use dark green-black or navy background (#09100f), panel #101817, borders #25302e, mint success (#43c7a0), amber attention (#e2a63a), and a restrained magenta brand accent. Keep card padding 12–16px and use 6px radii. Typography should be compact: 20–28px section title, 12px card title, 10–11px descriptions, 9px mono metadata. Preserve equal card heights and strong baseline alignment; allow the matrix to become one column on mobile.

Never use the reference gates, labels, numbers, illustration, product name, or copied copy.