# Design guide A good landing page looks made for its product, not generated from a template. Use this guide when you create or redesign a page. When the user already has a page, keep its design and only add what is missing ([Landing page checklist](https://heremyapp.com/docs/landing.md)). ## Start from the product - **Brand**: take the accent color from the app icon or the app's own UI, and keep backgrounds neutral. Use the app's typeface if it has a distinctive one. Ask the user for a color or mood only when the product has no visual identity yet ([Start here](https://heremyapp.com/docs/start.md), step 4). - **Real material**: real screenshots, real feature names, real numbers. Never invent testimonials, ratings, download counts, customer logos, awards or press quotes. - **Words**: say what it does, for whom, in plain and specific language. Lead with the benefit, then the feature. Avoid hype ("revolutionary", "seamless", "unleash", "supercharge", "next-generation"). - **One primary action** per page: download, open the app, install from a store, or sign up. Everything else is a secondary link. ## Layout - **Order**: hero (icon, name, one-line value proposition, primary button) → proof (screenshot or short video) → three to six features → how it works or how to install → details (requirements, version, size, price) → FAQ → footer (contact, Privacy, Terms, language switcher). - **Width**: about 60-75 characters per line for text (`max-width: 40rem`); screenshots up to about `72rem`. - **Type**: 16-18px body text with 1.5 line height. Use the system font stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif`) or one font file served from the site itself (woff2). Loading fonts from Google Fonts sends visitors' IP addresses to Google; a German court has treated that as a GDPR violation, so self-host fonts or mention it in the privacy policy. - **Phones first**: one column below about 720px, tap targets of at least 44px, no horizontal scrolling. - **Light and dark**: follow `prefers-color-scheme`, keep text contrast at least 4.5:1, and check both. - **Images**: 2x resolution, optimized PNG, JPEG or WebP, `width` and `height` attributes, `loading="lazy"` below the fold. Keep each image under about 300 KB; the whole site must stay under 20 MiB. - **Motion**: subtle, and respect `prefers-reduced-motion`. - **Self-contained**: plain HTML and CSS with a little JavaScript is enough. Every external script, font, embed or tracker must also appear in the privacy policy. - **Accessible**: real headings in order, alt text, visible focus, descriptive link text, `lang` on every page. ## By product type ### Mac and desktop apps (.pkg, .dmg, .zip) - Hero: large app icon, name, value proposition, and a "Download for macOS" button with version, size, minimum macOS and Apple silicon or Intel beneath it. - Screenshots as real window captures with their shadow; light and dark pairs if the app supports both. - Sections: features, how it works, install steps (open the installer, move to Applications, first-launch prompts such as Full Disk Access or Accessibility, with screenshots), how to uninstall, release notes, SHA-256, FAQ. - Calm and native: system font, generous spacing, restrained color. Avoid web-SaaS gradients. - Also on Windows or Linux: show a button per platform; a few lines of JavaScript may highlight the visitor's own. - **Menu bar apps** (no Dock icon): show a cropped capture of the menu bar icon with its open menu, say where the icon appears after launch, and mention "Launch at login" if the app has it. - Permissions the app needs (Accessibility, Screen Recording, Full Disk Access): explain why, and show the System Settings step with a screenshot. ### iPhone, iPad and Android apps - Official App Store and Google Play badges linking to the store pages, used as their brand guidelines describe. No installers on the page. - Three to five portrait screenshots, optionally in device frames, and a QR code to the store page for desktop visitors. - A privacy summary that matches the store's privacy labels, and a support section. Show ratings only if they are real and current. ### Web apps and SaaS - Primary button "Open app" or "Start free" linking to the app's own URL; heremyapp hosts only the landing page. - A product screenshot or a short looping video in a browser frame. - Problem → solution → features → pricing table (if paid) → FAQ → the call to action again. - Trust: who runs it, how data is handled, status or support links. ### Developer tools, CLIs and libraries - The install command in a copyable code block in the hero (`brew install ...`, `npm i ...`), with a GitHub link. - Code samples, a terminal recording (video, or a still), docs, license and changelog links. - Monospace accents are fitting; a dark default is fine for this audience, but keep a light mode. ### AI tools and agents - Concrete examples of real input and output, and what it cannot do. - Which data goes to which model provider, also stated in the privacy policy. - Avoid stock "AI" visuals (purple gradients, sparkles, robot heads) unless they are the brand. ### Games - Key art or gameplay video at the top, platform buttons, trailer, a short feature list, age rating if any. - Bolder colors and a display font for headings suit games; keep the play or download button obvious. - A press kit (logo, screenshots) as a .zip installer artifact. ### Browser extensions - Chrome Web Store, Firefox Add-ons or Safari buttons, before-and-after screenshots, and every permission the extension asks for, explained in plain words. ### Digital products (templates, e-books, presets, courses) - Cover image or mockups, a list of what is included, sample pages, the price and a buy button linking to the payment provider (heremyapp does not process payments). - Refund policy and seller details where consumer law requires them ([Landing page checklist](https://heremyapp.com/docs/landing.md)). ### Freelancers, studios and services - Who you are and what you offer in one line, selected work with outcomes, how you work, how to engage or prices, and a contact button. Business details where the law requires them. ### Coming soon and waitlists - Name, a one-line promise, a teaser image, and a sign-up link to an external form or an email address; the privacy policy covers that form. ## Before you deploy - Look at the page at phone width and in dark mode. - Check the link preview image (`og:image`, 1200×630, absolute URL on `site_url`). - Deploy and work through the `advice` list ([Static sites](https://heremyapp.com/docs/sites.md)).