Banner Design

Design website banners, email headers, event banners, and hero sections. Covers standard dimensions, static and animated approaches, CTA hierarchy, responsive scaling, and seasonal/promotional frameworks.

Step 1: Load Design Context

1. Read .agents/design-context.md first -- brand colors (hex), fonts, style archetype
2. If missing, use the design-context Default Fallbacks and tell the user defaults were used
3. Banners are high-visibility brand touchpoints -- strict adherence to brand guidelines

Gemini Image Generation Path

Pipeline/CLI: image-generation. Prompt craft, cropping, and text-overlay fallback: graphic-design Step 3.

1. Generate at the Gemini ratio in the Step 2 tables, then --resize WxH (e.g. --aspect-ratio 21:9 --resize 1440x600). Export web/email banners at 2x (e.g. 2880x1200, 1200x400) and display at 1x for sharp retina rendering
2. Web heroes crop differently per breakpoint: keep the subject centered with clear space for text, or generate a separate 4:5 mobile version
3. For web and email, prefer generating the visual without text and setting headline + CTA as live HTML text (accessible, editable, and still visible when email images are blocked)
4. Read the output PNG: check spelling, legibility at the displayed size, and that the text area is clean. Fix one issue per follow-up turn

Example Prompts

• Hero Banner: "Create a wide website hero banner for [brand]. [product/service] visual on the right, headline '[text]' on the left in [font-style]. [color] gradient background. CTA button '[action]'. Modern, bold layout."
• Email Header: "Create a wide email header banner for [brand]. [campaign theme] with [color palette]. Logo centered at top, headline '[text]' below. Simple, clean design that renders in all email clients."
• Event Banner: "Create a wide event banner for [event name]. [style] background with [decorative elements]. Event name '[text]' prominently displayed. Date '[date]' and location '[venue]' below. [mood/tone]."

Step 2: Identify Banner Type and Dimensions

Website Banners

Email Banners

Email constraints: 600px wide (up to ~640), tables for layout, inline CSS, web fonts only render in some clients (Apple Mail, iOS) so always declare an Arial/Helvetica fallback, every image needs alt text, and key copy should be live text because many clients block images by default.

Event / Promotional Banners

Step 3: Hero Banner Composition

Layout Patterns

Split Hero (Content Left, Visual Right)

Grid 1fr 1fr, min-height 600px, 80px padding, 60px gap. Content side: eyebrow (14px uppercase, brand color), headline (clamp(36px, 4vw, 56px), weight 800, text-wrap: balance), description (18px, muted), CTA group (flex, 16px gap).

Centered Hero (Text over Background)

Flex column centered, min-height 600px, 80px padding. Background image with gradient overlay for legibility. Headline clamp(40px, 5vw, 72px) white, max-width 800px.

Asymmetric Hero (Off-Center Focal Point)

Grid 55% 45%. Content side with padding 80px. Visual side with clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%).

Full-Bleed Visual Hero (Minimal Text)

Background image cover, min-height 80vh, align-items: flex-end. Gradient scrim ::after for text legibility (0->0.7 black from bottom). Content at z-index 2, max-width 600px, white text.

Step 4: CTA Placement and Hierarchy

Primary + Secondary CTA Pattern

Use a flex container (gap: 16px; flex-wrap: wrap). Primary CTA: solid brand-color background, white text, 14px 28px padding, 8px radius, shadow. Secondary CTA: transparent bg, neutral border (1.5px), same size. Both: font-weight: 600, hover with translateY(-1px) or bg fill.

CTA Placement Rules

• Hero banner: CTA below the headline + description, left-aligned
• Centered banner: CTA centered, below description
• Sidebar banner: CTA at the bottom, full-width
• Notification bar: CTA inline with text, right side
• Email banner: CTA as a large button, centered

Step 5: Animated Banner Techniques

Animation Techniques

