# Design Language for iggi.boo ## Aesthetics and Tone iggi.boo embraces a Scandinavian aesthetic — clean functional design rooted in Nordic principles of democratic beauty, where every element serves a purpose and ornament emerges from structure rather than decoration. The playful ".boo" TLD injects a ghost-like whimsy into the otherwise restrained Nordic framework, creating a delightful tension between Scandinavian restraint and spooky-cute playfulness. Think HAY furniture catalog meets a friendly Halloween night — functional minimalism with unexpected ghostly charm. The atmosphere is approachable and casual, inviting exploration through simplicity rather than complexity. Surfaces are matte and tactile, colors are muted but purposeful, and white space is generous and intentional. The site should feel like a well-organized Nordic home where a friendly ghost has taken up residence. ## Layout Motifs and Structure The layout employs a **HUD-overlay** architecture — content elements float over a persistent background as semi-transparent information panels, reminiscent of heads-up display interfaces but softened by Scandinavian design principles. **HUD-Overlay Architecture:** - Background: A soft, full-viewport gradient that shifts subtly as the user scrolls (deep ocean blue transitioning to lighter tones) - Overlay panels: Content containers float over the background with frosted-glass effects, arranged in an asymmetric but balanced composition - Primary panel: 60% viewport width, left-aligned, containing main content - Secondary panels: Smaller (30-35% width) floating panels on the right side with supplementary information - Ghost motif panel: A small floating panel (200px square) containing the iggi ghost mascot character, repositioning as the user scrolls **Structural Details:** - All panels have generous internal padding (40px), rounded corners (12px), and a frosted-glass background (backdrop-filter: blur(20px), rgba background at 0.85 opacity) - Panel arrangement creates intentional negative space — at least 30% of the viewport is always "empty" background - Navigation: Minimal — a floating pill-bar at the top with 4-5 text links - Scroll behavior: Panels fade and drift slightly as the user scrolls, creating a gentle parallax between the background gradient and the floating content ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — a geometric sans-serif with Nordic cleanness at 2rem-3.5rem, weight 700. Tight letter-spacing (-0.02em) for a confident, modern Scandinavian feel. - **Body Text:** "DM Sans" at 1rem, weight 400, line height 1.7. The same family maintains visual consistency, a very Scandinavian approach. - **Accent/Code:** "DM Mono" (Google Fonts) — matching monospace for technical details and emphasized data at 0.875rem. - **Ghost Labels:** "DM Sans" at 0.75rem, weight 500, italic, for whimsical ghost-related labels and easter egg text. **Color Palette:** - **Nordic Deep:** #1a2744 — deep ocean blue, the dominant background color - **Fjord Blue:** #2d4a7a — mid-tone blue for panel backgrounds and secondary surfaces - **Glacier White:** #f0f4f8 — clean white with cool undertone for text and light surfaces - **Ash Gray:** #8899ad — muted gray-blue for secondary text and borders - **Ghost Mint:** #98e8c1 — soft minty green for the ghost character accent and interactive highlights - **Warm Candle:** #f0c27f — gentle warm yellow for occasional warmth and hover states - **Duotone Dark:** #0d1b2a — deepest blue-black for high-contrast text elements - **Frost Overlay:** rgba(240, 244, 248, 0.08) — barely-visible frost layer for glass panel edges ## Imagery and Motifs **Duotone Photo Treatment:** Any photographic imagery is processed in a two-tone palette (Nordic Deep + Glacier White), creating a cohesive Scandinavian editorial feel. Images appear as blue-tinted monochrome studies. **Geometric Shape Accents:** - Circles, hexagons, and rounded rectangles used as decorative elements at low opacity (0.05-0.1) floating in the background - The hexagonal shapes reference honeycomb structures — orderly, natural, Nordic - Small geometric patterns (tiny triangles or dots in grid formation) serve as section textures **Ghost Character System:** - A simple, friendly ghost illustration (SVG) — two dots for eyes, a wavy bottom edge, slightly translucent — appears as a recurring mascot - The ghost subtly follows the scroll position, floating between content panels - On hover over empty background areas, the ghost briefly appears and waves before fading - The ghost's transparency level changes with scroll: more visible in darker sections, more translucent in lighter ones **Stagger Animation Pattern:** - Content elements within panels enter with staggered timing (50ms delay between siblings) - Each element slides up 16px and fades in (300ms duration, ease-out) - The stagger creates a cascade effect — a waterfall of content settling into place ## Prompts for Implementation Build the page as a floating-panel HUD over a scrolling gradient background. The background should be a large linear-gradient (at least 300vh tall) that the viewport scrolls through, creating continuous color evolution. Content panels are position: sticky or position: fixed elements that transition between states as scroll thresholds are crossed. The frosted glass panels use backdrop-filter: blur(20px) with a rgba(26, 39, 68, 0.85) background on dark sections and rgba(240, 244, 248, 0.85) on light sections. Borders use 1px solid rgba(255,255,255,0.1) for a subtle edge highlight. The ghost character should be an SVG element with position: fixed, its vertical position interpolated based on scroll progress using requestAnimationFrame. The ghost's opacity should be controlled by a CSS custom property that JavaScript updates on scroll (opacity: calc(0.3 + var(--scroll-progress) * 0.4)). Implement the stagger animation using Intersection Observer: when a panel enters the viewport, apply the stagger delay to its children using CSS transition-delay calculated from child index (element.style.transitionDelay = `${index * 50}ms`). Each child transitions from opacity: 0, transform: translateY(16px) to their resting state. The floating geometric shapes in the background should be positioned absolutely within the gradient background, slowly drifting with CSS animations (20-40s loop, linear timing) on both translateX and translateY. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the floating Nordic panels and the ghost character create a storytelling atmosphere that communicates through design restraint and whimsical surprise. ## Uniqueness Notes 1. **Scandinavian design with ghost mascot whimsy:** The tension between Nordic minimalist restraint and a playful ghost character creates a tonal uniqueness that avoids both sterility and childishness. 2. **HUD-overlay panels on gradient background:** Floating frosted-glass panels over a continuously shifting gradient background creates spatial depth uncommon in Scandinavian-inspired designs. 3. **Scroll-following ghost character:** An SVG mascot that repositions based on scroll creates a companion narrative element that personalizes the browsing experience. 4. **Hexagonal geometric background patterns:** The honeycomb shapes reference both Scandinavian geometric tradition and natural structures, adding subtle visual richness to the minimal design. 5. **Duotone photography in Nordic blue palette:** Processing all imagery in the same two-tone blue treatment creates absolute visual cohesion that reinforces the Scandinavian identity. **Seed/Style:** aesthetic: scandinavian, layout: hud-overlay, typography: bebas-bold, palette: ocean-deep, patterns: stagger, imagery: duotone-photo, motifs: geometric-shapes, tone: approachable-casual **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 scandinavian aesthetic, hud-overlay layout, ocean-deep palette, duotone-photo imagery, and approachable-casual tone.