## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789059981195.webp
- Design on Kage: https://kage.design/designs/linear-landing-page

## Before you start

Ask the user:
1. What product are we building a landing page for, and what does it do?
2. Who is the primary audience (engineers, product teams, businesses, consumers)?
3. What brand assets exist — product name, logo, brand colours, typeface, real product screenshots or UI to feature?

Wait for the answers. Everything below applies the visual language of this reference to *their* product, with their assets. Do not reproduce the reference product's name, copy, illustrations or screenshots.

## Page structure

Build a dark, single-scroll landing page with these sections top to bottom:

1. **Top nav** — fixed, transparent over the hero: logo left; 5–6 text links centre-right; Log in link and a small pill Sign-up button on the right. Hairline bottom border appears on scroll.
2. **Hero** — very large two-line headline (white, tight tracking), left-aligned, with a soft radial glow bleeding from the top of the page. Below it a one-line subtext on the left and a small 'New →' link on the right, on the same baseline row.
3. **Hero product shot** — one full-width app screenshot or UI composite floating just below the headline, edge-to-edge-ish, with a subtle glow/gradient behind it so it emerges from the dark background.
4. **Logo cloud** — a single row of 6–7 muted customer logos above a small uppercase tracked caption like 'POWERING THE COMPANIES BUILDING THE FUTURE'.
5. **Statement + three figures** — a large multi-line statement where most words are white and one phrase is dimmed gray for emphasis. Below, three equal columns, each with a thin line-art diagram labelled 'FIG 01/02/03', a short bold title, and 1–2 lines of body text.
6–9. **Four feature sections** sharing one strict template: (a) two-line large heading on the left, (b) paragraph + 'Learn more →' link in a right column, (c) a dense full-width product-UI composite (chat panels, boards, charts, code diffs) that shows the feature in use, (d) a 'Features' index row: small 'Features' label on the left and two columns of feature names each with a '+' affordance. Repeat this template four times with different mockups and features, separated by generous vertical space.
10. **Changelog** — a 'Changelog' heading, then three columns each with a small red dot marker, a title, a two-line excerpt and a date; a 'View all →' link below.
11. **Testimonials** — two large side-by-side rounded cards, deliberately colourful against the dark page: one a soft light gradient card with a large dark quote, the other a saturated accent-colour card with white text. Each ends with an avatar, name, and role. Below, a caption line ('powers over 40,000 teams…') with a 'Customer stories →' link on the right.
12. **Final CTA** — centered two-line closing statement ('Built for the future. Available today.' style) with two buttons: primary white pill and secondary dark pill.
13. **Footer** — five link columns (Product, Features, Company, Resources, Connect) with small muted text, legal row at the bottom left.

## Design language

- **Canvas and colour**: near-black background `#08090A` with slightly lighter panels `#101012`–`#141516`. Primary text near-white `#F7F8F8`, secondary/muted gray `#8A8F98`. Keep the page 95% monochrome; reserve one saturated accent (e.g. chartreuse `#D9F65C` or the user's brand colour) for one or two full-bleed cards near the bottom of the page so colour feels like an event, not decoration. Tiny functional accents (red `#EB5757` status dots, teal chart points) are allowed only inside product mockups.
- **Hierarchy**: build it from scale, weight and opacity — one giant display headline per section (64–88px, weight 500–600, letter-spacing −0.02 to −0.04em), body at 14–16px in the muted gray, and small-caps meta labels at 11–12px with 0.08em tracking for captions, figure labels and the features index. Never introduce a third colour to create hierarchy; use white → gray → dim-gray opacity steps.
- **Rhythm and density**: alternate sparse and dense. The hero, statement and CTA sections are mostly whitespace and type; feature sections are information-dense mockups. Follow the repeating feature template exactly so the page reads as a rhythm, and let the changelog/testimonial band change the pacing before the close.
- **Type**: a single neo-grotesque family (Inter or similar) throughout; pair weights, not typefaces. Headline lines are tight (line-height ~1.05–1.1); body is relaxed (1.5–1.6).
- **Borders, radius, shadow**: separation via hairline borders `rgba(255,255,255,0.08)` on cards, panels and nav — not drop shadows. Card radius 8–12px, buttons 4–6px, pills fully rounded. Shadows appear only as soft ambient glows (large blurred radial gradients of white/purple at 5–15% opacity) behind hero imagery and the top of the page.
- **Mockups**: render product UI as dark panels with real-looking content (labels, statuses, avatars, code, charts) at small text sizes; layer two or three overlapping panels for depth. Keep every mockup inside the same dark palette with only tiny accent dots.
- **Motion**: subtle fade-and-rise reveals on scroll (12–20px translate, 400–600ms ease-out); mockups may scale/parallax gently into view. Hover states brighten a hairline border or shift muted text to white; links end with a '→' that nudges on hover. Nothing bouncy.
- **Buttons**: primary = white or light pill with dark text; secondary = dark pill with hairline border and white text; both small and quiet — no gradients, no glow.

## Never

- No Linear logo, wordmark, product name, or any copy from the reference — write original copy for the user's product.
- No reuse of the reference's line-art figure illustrations, testimonial quotes, customer names, or logo-cloud companies.
- Do not rebuild the Linear app interface itself; mockups must depict the user's own product or clearly generic UI.
- Never present the result as Linear or imply any affiliation with it.