• Parallax: scroll container with perspective: 1px; height: 100vh; overflow-y: auto; background layer transform: translateZ(-1px) scale(2) (scale = 1 + depth / perspective)
• Animated gradient: background-size: 600% 600%, animate background-position over 12s
• Floating shapes: Absolute circles at 0.08 opacity, each with unique translate/rotate keyframes (7-10s duration)
• Text reveal: Wrap words in <span> with inline-block, animate translateY(100%) -> 0 with staggered 0.1s delays
• Typing effect: white-space: nowrap; width: 0, animate width with steps(), add blinking cursor via border-right
• Wrap all motion in @media (prefers-reduced-motion: no-preference) and keep the headline readable in the first frame

Step 6: Responsive Banner Techniques

Fluid Scaling

• Use clamp() for min-height, padding, font-size: e.g., font-size: clamp(28px, 4vw, 64px)
• At 768px breakpoint: stack split grids to 1fr, center text, reorder visual above text with order: -1
• Swap background images per breakpoint: mobile (default), tablet (768px), desktop (1200px)

Step 7: Seasonal and Promotional Frameworks

Sale / Discount Banner

Red gradient bg (135deg, #DC2626, #991B1B), centered layout. Discount number at clamp(60px, 10vw, 120px) weight 900. Add diagonal stripe decoration with repeating-linear-gradient(-45deg) at 0.03 opacity.

Product Launch Banner

Dark bg (#0F172A to #1E293B), centered text. Pill eyebrow badge (uppercase, 13px, brand color with translucent bg/border). Headline clamp(36px, 5vw, 64px) white. Add spotlight glow ::after with radial-gradient centered above.

Event Countdown Banner

Brand-color bg, centered. Countdown units in flex row (24px gap). Each unit: large number (48px/800, tabular-nums, dark translucent bg), small label below (12px uppercase). Separators between units.

Notification / Announcement Bar

Full-width, brand-color bg, flex centered, 10px 20px padding. Text 14px/500, links underlined bold. Close button absolute right.

Seasonal Themes

Step 8: Hero vs Sidebar Banner Patterns

Hero Banner Best Practices

• Full viewport width, 50-80vh height
• One clear headline, one clear CTA
• Background: gradient, image with overlay, or animated
• Content area max-width: 1200-1440px, centered
• Mobile: stack vertically, reduce heading size
• Load time: optimize background images, use CSS gradients where possible

Sidebar Banner Best Practices

• Fixed width (usually 300px)
• Taller formats (300x600) outperform shorter (300x250)
• Content must be fully visible without scrolling
• Clear border/separation from page content
• Minimal text: headline + CTA only
• Strong visual contrast from the surrounding page

Sidebar banner pattern: 300x600px, flex column, brand gradient bg, 32px 24px padding, white text. Logo top, visual center (flex:1), headline 22px/700, body 14px at 0.85 opacity, CTA at bottom (margin-top: auto, white bg, brand-color text, centered).

Step 9: Email Header Specifics

Email HTML has severe constraints. Use this approach:

Use table-based layout, max 600px, inline styles only. Font: Arial, Helvetica, sans-serif. Structure: outer <table> with gradient bg, logo <img> centered, <h1> (28px bold white), <p> (16px white 0.9 opacity), CTA as nested table with white bg + brand-color text link.

Email Design Rules

• Use Arial, Helvetica, sans-serif (web fonts unreliable in email)
• Background images: always set background-color as fallback (Outlook ignores bg images)
• Max width 600px, design for 320px mobile
• Images: always set width, height, alt, display:block
• Avoid CSS shorthand; use longhand properties
• Test in Litmus or Email on Acid

Quality Checklist

• Banner dimensions match the target placement (Gemini output cropped with --resize)
• Output PNG / rendered screenshot was Read: text spelled correctly and legible at display size
• Clear visual hierarchy: Headline > Description > CTA
• CTA is prominent and action-oriented
• Brand colors and fonts from design-context applied
• Text contrast: 4.5:1 normal, 3:1 large (>=24px or >=18.66px bold), measured over the busiest part of the image (add a scrim if needed)
• Responsive: scales well from mobile to desktop
• Animations are smooth and not distracting
• Load performance: CSS gradients preferred over heavy images
• Email banners use table layout and inline styles
• Seasonal/promotional banners match the occasion's visual language
• Self-contained HTML/CSS output