Documentation

Appearance

QR Code Styling ​

One of QRCompose's most powerful features is the ability to customize the QR code itself. Create branded, beautiful QR codes that stand out while maintaining perfect scannability.

Overview ​

QR codes don't have to be boring black and white squares. With QRCompose, you can customize colors, shapes, add logos, and apply frames—all while ensuring your QR codes scan reliably across all devices.

QR Code Anatomy ​

Understanding QR code structure:

┌─────────────────────────┐
│ ▪   [Position]      ▪   │ — Position Markers (3 corners)
│     Detection            │
│ ▪                        │
│                          │
│       [Data]             │ — Data Modules (the pattern)
│       Pattern            │
│                          │
│           [Logo]         │ — Center Logo (optional)
│           Area           │
│                          │
│                      ▪   │ — Alignment Marker
└─────────────────────────┘

Key Components:

  • Position Markers — 3 large squares in corners (required for scanning)
  • Data Modules — The pattern of squares encoding data
  • Alignment Markers — Small markers for larger QR codes
  • Quiet Zone — White border around QR code (required)
  • Logo Area — Center can contain logo (optional)

Color Customization ​

Foreground (QR Pattern) Color ​

The colored part of the QR code:

Solid Colors:

  • Any color you choose
  • Brand primary color recommended
  • Must contrast with background

Gradients:

  • Linear gradients
  • Radial gradients
  • Two or more colors
  • Subtle transitions work best

Examples:

Black: #000000 (classic, highest contrast)
Brand Blue: #0066CC
Gradient: #667eea → #764ba2
Dark Gray: #333333 (softer than black)

Background Color ​

The canvas behind the QR pattern:

Solid Colors:

  • White (default, best contrast)
  • Light colors
  • Brand colors (if QR is dark)

Transparent:

  • Useful for placing on colored backgrounds
  • Ensure sufficient contrast with final background

Examples:

White: #FFFFFF (classic, recommended)
Off-White: #F8F8F8
Light Gray: #F0F0F0
Transparent: rgba(0,0,0,0)

Contrast Requirements ​

Critical for Scannability:

Minimum Requirements:

  • 3:1 contrast ratio (absolute minimum)
  • 4.5:1 recommended for reliability
  • 7:1+ ideal for challenging conditions

High Contrast:

