## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060646-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-cta

# Before you start
Ask what the user's product is, who it is for, and what brand personality and visual system it uses. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a horizontal updates CTA rail
Create a responsive section that promotes recent resources, announcements, articles, or product updates as a horizontally arranged set of cards. The component should feel editorial and premium, with one lighter introductory card followed by darker featured cards. It should work as a self-contained section inside a modern marketing page.

## Design language

### Layout and alignment
- Place the section inside a centered content container, around 1120–1200px wide on desktop, with generous horizontal page gutters.
- Add a small section heading above the card row, aligned to the same left edge as the cards. Pair it with an optional compact filter or “view all” control on the right.
- Use a three-card horizontal rail on desktop: a quiet introductory card around 30% of the row width and two featured cards around 32–34% each.
- Keep consistent gaps of approximately 16px between cards.
- On smaller screens, switch to a horizontally scrollable rail or stack the cards vertically. If using horizontal scrolling, show enough of the next card to communicate that more content is available.
- Align text and controls to a consistent inset inside every card, while allowing decorative artwork or media to sit closer to the card edges.

### Card composition
- Make the first card a pale, low-contrast introduction or category card. It can contain a short invitation, topic markers, or abstract brand-neutral symbols, but should remain visually quieter than the featured cards.
- Make subsequent cards dark, image-led or typographic feature cards with a short category label, a prominent headline, and an optional arrow or link affordance.
- Give each card a clear clickable area and use a minimum height around 220–280px, depending on the amount of content.
- Use internal whitespace rather than heavy decoration to establish hierarchy. Keep headlines short enough to scan at a glance.

### Typography
- Use a clean contemporary sans-serif for labels, controls, and supporting text.
- Use a larger editorial display style for card headlines: approximately 28–40px on desktop, with tight line-height around 0.95–1.05 and slightly negative tracking.
- Use a section heading around 32–44px, medium weight, with a compact line-height.
- Use small uppercase or sentence-case metadata around 11–13px, medium weight, with modest letter spacing.
- Limit each card to one dominant headline and avoid adding paragraphs that compete with it.

### Colour
- Use a warm off-white page background around #FAFAF8 or #F7F7F4.
- Use a pale neutral introductory card around #F1F1ED or #F4F3EF.
- Use near-black featured cards around #101311 or #111514.
- Use white or soft ivory type on dark cards, around #F4F5EF.
- Use a restrained accent colour drawn from the user's brand for small highlights, active indicators, links, or decorative details. Keep accents sparse so the cards remain calm and legible.
- Maintain accessible contrast for all text and controls; do not rely on accent colour alone to communicate interaction.

### Borders, radius, and depth
- Use a very subtle 1px border around the section or cards, approximately #E7E7E1 on light surfaces and a translucent white or dark border on dark surfaces.
- Use medium rounded corners, approximately 14–18px. Keep the radius consistent across all cards and controls.
- Avoid strong drop shadows. If separation is needed, use a faint, diffuse shadow or rely on contrast and spacing.
- Add a thin horizontal divider above the card rail when the section needs separation from content above.

### Interaction
- Make the entire card clickable, with a clear hover state: slightly brighten or darken the surface, reveal a subtle arrow movement, or increase the contrast of the border.
- Keep hover transitions quick and restrained, around 160–220ms using an ease-out curve.
- If the rail scrolls horizontally, support touch and trackpad gestures, hide unnecessary scrollbars where appropriate, and provide accessible previous/next controls on desktop.
- Ensure keyboard users can tab to each card and control, with a visible focus ring using the product's accent colour.
- Preserve readable card content and avoid autoplaying motion. Any decorative pattern should be static or gently animated only when reduced motion is not enabled.

## Responsive behaviour
- At desktop widths, show the complete three-card rhythm with generous whitespace around the rail.
- At tablet widths, reduce card height and typography slightly while retaining the horizontal relationship.
- At mobile widths, use a single-column stack or a swipeable row with cards around 82–90vw wide, keeping the next card partially visible when using a rail.
- Keep section heading and controls aligned, but allow the controls to move below the heading on narrow screens.

## Never
- Never reuse logos, product names, headlines, labels, copy, illustrations, icons, imagery, or decorative artwork from the reference.
- Never reproduce the exact card proportions, visual assets, or content arrangement as a branded clone.
- Never make the CTA rail depend on inaccessible hover-only behaviour.
- Never sacrifice legibility for oversized decorative treatment or excessive animation.