Utilities & Tools · Precision Graphite
QR Code Scanner App Design Template
Scanline is a QR and barcode scanner app design with a lab-grade graphite look, built for founders and designers shipping a fast, precise scanning tool.
Preview
Explore the screens
Preview the QR scanner mobile app design, fully editable in Sleek.
About the QR Scanner App
Scanline is a QR code scanner app design template built on a "Precision Graphite" aesthetic: a near-black base, charcoal surface tiers separated by thin hairline rules, off-white text, and a single electric-lime accent reserved for the live scan reticle and primary buttons. The decoded URLs, codes, and timestamps render in a tabular monospace, so every value reads as measured and machine-precise, with the instrument-panel calm of a confident scanning device.
The template ships six connected screens that form a complete scanning flow: a full-bleed Scan viewport with the lime corner-bracket reticle and a QR / Barcode / Document / Wi-Fi mode strip, a slide-up Result sheet with a verified-domain line and Open, Copy, Share actions, a Wi-Fi result card with one-tap connect, a History list grouped by Today and Yesterday with bracket-framed thumbnails, a Create tab for generating QR codes with live preview, and a Settings screen for scan feedback, data retention, and sync. The corner-bracket motif recurs as the framing device around scanned thumbnails, tying the whole system together.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
What's inside
Screens included
Scan
A full-bleed camera viewport with the lime corner-bracket reticle locking onto a QR code, a torch toggle and gallery-import button floating at the bottom, and a QR / Barcode / Document / Wi-Fi mode strip above the tab bar.
Result
A slide-up sheet showing the detected type chip, the decoded URL in monospace, a verified-secure domain line, and stacked Open in Browser, Copy, and Share actions. The fast path from scan to action.
Wi-Fi result
A parsed network card showing the SSID, security type, frequency, and signal strength, topped by a lime Connect to Network button and a share-credentials link.
Create
A QR generator with Link, Text, Wi-Fi, and Contact tabs, a URL field, a live-rendered code preview, and accent-color plus add-logo options, ending in a Generate & Export action.
History
A reverse-chronological list grouped by Today and Yesterday, each row a bracket-framed thumbnail, type chip, decoded snippet, and timestamp. Quick recall of past scans.
Settings
Tonal list rows grouped into Scanning Engine, Data Management, and Terminal: scan sound, haptic pulse, auto-torch, history retention, iCloud sync, and a reset option. Controls feedback and data behavior.
Design & features
Key features
- Precision Graphite palette: near-black base with one electric-lime accent
- Tabular monospace for decoded URLs, codes, and timestamps
- Lock-On corner-bracket reticle as the signature scan motif
- Hairline-ruled tonal surface stack with square-shouldered radii
- Four-mode scan strip: QR, Barcode, Document, Wi-Fi
- Slide-up result sheet with verified-domain safety line
- Built-in QR generator with live preview and logo option
- Slim bottom nav with lime-filled active tab
Audience
Who it's for
Use cases
What you can build
- Launch an MVP for a QR and barcode scanner app
- Mock up screens for an investor or stakeholder pitch
- Hand a complete, consistent scanner UI off to developers
- Explore a redesign of an existing utility scanning app
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Frequently asked questions
Related mobile app templates
Start designing your QR scanner app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.
Use this template