You get:
- favicon that looks like a colored dot (unrecognizable)
- business card logo that loses detail (thin lines disappear)
- app icon that users can’t identify (brand failure)
- social media avatar that’s just a blur (missed recognition)
- no testing before finalizing the design
But scalability can be tested:
- favicon size: 16×16, 32×32, 64×64 pixels
- app icon size: 180×180 pixels
- business card size: ~1 inch (300px at 300dpi)
- billboard size: 30+ feet (detail becomes visible again)
- mobile notification: 24×24 pixels (extremely small)
Without testing, scalable design is guesswork.
This prompt tests logo scalability at multiple sizes.
Assume the role of a logo quality assurance engineer who tests scalability. Your task is to evaluate how a logo performs at different sizes. Generate: 1. LOGO DESCRIPTION - Style: [wordmark / lettermark / pictorial / abstract / emblem] - Complexity: [simple / moderate / complex] - Thin lines present? [yes/no] - Small text present? [yes/no] 2. SCALABILITY TEST MATRIX | Size (pixels) | Real-World Use | Pass/Fail | Issues | |---------------|----------------|-----------|--------| | 1024x1024 | Source file | Pass | None | | 256x256 | Website header | ? | | | 64x64 | Mobile icon | ? | | | 32x32 | Favicon | ? | | | 16x16 | Browser tab | ? | | 3. CRITICAL SCALABILITY THRESHOLDS | Threshold | What Fails | Fix | |-----------|------------|-----| | 64x64 | Small text becomes unreadable | Remove text below 64px | | 48x48 | Thin strokes (<2px) disappear | Thicken strokes to minimum 2px | | 32x32 | Multiple colors blend together | Use single color or high-contrast | | 24x24 | Fine detail becomes noise | Simplify shape, use bold geometry | | 16x16 | Emblems become illegible | Use lettermark or icon only | 4. SCALABILITY SIMULATION (text description) **At 1024x1024 (original):** [Clear description of what's visible] **At 256x256 (website header):** [What remains visible, what starts to degrade] **At 64x64 (mobile icon):** [What is still recognizable, what is lost] **At 32x32 (favicon):** [What is still visible, what becomes noise] 5. SCALABILITY FIX RECOMMENDATIONS | Issue | Severity | Recommended Fix | |-------|----------|-----------------| | Thin lines disappearing | Critical | Increase stroke width to 2px minimum | | Small text unreadable | Critical | Remove text for small versions | | Colors blending | Medium | Increase contrast or simplify palette | | Detail becoming noise | Medium | Create simplified version for small sizes | 6. RESPONSIVE LOGO SYSTEM | Size Range | Logo Version | Elements Included | |------------|--------------|-------------------| | >200px | Full logo | Icon + wordmark + tagline | | 64-200px | Standard | Icon + wordmark | | 32-63px | Compact | Icon only (simplified) | | <32px | Micro | Single-color icon (boldest shape) | 7. SCALABILITY TEST PROTOCOL - Step 1: Design logo at high resolution - Step 2: Scale down to 256px, 64px, 32px, 16px - Step 3: Check each size for legibility - Step 4: Create simplified versions for small sizes - Step 5: Test on actual devices (phone, tablet, desktop) INPUTS: Logo design description: [PASTE OR DESCRIBE THE LOGO] Usage locations (check all that apply): [FAVICON / APP ICON / WEBSITE / BUSINESS CARD / BILLBOARD / SOCIAL MEDIA] Smallest size needed: [E.G., "16x16 (browser tab)"] Largest size needed: [E.G., "30 feet (billboard)"] RULES: - The smallest usage size determines the simplest logo version needed - Text becomes unreadable below 64px (plan for textless versions) - Thin lines (<2px) disappear below 100px (thicken for small applications) - Multiple colors blend together below 64px (use single-color version) - Emblems fail below 128px (use separate icon for small sizes) - Test at actual size on screen (not zoomed in) - A responsive logo system has 3-4 versions (full, standard, compact, micro)
- The smallest usage size determines the simplest logo version needed — design backward from the smallest application.
- Text becomes unreadable below 64px — plan for textless versions of your logo.
- Thin lines (<2px) disappear below 100px — thicken strokes for small applications.
- Multiple colors blend together below 64px — use a single-color version for small sizes.
- Emblems fail below 128px — use a separate, simpler icon for small applications.
- Test at actual size on screen — zooming in gives false confidence.
- A responsive logo system should have 3-4 versions (full, standard, compact, micro).
Logo design description:
"Emblem-style logo with a detailed shield containing a lion and small text reading 'EST. 2024'"
Usage locations:
"FAVICON, APP ICON, WEBSITE, BUSINESS CARD"
Smallest size needed:
"16x16 (browser tab)"
Largest size needed:
"256x256 (website header)"
This framework improves outcomes by forcing:
- scalability test matrix (testing across critical sizes)
- threshold identification (what breaks at each size)
- failure simulation (visualizing degradation)
- fix recommendations (how to address issues)
- responsive logo system (different versions for different sizes)
Failure modes this prevents:
- Favicon that looks like a dot (too complex for 16x16)
- Business card logo with illegible text (text too small)
- Thin strokes that disappear at small sizes (line weight too light)
- Colors that blend into each other (insufficient contrast)
This improves on: Single-size logo design. Scalability testing ensures the logo works everywhere it appears.
Related to: LD-02 (Simplicity) for simplification strategies; LD-04 (Color) for contrast requirements.
Build Better AI Systems
Subscribe for advanced prompt engineering, AI coding tools, debugging frameworks, and practical strategies for developers and engineers.
