## 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/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060491-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/anthropic-com/9400eeef-f6ac-4bf6-a324-e094b3c8d068-1789060045183.webp
- Design on Kage: https://kage.design/designs/anthropic-landing-page

# Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, typefaces, tone). Wait for the answers. Everything below is a design language to apply to *their* product, not a recreation of the reference.

# Page structure
1. **Header**: slim top bar on the parchment background — wordmark left, a few nav links with dropdown carets, one solid dark pill CTA button with a small attached secondary segment on the right.
2. **Hero**: asymmetric split. Left ~60%: a very large bold grotesk headline with key phrases underlined, in dark ink. Right: a modest serif paragraph, top-aligned to the headline. Lots of whitespace above and below.
3. **Full-bleed dark announcement band**: a near-black section with a centered serif display headline (product/model name), a one-line serif subhead, and one small light pill button. No imagery — pure typography with huge vertical padding.
4. **Latest releases**: small sans section label, then a 3-column grid of cards on a slightly darker beige surface. Each card: bold sans title, serif body copy, "Read more →" link, then a metadata block with hairline-ruled rows (DATE / CATEGORY label left, value right), and a solid dark pill button pinned to the card bottom.
5. **Statement + index list**: two-column layout. Left: a short bold sans manifesto line ("we build X to serve Y"). Right: a list of 6 content links, each row a title in dark ink with a right-aligned muted category label, separated by hairline rules.
6. **Footer**: very large, dark, multi-column sitemap (4–6 columns of small links grouped under bold sans column headings, with the logo mark on the far left), plus a bottom row with copyright and small social icons.

# Design language
- **Palette**: warm parchment `#F0EEE6` page background; card surfaces `#E5DFD0`–`#EDE7DA`; near-black ink and full-bleed sections `#141413`; white text on dark; muted warm gray `#8a867c` for secondary labels. One accent-free palette — contrast does all the work.
- **Type pairing**: a geometric grotesk (like a neo-grotesque) for headlines, UI and body; a high-contrast serif (like Tiempos/Garamond family feel) reserved for display moments and long-form paragraphs. Serif for the *voice*, sans for the *interface*.
- **Scale**: hero headline ~72–96px bold with tight leading; section titles small (~18px bold sans) rather than oversized; card titles ~22px. Hierarchy comes from weight and colour, not ever-bigger headings.
- **Section rhythm**: alternate sparse and dense. Hero and dark band are airy (100px+ padding); release cards and index list tighten up; the footer is dense. Full-bleed dark sections act as chapters between parchment sections.
- **Metadata treatment**: structured facts (dates, categories) rendered as small uppercase sans labels left / regular values right, separated by 1px hairline rules in a warm gray.
- **Cards**: large radius (~16–20px), flat fills, no shadows, generous internal padding, action button pinned bottom.
- **Buttons**: small pill radius, solid dark with light text (or inverse on dark), arrow glyph suffix on links and buttons.
- **Lists**: index-style rows with hairline dividers, title left and category right, generous row height, no icons.
- **Motion**: minimal — hover states on links (underline/arrow shift) are enough; no animation beyond gentle transitions.
- **Layout**: max-width container ~1200px, 12-column grid, generous gutters; asymmetry in the hero (60/40 split) instead of centered everything.

# Never
- No logos, wordmarks, product/model names, copy, illustrations or icon sets from the reference (no Claude, Anthropic, its asterisk mark, or its taglines).
- Never present the result as the reference product; apply the language to the user's own brand.