DESIGN SYSTEM // CORRUPTED DATA AESTHETICS
Built from the RGB channel model. Every color represents a discrete signal that can be isolated, shifted, and corrupted. Pure primaries dominate -- no blending, no compromise.
Three typefaces, each serving a signal layer. Bungee Shade for display -- its built-in dimensional offset mirrors chromatic aberration. Space Mono for body text. Share Tech Mono for data and system output.
A 4px base unit. Tight spacing reinforces the compressed, corrupted feel. Generous padding only at the section level to let content breathe between signal bursts.
Monospaced, uppercase, sharp edges. On hover, chromatic aberration splits the border into red and cyan channels. Filled variants invert on interaction.
Inputs sit in the void. On focus, a red/cyan chromatic split appears on the border -- the signal locks in. All form elements use monospace typography.
Content containers with a multi-color data strip along the top edge. On hover, borders split into chromatic channels. The corrupted variant adds an animated interference bar.
Reorder pixel rows by brightness, hue, or saturation. The threshold defines where order breaks into chaos. Horizontal sorts create waterfall effects; vertical sorts produce dripping, melting forms.
Remove I-frames from video compression, forcing the codec to interpolate between corrupted references. Motion vectors bleed across scene cuts. Subjects merge and dissolve into each other.
Split the RGB channels along different axes. The brain interprets the displacement as depth and motion. Lens distortion simulated through pure CSS text-shadow and box-shadow offsets.
System messages styled as terminal output. Color-coded left borders mark severity. The error state includes a data corruption animation. Critical alerts get full chromatic border treatment.
Compact labels for status, categories, and metadata. Thin borders with transparent color fills. The glitch variant flickers on hover.
Tables and progress indicators for system monitoring. Monospace throughout. Color-coded values for quick signal reading.
| Channel | Offset | Integrity | Status |
|---|---|---|---|
| RED | -3px, 0px | 98.2% | NOMINAL |
| GREEN | 0px, 0px | 99.8% | LOCKED |
| BLUE | +3px, 0px | 42.1% | DEGRADED |
| COMPOSITE | VARIABLE | 17.6% | CORRUPT |
Three separator styles. The subtle line for content breaks. The glitch bar for major section transitions. The data pattern for decorative encoding.
SUBTLE
GLITCH BAR
DATA PATTERN
The philosophy behind the corruption.
Effects serve communication. Every glitch, split, and artifact should direct attention, not obscure it. Corruption is a tool, not a crutch.
RGB channels are the atomic unit. Colors exist as isolated signals. Mixing happens at the perception layer, not the design layer.
Randomness is composed, not random. Every pixel sort has a threshold. Every data mosh has a seed. Art lives in the parameters of destruction.
Black is not absence -- it is the ground state. Content emerges from darkness. The void is the canvas on which corrupted signals paint.