moonjar.ai · Sep 2026

A quiet, off-white (#fafaf7 / #f5f6f5) Framer landing page for a Mac app that lets coding agents produce App Store screenshots. It is almost entirely grayscale: warm near-black ink (#191916, CTA #2a2a27), a mid-gray subhead (#8d8d8d), and hairline-bordered surfaces rounded at 15–18px. The whole page is a product demo. A macOS window mock under the hero holds the agent's task rows, feature cards "prompt" the product through blue chat bubbles, and every section label is a Geist Mono pill. Color only shows up in the product imagery: a lavender wash (#8982d9) bleeding up from the bottom of the hero, blurred meadow photography behind device mockups, and third-party app icons. Type is Inter at medium weight, set tight (52px / -1.56px) and centered, so the page reads calm and confident rather than loud.

Build on a warm off-white canvas (#fafaf7, section fills #f5f6f5) with warm near-black ink (#191916) and gray secondary text (#8d8d8d, #717273). Keep the interface itself grayscale and let color come from imagery and one accent: soft lavender #8982d9, used as a radial wash rising from the bottom corners of the hero and as small tag chips inside product UI. Use iMessage blue (#0a84ff-ish) only for chat-bubble prompts. Typography: Inter throughout. Display at 52–56px, weight 500 (or 400 on the variable cut), line-height ~1.02, tracking -0.03em, centered. Body at 18px / 1.55, tracking -0.008em, in gray. Geist Mono at 12–14px for eyebrow labels, captions and chip names; 9px uppercase with +0.12em tracking for micro-labels. Buttons are 999px pills: primary solid #2a2a27 with white text, ~11px 18px padding (larger in the hero), weight 500. Secondary is white with a 1px #d4d3d6 hairline border and a trailing chevron. Surfaces are hairline-bordered cards on the #f5f6f5 tone with 15–18px radii, and 34px for large showcase panels. No heavy shadows, just a faint soft drop under device and window mocks. Put section eyebrows in white mono pills with a hairline border, centered above a short, confident headline and a two-to-three-line gray subhead. Show the product, not illustrations: macOS window chrome with traffic lights, real device mockups, and blurred photographic backdrops. Frame features as literal prompts in blue chat bubbles on 2×2 bento cards of unequal widths. Mark one key phrase per subhead with a pale-yellow highlighter chip and an arrow instead of a button. Leave generous vertical space (160px+) between sections and keep everything centered on a ~1120px column.