Machine-readable patterns as design. Matrix grids, finder patterns, and binary data visualization for the encoded world.
A stark binary palette built on absolute contrast. Black modules on white quiet zones, with scan-line accents for interactive and status states. Every color serves a function.
Module Tones
Scan Accents
Three monospace families engineered for data display. Space Mono for headlines with industrial character. IBM Plex Mono for readable body text. Inconsolata for raw data and code output.
Spacing derives from the module grid: 8px base unit. Like QR code modules, every dimension snaps to this grid, ensuring pixel-perfect alignment across the data matrix.
The 8px module grid echoes the fundamental unit of QR code construction. Each module is the smallest addressable element in the symbol, and all spatial relationships are defined as multiples of this base unit. The quiet zone (4 modules = 32px) provides necessary separation from surrounding content.
Binary interaction states. Each button is a scannable target with stark contrast boundaries. High-contrast modules for primary actions, outlined variants for secondary paths.
Data entry fields designed for precision input. Clean borders, monospaced values, and scan-line focus indicators. Each field is a module in the larger data structure.
Content containers as data regions. Each card is a self-contained information block with finder-pattern corner decorations that echo the QR code's position detection markers.
Three identical position detection patterns located at the upper-left, upper-right, and lower-left corners. Each consists of a 7x7 module structure: a dark 7x7 outer border, light 5x5 inner border, and dark 3x3 center.
Smaller position markers distributed across the symbol for versions 2 and above. A 5x5 module structure used to correct spatial distortion during scanning. Count increases with version number.
The encoded payload area containing data codewords and error correction codewords arranged in a specific two-dimensional pattern. Uses Reed-Solomon codes for robust error recovery.
Alternating dark and light modules running horizontally and vertically between finder patterns. Enables the scanner to determine module coordinates and density across the symbol.
A 15-bit sequence encoding the error correction level and mask pattern. Placed adjacent to finder patterns and protected by its own BCH error correction code.
Status messages encoded with color-module indicators. A square data-bit prefix identifies the severity level at a glance, like a scanner interpreting module patterns.
Structured data grids for version specifications and encoding parameters. Monospaced columns aligned to the module grid for scannable data presentation.
| Version | Size | Modules | EC Level | Data Cap | Status |
|---|---|---|---|---|---|
| V1 | 21x21 | 441 | M | 14 bytes | Active |
| V3 | 29x29 | 841 | H | 35 bytes | Active |
| V7 | 45x45 | 2,025 | Q | 154 bytes | Active |
| V14 | 73x73 | 5,329 | M | 667 bytes | Pending |
| V25 | 117x117 | 13,689 | L | 2,520 bytes | Pending |
| V40 | 177x177 | 31,329 | L | 4,296 bytes | Reserved |
Visual representations of barcode and QR encoding patterns. The raw visual language of machine-readable data, from linear barcodes to two-dimensional matrix symbols.
The foundational rules governing this design system, derived from the engineering principles of machine-readable symbology.