## 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-2.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-gallery

## Before you start
Ask what the user's product is, who it is for, and what visual brand language it uses. Then apply the principles below to create an original feature-gallery section for that product—not a replica of the reference.

## Design direction
Build a desktop-first editorial gallery section for showcasing several product capabilities, workflows, or content areas. The section should feel calm, premium, tactile, and highly legible, with the visual previews doing most of the selling.

### Layout and alignment
- Use a warm, near-white section background, approximately `#F8F5F1` or a tone derived from the user's brand.
- Keep the section within a wide viewport container, with roughly `32px` horizontal padding on desktop and `20px` on mobile.
- Place a small uppercase eyebrow at the top, followed by a large left-aligned heading and a short supporting paragraph beneath it.
- Align the heading and description to the same left edge as the gallery cards.
- Put previous/next controls on the right side of the introductory row. Use two separate circular icon buttons with subtle borders and ample hit areas.
- Below the introduction, create a horizontal carousel or overflow track of feature cards. Show approximately three to four cards on desktop, allowing the next card to be partially visible at the viewport edge to suggest more content.
- Each card should have a visual preview above its text. Use a consistent aspect ratio, but allow certain cards to contain layered or offset preview panels when that helps communicate a workflow.
- Place the category label, card title, and description beneath each preview, aligned to the card's left edge.
- Finish with a centered text link or understated call to action beneath the gallery, separated by generous vertical space.
- On smaller screens, turn the gallery into a swipeable one-card or one-and-a-half-card track; preserve the partial next-card reveal and ensure the controls remain usable.

### Typography hierarchy
- Use a distinctive display or editorial serif for the primary heading if that suits the user's brand; otherwise use the brand's strongest expressive heading face. Target approximately `36–48px` desktop size, tight line height around `0.95–1.05`.
- Use a small monospaced or tightly tracked uppercase eyebrow around `11–13px`, with letter spacing around `0.08em`.
- Use a sturdy serif or semi-bold display style for card titles at approximately `19–24px`.
- Use a readable monospaced, humanist sans, or brand body face for descriptions around `15–17px`, with `1.35–1.5` line height.
- Keep the supporting paragraph narrower than the heading area, ideally around `520–620px`, so it forms a compact editorial block.
- Use sentence case for titles and body copy; reserve uppercase for labels and utility text.

### Spacing and rhythm
- Give the section generous top and bottom padding, approximately `72–104px` on desktop and `52–72px` on mobile.
- Maintain `12–18px` between eyebrow, heading, and supporting copy.
- Leave approximately `48–64px` between the intro block and the gallery track.
- Use `28–40px` between each preview and its metadata, depending on the preview's proportions.
- Keep card text blocks visually consistent in height where possible so the row feels orderly.
- Separate the gallery from the closing link with approximately `56–80px`.

### Colour, borders, and surfaces
- Use a soft warm background such as `#F8F5F1`, dark charcoal text around `#292725`, and muted secondary text around `#77716B`.
- Keep contrast strong for headings and controls, but avoid pure black unless the product brand requires it.
- Give preview frames a faint warm-gray border such as `#D8D4CE`, a subtle shadow like `0 4px 14px rgba(45, 40, 34, 0.10)`, and a restrained radius around `5–8px`.
- Let the preview interiors use the product's own palette, but soften or neutralize them enough that the overall row remains cohesive.
- Use transparent or background-matched control buttons with a `1px` border around `#E5E0DA`, approximately `40–46px` in diameter, and a full pill radius.
- Avoid excessive decoration; whitespace and the preview surfaces should create the visual richness.

### Interaction and accessibility
- Make the gallery genuinely navigable with previous/next buttons, keyboard support, and touch or trackpad scrolling.
- Disable or visually soften a control when the carousel reaches an endpoint; if the track loops, communicate that behavior consistently.
- Add smooth, restrained movement to slide transitions, approximately `250–400ms`, without parallax or distracting effects.
- Give cards a subtle hover treatment such as a slight lift, border darkening, or image scale of no more than `1–2%`.
- Keep controls at least `44px` square, provide visible focus states, and include accessible labels.
- Respect reduced-motion preferences.
- Ensure descriptions do not get clipped on mobile and that the partially visible card does not prevent horizontal scrolling.

## Never
- Never copy the reference's logos, product names, brand-specific copy, labels, metrics, or feature names.
- Never reuse its screenshots, UI content, illustrations, imagery, or exact card arrangement.
- Never make the section dependent on the reference product's colours, typography, or visual assets; adapt the rules to the user's product and brand.
- Never use inaccessible low-contrast text, tiny controls, hidden carousel navigation, or automatic motion that cannot be paused.
- Never overcrowd the section with badges, decorative graphics, or unnecessary gradients.