## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060209-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-cta

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colour palette, and conversion goal are. Then apply the principles below to create an original version for my product rather than reproducing the reference.

## Design language
Build a dark, editorial product-marketing section that combines a compact changelog preview with a lower conversion or social-proof CTA.

### Layout and alignment
- Use a near-black page background, approximately `#090A0B` or `#0B0C0D`.
- Constrain the content to a wide centered container, roughly 1180–1240px on desktop, with 32–48px horizontal padding.
- Begin with a large section heading aligned to the left. Keep it visually simple and give it generous space below.
- Present three update items in equal-width columns on desktop. Align their top edges and use a fine horizontal rule or timeline track running across the columns above the item content.
- Add a small circular node above each column on the track. Make the first node the active accent state and the others subdued.
- Each update item should contain: a short title, a two-line description preview, and compact uppercase date metadata. Keep all columns aligned even when text lengths differ.
- Place a quiet text link such as “View all” below the update row, aligned to the left, with a small arrow indicating navigation.
- After a large vertical gap, transition into a two-card CTA or testimonial band. Use an asymmetrical split if appropriate: one larger pale card and one narrower vivid-accent card. The cards should feel like a new visual chapter rather than another list.
- On mobile, stack the update columns and replace the continuous timeline with short per-item rules or a simplified vertical track. Stack CTA cards vertically and preserve generous breathing room.

### Typography hierarchy
- Use a clean modern sans-serif with slightly tight tracking.
- Make the main heading large and confident, around 48–64px on desktop, with a 0.95–1.05 line-height and near-white text.
- Use update titles at approximately 15–16px, medium weight, in `#D7D9DD`.
- Use descriptions at 15–16px with a 1.55 line-height and muted grey `#8B8F96`; clamp previews to two lines and add a subtle ellipsis where needed.
- Style dates as small uppercase metadata, around 10–11px, with generous letter spacing and muted `#686D75`.
- Render utility links at 14px in `#A4A8AE`; show a compact arrow with a little horizontal movement on hover.
- CTA or testimonial card copy can be significantly larger, around 28–42px, with tight line-height and high contrast against its card background.

### Colour and surfaces
- Keep the main canvas almost black: `#090A0B`.
- Use primary text around `#F2F3F4`, secondary text around `#A2A6AD`, and metadata around `#62666D`.
- Use a very subtle divider and timeline colour, approximately `#17191C` or `#1D2024`.
- Use one restrained warm accent for the active timeline node, such as coral `#E45C5C`, adapted to the product brand where needed.
- For the lower cards, use one cool pale surface such as `#CFE3FF` with dark text `#11151A`, and one saturated lime or yellow-green surface such as `#E7F51A` with dark text. Replace these hues with the product’s brand colours while preserving the light-versus-vivid contrast.

### Borders, radius, and depth
- Keep borders extremely subtle: 1px solid `#191B1F` on the dark surface.
- Use restrained card rounding, approximately 8–12px. Avoid pill-shaped containers except for small controls.
- Do not add heavy shadows; rely on contrast, spacing, and thin outlines to separate surfaces.
- Give the lower cards a consistent inset or outer border so they feel like a deliberate pair.

### Interaction
- Make each update item clickable if it leads to a detail page. On hover, brighten the title and gently raise the description contrast without changing layout.
- Animate the active timeline node with a very subtle glow or scale change, not a distracting pulse.
- Make the “View all” link and CTA cards keyboard accessible with visible focus states.
- On hover, CTA cards may shift upward by 2–4px or reveal a small arrow, using a quick ease-out transition.
- Preserve clear focus rings in an accent colour with sufficient contrast.

## Never
- Never copy any logos, product names, headlines, dates, testimonials, or other reference copy.
- Never reproduce the exact card proportions, wording, layout measurements, or visual artwork from the reference.
- Never use illustrations or imagery from the reference; keep the treatment typographic and structural unless my product specifically requires original imagery.
- Never make the timeline or metadata so bright that it competes with the CTA.
- Never sacrifice responsive behaviour, semantic headings, keyboard access, or readable contrast for visual similarity.