## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106576-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-gallery-2

## Before you start
Ask what the user's product is, who it is for, and what their brand personality, colour palette, and content categories are. Then apply the principles below to create an original resource gallery for that product rather than reproducing the reference.

## Build this section
Create an editorial resource gallery for a modern software or technology website. The section should introduce a collection of articles, guides, events, case studies, or other resources in a calm, premium layout.

### Layout and alignment
- Use a wide, mostly white section with a centred max-width container of approximately 1120–1200px.
- At the top, place a large editorial headline on the left and a compact outlined “view all” style action on the right. Align the action visually with the lower portion of the heading rather than forcing both elements to share a baseline.
- Below the header, use a four-column grid on desktop with equal-width cards and a gap of approximately 20–24px.
- Let additional cards continue onto subsequent rows; do not force the grid to fill the final row. Preserve its natural left alignment.
- Collapse to two columns on medium screens and one column on small screens. Keep the header action accessible and allow the heading/action to stack when necessary.
- Use consistent card heights within each row, with the image and content areas clearly separated.

### Card anatomy
- Each card contains a visual thumbnail at the top, a compact category pill, a multi-line title, and a bottom-aligned text link with a subtle arrow.
- Use a fixed or aspect-ratio image area so the cards remain visually aligned even when titles differ in length.
- Keep the lower content region generous enough that the link sits near the bottom edge, creating a stable repeated rhythm.
- Make the whole card or at least the title and action link keyboard-accessible and clickable.

### Typography hierarchy
- Use a bold, modern sans-serif or the product’s existing brand typeface.
- Set the section heading large and confident, approximately 52–60px on desktop with tight line-height around 0.98–1.05; reduce it responsively to roughly 38–44px on mobile.
- Set card titles around 17–19px with a semibold or bold weight and approximately 1.2 line-height.
- Use uppercase category labels at 10–12px with increased letter spacing and medium weight.
- Use 14–15px text for links and utility actions. Keep body copy minimal so the gallery remains scannable.

### Colour and surfaces
- Use a warm or neutral white background, approximately #FFFFFF or #FCFCFB.
- Use near-black text such as #0B0B0D, with softer secondary text around #5F6065.
- Give category pills a very light neutral fill such as #F7F7F6 with a subtle border around #E7E7E5.
- Allow thumbnails to use brand-relevant, high-contrast abstract artwork or editorial photography, but keep the artwork visually cohesive across the collection. Dark navy, indigo, plum, teal, or other deep tones can provide contrast without overwhelming the typography.

### Borders, radius, and depth
- Use a thin, low-contrast card border around #E4E4E3.
- Apply a medium-large radius of approximately 18–22px to the outer card and clip the image to the same top corners.
- Use a small pill radius of 999px for category labels and the header action.
- Keep shadows extremely subtle: a soft diffuse shadow such as 0 6px 18px rgba(0,0,0,0.05), or omit shadows and rely on the border.

### Interaction and responsive behaviour
- On hover, slightly lift the card or strengthen its border/shadow; keep the effect restrained and fast, around 150–220ms.
- Consider a very subtle image scale of 1.02–1.04 on hover, clipped within the rounded image frame.
- Make arrows shift a few pixels on hover to communicate direction without becoming decorative noise.
- Preserve visible keyboard focus states with a clear high-contrast outline.
- Ensure long titles wrap naturally, images have meaningful alt text, and the layout does not depend on fixed desktop widths.

## Never
- Never copy the reference site’s logos, product names, brand wording, headlines, article titles, categories, or calls to action.
- Never reuse its exact images, illustrations, gradients, or editorial subject matter.
- Never make every card visually identical if the user’s brand calls for a different content system.
- Never sacrifice readable contrast, keyboard access, or mobile usability for visual similarity.