## 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/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060909-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060887-full.webp
- Component on Kage: https://kage.design/component/lovable-feature-grid-2

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and visual style are. Then apply the principles below to my product rather than reproducing the reference.

Build a responsive feature-grid section for a modern software product. The section should communicate a progression from the initial idea, through refinement, to dependable operation, while remaining adaptable to different products and content.

### Design language

- Use a warm, near-white page background such as `#faf9f7` or `#fbfaf8`, with a generous vertical rhythm and plenty of empty space around the section.
- Constrain the content to a centered max-width of approximately 1120–1200px. Align the section heading, supporting copy, and card grid to the same left and right edges.
- Place a short introductory block above the cards. Keep it left aligned and relatively narrow: a bold, compact heading followed by one or two lines of lower-contrast explanatory text.
- Use a strong sans-serif type system. The heading should be approximately 32–38px on desktop with tight letter spacing and a heavy weight; supporting text should be 15–17px with comfortable line height. Card titles should be 15–17px and semibold; card descriptions should be 14–15px with a 1.6 line height.
- Add a three-column grid on desktop with equal-width cards and a gap of roughly 12–16px. Stack the cards vertically on small screens, preserving consistent spacing.
- Make each card a tall, rounded panel with a very light surface, a subtle 1px border around `#dededb`, and a restrained shadow such as `0 8px 24px rgba(20,20,20,.06)`. Use a radius of approximately 16–18px.
- Divide each card into two zones: an upper visual area taking roughly 60–65% of the card height and a lower text area. Keep the lower text area white or near-white, with generous horizontal padding of about 24px and bottom padding of 24–28px.
- Create abstract UI-inspired visuals in the upper zones using only CSS, HTML, or neutral placeholder shapes. Each visual should suggest a different capability: an input or prompt surface, an editor or preview surface, and a settings, infrastructure, or integration surface. Do not use real product screenshots.
- Let each visual feel softly illuminated. Use very pale gradients and blurred colour fields—such as lavender `#dfe4ff`, blush `#f7dced`, pale blue `#e7f1ff`, and warm peach `#f9e4d8`—behind crisp white interface panels. Keep contrast gentle and avoid making the visual busier than the text.
- Use small neutral interface details such as fake tabs, input lines, menus, chips, borders, and monochrome icons. Keep them generic and decorative; they should support the concept without becoming functional UI.
- Use a restrained colour palette for text: near-black `#191919` for headings, charcoal `#555553` for descriptions, and muted grey `#8d8d89` for secondary interface details. If the product has an accent colour, use it sparingly in one or two visual details rather than across every card.
- Keep all card descriptions similar in length so the three cards form a visually even row. Give each card a distinct, benefit-led title and a short explanation.
- On hover, optionally raise the card by 2–4px and slightly strengthen the shadow or border. Use a 180–240ms ease-out transition. Do not add aggressive animation; the section should feel calm and premium.
- Ensure the layout remains accessible: use real heading hierarchy, readable contrast, descriptive labels for any meaningful visual, visible keyboard focus states, and reduced-motion behaviour.
- On mobile, reduce the heading size to approximately 28–32px, make the grid one column, preserve the card visuals’ aspect ratio, and keep the intro-to-grid spacing generous but compact enough to avoid excessive scrolling.

### Content structure

- Intro: one concise statement about the product’s broad capability, followed by a supporting sentence about what users can accomplish.
- Card 1: starting with an idea or request.
- Card 2: shaping, iterating, or launching the result.
- Card 3: operating, extending, or relying on the product over time.

### Never

- Never use logos, product names, branded marks, or recognizable UI from the reference.
- Never copy the reference’s exact headline, card titles, descriptions, layout copy, or imagery.
- Never use screenshots, illustrations, or photographic imagery from the reference; create original abstract UI placeholders instead.
- Never make the decorative visuals more prominent than the feature messaging.
- Never introduce dense gradients, excessive glow, harsh shadows, or unrelated decorative elements.
- Never sacrifice responsive behaviour, semantic structure, accessibility, or readable text for visual similarity.