# Design Language for iggi.dev ## Aesthetics and Tone iggi.dev channels the visual chaos of a corrupted broadcast signal intercepted by an underground zine collective -- a world where pixel rows shear apart to reveal neon plasma underneath, where typographic blocks judder and snap like a misfiring CRT monitor tuned to a pirate frequency, and where the entire viewport feels like it could fragment into digital shrapnel at any moment. The aesthetic is **signal-decay glitch**: not the sanitized, decorative glitch of CSS filter demos, but the raw, violent rupture of data failing to hold its shape -- cathode phosphor trails smeared across obsidian glass, JPEG artifacts blooming into unintended beauty, scan lines that stutter and repeat like a skipping vinyl record pressed onto circuit board substrate. The tone is **energetic** in the way a live wire sparking in a rain puddle is energetic -- dangerous vitality, electric urgency, the sense that the interface is barely containing an overflow of signal. This is not the polished energy of a startup landing page. It is the frenetic, pulsing energy of a Tokyo game center at 2AM, the flicker of a neon sign with a loose transformer, the visual scream of a modem handshake visualized as light. Every element on the page should feel like it is vibrating at a frequency just below the threshold of disintegration. The inspiration draws from Ryoji Ikeda's audiovisual installations (pure data rendered as overwhelming sensory experience), the graphic design of Designers Republic (Wipeout-era digital maximalism), and the printed output of David Carson's Ray Gun magazine (deliberate destruction of readability as an act of visual expression). iggi.dev does not ask to be read -- it demands to be experienced. ## Layout Motifs and Structure The layout follows a **magazine-spread** composition -- not the genteel, whitespace-heavy editorial spread of a lifestyle publication, but the aggressive, overlapping, bleed-to-edge layout language of experimental print zines like Emigre, Fuse, and Octavo. Content blocks are treated as physical objects colliding on a surface, overlapping deliberately, casting hard-edged digital shadows, and breaking the viewport edge as though the design extends infinitely beyond the screen. **Primary Grid: The Shattered Column System** The base grid is a 12-column system that has been deliberately "broken" -- columns are not uniform widths. Instead, the grid alternates between narrow (1-unit) and wide (3-unit) columns in an irregular rhythm: 1-3-1-2-1-3-1. This asymmetry creates visual tension and prevents the eye from finding a predictable resting pattern. Gutters are not consistent either; they vary between 4px (near-collision) and 32px (breathing room), creating zones of compression and expansion across the horizontal axis. **Magazine Spread Zones:** The viewport is divided into three horizontal bands that function like the spreads of an open magazine: 1. **The Masthead Band** (top 15vh): A narrow, high-density strip containing the domain name "iggi.dev" rendered in a glitched, fragmented state. Navigation is absent in the traditional sense -- instead, three or four cryptic glyphs (Unicode block elements like `\u2588\u2591\u2593`) serve as interactive hotspots, expanding on hover into full navigation labels via a rapid typewriter-decode animation. 2. **The Centerfold Band** (middle 60vh): The primary content zone, treated as the "centerfold" of the magazine spread. This band uses a split asymmetric layout where approximately 65% of the width is occupied by a single dominant visual element (a full-bleed glitch composition) and 35% contains stacked text blocks with aggressive leading (line-height: 0.95) and negative letter-spacing (-0.03em). The text blocks are rotated 1-3 degrees off-axis, as though they were paste-up elements placed slightly askew on a mechanical layout board. 3. **The Colophon Band** (bottom 25vh): A dense, information-rich footer zone styled like the colophon page of an art book. Small type (0.65rem) in tight columns, containing project descriptions, links, and metadata. Text here uses a monospaced font at reduced opacity (70%), creating a machine-readable feel that contrasts with the expressive chaos above. **Depth and Layering:** Content blocks exist on multiple z-index planes. The background layer (z-index: 0) contains slowly drifting scan-line patterns. The mid-layer (z-index: 1-5) holds the primary content. The foreground layer (z-index: 10+) contains glitch overlay fragments -- small, semi-transparent rectangles of neon color that drift across the viewport on CSS keyframe animations with long durations (30-60 seconds), creating an ever-changing interference pattern over the content. ## Typography and Palette **Typography:** - **Headlines / Display:** "Chakra Petch" (Google Fonts) -- a Thai-Latin typeface with sharp, angular terminals and a distinctly technological character. Its stroke geometry evokes the angularity of circuit board traces and the letterforms of early digital displays, but with enough humanist warmth to remain readable at large sizes. Used at 3.5rem-8rem for primary headings. Set with `font-weight: 700`, `letter-spacing: -0.04em`, `line-height: 0.92`, and `text-transform: uppercase`. The tight tracking and crushed line-height create dense typographic blocks that feel like compressed data packets. - **Body / Content:** "IBM Plex Sans" (Google Fonts) -- a neo-grotesque sans-serif designed for digital interfaces with exceptional clarity at small sizes. Its open apertures and generous x-height ensure readability even when the surrounding visual environment is chaotic. Used at 0.9rem-1.1rem for body text. Set with `font-weight: 400`, `letter-spacing: 0.01em`, `line-height: 1.55`. The slightly expanded tracking counterbalances the tight, aggressive headlines and gives body text room to breathe within the glitch storm. - **Accent / Code / Labels:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface with a distinctly digital aesthetic, narrower than typical monospaced fonts, creating dense columns of text that resemble terminal output or hexadecimal dumps. Used at 0.65rem-0.85rem for metadata, labels, timestamps, and any content that should read as "system output." Set with `font-weight: 400`, `letter-spacing: 0.08em`, `line-height: 1.4`. **Color Palette (Neon-Electric):** The palette is built on the principle of **neon against void** -- maximum chroma colors burning against deep, near-black backgrounds, like neon tube signage reflected in rain-slicked asphalt at midnight. - **`#0A0A0F`** -- Void Black: The primary background. Not pure black (#000) but a very dark blue-black with just enough chroma to feel like a powered-down CRT screen rather than an absence of color. This is the substrate on which all neon colors ignite. - **`#FF003C`** -- Signal Red: The primary accent. A pure, saturated red with no orange or blue contamination -- the exact hue of a "RECORDING" indicator light or a critical error state. Used for the most important interactive elements, glitch overlay fragments, and moments of visual rupture. - **`#00FF9F`** -- Phosphor Green: The secondary accent. A vivid green-cyan that references the phosphor glow of vintage monochrome CRT monitors. Used for body text highlights, link hover states, and the scan-line overlay pattern. This color should always appear to "glow" via a `text-shadow: 0 0 8px #00FF9F40, 0 0 20px #00FF9F20` effect. - **`#BF00FF`** -- Ultraviolet: A deep, electric purple used sparingly for tertiary accents, visited link states, and the glitch-shift displacement effect (where a duplicated element is offset by 2-4px in ultraviolet to simulate chromatic aberration). - **`#FFE600`** -- Arc Yellow: A high-voltage yellow used exclusively for warning states, call-to-attention moments, and the typewriter-decode animation text color. This is the color of electrical arc flash -- painful to look at directly against the void background, demanding immediate attention. - **`#1A1A2E`** -- Deep Indigo: A dark blue-purple used for card backgrounds, content block surfaces, and any element that needs to sit above the void but below the neon. Provides the "glass" layer in the layered depth system. - **`#0D0D1A`** -- Substrate: A near-black with blue undertones, used for the colophon band background and secondary surface areas. Darker than Deep Indigo but lighter than Void Black, creating a three-tier depth system. - **`#EAEAEA`** -- Static White: An off-white used for primary body text. Not pure white (#FFF) to reduce eye strain and to feel like slightly degraded video signal -- white that has passed through interference. ## Imagery and Motifs **Glitch Compositions as Primary Visual Language:** All imagery on iggi.dev is generated through CSS and SVG -- no photographs, no stock images, no external assets. Every visual element is a **glitch composition**: a programmatic arrangement of colored rectangles, displaced text fragments, and interference patterns that assembles into abstract forms suggesting corrupted data, broken transmissions, and digital entropy. **Core Visual Elements:** 1. **Scan Lines:** A persistent overlay across the entire viewport -- horizontal lines 1px tall, spaced 3px apart, rendered as a repeating CSS linear-gradient (`repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(10,10,15,0.3) 2px, rgba(10,10,15,0.3) 3px)`). Opacity oscillates between 15% and 25% on a 4-second CSS animation cycle, simulating the refresh rate flicker of a CRT display. 2. **Chromatic Aberration Blocks:** Key content elements (headings, the domain logo, featured project cards) are rendered with a triple-layer chromatic aberration effect. The element is duplicated twice via `::before` and `::after` pseudo-elements, each offset by 2-3px horizontally and colored in Signal Red and Phosphor Green respectively, with `mix-blend-mode: screen`. The offsets animate on a slow, irregular timing function (`cubic-bezier(0.68, -0.6, 0.32, 1.6)`) with 6-10 second duration, creating a constant subtle tremor in the visual field. 3. **Data Fragment Strips:** Narrow horizontal bars (full viewport width, 2-8px tall) in neon accent colors that appear at random vertical positions. These strips use CSS `clip-path: inset()` to create the impression of horizontal tearing -- as though the viewport image has been sliced and the slices displaced laterally by 10-50px. Strips animate position on staggered intervals (3s, 5s, 7s -- prime numbers to prevent synchronization), creating an ever-shifting pattern of visual disruption. 4. **Noise Grain Overlay:** A full-viewport SVG `` filter (baseFrequency 0.9, numOctaves 4, type "fractalNoise") applied as a semi-transparent overlay at 4-6% opacity. This adds a fine-grained noise texture to every surface, simulating analog video noise and preventing any area from appearing too "clean" or digital-perfect. 5. **Block Glitch Bursts:** On interaction events (hover, click, scroll threshold), rectangular blocks of 20-80px randomly appear at the interaction point, filled with one of the neon accent colors at 60-80% opacity, persist for 150-400ms, then dissolve. These bursts create a sense that user interaction is causing the interface to malfunction -- that the user's presence is destabilizing the signal. **Abstract-Tech Motifs:** - **Circuit Trace Borders:** Instead of solid CSS borders, content containers use a custom SVG pattern that resembles PCB (printed circuit board) traces -- right-angle paths with occasional diagonal segments and circular pads at junctions. These borders are rendered in Phosphor Green at 30% opacity, creating a subtle technological framing device. - **Binary Rain Columns:** In the colophon band, background columns of slowly scrolling binary digits (0s and 1s in Share Tech Mono at 0.5rem, color #1A1A2E slightly lighter than background) create a Matrix-referencing but restrained ambient texture. Scroll speed varies per column (0.5-2px/second), and digits occasionally "corrupt" -- replacing with Unicode block characters or accented variants. - **Waveform Dividers:** Section dividers are not horizontal rules but audio waveform visualizations -- SVG paths with randomized amplitude and frequency values, rendered in a single neon accent color at 40% opacity. Each waveform is unique and generated from a seeded random function so they remain consistent across page loads. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a **signal acquisition sequence**. The viewport begins as pure Void Black (#0A0A0F). After 500ms, scan lines fade in (opacity 0 to 25% over 800ms). Then, a burst of chromatic noise fills the screen -- a full-viewport rectangle cycling rapidly through Signal Red, Phosphor Green, and Ultraviolet at 50ms intervals for 400ms total (8 color flashes), simulating a TV being tuned to a signal. The noise abruptly cuts to black. A 300ms pause. Then the domain name "iggi.dev" assembles character by character from left to right (80ms per character), each character initially appearing in a random neon color before settling to Static White. As the last character locks, the full page content slam-cuts into view with zero transition -- an instantaneous revelation, as though a broadcast has locked onto its frequency. **Scroll Behavior:** Scrolling should feel like tuning through frequencies on an analog radio dial. As the user scrolls, the following effects activate: - Every 200px of scroll distance, a data fragment strip (see Imagery section) flashes across the viewport at a random vertical position, persisting for 200-600ms. - The scan-line overlay increases in density (line spacing decreases from 3px to 2px) as the user approaches the colophon band, creating a sense of increasing signal degradation. - Content blocks in the centerfold band have staggered entry animations: each block slides in from the left or right (alternating) with a 2px chromatic aberration trail, using `transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1)` for a snappy, overshooting motion. **Hover Interactions:** - Hovering any text block triggers a momentary "glitch freeze" -- the block's content is duplicated, offset 2-4px in a random direction, and displayed in Ultraviolet for 150ms before snapping back. This should use `requestAnimationFrame` for smooth execution. - Hovering the navigation glyphs causes the glyph to rapidly cycle through 8-12 Unicode block characters (`\u2588\u2593\u2592\u2591\u2584\u2580\u258C\u2590`) at 60ms intervals while the full navigation label typewriter-decodes adjacent to it in Arc Yellow. - Link hover states: text color transitions to Phosphor Green with a `text-shadow` glow effect (0 0 6px #00FF9F60), and a 1px underline draws from left to right over 200ms using `background-size` animation. **Animation Principles:** - All animations use CSS exclusively where possible; JavaScript only for interaction-triggered glitch bursts and the initial signal acquisition sequence. - Timing functions should be sharp and mechanical, not organic: prefer `cubic-bezier(0.16, 1, 0.3, 1)` (sharp overshoot), `steps(4, end)` (stepped/digital), and `cubic-bezier(0.68, -0.6, 0.32, 1.6)` (violent overshoot) over smooth `ease` or `ease-in-out`. - No animation should last longer than 800ms for user-triggered actions. Ambient animations (scan lines, noise, fragment strips) use long durations (4-60 seconds) to create slow, evolving visual texture. - `prefers-reduced-motion` media query must disable all glitch burst effects, chromatic aberration animations, and the signal acquisition intro, replacing them with instant-on static display. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, stock photography, gradient mesh backgrounds, rounded-corner card layouts, hamburger menu navigation, hero image sliders. **BIAS TOWARD:** Full-viewport narrative sequences, typographic density, overlapping z-index compositions, ambient visual texture, interaction-as-disruption metaphors, raw data aesthetics, experimental navigation patterns. ## Uniqueness Notes **Differentiators from other designs:** 1. **Signal Acquisition Opening Sequence:** No other design in the portfolio uses a broadcast-tuning metaphor as its entry animation. While other designs employ fade-ins, SVG path draws, or progressive reveals, iggi.dev opens with a violent burst of chromatic noise followed by a slam-cut to content -- a confrontational, anti-elegant approach that immediately establishes the glitch identity. The 400ms noise burst (8 rapid color flashes) is deliberately uncomfortable, more akin to a hardware test pattern than a designed animation. 2. **Shattered Column Grid System:** The irregular column rhythm (1-3-1-2-1-3-1) is not found in any other design. Most designs use either centered single-column, symmetric multi-column, or standard 12-column grids. The shattered grid creates a visual rhythm that feels unstable and unpredictable -- the layout itself is a form of glitch, where the underlying structural system has been deliberately corrupted. 3. **Neon-Electric Palette with Void Substrate:** While a few designs use dark backgrounds, none combine the specific four-neon-against-near-black approach of iggi.dev. The palette is constrained to exactly four high-chroma neon colors (#FF003C, #00FF9F, #BF00FF, #FFE600) against a three-tier dark substrate (#0A0A0F, #0D0D1A, #1A1A2E). This creates a visual system where color itself functions as "signal" and darkness functions as "void" -- a binary relationship not explored in other designs which tend toward tonal gradients and blended palettes. 4. **Interaction-as-Destabilization:** In most designs, hover and click interactions produce additive, constructive results (elements expand, reveal content, animate smoothly). In iggi.dev, every interaction produces a momentary system failure -- glitch bursts, chromatic displacement, character corruption. The user is not navigating a stable interface but destabilizing an unstable one. This inverted interaction model is unique in the portfolio. 5. **Zero-Photography Visual System:** While many designs use CSS-generated elements alongside photography, iggi.dev is entirely constructed from CSS gradients, SVG filters, Unicode characters, and programmatic color blocks. No external image assets exist. Every visual on the page is a direct expression of code -- appropriate for a .dev domain and unprecedented in its commitment to pure code-generated imagery. **Chosen Seed / Style:** - aesthetic: glitch - layout: magazine-spread - typography: display-bold - palette: neon-electric - patterns: glitch - imagery: mixed-media - motifs: abstract-tech - tone: energetic **Avoided Patterns (from frequency analysis):** - Avoided `playful` aesthetic (95% frequency) -- chose `glitch` (12%) instead - Avoided `centered` layout (99% frequency) -- chose `magazine-spread` (9%) instead - Avoided `warm` palette (100% frequency) -- chose `neon-electric` (2%) instead - Avoided `scroll-triggered` as sole pattern (96% frequency) -- primary pattern is `glitch` with interaction-triggered effects - Avoided `mono` as primary typography (99% frequency) -- chose `display-bold` (10%) with mono only for accent role - Avoided `minimal` imagery (95% frequency) -- chose `mixed-media` (15%) with pure CSS/SVG generative approach - Avoided `vintage` motifs (78% frequency) -- chose `abstract-tech` (9%) instead - Avoided `friendly` tone (97% frequency) -- chose `energetic` (7%) instead