# moonjar.ai

Source: https://moonjar.ai/
Captured: 2026-09-17
Tags: saas, landing, light, both, minimal, organic, calm, warm, confident, technical
Colors: #eef0e5, #d0d4bc, #21201e, #8f937e, #b0b599, #6f7069, #7f8d51, #4d513e
Type (h1): Inter Variable · 64px/65.28px · 400 · tracking -1.92px — "Your agent can finally make beautiful screenshots."
Type (h2): Inter Variable · 56px/58.24px · 400 · tracking -1.68px — "Works with your existing agent."
Type (body): Inter · 18px/27.9px · 400 · tracking -0.144px — "Moonjar is the first fully agentic screenshot app. Make beautiful screenshots wi"
Type (small): Geist Mono · 9px/normal · 400 · tracking 1.08px — "MADE WITH MOONJAR"
Type (button): sans-serif · 12px/normal · 400 — "Get early access"
Button (primary): "Get early access" — fill #2a2a27, text #ffffff, radius 999px, border 0px, padding 9px 17px, height 35px, type 12px/400
Radii: 15px (42), 999px (25), 7px (12), 34px (12), 14px (11)

## Images

- Hero (desktop): https://media.lvly.design/library/moonjar-ai/hero.webp?v=046eb326
- Page crop (mid-1): https://media.lvly.design/library/moonjar-ai/mid-1.webp?v=1565d318
- Page crop (mid-2): https://media.lvly.design/library/moonjar-ai/mid-2.webp?v=535d29ea
- Hero (mobile): https://media.lvly.design/library/moonjar-ai/mobile-hero.webp?v=017dbca8
- Full page (desktop): https://media.lvly.design/library/moonjar-ai/full.jpg?v=456385b3
- Full page (mobile): https://media.lvly.design/library/moonjar-ai/mobile-full.jpg?v=32dae94c
- Clip preview (mp4): https://media.lvly.design/library/moonjar-ai/video-aqk49e.preview.mp4?v=5a71b788

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.

## Steal-worthy details

- One photograph unifies everything. A motion-blurred green field sits behind the hero as a pale wash and behind every product mock on the page as wallpaper. Dozens of unrelated screenshots become a set, with no frame treatment and no shared chrome required.
- The highlighter on "fully agentic" — a soft yellow marker rectangle behind two words of an 18px subline. One handmade mark in a page with otherwise no decoration, and it lands on the claim the whole product rests on.
- The hero is an agent transcript, not a UI shot: a dark terminal card overlapping the light app window, with the prompt in mono, three tool-call rows (icon, bold action, gray detail, green check) and a closing status line with a small green dot. It demonstrates the workflow rather than the interface.
- Prompts as iMessage bubbles. Each feature card's blue bubble with a tail ("Show Ellie on my MacBook and iPhone", "Magnify the due date") sits half over the mock beneath it, so instruction and result are one object. The blue is the only saturated color on the page and it is always speech.
- Competitors as a chip row: "Not possible in" followed by two white pills carrying the real Screen Studio and CleanShot icons and their names in mono. Naming the field directly, at chip scale, reads as confidence instead of a comparison table.
- Mono is reserved for machine speech — terminal prompts, card labels, the "MADE WITH MOONJAR" watermark on a mock corner, style and frame values in the inspector row. Everything a person says is Inter.
- The whole document sits inside a rounded outer frame with the page ground visible at the corners, which makes the browser feel like it is displaying an app.
- The closing section is bounded by a dashed 1px hairline rather than a filled card, and opens with the 3D ceramic jar mascot centered above the heading — the one soft, rendered object on a page of flat surfaces.
- A changelog is shown as an actual product screenshot — dated entry, "New" and "Improved" status pills, a real headline and body — rather than described, so the feature list is its own evidence.
- Radii are stratified and consistent: 999px for every button and chip, 15px for cards and mocks, 34px for the big containers, 7px for the small inner elements.

## Style recipe

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.