## 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-1789106472-3.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

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

## Build a two-column product-principles section
Create a spacious feature section that explains why a product is trustworthy or user-controlled. The left side should present a short editorial headline, supporting paragraph, and three compact principle rows. The right side should translate those principles into a simple, readable architecture or workflow diagram.

### Layout and alignment
- Use a warm, lightly tinted section background distinct from the surrounding page.
- Constrain the content to a centered max-width of roughly 1040–1160px.
- On desktop, use a two-column grid around 46% / 54%, with a generous 64–96px gap; vertically align the text block and diagram near the upper third.
- Keep the left content aligned to one clear vertical edge. Place the headline first, paragraph beneath it, then stack the principle rows with consistent spacing.
- Make the right diagram feel like a contained system: use an outer rounded container, a primary card near the top, and an optional secondary card below, connected by a subtle vertical relationship.
- Collapse to one column on small screens. Put the diagram below the principles, allow cards to become full width, and reduce section padding without losing breathing room.

### Typography hierarchy
- Use a distinctive editorial serif for the main heading, approximately 32–40px desktop with a tight line-height around 1.05–1.15. Italicize or otherwise emphasize one short phrase only when it suits the product’s brand.
- Use a calm sans-serif or monospace-style supporting face for descriptions and system labels; do not use monospace everywhere unless it fits the brand.
- Set the supporting paragraph around 16–18px with a 1.45–1.6 line-height and a readable measure of about 38–46 characters.
- Principle titles should be semibold, around 14–16px; descriptions should be 14–15px with a relaxed line-height.
- Diagram labels should be compact and functional: small uppercase eyebrow labels around 10–11px with letter spacing, and card titles around 14–16px.

### Feature rows
- Build three vertically stacked rows with roughly 24–30px between them.
- Give each row a small square or softly rounded icon tile on the left, followed by a title and one or two lines of explanatory text.
- Keep icons simple, monochrome line icons representing concepts such as privacy, transparency, local control, security, or flexibility. Use a consistent stroke weight.
- Avoid making every row look like a separate card; the emphasis should remain on typography and rhythm.

### Architecture diagram
- Draw an outer system boundary with a thin muted dashed border and a moderate radius around 16–20px.
- Inside it, place a white or slightly lighter primary card with a subtle border, soft shadow, and radius around 12–16px.
- Add a small uppercase context label at the top of the card, followed by a horizontal set of compact capability or environment chips. Chips may contain a tiny icon and a short label.
- Within the primary card, use a nested dashed panel to represent the core product or trusted area. Include a small circular icon, a bold title, and a lower inset row describing the key data, service, or capability.
- If the product has an optional external service, add a narrow connector below the main card with a tiny centered “optional” or equivalent relationship label, then a secondary card. Make the connector visually subordinate and preserve ample whitespace around it.
- Prefer semantic relationships over decorative illustration: the diagram should explain where data, processing, or responsibility lives.

### Colour and material
- Start with an understated warm palette: section background approximately `#F5F1EB` or `#F7F3EE`, primary text `#373631`, secondary text `#77736B`, white card surfaces `#FFFDF9`, and borders `#D8D3CA`.
- Use one restrained accent for icons or emphasis, such as a muted olive, charcoal, clay, or deep brown around `#6E6A4F` or `#51483C`. Adapt it to the user’s brand rather than copying these values literally.
- Keep contrast accessible. Dashed borders and low-contrast labels must still be legible against the section background.
- Use shadows sparingly: a very soft, low-opacity shadow only for elevated cards; rely on borders and tonal contrast for most structure.

### Borders, radii, and spacing
- Use 1px borders throughout, with dashed borders reserved for conceptual boundaries or optional relationships.
- Use 12–16px radii for cards and around 16–20px for the outer diagram container.
- Use a spacing scale based on 4 or 8px. Allow approximately 96px top and bottom section padding on large screens, 48–64px on mobile.
- Keep internal card padding around 16–20px and maintain consistent left alignment between labels, icons, and content.

### Interaction and responsiveness
- If the diagram represents selectable environments or views, chips may be interactive with a subtle background, border, and focus state; do not make interaction necessary for understanding the diagram.
- Add clear keyboard focus styles and preserve readable hit targets.
- If the principle rows link to deeper documentation, make the entire row or title interactive with a restrained hover change, not a dramatic animation.
- Use only subtle transitions for hover and focus states. Never allow animation to obscure the information architecture.

### Never
- Never reuse the reference’s logos, product names, labels, exact copy, or domain-specific terminology.
- Never copy the reference illustration or reproduce its exact diagram contents; invent a structure appropriate to the user’s product.
- Never add unrelated stock imagery, decorative illustrations, or generic gradients.
- Never turn every feature into a glossy card grid when the section’s purpose is to communicate principles and system relationships.
- Never sacrifice legibility, responsive behavior, or accessibility for visual similarity.