Themes & Visual Design

QRCompose provides comprehensive theming and styling options to make your QR experiences match your brand identity perfectly. From pre-built themes to complete custom control, create beautiful, on-brand experiences.

Overview

Themes control the overall look and feel of your QR experiences—colors, typography, spacing, and visual elements. You can start with a preset theme and customize it, or build from scratch.

Theme Presets

Getting Started with Presets

Choose from professionally designed themes:

Business & Professional:

• Corporate — Clean, professional, blue tones
• Executive — Sophisticated, elegant, dark
• Startup — Modern, vibrant, energetic
• Minimal — Simple, whitespace-focused

Creative & Artistic:

• Creative — Bold colors, playful
• Artist — Gallery-inspired, image-focused
• Designer — Sleek, modern, geometric
• Photographer — Image-first, subtle UI

Industry-Specific:

• Restaurant — Warm, inviting, food-focused
• Retail — Shopping-optimized, product-forward
• Fitness — Energetic, motivational, action-oriented
• Medical — Clean, trustworthy, calming
• Real Estate — Premium, spacious, elegant
• Event — Exciting, dynamic, festive

Seasonal & Special:

• Holiday — Festive, themed for seasons
• Summer — Bright, beach-inspired
• Dark Mode — OLED-friendly, eye-friendly
• High Contrast — Accessibility-focused

Starting Point

Presets are great starting points. Choose one that's close to your vision, then customize to perfection.

Color Customization

Color Scheme Components

Primary Color:

• Main brand color
• Used for buttons, links, accents
• Should represent your brand

Secondary Color:

• Complementary color
• Used for secondary actions
• Provides visual interest

Background Color:

• Main page background
• Usually light (white, off-white) or dark (charcoal, black)
• Affects overall mood

Text Colors:

• Heading Color — For titles and headings
• Body Color — For regular text
• Muted Color — For secondary text, captions
• Link Color — For clickable links

Surface Colors:

• Card Background — Content containers
• Border Color — Dividers and outlines
• Shadow Color — Depth and elevation
• Overlay Color — Modals and overlays

Creating a Color Palette

Color Harmony Methods:

Monochromatic:

Base: #0066CC (blue)
Light: #3385DB
Lighter: #66A3E5
Dark: #004C99
Darker: #003366

Single color with variations

Complementary:

Primary: #0066CC (blue)
Secondary: #CC6600 (orange)

Opposite colors on color wheel

Analogous:

Primary: #0066CC (blue)
Secondary: #0099CC (cyan)
Tertiary: #0033CC (deep blue)

Adjacent colors on color wheel

Triadic:

Primary: #0066CC (blue)
Secondary: #CC0066 (magenta)
Tertiary: #66CC00 (green)

Three evenly spaced colors

Color Accessibility

Contrast Requirements:

• Normal Text — 4.5:1 minimum contrast ratio
• Large Text — 3:1 minimum contrast ratio
• Interactive Elements — 3:1 minimum for borders

Tools for Checking:

• WebAIM Contrast Checker
• QRCompose built-in checker (Pro plan)
• Chrome DevTools Accessibility

Common Mistakes:

• ❌ Light gray text on white background
• ❌ Colored text on colored background without checking contrast
• ❌ Links that look like regular text
• ✅ Dark text on light backgrounds
• ✅ Light text on dark backgrounds
• ✅ Clear visual distinction for clickable elements

Typography

Font Selection

Heading Fonts: Choose fonts that represent your brand:

Serif (Traditional, formal, trustworthy):

• Merriweather
• Playfair Display
• Lora
• Crimson Text

Sans-Serif (Modern, clean, friendly):

• Inter
• Roboto
• Open Sans
• Poppins
• Montserrat

Display (Creative, unique, attention-grabbing):

• Bebas Neue
• Righteous
• Archivo Black

Monospace (Technical, coding-related):

• Roboto Mono
• Source Code Pro
• JetBrains Mono

Body Fonts: Prioritize readability:

• Inter (excellent for screens)
• Roboto (versatile, readable)
• Open Sans (friendly, clear)
• Lato (warm, modern)
• Source Sans Pro (professional)

