## 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/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060424-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060032648.webp
- Design on Kage: https://kage.design/designs/attio-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, type, logo, imagery, and product screenshots). Wait for their answers before designing. Apply the system below to their product, not to the reference site.

## Page structure
1. **Announcement bar and global navigation** — Add a narrow black announcement strip with a small centered message, then a white navigation row with a compact brand mark, restrained links, dropdown indicators, and right-aligned secondary and primary buttons.
2. **Hero** — Build a tall, centered introduction with a small eyebrow, a very large black headline, muted supporting copy, two compact CTAs, and a pale blue-white atmospheric background. Place a softly shadowed product interface mockup below the copy, with a small floating help/chat card overlapping its upper-right edge.
3. **Customer logo strip** — Use a two-row, multi-column grid of monochrome customer marks separated by very thin gray rules.
4. **Platform overview** — Introduce the main product promise with a small blue eyebrow and a large two-line headline whose second line is gray. Keep the copy left-aligned with generous whitespace.
5. **Build pipeline feature** — Create a large bordered feature area with a narrow left-side vertical tab list and a dominant CRM/table interface on the right. Below it, place two smaller side-by-side feature panels showing prospecting/search and agent context UI.
6. **Speed-to-lead feature** — Add a short left-aligned heading and supporting sentence, followed by a wide pale-gray workflow canvas containing connected automation nodes and status labels.
7. **Pipeline feature** — Add another short explanatory heading, then a wide product panel showing horizontally arranged pipeline columns with compact cards. Follow it with two equal lower panels: one for catching changes and one for reviewing summaries, each using small CRM cards.
8. **Question-and-answer feature** — Introduce a section about asking the system questions, then show a large pale product frame containing a query field and generated SQL/code-like response.
9. **Growth intelligence feature** — Add a heading about tracking growth, followed by a wide analytics panel with a line chart, bar chart, and insight list. Finish the module with two side-by-side cards for spotting shifts and recommended moves.
10. **Live-from-day-one CTA** — Create a centered, spacious CTA with a small blue eyebrow, a large headline with a muted continuation, a single button, and a broad CRM profile/activity screenshot beneath it.
11. **Dark platform transition** — Switch abruptly to a near-black section. Center a large white “universal context” style statement above a thin glowing arc that blends yellow, green, blue, and purple along its edge.
12. **Dark capability grid** — Under the arc, use five narrow bordered columns with tiny line icons and short capability descriptions. Maintain low-contrast separators and generous black space.
13. **Signals section** — Add a left-aligned heading with a blue eyebrow and muted secondary sentence, then a sparse vertical list of capability categories with one expanded description.
14. **Connectivity section** — Center a heading and short paragraph, add a small text link, and display a horizontal row of rounded dark app tiles with generic integration symbols.
15. **SDK/API/MCP panel** — Add a bordered two-column dark panel: large white and gray copy with a small docs link on the left, and a subtle abstract geometric line pattern on the right.
16. **Large white breathing-space transition** — Leave a deliberately tall near-empty white interval after the dark section before beginning the infrastructure proof section, preserving the page’s dramatic rhythm change.
17. **Scale metrics section** — Use a white panel with a blue eyebrow, a large two-line heading, four compact metric blocks, and a thin blue exponential curve rising across a field of fine vertical lines toward the right edge.
18. **Customer stories intro** — Add a bordered white section with an eyebrow, large headline, muted continuation, and a small “read more” style link.
19. **Customer story navigation and feature** — Place a short row of customer tabs, then a split case-study block with text on the left and a photo or product-specific visual on the right. Keep the image contained within crisp grid lines.
20. **Changelog section** — Introduce product updates with an eyebrow, large headline, muted continuation, and a small link. Below, show four evenly spaced update cards with dates, titles, and one-line descriptions over a faint vertical-line texture.
21. **Newsletter/footer CTA** — End the white page with a thin top rule, a compact update subscription prompt on the left, an email field and dark subscribe button on the right, and a dark footer band below.

## Design language
- Build hierarchy with a compact eyebrow, oversized sans-serif headline, muted continuation text, and small functional labels; use contrast and whitespace rather than heavy decoration.
- Let rhythm change by section: airy centered hero, dense product-proof grids, short text pauses before wide UI demonstrations, an intentionally dramatic dark platform interlude, then compact metrics and editorial proof cards.
- Use a mostly white and near-black palette. Approximate light surfaces with `#ffffff`, `#f7f9fb`, and `#eef2f5`; use text near `#111111` and dark sections near `#101010`. Reserve electric blue around `#2f6fe4` for eyebrows, rules, links, and the scale curve, with restrained cyan/yellow/purple accents only in the dark arc and product data.
- Pair a geometric or neutral sans-serif for all UI and headlines. Scale the hero headline to roughly 56–72px desktop, section headlines to 30–44px, body copy to 15–18px, and labels to 10–12px; use weight and gray text to create the secondary hierarchy.
- Use one-pixel gray borders and grid rules throughout. Keep corners mostly square or gently rounded at 2–8px; reserve larger radii for product mockup cards, chat bubbles, and integration tiles. Use very soft shadows only around floating UI and screenshots, never as a general card treatment.
- Treat product visuals as the proof: use pale-gray canvases, realistic tables, lists, cards, charts, workflow nodes, and activity panels with tiny labels and subtle color-coded statuses.
- Keep dark sections architectural rather than glossy: near-black backgrounds, low-contrast borders, sparse content, large empty areas, and restrained luminous line art. Use the dark/light switch as a major interaction in the page rhythm.
- Where motion is added, keep it quiet: fade and translate section content on entry, allow workflow connectors or chart curves to draw in, and use gentle hover brightness/border changes on buttons, tabs, logo cells, and integration tiles. Avoid bouncy animation.

## Never
- Do not copy logos, wordmarks, product names, taglines, copy, illustrations, photography, screenshots, icon sets, customer names, or exact interface content from the reference.
- Do not present the result as Attio or imply an affiliation with it.
- Replace every reference-specific asset and message with the user’s own product, brand, data, terminology, and customer evidence while preserving the structural and visual principles above.