managarten/memoro/apps/landing/docs/blog-image-guidelines.md

Blog Image Guidelines

Overview

This document defines the visual standards and guidelines for all blog images on the Memoro website. Following these guidelines ensures consistency, professionalism, and brand alignment across all content.

Visual Identity

Core Principles

• Modern & Professional: Clean, contemporary design that reflects Memoro's innovative approach
• Tech-Forward but Human-Centric: Balance technical sophistication with approachability
• Consistent Brand Experience: Every image should feel like part of the Memoro family
• Accessibility First: High contrast, clear visuals that work for all users

Brand Colors

• Primary Yellow: #F8D62B
• Accent Colors: Use sparingly for highlights
• Backgrounds: Primarily white (#FFFFFF) or black (#181818)
• Text on Images: Dark gray (#333333) for maximum readability

Image Types & Specifications

1. Hero Images

• Purpose: Article headers, primary visual impact
• Dimensions: 1200x630px (Open Graph optimized)
• Style: Bold, eye-catching, sets the article tone
• File Size: Max 200KB (optimized WebP)

2. Concept Visualizations

• Purpose: Abstract representations of complex ideas
• Dimensions: 800x450px
• Style: Minimalist diagrams, icons, and shapes
• Use When: Explaining abstract concepts, workflows, or systems

3. Workflow Diagrams

• Purpose: Step-by-step process illustrations
• Dimensions: 800x450px or 1000x600px for complex flows
• Style: Numbered steps, clear flow direction, consistent iconography
• Elements: Arrows, numbered circles, descriptive labels

4. Comparison Graphics

• Purpose: Before/after, with/without scenarios
• Dimensions: 800x450px
• Style: Split-screen or side-by-side layouts
• Key Feature: Clear visual distinction between states

5. Data Visualizations

• Purpose: Statistics, metrics, performance indicators
• Dimensions: 600x400px
• Style: Clean charts, modern gauges, progress indicators
• Colors: Use brand colors for data points

Design Standards

Typography on Images

• Headings: Sans-serif, bold, minimum 24pt
• Body Text: Sans-serif, regular, minimum 16pt
• Font Suggestions: Inter, Roboto, or system fonts
• Contrast: Always ensure WCAG AA compliance

Iconography

• Style: Outline or filled, consistent weight
• Size: Minimum 32x32px for visibility
• Sources: Heroicons, Tabler Icons, or custom
• Consistency: Use same icon set throughout article

Composition Guidelines

• Spacing: Generous whitespace, avoid clutter
• Alignment: Consistent grid system
• Hierarchy: Clear visual priority
• Balance: Even distribution of visual weight

AI Image Generation Prompts

Standard Prompt Structure

Create a [IMAGE TYPE] showing [DESCRIPTION].
Style: Modern, professional, clean design.
Colors: Use blue (#0066CC) and purple (#6B46C1) as primary colors.
Background: White or light gray.
Additional: [SPECIFIC REQUIREMENTS]
Dimensions: [WIDTH]x[HEIGHT]px
Avoid: Stock photo clichés, overly complex designs, dark backgrounds

Example Prompts by Type

Hero Image

Create a hero image visualizing AI-powered meeting assistance.
Style: Modern, professional, clean design with abstract geometric shapes.
Colors: Gradient from blue (#0066CC) to purple (#6B46C1).
Background: White with subtle geometric patterns.
Include: Floating interface elements suggesting productivity.
Dimensions: 1200x630px
Avoid: Literal office scenes, stock photo style

Workflow Diagram

Design a 4-step workflow diagram for meeting documentation.
Style: Flat design with numbered steps connected by flowing lines.
Colors: Primary blue (#0066CC) with purple accents.
Each step: Icon + short label, connected by arrows.
Background: Clean white.
Dimensions: 800x450px

Do's and Don'ts

✅ DO

• Use consistent visual language across article series
• Include subtle gradients and modern effects
• Maintain high contrast for accessibility
• Add subtle shadows for depth
• Use brand colors prominently
• Keep text minimal and impactful
• Test images at different sizes

❌ DON'T

• Use generic stock photos
• Include photos of real people (unless team photos)
• Create overly complex or busy designs
• Use conflicting color schemes
• Add unnecessary decorative elements
• Use low-resolution or pixelated graphics
• Forget mobile optimization

File Management

Naming Convention

[article-slug]-[image-type]-[number].webp

Examples:

• prompt-engineering-hero-01.webp
• ai-assistant-workflow-01.webp
• decision-making-comparison-01.webp

Storage Structure

/public/images/blog/
├── heroes/          # Hero images
├── diagrams/        # Workflow and concept diagrams
├── comparisons/     # Before/after graphics
└── data-viz/        # Charts and data visualizations

Optimization Requirements

1. Format: WebP with JPG fallback
2. Compression: 85% quality for WebP
3. Lazy Loading: Implement for all non-hero images
4. Alt Text: Descriptive, keyword-optimized
5. Responsive: Provide 2x versions for retina displays

Implementation Checklist

Before publishing any blog image:

• Follows brand color guidelines
• Meets dimension requirements
• Under 200KB file size
• Has descriptive alt text
• Tested on mobile devices
• Consistent with article series style
• Optimized for web performance
• Accessible contrast ratios

Tools & Resources

Recommended Design Tools

• Figma: For creating custom graphics
• Canva: For quick layouts with brand templates
• draw.io: For technical diagrams
• DALL-E / Midjourney: For AI-generated base images

Optimization Tools

• Squoosh: Web-based image optimization
• ImageOptim: Mac app for batch optimization
• TinyPNG: Online WebP/PNG optimization

Color & Contrast Checkers

• WebAIM Contrast Checker
• Stark (Figma plugin)
• Colorable.co

Version History

• v1.0 (2025-01-22): Initial guidelines created
• Created by: Till Schneider
• Last updated: 2025-01-22

---

For questions or suggestions about these guidelines, please contact the content team.