The short answer
Designing a QR code means styling a scannable code so it looks on-brand — colors, a logo, custom eye and module shapes, maybe a frame and caption — without breaking the pattern the camera reads. The single rule that governs every design decision is scannability first: a beautiful code that won’t scan is a failed design. Get a plain black-on-white code working, then add styling one layer at a time, testing the scan after each change.
The customization tools (solid and gradient fills, per-eye color and shape, per-module shape, centered logo, frames and captions) all trade a little readability for a lot of brand fit. Used carefully they make a code that looks designed and still scans on the first try; used carelessly they make a code that looks great in the mockup and fails in the real world. This page walks through each design choice and the scannability rule behind it. For the broader rules, see our qr best practices guide.
Design choices and their scannability rules
Here is the full set of design levers and the rule that keeps each one safe. Treat the third column as non-negotiable — it is what separates a branded code that scans from one that doesn’t.
| Design choice | What it does | Scannability rule |
|---|---|---|
| Foreground / background color | Sets the dark and light module colors | Keep dark-on-light with strong contrast; never invert |
| Gradient fill | Blends two colors across the modules | Keep both endpoints dark enough; avoid light-to-dark runs |
| Module shape | Rounds the data squares (dots, rounded) | Use level M or H; dots need slightly larger prints |
| Eye shape + color | Restyles the three corner finder patterns | Never soften so much the 1:1:3:1:1 ratio is lost |
| Centered logo | Drops brand art in the middle of the code | Keep to 20–22% of the width and use level H |
| Frame + caption | Draws a border and a call-to-action label | Keep the border outside the quiet zone, not on it |
| Quiet zone | The empty margin around the code | At least 4 modules of clear space on every side |
Color: dark-on-light wins
Color is the design choice most likely to break a code. A scanner distinguishes dark modules from light ones, so the safe default is a dark foreground on a light background — near-black on near-white is bulletproof. Brand colors work too, as long as the dark modules stay clearly darker than the light ones; a deep navy on off-white or a dark teal on cream both scan well.
Two patterns fail often. Inverted codes (light modules on a dark square) look striking but most phone cameras in most lighting reject them. Low-contrast pairs (grey-on-white, pastel-on-white, mid-tone-on-mid-tone) fail because the camera can’t reliably separate the two values. If brand guidelines force a low-contrast palette, make the dark modules as dark as you can and the light modules as light as you can, then test on a real phone in real lighting — not just on a bright monitor. See our qr best practices guide for the contrast and lighting rules.
Gradients that stay readable
A gradient fill blends two brand colors across the modules and is one of the most effective ways to make a code feel designed. The rule: keep both endpoints dark enough that every module reads as a dark value against the light background. A gradient from a dark brand color to a slightly different dark brand color works; a gradient that runs from dark to light can produce light modules near one edge that the camera reads as background, breaking the decode.
Radial gradients (darker center, slightly lighter edges, or vice versa) can work if the lightest stop is still clearly a dark value. As with any color choice, generate the code and scan it before you commit to a print run — a gradient that looks balanced on screen can hide a band of low-contrast modules that fails in real lighting.
Eye and module shapes
Custom eye shapes (rounded, circular) and module shapes (dots, rounded squares) soften the technical look of a QR code and are a big part of what makes a designed code feel on-brand. They trade a little readability for style, so the rule is to compensate: use error-correction level M at minimum, and H if you combine shaped modules with a logo, and keep the print a touch larger than you would for plain square modules since dots have less edge for the camera to lock onto.
One hard limit: the three finder patterns in the corners are how the camera locates and orients the code, and they rely on a fixed 1:1:3:1:1 dark-light-dark ratio. Styling the eyes is fine, but don’t soften or round them so aggressively that the ratio becomes ambiguous — if a finder eye no longer reads as a clear square-within-a-square, the whole code fails to frame. Our how does a QR code work guide explains what each part of the code does.
Logo placement
A centered logo is the strongest branding move and the most common cause of a stylized code that won’t scan. The logo covers part of the data area, so you must do two things together: keep the logo to roughly 20–22% of the code’s total width, and generate the code at error-correction level H so the ~30% redundancy absorbs the covered area. Bigger than that and even level H can’t recover the lost data.
Never let the logo overlap the three finder eyes in the corners — covering one is fatal. Leave a small light margin around the logo so it doesn’t bleed into adjacent modules, and keep the payload short, because level H makes the grid denser and a long URL plus a logo is the worst case. Our qr error correction guide covers the L/M/Q/H trade-off in depth.
Frames and captions
A frame (a rounded or square border around the code) plus a caption like “Scan to view menu” tells people what to do and gives the code a designed container. The rule is placement: the frame belongs outside the quiet zone, not on top of it. A border that sits in the empty margin around the code destroys the very blank space the scanner needs to locate it, so the frame is drawn beyond the quiet zone, leaving the 4-module margin intact inside it.
Keep captions short and put them in the frame band, not floating over the code. A clear call to action (“Scan to pay”, “Scan for WiFi”) measurably lifts scan rates, so the caption is worth the design effort — just never let it touch the pattern.
Test before you print
The last step of any QR design is the one most skipped: scan the final output, not the screen preview. Export at print resolution (vector SVG for print, or a high-res PNG of at least 1024 px), then scan it with a real phone in the real lighting where it will live. A design that scans instantly on a bright monitor can fail on matte paper under restaurant lights, or shrunk onto a business card.
Work back through the checklist if it fails: contrast, quiet zone, logo size, eye-shape legibility, gradient endpoints, and print size relative to scan distance. Fix one thing at a time and re-test. Once it scans cleanly on two different phones, it is ready to print. Our qr code size guide and how to make a QR code guide cover the export and sizing steps, and our common QR code mistakes guide is the troubleshooting checklist if a design won’t scan.
Frequently asked questions
How do I design a QR code?
Start from a plain black-on-white code that scans, then add styling one layer at a time — colors, then eye and module shapes, then a gradient, then a centered logo, then a frame and caption — scanning after each change. Keep dark-on-light contrast, a 4-module quiet zone, a logo at 20–22% of the width on a level-H code, and the frame outside the quiet zone.
Can a QR code be any color?
Yes, as long as the dark modules are clearly darker than the light ones. Dark-on-light with strong contrast scans best; inverted (light-on-dark) and low-contrast pastel codes often fail. Brand colors work when the dark value stays dark enough to read against the light background.
How big should a logo be in a QR code?
About 20–22% of the code’s total width, centered, and never overlapping the three finder eyes in the corners. Pair it with error-correction level H so the ~30% redundancy can absorb the covered data area, and keep the payload short because level H makes the grid denser.
Do custom eye and module shapes break scanning?
They trade a little readability for style. Use error-correction level M or H, keep the print a touch larger than for plain squares, and never soften the finder eyes so much that their 1:1:3:1:1 ratio becomes ambiguous — the camera needs that ratio to locate the code.