Banner Design

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

Type	Dimensions	Gemini ratio	Use Case
Hero Banner (Full Width)	1440 x 600	21:9	Homepage hero, above the fold
Hero Banner (Tall)	1440 x 800	16:9	Full-viewport hero section
Section Banner	1440 x 400	4:1	Interior page section divider
Sidebar Banner	300 x 250 or 300 x 600	5:4 / 9:16	House promo (paid placements: ad-creative-design)
Notification Bar	Full width x 48px	Top-of-page announcement
Cookie/Consent Bar	Full width x 80px	Bottom notification

Email Banners

Type	Dimensions	Gemini ratio	Notes
Email Header	600 x 200	21:9	Standard email width
Email Hero	600 x 300	16:9	Full-width email hero
Email Banner	600 x 150	4:1	Compact promotional

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

Type	Dimensions	Gemini ratio	Use Case
Event Banner (Wide)	1200 x 400	21:9	Event page header
Meetup Banner	1200 x 675	16:9	Meetup.com event cover
Eventbrite Banner	2160 x 1080	16:9	Eventbrite event cover (2:1)
Conference Banner	1920 x 600	4:1	Conference website hero

---

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

Season/Event	Colors	Elements	Mood
Spring	Greens, pinks, yellows	Flowers, leaves, butterflies	Fresh, renewal
Summer	Blues, oranges, bright yellow	Sun, waves, palm trees	Energetic, warm
Fall	Oranges, reds, browns	Leaves, pumpkins, warm tones	Cozy, harvest
Winter	Blues, whites, silvers	Snowflakes, frost, evergreen	Crisp, festive
Black Friday	Black, gold, red	Bold typography, price tags	Urgency, luxury
New Year	Gold, black, champagne	Confetti, fireworks, sparkle	Celebration
Valentine's	Reds, pinks, rose gold	Hearts, flowers, soft gradients	Romantic, warm

---

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