# Design Language for iggi.dev ## Aesthetics and Tone iggi.dev channels an avant-garde aesthetic — deliberately unconventional compositions that challenge standard web design expectations while maintaining functional clarity. The site operates at the intersection of experimental art and developer tooling, treating code and creative expression as inseparable disciplines. Inspiration draws from Bauhaus experimental workshops, El Lissitzky's constructivist typography, and contemporary creative coding platforms like p5.js showcase galleries. The tone is whimsical-creative — playful experimentation elevated to sophisticated craft. The ".dev" TLD anchors the creative experimentation in technical credibility, ensuring the avant-garde visuals communicate "innovative developer" rather than "confused designer." Every element feels intentionally placed even when compositions appear chaotic, because true avant-garde work is deliberate disruption. ## Layout Motifs and Structure The layout uses a **modular-blocks** system — independently-sized rectangular modules arranged in an irregular but intentional composition, like architectural building blocks assembled by an artist rather than an engineer. **Modular Block Architecture:** - Content is divided into distinct rectangular blocks of varying sizes (small: 200x200px, medium: 400x300px, large: 600x400px, full-width: 100%x300px) - Blocks are arranged in a CSS Grid with template areas that create deliberate asymmetry — some blocks align to a grid, others intentionally break it - Gap between blocks: 4px — minimal, creating a tight mosaic feel - Background color of the gap area (the "grout") is visible as thin lines between modules **Section Composition:** - Hero: Three overlapping blocks of different sizes — one containing the title, one with an animated geometric pattern, one with a code snippet - Features: 5 modular blocks of varying sizes, some tall and narrow, others short and wide, containing individual feature descriptions - Showcase: A large featured block (60% width) next to two stacked smaller blocks (40% width) - About: Single full-width block with asymmetric internal layout (text at 40% left, visual at 60% right) - Footer: Grid of small equal blocks, each containing one link or piece of information ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — a geometric sans-serif with distinctive character at 2rem-4rem, weight 700. Its slightly quirky letterforms reinforce the avant-garde personality. - **Body Text:** "Space Grotesk" at 1rem, weight 400, line height 1.65. Using the same family throughout creates focused intensity. - **Code/Technical:** "Space Mono" (Google Fonts) — matching monospace companion at 0.875rem for code elements and technical data. - **Oversized Numbers:** "Space Grotesk" at 8rem-12rem, weight 700, used as large decorative numerals within blocks for section numbering. **Color Palette:** - **Coastal Sand:** #e8dcc8 — warm sandy tone, primary background for most content blocks - **Sea Foam:** #a8d5ba — soft coastal green for accent blocks and interactive highlights - **Deep Ocean:** #2c4a5a — dark teal for text and dark-mode blocks - **Coral Wash:** #e8927c — warm coral for secondary accents and hover states - **Driftwood Brown:** #6b5b4a — warm brown for secondary text and subtle borders - **Salt White:** #faf8f5 — warm white for light blocks and text on dark backgrounds - **Kelp Dark:** #1a2a2a — near-black with green undertone for the darkest elements - **Tide Blue:** #7ab5c4 — mid-tone blue for links and interactive state indicators ## Imagery and Motifs **Geometric Abstract Elements:** Each modular block may contain abstract geometric compositions — intersecting lines, overlapping circles, and rotated rectangles in the palette colors. These serve as visual "code art" that represents the creative-technical identity. **Layered Depth Motifs:** - Some blocks have elements that visually "break out" of their container using overflow: visible and negative margins, creating depth - Shadow layers between blocks: offset box-shadows (4px 4px 0 color) create a stacked-paper effect - Numbered blocks show their index in oversized typography that bleeds behind adjacent blocks **Avant-Garde Typographic Treatments:** - Text rotated 90 degrees along block edges as decorative labels - Vertical text running down narrow blocks - Overlapping text layers at different opacities creating depth - Mathematical symbols (∞, Σ, Δ) used as large decorative elements within blocks **Typewriter Effect Interactions:** - Headings type themselves into existence using character-by-character animation - Code snippets appear as if being typed in real-time with a blinking cursor - Transition between content states uses a typewriter delete-then-retype effect ## Prompts for Implementation Build the page as a modular block composition. Use CSS Grid with explicitly defined grid-template-areas that create an asymmetric but balanced layout. Each block is a grid item with defined grid-area, background color from the palette, and internal padding (24-32px). The blocks should stagger-animate on scroll: using Intersection Observer, each block enters with a transform from its nearest edge (left blocks slide from left, right blocks from right, top blocks from above) with 80ms stagger between adjacent blocks. The transition should use a custom cubic-bezier(0.2, 0.8, 0.2, 1) for a swift-then-settling feel. Implement the oversized decorative numbers as pseudo-elements (::before) on section blocks, with font-size: 10rem, position: absolute, and opacity: 0.08, placed at the bottom-right corner and overflowing the block boundaries. The typewriter effect for headings: JavaScript splits the text into characters, wraps each in a span, sets initial opacity to 0, then reveals them sequentially with 40ms intervals and a matching blinking cursor span at the end. The geometric abstract decorations within blocks should be built using CSS — overlapping div elements with border-radius, rotation transforms, and palette colors at varying opacities (0.1-0.3). These create unique visual patterns in each block without requiring image assets. For the 3D stacked-paper effect, each block gets box-shadow: 3px 3px 0 #ddd, 6px 6px 0 #ccc creating a layered paper stack beneath the content surface. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. The modular composition itself is the design — let the block arrangement, geometric art, and typographic experimentation communicate the avant-garde developer identity. ## Uniqueness Notes 1. **Modular block mosaic as page architecture:** The irregularly-sized block grid creates a composition that feels curated rather than templated, distinguishing from standard section-based layouts. 2. **Oversized decorative numerals bleeding between blocks:** Giant semi-transparent numbers create a wayfinding system that doubles as abstract art, blurring the line between navigation and decoration. 3. **Avant-garde typography within developer context:** Rotated text, overlapping type layers, and vertical lettering bring gallery-level typographic experimentation to a developer-focused site. 4. **CSS-only geometric art within blocks:** Abstract compositions built purely from HTML/CSS elements create unique visual identities for each block without relying on external imagery. 5. **Coastal palette in developer space:** The sandy/seafoam/coral color scheme avoids the typical dark-mode or blue-tech palette associated with developer sites. **Seed/Style:** aesthetic: avant-garde, layout: modular-blocks, typography: geometric-sans, palette: coastal-blend, patterns: typewriter-effect, imagery: geometric-abstract, motifs: layered-depth, tone: whimsical-creative **Avoided Overused Patterns:** corporate aesthetic (74%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (75%), minimal imagery (84%), tech motifs (81%). This design uses avant-garde aesthetic, modular-blocks layout, coastal-blend palette, geometric-abstract imagery, and whimsical-creative tone.