Apple app marketing site
Build calm, monochrome-capable, Apple-inspired static marketing sites for consumer iOS/macOS apps. Prefer Astro + Tailwind v4, system fonts, zero third-party analytics, and shared layout components.
When to use
- New app marketing site under
web/ (or similar) in a consumer app repo
- Visual polish / Apple-marketing redesign of an existing static landing site
- Re-theme of a prior site for a new product (colors, brand, fonts, assets)
- Migration from Vite multi-page HTML to Astro while preserving routes and legal copy
When not to use
- Native SwiftUI screens or in-app design tokens →
$apple-design-system / $swiftui-component-author
- App Store marketing screenshots and device frame exports →
$app-store-screenshots
- Complex SaaS web apps, auth, CMS, or server forms
Inputs: product name, domain, support email; routes and page content (or permission to scaffold placeholders); theme intent (light-first monochrome default, or accent / dual appearance); privacy posture (local-first messaging is common).
Output: static Astro site with BaseLayout, Header, Footer, and design tokens in global.css; content-faithful pages (legal/help unchanged unless requested); Vercel-ready build with trailing-slash routes; clear re-theme edit points for the next product clone.
Stack defaults
| Choice |
Default |
| Framework |
Astro (latest stable), static output |
| CSS |
Tailwind CSS v4 via @tailwindcss/vite |
| Fonts |
System stack only (system-ui / -apple-system / SF Pro) |
| JS |
Minimal: mobile nav; optional help search, FAQ <details>, mailto: support form |
| Deploy |
Vercel, project root = web/ when monorepo |
| Analytics |
None |
Architecture (copy this shape)
web/
├── astro.config.mjs # site URL, trailingSlash: "always"
├── vercel.json
├── package.json
├── public/ # favicon.svg, favicon.ico, optional og image
└── src/
├── layouts/BaseLayout.astro
├── components/ # Header, Footer, BrandMark, PhoneMockup, …
├── pages/ # index, help/, support/, privacy/, terms/
└── styles/global.css # @theme tokens — primary re-theme surface
Typical routes: /, /help/, /support/, /privacy/, /terms/.
Design principles (from the polish reference)
- Type-led hierarchy — display headlines with tight tracking; restrained body size and muted color.
- Generous whitespace — section padding ~96–128px desktop; avoid dense SaaS chrome.
- Monochrome default — near-black ink CTAs and links; accent optional via tokens.
- Minimal decoration — one premium device treatment; no sticker collages or heavy gradients.
- Device mockup — near-upright CSS iPhone, soft ground shadow, no floating badges.
- Static chrome — header/footer in HTML at build time (never JS-injected).
- Privacy-respecting — no third-party scripts; support via client
mailto: only.
Re-theme checklist (under one hour)
- Edit
@theme tokens in src/styles/global.css (colors, fonts, shadows, radii).
- Update product strings: brand label, nav, footers, titles, meta, domain in
astro.config.mjs.
- Replace
public/ favicons (and OG image if present).
- Adjust
BrandMark.astro or swap for a logo image in public/.
- Rewrite homepage copy and
PhoneMockup screen content for the new product.
- Port help/support/legal content or keep structure and replace article bodies carefully.
- Set
site URL and Vercel root; run npm run build.
Full token tables, component inventory, and page patterns:
- references/retheme-guide.md
- references/structure-and-pages.md
- references/landing-page-recipe.md — proven homepage anatomy (screens, benefits, social proof, pricing, FAQ), real-screenshot capture, and the mandatory link/form/width verification pass
Human-facing template pack (copy into consumer projects): repository path Templates/AppMarketingSite/ (README.md, RETHEME.md, STRUCTURE.md, CHECKLIST.md, LANDING_RECIPE.md, TOKEN_REFERENCE.css).
Implementation order
- Scaffold Astro + Tailwind in
web/; configure site + trailing slashes.
- Tokens +
BaseLayout / Header / Footer (static).
- Homepage (hero, trust, screenshot gallery, benefits, clarity visual, social proof, pricing, FAQ, final CTA band — anatomy in
references/landing-page-recipe.md).
- Secondary pages with shared
PageIntro + LegalProse.
- Minimal islands only where needed.
npm run build; responsive pass; Vercel config.
Verification
cd web && npm run build
Confirm routes emit under dist/ with trailing-slash directories, header/footer present without client JS, and no third-party script tags. Then run the full verification pass (every link, forms, desktop + mobile widths, a11y spot-checks) described in references/landing-page-recipe.md.
Reference implementation
Consumer example of this polish language: a consumer app marketing site (<App>/web/) — monochrome light-first Astro + Tailwind. Do not copy product-specific legal text; copy structure, tokens, and components.
1---2name: apple-app-marketing-site3description: Use when creating, re-theming, polishing, or migrating a static Astro + Tailwind marketing site for an iOS or macOS app (landing, help, support, privacy, terms). Do not use for SwiftUI app UI, App Store screenshot sets, or general web apps unrelated to Apple product marketing.4---56# Apple app marketing site78Build calm, monochrome-capable, Apple-inspired static marketing sites for consumer iOS/macOS apps. Prefer **Astro + Tailwind v4**, system fonts, zero third-party analytics, and shared layout components.910## When to use1112- New app marketing site under `web/` (or similar) in a consumer app repo13- Visual polish / Apple-marketing redesign of an existing static landing site14- Re-theme of a prior site for a new product (colors, brand, fonts, assets)15- Migration from Vite multi-page HTML to Astro while preserving routes and legal copy1617## When not to use1819- Native SwiftUI screens or in-app design tokens → `$apple-design-system` / `$swiftui-component-author`20- App Store marketing screenshots and device frame exports → `$app-store-screenshots`21- Complex SaaS web apps, auth, CMS, or server forms2223Inputs: product name, domain, support email; routes and page content (or permission to scaffold placeholders); theme intent (light-first monochrome default, or accent / dual appearance); privacy posture (local-first messaging is common).2425Output: static Astro site with `BaseLayout`, `Header`, `Footer`, and design tokens in `global.css`; content-faithful pages (legal/help unchanged unless requested); Vercel-ready build with trailing-slash routes; clear re-theme edit points for the next product clone.2627## Stack defaults2829| Choice | Default |30| --- | --- |31| Framework | Astro (latest stable), static output |32| CSS | Tailwind CSS v4 via `@tailwindcss/vite` |33| Fonts | System stack only (`system-ui` / `-apple-system` / SF Pro) |34| JS | Minimal: mobile nav; optional help search, FAQ `<details>`, `mailto:` support form |35| Deploy | Vercel, project root = `web/` when monorepo |36| Analytics | None |3738## Architecture (copy this shape)3940```text41web/42├── astro.config.mjs # site URL, trailingSlash: "always"43├── vercel.json44├── package.json45├── public/ # favicon.svg, favicon.ico, optional og image46└── src/47 ├── layouts/BaseLayout.astro48 ├── components/ # Header, Footer, BrandMark, PhoneMockup, …49 ├── pages/ # index, help/, support/, privacy/, terms/50 └── styles/global.css # @theme tokens — primary re-theme surface51```5253Typical routes: `/`, `/help/`, `/support/`, `/privacy/`, `/terms/`.5455## Design principles (from the polish reference)56571. **Type-led hierarchy** — display headlines with tight tracking; restrained body size and muted color.582. **Generous whitespace** — section padding ~96–128px desktop; avoid dense SaaS chrome.593. **Monochrome default** — near-black ink CTAs and links; accent optional via tokens.604. **Minimal decoration** — one premium device treatment; no sticker collages or heavy gradients.615. **Device mockup** — near-upright CSS iPhone, soft ground shadow, no floating badges.626. **Static chrome** — header/footer in HTML at build time (never JS-injected).637. **Privacy-respecting** — no third-party scripts; support via client `mailto:` only.6465## Re-theme checklist (under one hour)66671. Edit `@theme` tokens in `src/styles/global.css` (colors, fonts, shadows, radii).682. Update product strings: brand label, nav, footers, titles, meta, domain in `astro.config.mjs`.693. Replace `public/` favicons (and OG image if present).704. Adjust `BrandMark.astro` or swap for a logo image in `public/`.715. Rewrite homepage copy and `PhoneMockup` screen content for the new product.726. Port help/support/legal content **or** keep structure and replace article bodies carefully.737. Set `site` URL and Vercel root; run `npm run build`.7475Full token tables, component inventory, and page patterns:7677- [references/retheme-guide.md](references/retheme-guide.md)78- [references/structure-and-pages.md](references/structure-and-pages.md)79- [references/landing-page-recipe.md](references/landing-page-recipe.md) — proven homepage anatomy (screens, benefits, social proof, pricing, FAQ), real-screenshot capture, and the mandatory link/form/width verification pass8081Human-facing template pack (copy into consumer projects): repository path `Templates/AppMarketingSite/` (`README.md`, `RETHEME.md`, `STRUCTURE.md`, `CHECKLIST.md`, `LANDING_RECIPE.md`, `TOKEN_REFERENCE.css`).8283## Implementation order84851. Scaffold Astro + Tailwind in `web/`; configure `site` + trailing slashes.862. Tokens + `BaseLayout` / `Header` / `Footer` (static).873. Homepage (hero, trust, screenshot gallery, benefits, clarity visual, social proof, pricing, FAQ, final CTA band — anatomy in `references/landing-page-recipe.md`).884. Secondary pages with shared `PageIntro` + `LegalProse`.895. Minimal islands only where needed.906. `npm run build`; responsive pass; Vercel config.9192## Verification9394```bash95cd web && npm run build96```9798Confirm routes emit under `dist/` with trailing-slash directories, header/footer present **without** client JS, and no third-party script tags. Then run the full verification pass (every link, forms, desktop + mobile widths, a11y spot-checks) described in `references/landing-page-recipe.md`.99100## Reference implementation101102Consumer example of this polish language: a consumer app marketing site (`<App>/web/`) — monochrome light-first Astro + Tailwind. Do not copy product-specific legal text; copy structure, tokens, and components.
brbndon