Font Pairing

Successful Combinations:

Classic Professional:

Headings: Playfair Display (serif)
Body: Source Sans Pro (sans-serif)

Modern Clean:

Headings: Montserrat (sans-serif, bold)
Body: Inter (sans-serif, regular)

Creative Bold:

Headings: Bebas Neue (display)
Body: Roboto (sans-serif)

Elegant:

Headings: Cormorant Garamond (serif)
Body: Lato (sans-serif)

Typography Scale

Font Sizes:

Heading 1 (H1): 36px - 48px
Heading 2 (H2): 30px - 36px
Heading 3 (H3): 24px - 30px
Heading 4 (H4): 20px - 24px
Body Text: 16px - 18px
Small Text: 14px
Caption: 12px - 14px

Line Height:

• Headings: 1.2 - 1.3 (tight)
• Body: 1.5 - 1.7 (comfortable)
• Small Text: 1.4 - 1.5

Letter Spacing:

• Headings: -0.5px to 0px (slightly tighter)
• Body: 0px (default)
• Uppercase Text: 1px - 2px (more spacing)

Responsive Typography

Mobile Adjustments:

Desktop:
  H1: 48px
  Body: 18px

Mobile:
  H1: 32px (33% smaller)
  Body: 16px (11% smaller)

Scale down appropriately for small screens.

Layout & Spacing

Container Width

Options:

• Full Width — Edge-to-edge (1920px+)
• Wide — 1400px max
• Standard — 1200px max (recommended)
• Narrow — 800px max (reading-focused)
• Custom — Set your own max width

Use Cases:

• Full Width: Galleries, videos, immersive experiences
• Standard: Most content types
• Narrow: Long-form text, articles, blogs

Spacing System

Consistent Spacing Scale:

XS: 4px   — Tight spacing
S:  8px   — Small gaps
M:  16px  — Default spacing
L:  24px  — Section spacing
XL: 32px  — Large gaps
2XL: 48px — Major sections
3XL: 64px — Hero sections

Apply Consistently:

• Element padding
• Margins between components
• Section spacing
• Grid gaps

Grid System

Column Layouts:

• 12-column grid (flexible)
• 6-column (half widths)
• 4-column (thirds)
• 3-column (quarters)
• 2-column (halves)
• 1-column (full width, mobile)

Breakpoints:

Mobile: 0 - 768px
Tablet: 768px - 1024px
Desktop: 1024px+
Wide: 1440px+

Component Styling

Buttons

Button Styles:

Primary (Filled):

Background: Primary color
Text: White or contrasting color
Border: None
Use: Main call-to-action

Secondary (Outline):

Background: Transparent
Text: Primary color
Border: Primary color
Use: Secondary actions

Text Button:

Background: None
Text: Primary color
Border: None
Use: Tertiary actions, links

Button Sizes:

• Small: 32px height, 12px padding
• Medium: 40px height, 16px padding (default)
• Large: 48px height, 24px padding

Button Shapes:

• Square: 0px border radius
• Rounded: 4px - 8px border radius (recommended)
• Pill: 999px border radius (fully rounded)

Cards

Card Styles:

Elevated:

Background: White
Shadow: 0 2px 8px rgba(0,0,0,0.1)
Border: None

Outlined:

Background: White
Shadow: None
Border: 1px solid #E0E0E0

Flat:

Background: #F5F5F5 (subtle color)
Shadow: None
Border: None

Form Inputs

Input Field Styling:

Height: 40px - 48px
Padding: 12px 16px
Border: 1px solid #D0D0D0
Border Radius: 4px
Font Size: 16px (prevents zoom on iOS)

Focus State:
Border: 2px solid primary color
Outline: None (custom focus ring)

Labels:

Font Size: 14px
Font Weight: 500 (medium)
Color: Darker than body text
Margin Bottom: 4px - 8px

Icons

Icon Style:

• Outline (line icons)
• Filled (solid icons)
• Two-tone
• Brand icons (social media)

