## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073897-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-feature-grid-2

## Before you start
Ask the user what their product does, who it is for, and what visual brand it should express. Then apply the principles below to their product and brand rather than reproducing this reference literally.

## Build an editorial feature-grid section
Create a responsive feature section that explains one important product capability through a large heading, supporting paragraph, and a short list of concrete benefits.

### Layout and alignment
- Use a wide, centered content container with a maximum width of approximately 1080–1160px and generous horizontal padding of 24–40px.
- On desktop, use a two-column layout: a narrower left column for the heading and explanatory copy, and a wider right column for the checklist. A useful starting ratio is 38% / 62%, with a gap of 64–96px.
- Align the top of the heading block and checklist area, while allowing the checklist rows to breathe vertically.
- Place optional supporting or status text beneath the main two-column content, spanning the section width or aligned with the left column depending on the product’s needs.
- On smaller screens, collapse to one column. Keep the heading first, followed by the description and then the checklist. Reduce the column gap, but retain generous vertical spacing.
- The section should feel like a distinct, calm content band with substantial whitespace rather than a dense dashboard card.

### Typography hierarchy
- Use a distinctive editorial or serif display face for the main heading, or the closest expressive typeface available in the user’s brand system.
- Set the heading large and compact: approximately 48–64px on desktop, 40–48px on mobile, with a tight line-height around 0.95–1.05 and slightly negative tracking.
- Use a neutral sans-serif for supporting copy and checklist items.
- Make supporting copy visibly quieter than the heading: approximately 21–25px desktop, 18–21px mobile, with a 1.3–1.45 line-height.
- Set checklist text around 18–21px with a relaxed 1.4 line-height. Keep each item short, specific, and benefit-oriented.
- Optional small status or eyebrow text should be 14–16px, muted, and readable; links may use the product’s accent colour with a subtle underline or weight change.

### Checklist treatment
- Give every benefit a simple checkmark marker. It can be a slightly irregular, hand-drawn-style mark if that suits the brand, but it must remain legible and accessible.
- Use a dedicated marker column around 40–56px wide and align all checklist text to a consistent vertical axis.
- Space checklist rows by roughly 24–32px. Avoid enclosing every item in a card unless the product genuinely needs stronger separation.
- Use concise claims that complement, rather than repeat, the main heading and description.

### Colour, borders, and surfaces
- Prefer a near-white or warm-white background such as #FFFFFF or #FCFCFB.
- Use near-black text such as #111111 or #151515 for the heading and checklist.
- Use a cool muted grey for supporting copy, approximately #686978 or #6B6B78.
- Reserve one brand accent for links or small emphasis; a restrained violet such as #7650A8 is one possible direction, but adapt it to the user’s brand.
- Keep borders minimal. If the section needs separation, use a very light grey line such as #E6E5EA or a subtle tinted edge rather than heavy dividers.
- Avoid strong shadows. If placed inside a surface, use a low-contrast shadow and a modest radius around 16–24px; otherwise let the whitespace define the section.

### Interaction and accessibility
- Make any inline call to action or status link visibly interactive with hover, focus, and pressed states; use an underline, colour shift, or slight weight change rather than a dramatic animation.
- Preserve a clear keyboard focus ring with sufficient contrast.
- Use semantic heading and list markup, meaningful link text, and accessible labels for decorative checkmarks.
- Keep motion subtle: a short opacity or colour transition is enough. Do not animate the checklist in a way that delays comprehension.

### Responsive details
- At around 760–900px, switch to a single-column layout if the two columns begin to feel cramped.
- Keep the heading line lengths controlled so it remains an intentional editorial block rather than a full-width paragraph.
- Ensure checklist text can wrap naturally without colliding with the checkmark column.
- Preserve the hierarchy and whitespace on mobile; do not compress everything into a dense list.

## Never
- Never use the reference’s logos, product names, brand names, or proprietary terminology.
- Never reuse the reference’s exact heading, supporting copy, checklist wording, or calls to action.
- Never copy the reference’s illustrations, imagery, icons, or decorative assets; create neutral marks or use the user’s own icon system.
- Never reproduce the exact layout measurements or styling as a pixel-for-pixel copy.
- Never sacrifice readability, semantic structure, or accessibility to imitate the reference.