batchbanana.com

Batch Banana - AI Image and Video Generationsaved 2h ago · captured 2h ago

Nine details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #FDFDFD

ground#fdfdfd·81.09%accent#1e75a4·3.79%#d5d4cd·2.79%#5b5149·2.22%#623f27·2.13%#afb3b1·1.07%#9a6742·1.06%#32302e·0.94%

Sized by coverage · click to copy.

Typography1 family · 5 styles · Inter

AI image and video generation

Inter · 72/72 · 700 · -1.8px

Generate a batch of images from one prompt

Inter · 48/53 · 600 · -1.68px

Today

Inter · 20/26 · 560 · -0.3px

Body

Batch Banana is built for fast image and video creation with the best AI models,

Inter · 18/29 · 460 · -0.18px

Small

Nano Banana Pro

Inter · 12/16 · 480 · -0.3px

Specimens are the page's own words at their measured metrics.

ButtonsSign up1 style

primary · fill #fcfcfc · label #0a0a0a · radius 9999px · border 0px · padding 0px 20px · height 40px · type 14px / 550

Shape5 radii · 82 uses

9999px33 uses · 40%

10px20 uses · 24%

8px15 uses · 18%

12px7 uses · 9%

18px7 uses · 9%

AnalysisA 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.

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.

Style recipeBuild on #fcfcfc with near-black ink (#0a0a0a) and keep the interface chrome nearly colorless.

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.

Details9 worth noting

batchbanana.com — the captured page — Landing, 1440 × 900 · captured Oct 16, 2026

1Painted frame around the product mock
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
2CTA pinned to the right baseline
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
3Sign-up pill inverts on scroll
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
4Ink-weighted summary sentence
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
5Glass model switcher on video
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
6Color-coded icon eyebrows
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
7Tool-call chip in a chat mock
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
8Hairline-divided icon checklist
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
9Pricing on the hero's painting
Pricing cards laid over the same painted foliage as the hero, which brings back the hero's color for the decision moment