# batchbanana.com

Source: https://batchbanana.com/
Captured: 2026-10-16
Tags: saas, landing, light, both, minimal, corporate-clean, bento, confident, calm, premium, human, friendly
Colors: #fdfdfd, #1e75a4, #d5d4cd, #5b5149, #623f27, #afb3b1, #9a6742, #32302e
Type (h1): Inter · 72px/72px · 700 · tracking -1.8px — "AI image and video generation"
Type (h2): Inter · 48px/52.8px · 600 · tracking -1.68px — "Generate a batch of images from one prompt"
Type (h3): Inter · 20px/26px · 560 · tracking -0.3px — "Today"
Type (body): Inter · 18px/28.8px · 460 · tracking -0.18px — "Batch Banana is built for fast image and video creation with the best AI models,"
Type (small): Inter · 12px/16.2px · 480 · tracking -0.3px — "Nano Banana Pro"
Type (button): Inter · 14px/20px · 550 · tracking -0.14px — "Sign up"
Button: "Sign up" — fill #fcfcfc, text #0a0a0a, radius 9999px, border 0px, padding 0px 20px, height 40px, type 14px/550
Radii: 9999px (33), 10px (20), 8px (15), 12px (7), 18px (7)

## Images

- Hero (desktop): https://media.lvly.design/library/batchbanana-com/hero.webp?v=edddd16d
- Page crop (mid-1): https://media.lvly.design/library/batchbanana-com/mid-1.webp?v=821b9e37
- Page crop (mid-2): https://media.lvly.design/library/batchbanana-com/mid-2.webp?v=e0a128f3
- Hero (mobile): https://media.lvly.design/library/batchbanana-com/mobile-hero.webp?v=80018cae
- Full page (desktop): https://media.lvly.design/library/batchbanana-com/full.jpg?v=d32c0cc5
- Full page (mobile): https://media.lvly.design/library/batchbanana-com/mobile-full.jpg?v=e0d590e6
- Clip preview (mp4): https://media.lvly.design/library/batchbanana-com/video-8nlism.preview.mp4?v=29e44294

A near-white (#fcfcfc) Inter-only landing page for an AI image and video generator, where all the color is borrowed from the product's own output. The chrome is quiet: a two-tier wordmark, gray nav links, pill buttons, a 72px/700 headline set tight at -1.8px. The product UI sits inside a frame of painted storybook foliage against a cerulean sky (#1e75a4). That painting comes back behind the pricing cards, so it bookends the page as the brand's visual signature. In between, the page alternates soft-gray bento feature cards, one full-bleed near-black video band with a glassy model switcher, and two-column "eyebrow + headline + hairline checklist" sections paired with realistic app mockups. Each section gets its own colored icon-and-word eyebrow (pink, purple, red, green), so the many features stay easy to tell apart without the page getting loud.

## Steal-worthy details

- Product mockup set inside a painted illustration frame: a white app window inset about 84px from the sides of a full-width 24px-radius artwork panel. The art shows only as a border, so the product reads as the hero and the art supplies all the warmth
- Split hero baseline: headline and lede hold the left column, and the single dark pill CTA ("Start creating for free", #1a1a1a, 56px tall) sits alone at the far right, aligned to the lede's last line instead of under it
- Header starts with a ghost "Sign up" pill (#fcfcfc fill, faint ring) and fills it solid black once the page scrolls, as the bar gains a white fill and a hairline bottom border. The conversion button gets louder only once the hero CTA is out of view
- Intro statement written as one sentence, with the key nouns ("your style", "the agent", "MCP") in heavy ink and the rest in mid-gray. It works as a table of contents for the sections below
- One full-bleed near-black band for video only, with a segmented model switcher (Flux / Kling / Seedance) floating over the footage as a translucent dark pill. The selected tab gets a lighter glass fill
- Per-section eyebrows built from a small colored glyph plus a word in the same hue (Agent in pink, MCP in purple, Image editing in green), so each feature has its own color key while the headlines stay black
- MCP demo staged as a ChatGPT-style transcript with a "Batch Banana · generate_image ✓" tool-call chip set in monospace. It shows the integration working instead of describing it
- Feature checklists as rows with a 16px line icon, 18px text and hairline dividers between rows, no bullets and no cards. Dense, but it reads like settings, not marketing
- Pricing cards laid over the same painted foliage as the hero, which brings back the hero's color for the decision moment

## Style recipe

Build on #fcfcfc with near-black ink (#0a0a0a) and keep the interface chrome nearly colorless. Color comes from imagery, plus one brand blue, #1e75a4, used for the app icon, chat bubbles and painted skies. Set everything in Inter. Display: 72/72 at weight 700 with -1.8px tracking. Section headings: 48/52.8 at 600, -1.68px. Card titles: 20px/560, -0.3px. Body: 18/28.8 at 460, -0.18px, in mid-gray (#6b6b6b), with key nouns bumped to ink. UI labels: 12–14px at 480–550 with slight negative tracking. Use variable-weight in-betweens (460, 550, 560) rather than stock 400/500/600. Make all buttons pills (9999px), 40px tall in the nav with 20px side padding and 14px/550 text. The primary is solid #1a1a1a with white text, and the secondary is a ghost pill with a faint ring. Card radii run 8, 10, 12 and 18px, with 24px reserved for large media panels. Feature cards are flat light-gray (#f4f4f3) tiles with no border or shadow, arranged as a bento of one wide and two half-width tiles. Show realistic product UI in white windows with hairline (#e5e5e5) borders and soft, very diffuse shadows. Give the brand one illustrative motif, a painted or textured artwork, and use it only as a frame around product UI and behind pricing, never as decoration elsewhere. Head each section with a 16px colored glyph and a one-word label in the same hue (pink, purple, red, green), then the black headline, the gray lede and a checklist of icon rows divided by hairlines. Give dark video content one full-bleed near-black band (#0a0908) and float controls over it as translucent dark glass pills. Keep generous vertical rhythm, with roughly 160px between sections and a 1152px content column.