# Design Language for manipulated.dev ## Aesthetics and Tone manipulated.dev exposes the architecture of digital manipulation -- how data is twisted, narratives are shaped, and perception is engineered in the modern information landscape. The site functions as a forensic exhibit where the visitor witnesses manipulation techniques in real-time, experiencing them firsthand as they scroll. The aesthetic is glitch art meets anti-design: deliberately corrupted interfaces, text that rewrites itself before your eyes, and layouts that shift and distort to demonstrate the instability of manipulated information. The tone is edgy-rebellious and raw-authentic -- the unfiltered voice of a security researcher pulling back the curtain on dark patterns, deepfakes, and information warfare. There is no comfort here. The site deliberately makes the visitor uncomfortable by demonstrating manipulation techniques on the content they are reading, creating a visceral understanding that text alone cannot achieve. ## Layout Motifs and Structure **Primary layout: broken-grid** with **asymmetric** compositions that deliberately destabilize visual expectations. The layout starts orderly and progressively corrupts. The opening section uses a clean, trustworthy two-column grid. As the user scrolls deeper into manipulation techniques, the grid begins to break: columns misalign by increasing amounts (translateX offsets from 2px to 20px), text blocks overlap, and entire sections appear to "glitch" (brief transform: skewX flicker on scroll-triggered entry). **Spatial relationships**: Content panels float at slightly different z-depths (translateZ variations of 5-15px with perspective on the parent), creating subtle parallax misalignment. Some panels cast shadows to the right while adjacent panels cast shadows to the left, creating an uncanny visual contradiction. As the user progresses, panels begin to rotate slightly (0.5-2deg) and overlap their neighbors. **Navigation**: A horizontal progress bar at the top that appears trustworthy but subtly lies -- it jumps ahead, stutters backward, and at one point reverses direction entirely, demonstrating the concept of manipulated progress indicators. Below it, the actual scroll position is shown as a thin, honest red line. The contrast between the two bars is the first lesson. ## Typography and Palette **Typography** - **Display / Section Headlines:** "Syne" (Google Fonts) -- a geometric sans-serif with distinctive, slightly unsettling letterforms (the 'a' and 'g' are deliberately eccentric). Used at 3rem-5rem, weight 800. Its visual tension suits content about manipulation. - **Body / Analysis Text:** "IBM Plex Sans" (Google Fonts) -- a neutral, clinical sans-serif that evokes institutional documentation and forensic reports. Weight 400 for body, 600 for emphasis. Line-height 1.7. 16px size. - **Corrupted / Glitch Text:** "Share Tech Mono" (Google Fonts) -- a monospace font used for text that undergoes visible manipulation (character replacement, scrambling effects). Weight 400. Its technical character reinforces the forensic tone. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Surface Clean | Trustworthy light gray | #f0f0f5 | | Corrupted Dark | Darkened manipulation zone | #12111a | | Honest Red | Truth indicator line | #e53935 | | Deceptive Green | False trust signal | #4caf50 | | Glitch Magenta | Digital corruption accent | #ff00ff | | Signal Noise | Static interference | #8888aa | | Warning Amber | Attention/alert tone | #ffab00 | The palette intentionally weaponizes color psychology. Deceptive Green appears on manipulated content to demonstrate how green is used to signal trustworthiness. Honest Red marks genuinely reliable elements. The visitor must learn to distrust familiar color cues. ## Imagery and Motifs **Core Visual Motifs** 1. **Text Rewrite Animation**: Key paragraphs display one version of text, then visibly rewrite themselves to a different version -- characters scramble (typewriter-effect using JS to replace characters with random characters before settling on final text, 30ms per character) before resolving into the corrected/revealed text. This demonstrates how easy it is to present different truths through the same channel. 2. **Glitch Tears**: Horizontal bars (3-8px height, full viewport width) that periodically slice through the page, offsetting the content above and below by 5-15px for 100-300ms before snapping back. These CSS-animated glitch strips use clip-path to isolate horizontal bands and translateX to shift them. Frequency increases as the user scrolls deeper. 3. **Trust Badges That Corrode**: Decorative trust elements (shield icons, checkmark badges, star ratings) appear alongside content but slowly corrode -- their borders become jagged (via animated clip-path polygon vertices), their colors shift from Deceptive Green to Signal Noise, and their icons pixelate (CSS filter: contrast(1000%) at small sizes). 4. **Data Fingerprint Watermark**: A faint, large fingerprint pattern (SVG path drawing) sits behind the main content area at 0.03 opacity, representing the invisible tracking and data fingerprinting that underlies digital manipulation. 5. **Before/After Split Panels**: Some content sections use a draggable vertical split (CSS resize handle) where the left side shows the "manufactured" version and the right shows the "raw" version. The split handle is styled as a jagged tear in the page. ## Prompts for Implementation **Storytelling and Narrative Arc** The site begins with a clean, professional, trustworthy appearance -- Surface Clean background, well-organized grid, green checkmarks, a progress bar. Everything signals safety and authority. A large headline reads: "You Can Trust Everything On This Page." Scrolling to section 2, the first manipulation is revealed. The headline from section 1 visibly rewrites itself (even when scrolled past, the fixed-position ghost of it remains and rewrites in the background). The layout begins to crack: one panel shifts 3px left. The progress bar stutters. Section 3 intensifies: glitch tears appear. Trust badges begin corroding. Text paragraphs rewrite themselves in real-time as the user watches. The background transitions from Surface Clean to Corrupted Dark. The grid breaks further. Section 4 provides the forensic analysis -- in clean, honest formatting (Honest Red border-left on reliable content blocks), the site explains each technique it just demonstrated. The layout stabilizes but never fully returns to the clean state from section 1, representing permanent awareness. The final section presents tools and resources in a deliberately austere, stripped-down layout -- no decoration, no trust signals, just raw text. The honest red progress line completes. The manipulative green bar never does. **Animation Priorities** - Text rewrite scramble (JS requestAnimationFrame loop replacing characters at 30ms intervals) - Glitch tear horizontal offset (CSS keyframes with random-seeming translateX values, triggered by scroll position) - Trust badge corrosion (CSS transition on clip-path, filter, and color properties, triggered by IntersectionObserver) - Progress bar manipulation (JS scroll listener driving two independent progress indicators with deliberate mismatch on the deceptive one) - Before/after split drag (CSS resize or JS drag handler on split panel) **Full-screen Narrative Experience**: Sections use min-height: 100vh. The transition from clean to corrupted is the core narrative arc and must feel organic, not abrupt. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, card-grid product displays, conventional testimonials (these would undermine the anti-manipulation message). ## Uniqueness Notes **Differentiators:** 1. **Self-demonstrating manipulation**: The site manipulates the visitor in real-time to teach about manipulation -- text rewrites, progress bars lie, trust signals corrode. No other design in the batch uses the medium itself as the lesson. 2. **Progressive layout corruption**: The deliberate degradation of a clean layout into broken-grid chaos as a narrative device is unique -- the visual entropy mirrors the erosion of trust in manipulated information. 3. **Weaponized color psychology**: Deliberately using green for deceptive elements and red for honest ones inverts conventional UX color coding, forcing the visitor to question their default assumptions. 4. **Dual progress bar truth/lie system**: The simultaneous display of a manipulated and an honest progress indicator creates a persistent visual metaphor for detecting misinformation. **Chosen seed/style:** abstract glitch art tech **Avoided overused patterns:** corporate aesthetic (89%), centered layout (87%), minimal imagery (84%), counter-animate (90%), mysterious-moody as sole tone (96%), mono typography (92%). Instead used broken-grid + asymmetric layout, edgy-rebellious + raw-authentic tone, geometric-sans + tech-mono typography, and high-contrast palette with neon-electric accents.