Icon Sizes:

• Small: 16px
• Medium: 24px (default)
• Large: 32px
• XLarge: 48px

Icon Color:

• Match text color
• Use brand color for emphasis
• Consistent throughout experience

Dark Mode

Implementing Dark Mode

Color Adjustments:

Light Mode:
Background: #FFFFFF (white)
Text: #1A1A1A (near-black)
Card: #FFFFFF

Dark Mode:
Background: #1A1A1A (near-black)
Text: #FFFFFF (white)
Card: #2A2A2A (dark gray)

Not Just Inverted:

• Don't use pure black (#000000) — harsh on OLED
• Don't use pure white text — reduce to #E0E0E0
• Reduce contrast slightly for comfort
• Adjust colors to work in both modes

Auto-Detection:

// Detect user's system preference
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // Apply dark theme
}

Dark Mode Best Practices

Do:

• ✅ Use dark grays, not pure black
• ✅ Reduce white text brightness slightly
• ✅ Test with actual devices in dark rooms
• ✅ Provide manual toggle option
• ✅ Remember user preference

Don't:

• ❌ Invert colors mechanically
• ❌ Use low contrast
• ❌ Forget to adjust images/logos
• ❌ Force dark mode without option

Theme Export & Import

Saving Custom Themes

Save Your Theme:

1. Customize all settings
2. Click Save as Custom Theme
3. Name your theme
4. Theme saved to library

Apply Across Flows: Use your custom theme on multiple Flows for consistency.

Theme Sharing (Pro Plan)

Export Theme:

{
  "name": "MyBrand Theme",
  "colors": {
    "primary": "#0066CC",
    "secondary": "#CC6600",
    "background": "#FFFFFF",
    "text": "#1A1A1A"
  },
  "fonts": {
    "heading": "Montserrat",
    "body": "Inter"
  },
  "spacing": "normal",
  "buttonStyle": "rounded"
}

Import Theme: Share JSON with team members or across accounts.

Best Practices

Brand Consistency

Define Brand Guidelines:

• Primary and secondary colors
• Approved fonts
• Logo usage
• Button styles
• Spacing standards

Apply Consistently:

• Use same theme across all Flows
• Match your website and marketing
• Create cohesive brand experience

Performance

Optimize for Speed:

• Limit custom fonts (max 2-3 font families)
• Use system fonts when possible
• Minimize custom CSS
• Compress background images
• Avoid heavy animations

Accessibility

Design for Everyone:

• Sufficient color contrast (4.5:1 minimum)
• Large enough text (16px+ body)
• Clear focus indicators
• Keyboard navigation support
• Screen reader friendly

Mobile-First

Design for Small Screens:

• Test on actual mobile devices
• Larger touch targets (44px minimum)
• Readable text without zooming
• Simplified layouts on mobile
• Optimize images for mobile

Advanced Customization

Custom CSS (Pro Plan)

Add your own CSS:

/* Custom heading style */
.qrc-heading {
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 3px solid #0066CC;
  padding-bottom: 8px;
}

/* Custom button hover effect */
.qrc-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,102,204,0.3);
}

Theme Variables (Pro Plan)

Use CSS variables for dynamic theming:

:root {
  --primary: #0066CC;
  --secondary: #CC6600;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Animations (Pro Plan)

Add subtle animations:

• Fade in on load
• Slide in from side
• Hover effects
• Transition smoothness

Troubleshooting

Theme not applying

Check:

• Theme is saved
• Flow is using correct theme
• Cache cleared (hard refresh)
• Preview in different browser

Colors look different on mobile

Possible causes:

• Device screen calibration varies
• Auto-brightness affecting perception
• True Tone or Night Shift enabled
• Test on multiple devices

Fonts not loading

Solutions:

• Verify font name spelling
• Check internet connection (Google Fonts)
• Fallback fonts specified
• Contact support if persistent

Next Steps

• Layouts → — Explore layout options and structures
• Media → — Background images and visual elements
• QR Styling → — Design the QR code itself
• Components → — Apply themes to specific components

---

next: /customization/layouts