## 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/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106744-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frigade-assist-api/d96f9c4b-8236-4442-b795-92795f229d4a-1789106649540-full.webp
- Component on Kage: https://kage.design/component/frigade-assist-api-feature-grid-3

# Before you start
Ask the user what their product does, who it is for, and what visual brand system they want to use. Then apply the principles below to create an original version for their product—not a copy of the reference.

## Build a three-step workflow feature section
Create a responsive feature-grid section that explains how a product works in three sequential steps. The section should feel editorial, technical, calm, and highly legible, with a visual system above the explanations and a connected row of numbered cards below.

### Layout and alignment
- Place the section inside a centered content container roughly 1040–1160px wide.
- Use two stacked zones:
  1. A large visual explainer zone, approximately 300–360px tall on desktop, with a very pale neutral background and a faint technical grid.
  2. A three-column explanation row directly beneath it, with each column occupying one third of the container.
- Keep the visual and card row aligned to the same outer left and right edges.
- In the visual zone, show an abstract product flow from left to right: three or four simple nodes connected by thin lines, plus a lightweight floating interface panel toward the right. Use generic labels such as “Users,” “Workflow,” or “System,” but generate copy appropriate to the user’s product.
- Do not make the illustration the main subject. It should function as a quiet conceptual diagram that supports the three explanations.
- On mobile, stack the explanation cards vertically and simplify the diagram into a shorter horizontal or vertical flow. Preserve the sequence and relationships.

### Typography hierarchy
- Use a modern sans-serif with a slightly technical feel.
- Step markers should be compact circular badges with bold numerals.
- Card titles: 15–17px, semibold, dark navy, tight line height around 1.25.
- Card descriptions: 14–15px, regular weight, muted gray, line height around 1.55; keep each description to two or three short lines where possible.
- Any diagram labels should be uppercase or small-cap styled, widely tracked, and much smaller than the card copy—around 9–11px.
- Maintain a clear reading order: number, title, then supporting description.

### Spacing and proportions
- Give the section generous vertical breathing room: approximately 56–88px around the component depending on its surrounding page.
- Use a 32–40px inset inside the visual zone and 28–32px horizontal padding inside each card.
- Keep the three cards equal height and align their top content consistently.
- Use a 20–24px gap between the step badge and title, and 10–14px between title and description.
- Avoid dense decoration; the empty space is part of the design.

### Colour and visual treatment
- Page background: warm white, approximately `#FFFFFF` or `#FCFCFD`.
- Section visual background: very pale cool gray, approximately `#F8F9FB`.
- Primary text: deep blue-black, approximately `#111A35`.
- Secondary text: neutral slate gray, approximately `#69707D`.
- Accent blue for numbered badges, key links, and selected diagram states: approximately `#1268E8` or `#146BEB`.
- Diagram lines and grid: ultra-light gray-blue, approximately `#E6EAF0` and `#EEF1F5`.
- Keep contrast strong for text and badges, while making the diagram intentionally subtle.

### Borders, radius, and depth
- Use 1px borders in approximately `#E7E9EE` around the visual zone and card row.
- Separate cards with vertical dividers rather than heavy shadows.
- Use minimal corner rounding: 0–4px for the main section and 8–12px for small floating interface panels.
- Avoid prominent drop shadows. If a floating panel needs separation, use a very soft shadow such as `0 8px 24px rgba(17, 26, 53, 0.06)`.
- Make the numbered badges circular, approximately 28–32px in diameter, with white numerals.

### Interaction and behavior
- If the step cards are interactive, make the entire card keyboard-focusable and show a subtle blue border or background tint on hover and focus.
- Let the corresponding node or part of the diagram gently highlight when a card is hovered or selected.
- Keep transitions restrained: 160–220ms ease-out, with no bouncing or excessive motion.
- Ensure visible focus states, sufficient color contrast, and a non-hover alternative for touch devices.
- If the cards are not interactive, do not imply clickability; preserve them as a clear static sequence.

### Content guidance
- Explain a process in three distinct stages, with each step answering one practical question: what enters the system, what happens inside it, and what outcome does the user get?
- Use concise, benefit-oriented copy specific to the user’s product.
- Make the sequence understandable even if the user skips the diagram.

## Never
- Never use logos, product names, branded marks, or recognizable interface details from the reference.
- Never reuse the reference’s exact headline, labels, step titles, descriptions, or copy.
- Never copy its illustration, iconography, diagram geometry, or floating panel contents exactly; create a new abstract visual appropriate to the user’s product.
- Never include unrelated stock imagery, decorative illustrations, or prominent gradients.
- Never sacrifice responsive behavior, semantic HTML, keyboard access, or readable contrast for visual similarity.