✅ Black on White (21:1 ratio)
✅ Dark Blue (#003366) on White (12:1)
✅ Black on Light Yellow (#FFF9C4) (18:1)

Low Contrast (Problematic):

❌ Light Gray (#CCC) on White (1.6:1)
❌ Yellow (#FFFF00) on White (1.07:1)
❌ Red (#FF0000) on Black (5.25:1) — better but inverted

Contrast is Critical

Always test QR codes with multiple devices before printing. Low contrast = scan failures. When in doubt, use black on white.

Shape & Style Options ​

Data Module Shapes ​

The individual squares in the QR pattern:

Square (Default):

  • Classic QR appearance
  • Best scannability
  • Universal compatibility

Rounded:

  • Softer, friendlier look
  • Slightly reduced scannability
  • Modern aesthetic

Dots:

  • Circular modules
  • Contemporary style
  • Test carefully before printing

Smooth:

  • Organic, flowing lines
  • Artistic appearance
  • May reduce scannability

Position Marker Styles ​

The three corner squares:

Square (Default):

  • Traditional QR look
  • Highest reliability

Rounded:

  • Softer corners
  • Modern appearance
  • Maintains scannability

Circle:

  • Fully circular position markers
  • Unique look
  • Test thoroughly

Extra Rounded:

  • Very soft corners
  • Elegant style
  • Eye-catching

QR Code Shape ​

Overall QR code outline:

Square (Default):

  • Standard QR format
  • 1:1 aspect ratio

Rounded Square:

  • Square with rounded corners
  • Softer appearance
  • Common in modern design

Circle:

  • Circular QR code
  • Unique, eye-catching
  • Larger quiet zone needed

Custom Shape:

  • Any shape (Pro plan)
  • Heart, star, brand shape
  • Requires careful testing

Logo Integration ​

Center Logo Placement:

  • Typically in the center of QR code
  • Covers 20-30% of QR area (safe range)
  • QR error correction compensates

Logo Requirements:

  • High resolution (minimum 300x300px)
  • Square or circular shape works best
  • High contrast with QR background
  • Simple design (complex logos may not work well)

Logo Sizing ​

Safe Percentages:

  • 10-15% — Very safe, minimal impact
  • 20-25% — Recommended, good balance
  • 30% — Maximum recommended
  • 35%+ — Risky, test extensively

QR Error Correction:

Level L (Low):  7% error tolerance  — No logo recommended
Level M (Medium): 15% error tolerance — Small logos
Level Q (Quartile): 25% error tolerance — Medium logos (default)
Level H (High): 30% error tolerance — Larger logos

QRCompose uses Level Q or H when logos are present.

Logo Styling ​

Background:

  • White Background — Logo on white square
  • Transparent — Logo directly on QR
  • Colored — Match brand colors

Border:

  • No border (seamless)
  • White border (separation)
  • Colored border (brand accent)

Shape:

  • Square (default)
  • Circle (popular)
  • Rounded square
  • Custom shape (Pro plan)

Frames & Borders ​

Frame Styles ​

Frames surround the QR code with call-to-action text:

No Frame (Default):

  • Just the QR code
  • Clean, minimal
  • User must know to scan

Simple Frame:

┌─────────────────────┐
│                     │
│   [QR Code]         │
│                     │
│  "Scan Me"          │
└─────────────────────┘

Banner Frame:

┌─────────────────────┐
│   Scan for Menu     │ ← Top banner
├─────────────────────┤
│                     │
│   [QR Code]         │
│                     │
└─────────────────────┘

Bottom Frame:

┌─────────────────────┐
│                     │
│   [QR Code]         │
│                     │
├─────────────────────┤
│ Scan with Camera    │ ← Bottom instructions
└─────────────────────┘

Full Frame:

┌─────────────────────┐
│   Restaurant Menu   │ ← Header
├─────────────────────┤
│                     │
│   [QR Code]         │
│                     │
├─────────────────────┤
│  Point your camera  │ ← Footer
│    to scan          │
└─────────────────────┘

Frame Customization ​

Text Options:

  • Custom headline
  • Instructions
  • Brand tagline
  • Call-to-action

Example Text:

"Scan for Menu"
"View Our Portfolio"
"Download the App"
"Get 10% Off"
"Watch Video"
"Connect with Me"
"Learn More"

Styling:

  • Font selection
  • Text color
  • Frame color
  • Border style
  • Background color

Download Formats ​

Export Formats ​

PNG (Raster):

  • Most common
  • Transparent background option
  • Multiple resolutions
  • Best for digital use

Resolutions:

  • 512×512px — Small (web)
  • 1024×1024px — Medium (social media)
  • 2048×2048px — Large (print, standard)
  • 4096×4096px — Extra large (large format print)

SVG (Vector):

  • Infinitely scalable
  • Perfect for print
  • Smallest file size
  • Editable in design software

PDF:

  • Print-ready
  • Includes crop marks (optional)
  • CMYK color mode option
  • Multiple sizes (A4, Letter, etc.)

Use Cases:

Digital/Web → PNG (1024px or 2048px)
Business Cards → SVG or PDF
Posters/Signage → SVG or PDF
T-shirts → SVG or PNG (4096px)
Billboards → SVG (vector)
Social Media → PNG (1024px)

Color Modes:

RGB (Digital):

  • Screen display
  • Digital printing
  • Default for PNG

CMYK (Print):

  • Professional printing
  • Offset printing
  • Available for PDF

Resolution:

Digital: 72 DPI minimum
Print: 300 DPI recommended
Large Format: 150 DPI acceptable (viewed from distance)

Best Practices ​

Scannability ​

Testing Checklist:

  1. ✅ Test with multiple devices (iOS, Android)
  2. ✅ Test with built-in camera app
  3. ✅ Test from multiple distances (10cm, 50cm, 2m)
  4. ✅ Test in different lighting conditions
  5. ✅ Test on actual printed material (not just screen)
  6. ✅ Test with different scanner apps

Distance Guidelines:

QR Code Size → Minimum Scan Distance
2cm × 2cm → 10cm (4 inches)
5cm × 5cm → 25cm (10 inches)
10cm × 10cm → 50cm (20 inches)
20cm × 20cm → 1m (3 feet)
50cm × 50cm → 2.5m (8 feet)

Formula:

Minimum Scan Distance = QR Code Size × 5

Size Guidelines ​

Physical Sizes:

Business Cards:

Minimum: 2cm × 2cm (0.8" × 0.8")
Recommended: 2.5cm × 2.5cm (1" × 1")

Flyers/Posters:

Close viewing: 5cm × 5cm (2" × 2")
Medium distance: 10cm × 10cm (4" × 4")
Far viewing: 15cm × 15cm (6" × 6")

Outdoor Signage:

Building signs: 30cm × 30cm (12" × 12")
Billboards: 100cm × 100cm (40" × 40")

Product Packaging:

Small products: 2-3cm (0.8-1.2")
Medium products: 4-5cm (1.5-2")
Large products: 7-10cm (3-4")

Material Considerations ​

Best Surfaces:

  • ✅ Matte paper (no glare)
  • ✅ Flat surfaces
  • ✅ Non-reflective materials
  • ✅ Consistent color surface

Problematic Surfaces:

  • ⚠️ Glossy paper (glare)
  • ⚠️ Curved surfaces (distortion)
  • ⚠️ Transparent/translucent
  • ⚠️ Textured materials
  • ⚠️ Reflective surfaces

Solutions:

  • Use matte lamination
  • Increase QR size
  • Add white background
  • Higher contrast
  • Test before large print run

Placement ​

Good Placement:

  • Eye level or slightly below
  • Well-lit areas
  • Easily accessible
  • Flat, stable surface
  • Clear call-to-action nearby

Avoid:

  • Backlit (hard to scan)
  • Very high or low positions
  • Behind glass (reflections)
  • Moving surfaces (vehicles)
  • Wrinkles or folds

Advanced Customization ​

Dynamic QR Patterns (Pro Plan) ​

Artistic Patterns:

  • Custom data module shapes
  • Unique position markers
  • Gradient patterns
  • Branded designs

Templates:

  • Industry-specific designs
  • Seasonal themes
  • Event styles
  • Cultural designs

Animated QR Codes (Pro Plan) ​

Subtle Animations:

  • Pulse effect
  • Rotation
  • Color shift
  • Particle effects

Use Cases:

  • Digital displays
  • Websites
  • Presentations
  • Attention-grabbing

Print vs. Digital

Animated QR codes only work on digital displays. For print materials, use static QR codes.

Custom Data Encoding (Pro Plan) ​

Advanced Options:

  • vCard (business cards)
  • WiFi credentials
  • SMS pre-filled
  • Email with subject
  • Geographic coordinates

Batch QR Generation (Pro Plan) ​

Create multiple QR codes at once:

  • Unique codes for tracking
  • Variable data
  • Sequential numbering
  • Bulk export

Troubleshooting ​

QR Code Won't Scan ​

Common Issues:

Too Much Customization:

  • Remove logo temporarily
  • Simplify shapes (use squares)
  • Increase contrast
  • Reduce gradient complexity

Size Too Small:

  • Print larger
  • Minimum 2cm × 2cm
  • Test actual printed size

Poor Contrast:

  • Use black and white
  • Increase color difference
  • Check contrast ratio

Damaged Quiet Zone:

  • Ensure white border around QR
  • Don't cut too close
  • Add margin when printing

Low Quality Print:

  • Increase resolution (300 DPI)
  • Use vector format (SVG)
  • Professional printer

Scans But Doesn't Work ​

Check:

  • URL is correct and live
  • Flow is published
  • No typos in data
  • SSL certificate valid (HTTPS)

Inconsistent Scanning ​

Issues:

  • Some devices scan, others don't
  • Test with various phones
  • May need simpler design
  • Check QR error correction level

Poor Print Quality ​

Solutions:

  • Use SVG format
  • Export at 300+ DPI
  • CMYK for professional printing
  • High-quality printer
  • Matte finish

Next Steps ​

next: /guide/flows ​