# WordPress.org Asset Specifications

This document specifies all graphical assets required for the WordPress.org plugin directory.

## Required Assets

### 1. Plugin Banner (Header Image)

**Large Banner**
- Filename: `banner-1544x500.png` or `banner-1544x500.jpg`
- Dimensions: 1544 × 500 pixels
- Format: PNG (preferred) or JPG
- Max file size: 1 MB
- Used on: Plugin page header (desktop)

**Small Banner (Retina)**
- Filename: `banner-772x250.png` or `banner-772x250.jpg`
- Dimensions: 772 × 250 pixels
- Format: PNG (preferred) or JPG
- Max file size: 500 KB
- Used on: Plugin page header (mobile/retina)

**Banner Design Guidelines**
- Show the plugin logo prominently
- Include tagline: "Enterprise Multilingual CMS"
- Use Press.Zone brand colors (see below)
- Include visual elements: globe, flags, or translation icons
- Keep text readable at all sizes
- Ensure high contrast for accessibility

### 2. Plugin Icon

**Large Icon**
- Filename: `icon-256x256.png`
- Dimensions: 256 × 256 pixels
- Format: PNG with transparent background
- Max file size: 100 KB
- Used on: Plugin cards, search results (retina displays)

**Small Icon**
- Filename: `icon-128x128.png`
- Dimensions: 128 × 128 pixels
- Format: PNG with transparent background
- Max file size: 50 KB
- Used on: Plugin cards, search results (standard displays)

**Icon Design Guidelines**
- Simple, recognizable symbol
- Works well at small sizes
- Transparent background
- Use Press.Zone brand colors
- Suggested icons: Globe with language symbols, translation icon, multilingual "A" letter
- Avoid text (icon is too small)

### 3. Screenshots

WordPress.org displays up to 10 screenshots in the plugin listing.

**Specifications (All Screenshots)**
- Dimensions: 1200 × 900 pixels (4:3 aspect ratio) or 1600 × 1200 pixels
- Format: PNG or JPG
- Max file size: 500 KB each
- Filenames: `screenshot-1.png`, `screenshot-2.png`, etc.

**Required Screenshots**

**Screenshot 1: Dashboard**
- Filename: `screenshot-1.png`
- Description: "Dashboard - Overview of languages, translations, and performance metrics"
- Shows: Main dashboard with stats widgets, recent activity, quick actions

**Screenshot 2: Language Management**
- Filename: `screenshot-2.png`
- Description: "Language Management - Add and configure languages with 249 country flags"
- Shows: Languages list page with flag picker dialog open

**Screenshot 3: Translation Editor**
- Filename: `screenshot-3.png`
- Description: "Translation Editor - Side-by-side translation interface with content hash tracking"
- Shows: Post editor with translation panel showing English and Spanish side-by-side

**Screenshot 4: Workflow System**
- Filename: `screenshot-4.png`
- Description: "Workflow System - Assign translations, set deadlines, track progress"
- Shows: Workflow page with state machine visualization, assignments list

**Screenshot 5: WPML Migration**
- Filename: `screenshot-5.png`
- Description: "WPML Migration - One-click migration wizard with pre-flight checks"
- Shows: Migration wizard step 3 showing progress and pre-flight check results

**Screenshot 6: Performance Metrics**
- Filename: `screenshot-6.png`
- Description: "Performance Metrics - Real-time cache hit ratio and query optimization stats"
- Shows: Performance dashboard with cache statistics, query reduction graphs

**Screenshot 7: Team Dashboard**
- Filename: `screenshot-7.png`
- Description: "Team Dashboard - Workload visualization and translator performance"
- Shows: Team page with translator cards, workload distribution chart

**Screenshot 8: Settings Panel**
- Filename: `screenshot-8.png`
- Description: "Settings Panel - Comprehensive configuration options"
- Shows: Settings page with URL structure options, language detection settings

**Screenshot Guidelines**
- Use actual plugin interface (no mockups)
- Show production-quality data (not lorem ipsum)
- Ensure text is readable (12px minimum)
- Use realistic language examples (English, Spanish, French, etc.)
- Demonstrate key features
- Keep UI clean and professional
- Consistent styling across all screenshots

## Brand Identity

### Color Palette

**Primary Colors**
```css
--primary-blue: #0073aa;
--primary-dark: #00395d;
--primary-light: #0099d5;
```

**Secondary Colors**
```css
--success-green: #46b450;
--warning-orange: #ffb900;
--error-red: #dc3232;
--info-blue: #00a0d2;
```

**Neutral Colors**
```css
--background: #f0f0f1;
--surface: #ffffff;
--border: #c3c4c7;
--text-primary: #1d2327;
--text-secondary: #50575e;
```

### Typography

**Headings**
- Font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
- Weight: 600 (Semi-bold)

**Body Text**
- Font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
- Weight: 400 (Regular)

**Logo Text**
- Font: Inter, sans-serif
- Weight: 700 (Bold)
- Tagline Weight: 400 (Regular)

### Logo Usage

**Full Logo**
- Logo mark + "Multilingual Press Zone" wordmark
- Use on banners, marketing materials
- Minimum size: 200px width

