## 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/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106473-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106444729-full.webp
- Component on Kage: https://kage.design/component/wealthfolio-feature-grid-2

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and content they want to use. Then apply the design principles below to create an original version for that product—not a pixel-perfect copy of this reference.

## Build an extensibility feature section
Create a responsive website section that explains why the product is adaptable and gives users several concise capability highlights, followed by a larger featured capability panel.

### Structure and layout
- Use a warm, near-white page background, approximately `#fbf8f4`.
- Keep the section inside a centred content container with a maximum width of roughly `1040–1120px` and responsive horizontal padding of `24px` on mobile and `32–48px` on larger screens.
- Start with a centred heading block. Add a subtle horizontal divider above it, with a heading and supporting paragraph beneath. Leave generous vertical space so the section feels calm rather than dashboard-like.
- Use a large editorial headline, ideally 36–44px on desktop and 30–34px on mobile, with a high-contrast serif or similarly characterful display face. Give the headline a short phrase and optionally italicise one emphasis word using the same typeface.
- Set the supporting copy in a compact monospace or technical sans-serif style at approximately 15–17px, with a muted grey-brown colour and a readable line height around 1.45. Limit its width to about `560px` and centre it.
- Below the intro, create a four-column row of equal-height feature cards on desktop. Collapse to two columns on medium screens and one column on small screens. Use a gap of `12–16px`.
- Each card should have a small icon tile in the upper-left, followed by a concise title and two-to-four lines of explanatory copy. Align the title and copy to the right of the icon on desktop, while allowing a stacked layout if needed on narrow screens.
- After the cards, add one larger featured panel with a stronger border. It can contain a product screenshot, diagram, or other product-specific visual on one side and a capability title plus description on the other. On mobile, stack the visual above the text.

### Visual language
- Use a restrained palette: page background `#fbf8f4`, card background `#fdfbf8`, primary text `#373431`, muted text `#77716b`, soft border `#e7e1da`, icon tile `#f1eee9`, and a darker featured-panel border around `#3f3b37`.
- Use very thin 1px borders on regular cards and a 2px or visually stronger border on the featured panel. Avoid shadows or keep them almost imperceptible.
- Give regular cards a softly rounded radius of `14–16px`; use a slightly larger `18–20px` radius for the featured panel. Keep the design tactile but not glossy.
- Use compact internal padding around `16px`. Keep card titles bold and around `14–16px`; use monospace or technical sans-serif copy around `14–15px` with a line height near `1.45`.
- Icons should be small, monochrome line icons inside square, lightly tinted tiles. Choose icons that communicate each capability, but do not reuse any reference-specific icon artwork.
- Preserve generous whitespace between the intro, card row, and featured panel. The hierarchy should come from spacing, type contrast, and borders—not decoration.

### Interaction and accessibility
- Make the cards or featured panel clickable only when they lead somewhere meaningful. Add a subtle border-colour or background transition on hover and keyboard focus, around `150–200ms`.
- Use visible `:focus-visible` states with sufficient contrast and never rely on hover alone.
- Ensure the entire layout works at narrow widths without horizontal scrolling. Keep body text at accessible contrast and provide meaningful alt text for any product visual.
- If the featured panel contains a screenshot, use a restrained crop or frame that supports the content rather than overpowering it.

### Content guidance
- Write a short, confident section headline about customisation, flexibility, or making the product fit the user.
- Use four distinct, benefit-led capabilities. Keep each title to two or three words and each description concise.
- Make the larger panel explain one deeper capability with a title, one-line summary, and optional supporting detail.
- Adapt all copy to the user's product, audience, and brand voice.

## Never
- Never use logos, product names, or copy from the reference.
- Never reproduce the reference's exact card content, feature names, icon artwork, screenshot, or layout proportions.
- Never include the reference's illustrations or imagery; use original product-specific visuals or neutral placeholders.
- Never make the section feel like a generic SaaS dashboard with gradients, loud colours, heavy shadows, or excessive decoration.
- Never sacrifice responsive behaviour, semantic structure, or keyboard accessibility for visual similarity.