# moonjar.ai · Sep 2026

Source: https://moonjar.ai/
Captured: 2026-09-28
Tags: saas, landing, light, both, minimal, bento, calm, friendly, confident, technical, human
Colors: #f5f6f5, #d4d3d6, #8d8d8d, #b0b0b5, #717273, #545452, #191916, #8982d9
Type (h1): Inter · 52px/53.04px · 500 · tracking -1.56px — "What if Claude Code updated your screenshots every time you shipped?"
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 a fully agentic studio for product screenshots and videos. Your agent"
Type (small): Geist Mono · 9px/normal · 400 · tracking 1.08px — "MADE WITH MOONJAR"
Type (button): sans-serif · 12px/normal · 400 — "Get early access"
Button: "Get early access" — fill #2a2a27, text #ffffff, radius 999px, border 0px, padding 11px 18px, height 39px, type 12px/400
Radii: 15px (42), 999px (23), 18px (14), 34px (12), 14px (10)

## Images

- Hero (desktop): https://media.lvly.design/library/moonjar-ai-v2/hero.webp?v=bf4db15a
- Page crop (mid-1): https://media.lvly.design/library/moonjar-ai-v2/mid-1.webp?v=d2a3ecf1
- Page crop (mid-2): https://media.lvly.design/library/moonjar-ai-v2/mid-2.webp?v=2778ed05
- Hero (mobile): https://media.lvly.design/library/moonjar-ai-v2/mobile-hero.webp?v=862d8c36
- Full page (desktop): https://media.lvly.design/library/moonjar-ai-v2/full.jpg?v=d30dea2d
- Full page (mobile): https://media.lvly.design/library/moonjar-ai-v2/mobile-full.jpg?v=34c37e4c
- Clip preview (mp4): https://media.lvly.design/library/moonjar-ai-v2/video-8clfcj.preview.mp4?v=21118e0e

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.

## Steal-worthy details

- Inline brand glyph in the headline: the Claude Code logo is set as a cap-height tile mid-sentence, so the partner's name reads as an icon plus a word without a logo wall
- Highlighter chip in the subhead: one phrase ("fully agentic →") gets a pale-yellow marker fill, an underline and an arrow, and turns into an inline link without any button chrome
- A dark pill paired with a white ghost pill: the primary is a solid #2a2a27 fill, and the secondary is a white pill with a hairline border and a trailing chevron. Both are 999px, so the weight difference alone carries the hierarchy
- Hero product shown as a macOS window with traffic lights, grouped by agent ("Claude Code · 3 in progress") and holding the output thumbnails. The UI is the proof, not an illustration
- A lavender radial wash that only rises from the hero's bottom corners behind the window, adding color on a gray page without tinting the text area
- A strip of agent and tool logos as borderless monochrome and color app icons in one centered row under a plain "Works with your existing agent" headline
- Geist Mono eyebrow pills (white fill, hairline border, fully rounded) replace the usual small-caps eyebrow over each section, a quiet developer cue
- A grid of output thumbnails with monospace captions ("Your day", "Mark done") under each, framed by one line of body copy that states the before/after: "One message in, seven finished shots out"
- Feature cards pair a mono label pill with an iMessage-blue chat bubble (tail included) holding the literal prompt, then the rendered result. Each feature is framed as something you can ask for
- A "Not possible in" line followed by competitor chips (Screen Studio, CleanShot), each an app icon plus a mono name in a white pill: a comparison without a table
- A founder-letter card ("Hi, I'm Chris") set in body type with a signature avatar beside a cluster of tilted app-icon stickers, so the page ends human before the final CTA

## Style recipe

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.