## 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/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060376-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060016266.webp
- Design on Kage: https://kage.design/designs/arc-landing-page

## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, colours, typefaces, logo, screenshots). Wait for the answers before writing any code. Everything below is a design language to apply to *their* product — never a recreation of the reference site.

## Page structure
1. **Top nav** — a saturated cobalt bar with a small logo left and 4–5 short text links; its bottom edge is a zigzag/scalloped cut rather than a straight line.
2. **Hero** — a warm pastel gradient (peach → pink → cream) with a centred large display headline, one grey subline, and a dark pill CTA carrying a small app icon; beneath it, one large browser-style product screenshot showing the product answering a real question.
3. **Press quote band** — a full-width deep cobalt field with subtle noise texture: an oversized pull quote in a lighter tint of the brand blue, a small attribution, a fine-print disclaimer line, two pill download buttons (one light, one darker), then an oversized product screenshot with a colour-tinted UI.
4. **Press ticker** — a slim cream marquee band with alternating quotes and bold blue publication names, bounded by zigzag edges.
5. **Feature section 1** — white background, centred cobalt heading (two lines), grey subline, then one full-width rounded product screenshot.
6. **Feature section 2** — same pattern: new heading, new subline naming two product concepts in bold, one screenshot with a strongly colour-tinted sidebar.
7. **Feature section 3** — same pattern again: heading, subline, one split-view screenshot plus a small floating tool/theme panel overlapping its corner.
8. **Privacy interlude** — a text-only breather: centred heading, two-line subcopy, and a single text link with an arrow.
9. **Community quotes** — a cream band with a short row of playful doodle icons, then four bold blue user quotes in columns, each ending in a small outlined handle pill.
10. **Final CTA** — a cobalt textured band with a short headline (one word italicised for emphasis) and a single light pill button.
11. **Footer** — cobalt, zigzag top edge, two link columns, small social icons, and a serif wordmark in the bottom-right corner.

## Design language
- **Build hierarchy with band colour, not decoration.** Alternate sections between saturated cobalt fields, warm pastel gradients, cream panels and plain white. Cobalt = brand voice moments (nav, manifesto quote, CTA, footer); white = product explanation; cream = voices of others (press, users).
- **Cobalt blue ≈ #4B4FE8** as the primary brand colour; use a lighter tint (≈ #9AA0F5) for large text sitting on it, and a subtle noise/texture overlay (2–3% opacity) on every saturated field so flat colour feels tactile.
- **Warm palette:** peach ≈ #F8D3A0, pink ≈ #F2B9CC, cream ≈ #FAF2E1. The hero gradient moves peach → pink → cream; grey body text ≈ #6E6E73; ink ≈ #1C1C1E.
- **Zigzag edges are the signature move.** Separate every band with a small zigzag/wave divider (SVG path or CSS mask), never a hard straight border. Keep amplitude small (~8–12px).
- **Type pairing:** a characterful display serif for the single biggest hero statement; a rounded geometric sans for section headings (set in cobalt, 36–44px, tight leading); the same sans in grey at 16–18px for sublines. Body copy is always one short sentence or two — never paragraphs.
- **One idea per feature section.** Each is: centred heading + one grey subline with 1–2 bolded keywords + exactly one screenshot. No bullet lists, no icon grids, no cards.
- **Screenshots are the content.** Render product imagery large (~80–90% of container width), with 12–16px corner radius, a soft diffuse shadow, and UI chrome tinted in brand colours so each screenshot reads as a colourful composition. Occasionally let a small floating panel (toolbar, picker) overlap the screenshot edge for depth.
- **Buttons are pills** with generous horizontal padding: dark charcoal-on-gradient for the hero, white/near-white text-on-cobalt for colour bands, light lavender for secondary. Hover = slight scale or brightness shift, nothing more.
- **Proof comes in two flavours:** a slim auto-scrolling cream marquee of short press quotes with bold blue source names, and a static wall of short, punchy, sentence-length user quotes set bold in cobalt with tiny outlined handle pills beneath.
- **Rhythm down the page:** dense and loud at the top (gradient + cobalt + marquee), then longer, quieter white stretches for features, a text-only breather before the final conversion block, then a loud cobalt close. Vertical padding is generous everywhere (~96–160px per section).
- **Playfulness through small details only:** doodle-style icons, an italicised word inside a headline, tinted sidebars — never through layout complexity.

## Never
- Do not use the Arc or Dia logos, icons, product names, wordmarks, press quotes, user quotes or screenshots from the reference.
- Do not copy any of its copy or its "The Browser Company" attribution.
- Do not present the result as Arc or imply any affiliation with it — apply this design language to the user's own product and brand assets.