## 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/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106493-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106455022-full.webp
- Component on Kage: https://kage.design/component/modeinspect-feature-grid-4

## Before you start
Ask what the user's product does, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a three-step workflow feature section
Create a full-width feature-grid section that explains three connected stages in a product workflow. The section should feel cinematic, technical, and editorial: one strong statement introduces the sequence, followed by three equally weighted cards that read from left to right.

### Layout and alignment
- Use a dark, full-bleed section with a centered content container, approximately 1120–1200px wide.
- Add generous vertical breathing room: roughly 120–160px top and bottom on desktop, reducing to 72–96px on smaller screens.
- Align the heading, supporting paragraph, and card grid to the same left edge.
- Place a compact eyebrow or secondary display line above the supporting copy when the product narrative benefits from it.
- Use a three-column grid on desktop with equal-width cards and a gap of approximately 20px.
- Stack cards vertically on mobile, preserving the workflow order and adding 16–20px between cards.
- Keep the section visually quiet around the cards; the grid should be the main structural element rather than competing with navigation or calls to action.

### Typography hierarchy
- Use a large, light-weight headline around 56–68px on desktop, with tight line-height around 0.95–1.05 and a restrained maximum width.
- If using a second display treatment for emphasis, make it visibly distinct through a different typeface, texture, weight, or letter spacing—but keep it legible and brand-appropriate.
- Set the introductory paragraph at approximately 17–20px with 1.45–1.6 line-height and a muted contrast level.
- Give each card a small metadata row containing a two-digit step number, a short divider, and an uppercase stage label. Use 10–12px type, increased tracking, and subdued colour.
- Set card headings around 23–26px with a medium weight, tight line-height, and a maximum width that encourages two or three lines when appropriate.
- Set card descriptions around 15–16px with 1.5–1.65 line-height. Keep them concise and easy to scan.

### Colour and atmosphere
- Start with a near-black charcoal background, approximately #111211 or #151615, rather than pure black.
- Use warm off-white for primary headings, approximately #F1F0EB.
- Use cool or warm grey for supporting text, approximately #A7A8A4, and a lower-contrast grey around #777975 for metadata.
- Give cards a subtly lighter translucent surface, such as rgba(255,255,255,0.10), with a very soft internal or background gradient.
- Consider a barely visible blurred light or tonal bloom behind the grid to create depth, but keep it abstract and low contrast.
- Avoid bright accent colours unless they are essential to the user's brand; the visual emphasis should come from contrast, scale, and material texture.

### Borders, surfaces, and radius
- Use a thin, low-contrast border around each card, approximately rgba(255,255,255,0.16–0.22).
- Give cards a medium-large radius of roughly 16–20px.
- Use a subtle translucent or frosted surface rather than a flat opaque fill. If backdrop blur is used, keep it moderate so text remains crisp.
- Add understated shadows or a dark outer glow only when needed to separate cards from the background.
- Keep card padding generous: approximately 32px on desktop and 24px on mobile.
- Vertically structure each card so the metadata sits at the top, the heading has clear separation, and the description rests lower without making the cards feel overfilled.

### Interaction and responsive behaviour
- If cards are interactive, make the entire card the target and provide a restrained hover state: slightly brighter border, a small surface lift, or a gentle change in background opacity.
- Do not rely on hover to reveal essential information.
- Preserve accessible keyboard focus with a visible focus ring that fits the product's colour system.
- On narrow screens, reduce headline size to approximately 40–48px, allow the intro text to span the available width, and keep each card comfortably readable.
- Ensure colour contrast, semantic heading order, and reduced-motion support. Avoid distracting animations; a short opacity or translate transition is enough.

### Content guidance
- Write a concise introductory statement that frames the product as a connected workflow.
- Give each card one clear stage, one specific benefit-led heading, and a short explanation of what happens there.
- Make the three stages feel sequential, but ensure every card remains understandable on its own.
- Use the user's product terminology and brand voice rather than generic placeholder SaaS language.

## Never
- Never reuse the reference's logo, product name, stage labels, headings, descriptions, or exact copy.
- Never copy the reference's distinctive display lettering, wordmark treatment, or typography lockup.
- Never include logos, product names, illustrations, screenshots, decorative imagery, or other visual assets from the reference.
- Never reproduce the exact card proportions, background treatment, spacing values, or visual texture mechanically; reinterpret the principles for the user's product and brand.
- Never make the cards so translucent, low-contrast, or stylized that readability and accessibility suffer.