heremyapp/docs llms.txt
View as Markdown

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).

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, 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).

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).