## 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/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060505-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060491-full.webp
- Component on Kage: https://kage.design/component/anthropic-feature-grid

# Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, typography, and content are. Then apply the principles below to create an original release or feature-grid section for my product—not a copy of the reference.

## Design goal
Build a spacious editorial grid that presents a small set of important features, releases, or announcements. Each card should feel like a self-contained summary: a strong title and description at the top, lightweight metadata near the bottom, and one unmistakable call to action.

## Layout and alignment
- Use a warm, pale neutral section background, approximately `#F1F1E9`, with generous horizontal and vertical padding.
- Add a section heading aligned to the same content container as the cards.
- Use a three-column grid on desktop with equal-width cards and a substantial, consistent gap of roughly `28–32px`.
- Keep all card edges aligned and give the cards equal height, even when descriptions have different lengths.
- On medium screens use two columns; on small screens stack cards into one column.
- Use a centered max-width container, approximately `1100–1180px`, with responsive side padding of `24–68px`.
- Inside each card, use a vertical flex layout so the metadata and action remain anchored toward the bottom.

## Card anatomy
- Use a soft cream/taupe card surface around `#E6DECE`, clearly distinct from the section background but still low contrast.
- Apply a subtle border or very light shadow only if needed for separation; avoid heavy elevation.
- Use a generous radius around `16px` and internal padding around `32px` desktop, reducing slightly on mobile.
- Place the title first, followed by a readable editorial description and a small inline text link for secondary detail.
- Reserve flexible space between the introductory content and the metadata block.
- Present metadata as compact rows such as date, type, status, or audience. Use uppercase labels with noticeable tracking on the left and values aligned to the right.
- Separate metadata rows with thin, low-contrast rules around `#CFC6B6`.
- Finish with a dark filled button aligned to the lower-left of the card. Include concise action text and a small right-pointing arrow.

## Typography hierarchy
- Use the product’s brand typefaces if available; otherwise pair a clean grotesk or sans-serif for headings and labels with a warm serif or humanist face for longer editorial descriptions.
- Make the section heading prominent but compact, approximately `24–28px`, with a semibold weight.
- Set card titles around `23–27px`, with tight line-height around `1.05–1.15`.
- Set descriptions around `17–20px`, with line-height around `1.2–1.35`; keep the measure narrow enough to remain easy to read.
- Use small links and metadata around `14–16px`.
- Use uppercase metadata labels at approximately `12–14px` with letter spacing around `0.08em`.
- Maintain strong contrast without making every element visually loud.

## Colour and visual tone
- Use near-black text and controls, approximately `#171717`.
- Use muted warm neutrals rather than bright whites or saturated accent colours.
- Keep the palette quiet and confident; let typography, spacing, and card structure carry the hierarchy.
- Ensure text and controls meet accessible contrast requirements.

## Interaction
- Make the whole card optionally clickable only if that matches the product’s information architecture; otherwise keep the primary action explicit.
- On hover, subtly darken the card or shift it upward by 1–2px, and provide a smooth transition around `160–220ms`.
- Make buttons visibly change background or opacity on hover and focus.
- Use a clear keyboard focus ring in an accessible contrasting colour.
- Keep arrow icons simple, small, and aligned with the action label.
- Do not rely on hover alone to communicate meaning.

## Content behaviour
- Use realistic content supplied by the user’s product, with concise titles and descriptions of varied lengths.
- Prevent layout jumps by allowing descriptions to occupy a controlled region or by using the flex layout to anchor lower content.
- Preserve the same metadata order and action placement across every card.

## Responsive and accessibility requirements
- Ensure the grid remains readable from mobile through wide desktop sizes.
- Maintain comfortable touch targets of at least `44px` for buttons and links.
- Use semantic section, heading, list, article/card, and link/button elements.
- Preserve logical reading and keyboard order.
- Respect reduced-motion preferences.

## Never
- Never reuse logos, product names, brand copy, release titles, dates, categories, or button copy from the reference.
- Never copy the reference’s exact content, dimensions, layout proportions, typography, or styling; adapt the principles to the user’s product and brand.
- Never include illustrations, photography, decorative imagery, or other visual assets from the reference.
- Never invent a recognizable imitation of the referenced company’s identity.
- Never sacrifice accessibility for visual similarity.