**Icon Only**
- Globe/translation symbol
- Use for app icons, favicons
- Minimum size: 32px × 32px

**Logo Colors**
- Primary: Blue on white (#0073aa on #ffffff)
- Reversed: White on blue (#ffffff on #0073aa)
- Dark mode: White on dark (#ffffff on #1d2327)

**Logo Clear Space**
- Minimum clear space: Logo height × 0.25
- No other elements within clear space

## Design Tools

### Recommended Software

**Vector Graphics**
- Figma (recommended, web-based)
- Adobe Illustrator
- Affinity Designer
- Inkscape (free)

**Raster Graphics**
- Adobe Photoshop
- Affinity Photo
- GIMP (free)
- Pixelmator Pro

**Icon Design**
- Figma
- Sketch
- IconJar

### Templates

**Figma Templates** (Recommended)
1. Go to: https://www.figma.com/community
2. Search: "WordPress Plugin Assets"
3. Duplicate template to your account
4. Customize with Multilingual Press Zone branding

**Photoshop Templates**
- Banner template (1544×500): Available in Press.Zone brand assets
- Icon template (256×256): Available in Press.Zone brand assets

## Asset Creation Workflow

### Step 1: Design Phase
1. Review existing Press.Zone branding
2. Create mockups in Figma
3. Get stakeholder approval
4. Iterate based on feedback

### Step 2: Production Phase
1. Create high-resolution assets
2. Optimize file sizes
3. Export in required formats
4. Verify dimensions and quality

### Step 3: Screenshot Phase
1. Set up clean WordPress test site
2. Configure plugin with production-quality data
3. Capture screenshots at 1200×900
4. Crop and optimize
5. Add annotations if needed (arrows, highlights)

### Step 4: Optimization
1. Compress PNG files (use TinyPNG or similar)
2. Convert to WebP for faster loading (if supported)
3. Verify file sizes meet limits
4. Test display on various screen sizes

### Step 5: Upload
1. Commit assets to SVN repository
2. Verify assets display correctly on WordPress.org
3. Test on mobile and desktop
4. Make adjustments if needed

## Quality Checklist

### Banner Checklist
- [ ] Correct dimensions (1544×500 and 772×250)
- [ ] Logo clearly visible
- [ ] Tagline readable
- [ ] Brand colors used correctly
- [ ] High contrast for readability
- [ ] File size under limit
- [ ] No text cutoff on mobile
- [ ] Professional appearance

### Icon Checklist
- [ ] Correct dimensions (256×256 and 128×128)
- [ ] Transparent background
- [ ] Recognizable at small sizes
- [ ] Brand colors used
- [ ] Simple, not cluttered
- [ ] File size under limit
- [ ] Scales well to 32×32
- [ ] Works in light and dark themes

### Screenshot Checklist
- [ ] Correct dimensions (1200×900)
- [ ] Clear, high-quality capture
- [ ] Production-quality data
- [ ] No personal/sensitive information
- [ ] Text is readable
- [ ] Demonstrates key feature
- [ ] Consistent styling
- [ ] File size under 500 KB
- [ ] Meaningful caption written

## Accessibility Guidelines

### Color Contrast
- Text on background: Minimum 4.5:1 ratio
- Large text (18pt+): Minimum 3:1 ratio
- Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

### Text Readability
- Minimum font size: 16px for body text
- Maximum line length: 80 characters
- Line height: 1.5-1.6 for body text
- Adequate letter spacing

### Icon Clarity
- Simple shapes that work at small sizes
- Clear meaning without color alone
- Sufficient contrast

## Examples & Inspiration

### Similar Plugins (Reference Only)
- WPML (competitor, for reference only)
- Polylang
- TranslatePress
- Weglot

### Design Inspiration
- WordPress.org featured plugins
- Modern SaaS application designs
- Enterprise software aesthetics

## Asset Delivery

### SVN Repository Structure
```
/assets/
  banner-1544x500.png
  banner-772x250.png
  icon-256x256.png
  icon-128x128.png
  screenshot-1.png
  screenshot-2.png
  screenshot-3.png
  screenshot-4.png
  screenshot-5.png
  screenshot-6.png
  screenshot-7.png
  screenshot-8.png
```

### Naming Conventions
- Use lowercase
- Use hyphens, not underscores
- Include dimensions in filename
- Use PNG for graphics with transparency
- Use JPG only if PNG file size is too large

## Maintenance

### Asset Updates
- Review assets quarterly
- Update when UI changes significantly
- Keep screenshots current with latest version
- Refresh branding if company guidelines change

### Version Control
- Keep source files (PSD, Figma, etc.) in separate repository
- Version assets with plugin releases
- Maintain changelog of asset updates

## Resources

### Official Guidelines
- WordPress.org Plugin Guidelines: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/
- WordPress.org Design Handbook: https://make.wordpress.org/design/

### Tools
- TinyPNG (compression): https://tinypng.com/
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Figma: https://www.figma.com/
- Photopea (free Photoshop alternative): https://www.photopea.com/

### Support
For questions about asset specifications, contact:
- Design Team: design@press.zone
- Marketing Team: marketing@press.zone

---

**Last Updated**: 2026-01-26
**Version**: 1.0.0