moonjar.ai

Moonjar is a warm off-white product page for a Mac screenshot tool that sells itself by showing its own output. The ground is #fafaf7 and the entire document sits inside a rounded frame, so the page reads as a window rather than a canvas. The hero's only color is a pale sage wash — #eef0e5 fading up out of a motion-blurred photograph of grass — bleeding from the bottom of the first viewport into the white behind the header; that same blurred green field then reappears as the wallpaper behind every device mock for the next 8,000px, which is what makes forty separate screenshots read as one family. Type is Inter Variable and nothing else: the headline at 64px/65 tracked −1.92px ("Your agent can finally / make beautiful screenshots."), an 18px/28 subline at −0.14px in a warm gray, and 12px button labels. The subline carries the page's best small move — "fully agentic" sits under a soft yellow marker highlight, a felt-tip gesture in an otherwise immaculate layout. Below it a pill pair: solid #2a2a27 "Get early access" at 35px with 9/17 padding, and a white "See how it works ›" beside it. Then the proof, and it is unusually literal: a dark Claude Code terminal window overlapping the bottom-left of Moonjar's own app window, showing a typed prompt in mono ("Make a hero shot of Ellie's Today view") above three tool-call rows with avatars and green checkmarks, ending in "Done. It's open in Moonjar." The agent transcript is the demo. Further down the page turns to feature cards at a 15px radius on the flat ground, each labeled by a mono chip in the top-left ("Multi-device shots", "Unique effects") and by an iMessage-blue speech bubble sitting on the mock's top edge carrying the literal prompt that produced it. Competitors are named inline as a chip row — "Not possible in [Screen Studio] [CleanShot]", real app icons and all — directly under a 56px headline. A 3D ceramic jar with two dots for eyes serves as the mark, the favicon and the opener of the closing section, which is wrapped in a dashed hairline panel instead of a solid card. Calm, natural, and technically fluent: the restraint of a design tool, with a photograph doing all the warming.

Build a light product page on a warm off-white #fafaf7 and put the whole document inside a rounded outer frame so it reads as a window. Choose one photograph with motion blur in a muted natural hue — a green field works — and use it twice: as a pale wash fading up out of the hero (#eef0e5 into #d0d4bc, no hard edge, running behind the header) and as the wallpaper behind every product mock on the page. That single image is the accent; do not add another. Set everything in Inter Variable: display at 56–64px, line-height 1.02, tracking −0.03em, near-black #21201e; sublines at 18px/28 tracked −0.008em in a warm gray #6f7069; labels and buttons at 12–15px. Reserve a monospace face for machine speech only — terminal prompts, card labels, watermarks, inspector values — and keep human copy in the sans. Buttons are full pills (999px): primary solid near-black #2a2a27 with white text at 35px and 9/17 padding, secondary white with a hairline and a trailing chevron. Radii: 15px for cards and device mocks, 34px for section containers, 7px for inner chips. No shadows heavier than a 1px hairline and no gradients on UI. Put one hand-drawn gesture on the page and only one — a soft yellow marker highlight behind the two words that carry the claim. For the hero, show the workflow rather than the interface: a dark terminal card overlapping the light app window, with a typed prompt in mono, three rows of tool calls (small icon, bold action, gray detail, green check) and a closing status line with a green dot. Label feature cards twice — a mono chip in the top-left corner for the capability, and an iMessage-blue speech bubble with a tail overlapping the mock for the literal prompt that produced it — and let that blue be the only saturated color anywhere. Name competitors inline as a row of white chips with their real app icons under a headline, at chip scale. Bound the closing section with a dashed 1px hairline instead of a fill, and open it with one soft 3D rendered object — a mascot, a ceramic form — as the only non-flat element on the page. Show real product screenshots with honest density (status pills, dates, inspector rows) rather than simplified renders, and watermark one of them in small mono uppercase.