Design Guide

#Overview

This guide covers the practical design specifications you need when preparing images, banners, logos, and other visual assets for your CMS Max website. Following these guidelines ensures your site looks great on all devices and loads quickly.

#Image Dimensions and Formats

#Banner and Hero Images

Full-width banners and hero sections are the largest images on your site. Use these specifications:

• Width: 1920px for full-width sections; 1600px for contained layouts
• Aspect ratio: 16:9 for standard banners; consider 9:16 for mobile-specific versions
• File format: WebP or JPG (compressed)
• File size: Keep under 200KB when possible; no more than 2MB for full-screen heroes

#Card and Thumbnail Images

Images used in grids, blog post listings, product cards, and other repeating elements:

• Aspect ratio: 4:3 for most cards; 1:1 for profile images and avatars
• Recommended width: 600–800px
• File format: WebP or JPG

#Logo Files

• Primary logo: SVG format preferred for crispness at all sizes; PNG with transparent background as fallback
• Mobile logo: JPG, PNG, WebP — recommended 300px wide
• Email logo: PNG or JPG — 300–600px wide; avoid transparent backgrounds for email compatibility

#Favicon

• Size: 48×48px minimum
• Format: SVG (preferred) or PNG
• Design tip: Use a simplified version of your logo that is still recognizable at small sizes

#Social Sharing Image (Open Graph)

• Size: 1200×630px
• Format: JPG or PNG
• Content: Include your site name or logo; avoid small text that may be hard to read as a thumbnail

#Apple Touch Icon (iOS)

• Size: 180×180px minimum
• Format: PNG
• Note: Avoid transparent backgrounds — iOS displays icons with a white background if the image has transparency

#Typography Guidelines

When designing page layouts or marketing materials for use on your site:

Keep headlines under 12 words for the best readability, and aim for body text line lengths of 60–80 characters.

#Color Guidelines

Your site uses a primary and secondary brand color. When preparing design assets:

• Choose 1–2 primary brand colors and one accent
• Use a neutral gray for backgrounds and text
• Test all text against its background for contrast:
  • Body text: minimum 4.5:1 contrast ratio (WCAG AA)
  • Large text and headings: minimum 3:1 contrast ratio
• Define consistent hover and active states for buttons and links

#Button and Interactive Element Standards

If you are designing custom sections or UI elements:

• Buttons should have three size options: small, medium, and large
• Minimum touch target on mobile: 44×44px
• Always define focus states for keyboard accessibility

#Navigation Header Height

• Desktop: 64–88px tall
• Mobile: Full-screen slide-out drawer (hamburger menu pattern)

#Grid and Spacing

• Desktop grid: 12 columns
• Tablet grid: 8 columns
• Mobile grid: 4 columns
• Base spacing unit: 4px
• Page margins: 24–32px on mobile; 32–48px on tablets and desktops
• Maximum content width: 1440px (full-bleed sections like hero images can go wider)

#Video Backgrounds

If you are using a video as a background section:

• Aspect ratio: 16:9 works best for desktop; you may need a separate 9:16 version for mobile
• File size: Keep under 15MB (8–15MB is the recommended range after compression)
• Format: MP4 (H.264) as the primary format; WebM as an alternative
• Compression: Use a tool like HandBrake to compress before uploading

#Font Recommendations

When selecting fonts for your site:

• Limit to two font families (one for headings, one for body text)
• Use no more than four font weights total across both families
• Prefer system fonts or Google Fonts for fast loading
• Avoid fonts with fewer than four weights — you will likely need regular, medium, bold, and possibly italic

#File Naming

Use lowercase letters and hyphens when naming files before upload:

• Good: homepage-banner.jpg, team-photo-2024.webp
• Avoid: Homepage Banner.jpg, TeamPhoto_NEW_FINAL.png

Consistent naming makes the Media Library easier to search and keeps your file list organized.