Build a responsive app download landing page for a product that connects other apps to a website builder. Treat it as a real client page, ready to ship.
Ground and palette: a saturated raspberry page ground (#A8174F) with a faint diagonal hatch (1px lines of #1E0E16 at about 17 percent opacity, every 12px, at 135 degrees). Reading happens on warm cream cards (#FBF1EA) with ink text (#1E0E16). Accent is marigold (#F2B632) for the stepper and button labels; deep plum (#5B1638) for small labels; a darker raspberry (#8E1243) for links on cream. No gradients, no glow, no neon.
Type: Bodoni Moda 700 for the headline and card headings (high contrast didone), Bodoni Moda italic 500 for one pullquote and a single italic phrase in the headline; Instrument Sans 400/600 for body at 19px with 1.65 line height; Fragment Mono for small uppercase labels only.
Structure, top to bottom:
1. A plain top nav: wordmark left, three links right.
2. Hero, two columns. Left: a ticket-stub masthead (a cream strip with half-circle notches cut from both ends and dashed perforations between three labelled fields: issue, date, reading time), then a 15ch Bodoni headline, a two-sentence deck, and a store-style button (ink rectangle, 12px radius, small mono label over a larger line naming the real destination) beside an underlined text link. Right: a transparent cut-paper illustration of a phone, tilted 4 degrees, overlapping the band below it.
3. A full-width ink compatibility band: a mono label "Works with", the supported apps as plain text chips with a thin cream outline, and one sentence on how other apps can connect.
4. The style or about block on the ground in cream: name, one italic line, two short paragraphs, small cream tags.
5. The main content as an install stepper: one centred 860px column, a 3px marigold rail down its left gutter, and a 56px marigold numbered node at the top left of each cream card. One card per step: what it does, how it works, workflow, a design pattern card inverted to ink, the prompt, a short note, sources.
6. Inside the first card: a short FAQ built from native details and summary elements with a plus mark that rotates to a cross.
7. In the ink card, a working demo: three status nodes (In project, Branch, Live) on a track, and buttons that advance the state; the Live step only changes when the Publish button is pressed.
8. Footer navigation as three translucent ink tiles, then a colophon.
Readability and craft guardrails: body text at least 18px with line height at least 1.6 and 60 to 75 characters per line; WCAG AA contrast for every small label on its real background; cards 12 to 14px radius, buttons 8 to 12px, circles only for stepper nodes; one soft drop shadow, on the hero illustration only; hover and focus states on every link and button with 150ms easing and a prefers-reduced-motion guard. Images contain no readable text. No fake search bars, no logo walls, no three identical feature cards, no accent stripe on the left of cards. On mobile the hero stacks with the phone below the text, the rail moves to a 16px gutter with 36px nodes, and every split goes to one column.
