simpleshop_theme/docs/research/design-philosophy.md

SimpleshopTheme Design Philosophy

This document captures the design principles and research that informed the theme system architecture.

Core Principles

1. "One theme, infinite variations" - Rather than offering multiple themes, we provide one solid foundation with curated customisation options
2. Constrained creativity - Limit choices to prevent poor design outcomes while maintaining perceived variety
3. No professional photography required - Defaults work well with product mockups, not just lifestyle imagery
4. Mobile-first - All features work on touch devices (no hover-only interactions)
5. Ethical design - No dark patterns like countdown timers or fake urgency

Target Audience

• Solo POD creators (artists, illustrators, designers)
• Small catalogs (typically <50 products)
• Non-technical users who found WooCommerce too complex
• Budget-conscious sellers

Research Findings: POD Theme Best Practices

What POD Sellers Actually Use

• Free themes dominate: Dawn, Spotlight, Studio most popular on Shopify
• Premium choice: Streamline ($350) best for growing POD brands
• Impulse is fashion-focused, not ideal POD default

Key Requirements for POD

1. Large product imagery (mockups need to shine)
2. Clean/minimal design (products are the focus)
3. Quick setup (non-technical users)
4. Mobile-responsive (60%+ traffic)
5. Works with small catalogs
6. No reliance on lifestyle photography

What to Avoid

• Countdown timers (dark pattern)
• Complex promotional systems
• Hover-only interactions
• Features requiring professional photography
• Enterprise complexity

Preset Design Rationale

Each preset targets a specific aesthetic/use case:

Preset	Target Use Case
Gallery	Art galleries, editorial brands
Studio	Default, versatile, works for most
Boutique	Artisan, handmade goods
Bold	Tech, contemporary, statement brands
Playful	Fun, casual, approachable brands
Minimal	Ultra-clean, luxury positioning
Night	Premium, dramatic, dark mode lovers
Classic	Traditional, established feel

Customisation Philosophy

Parameters Exposed to Users

• Font pairing preset - Enables brand expression without typography expertise
• Colour moods - Warm/Cool/Neutral/Dark covers most brand needs
• Shape options - Sharp/Soft/Round/Pill for personality
• Density - Adjust spacing for catalog size
• Accent colours - Primary brand customisation

Parameters Locked Down

• Line-height ratios - Users break readability when exposed
• Letter-spacing - Technical, easy to ruin
• Type scale ratio - Mathematical harmony shouldn't be adjustable
• Mobile scaling - Complex responsive logic

The principle: expose choices that are hard to get wrong, lock down choices that require design expertise.

Typography System

Type Scale Rationale

We use the Major Third (1.25) ratio for our type scale. Common ratios and their use cases:

Ratio	Name	Best Use Case
1.125	Major Second	Dense UIs, dashboards
1.25	Major Third	E-commerce (our choice)
1.333	Perfect Fourth	Editorial, content-heavy
1.5	Perfect Fifth	High-contrast headlines
1.618	Golden Ratio	Luxury, creative projects

Major Third provides sufficient hierarchy without oversized mobile headings.

Line-Height Guidelines

Line-height follows an inverse relationship with font size—larger text needs tighter leading:

Context	Line-height
Large headings (32px+)	1.1–1.2
Subheadings (20–28px)	1.2–1.3
Body text	1.5–1.6 (WCAG minimum)
Small text (<14px)	1.4–1.5

Font Pairing Categories

Our 7 typography presets draw from these research-backed pairing styles:

Style	Heading Font	Body Font	Use Case
Clean	Manrope	Inter	Default, versatile
Editorial	Playfair Display	Raleway	Fashion, magazines
Modern	Space Grotesk	Inter	Tech, contemporary
Classic	Cormorant Garamond	Source Serif	Traditional, luxury
Friendly	Fraunces	Work Sans	Playful, approachable
Minimal	DM Sans	Source Serif	Ultra-clean
Impulse	Raleway	Inter	Fashion editorial

Key research finding: Serif fonts increase perceived quality by 13% and reliability by 9% (Monotype/Neurons research). We use serifs for editorial and classic presets.

Spacing System

We use an 8px baseline grid (Material Design, iOS standard):

• Most screen sizes divide evenly by 8
• Scales cleanly to @1x, @2x, @3x resolutions
• Reduces decisions to: 8, 16, 24, 32, 40, 48px

Body text at 16px with 1.5 line-height = 24px (3 × 8), keeping text on the grid.

E-commerce Typography Patterns

Research from Baymard Institute (200,000+ hours of UX testing):

Product Page Hierarchy

• Product title: Largest text (20–28px), semi-bold to bold
• Price: High prominence near Add to Cart, 4.5:1 minimum contrast
• CTA buttons: Clean sans-serif, 14–16px, action verbs ("Add to basket")
• Body descriptions: 16–18px, 1.5 line-height, structured with subheadings

Mobile Requirements

• Touch targets: 44×44px minimum (WCAG AAA)
• Body text: 16px minimum (prevents iOS input zoom)
• Avoid horizontal tabs—27% of users overlook them

Scanning Patterns

• F-pattern (product pages): Horizontal top, shorter line below, vertical down left
• Z-pattern (landing pages): Top-left → top-right → diagonal → bottom-right

Combination Count

With current options, the system offers:

• 4 moods × 7 typographies × 4 shapes × 3 densities × 3 grids × 3 headers = 3,024 base combinations
• Plus accent colours, layout width, button styles, shadows, etc.

This provides sufficient variety while keeping all combinations visually coherent.