# Design Language for goomimi.com ## Aesthetics and Tone The visual identity of goomimi.com is a controlled explosion of Memphis design principles colliding with crystalline geometry -- imagine Ettore Sottsass designing a candy store inside a geode. Every surface buzzes with geometric confidence: bold zigzags, stacked triangles, dotted fields, and intersecting planes rendered in saturated candy hues. But beneath the sugar rush lives a surprising structural rigor -- crystalline lattice forms organize the chaos, giving the whole composition a faceted, gem-like precision. The mood is a Saturday morning cartoon directed by a jeweler. There is a mischievous, tongue-in-cheek playfulness where asymmetric shapes tilt at jaunty angles, colors clash with deliberate glee, and type slams into the viewport like a friendly shout. The playfulness here is not generic friendliness but a specific, almost confrontational joy -- the kind of energy found in a Tokyo Harajuku shop window or a 1985 Milan furniture showroom. Shapes don't merely sit on the page; they strut, lean, and occasionally wink. The crystalline counterpoint prevents the Memphis exuberance from tipping into noise. Faceted planes catch light. Geometric wireframe structures hover behind content blocks like scaffolding inside a kaleidoscope. The tension between the hand-painted spontaneity of Memphis patterns and the mathematical precision of crystal lattices gives goomimi.com its distinctive visual personality: structured chaos, organized delight. ## Layout Motifs and Structure The page is built as a series of modular blocks -- discrete rectangular and trapezoidal content modules that stack, overlap, and interlock like physical tiles in a Memphis mosaic. No two blocks share the same proportions. Some are tall and narrow (2:5 ratio), others are squat and wide (5:1), and a few are near-square but rotated 2-3 degrees off-axis to inject kinetic tension. **Block Architecture:** - The hero occupies 100vh and is subdivided into three overlapping modular blocks: a dominant block (70% viewport width, offset 15% from left) containing the headline, a secondary block (40% width, overlapping the dominant block's lower-right corner by 20%) holding a crystalline wireframe animation, and a tertiary accent block (15% square, floating near the top-right) pulsing with a candy-bright gradient - Below the hero, content flows in a staggered modular arrangement: blocks alternate between left-aligned (flush with a 60px left margin) and right-aligned (flush with a 60px right margin), creating a zigzag reading path down the page - Each block has a visible border -- 3px solid in a contrasting candy color -- and a subtle 4px drop shadow offset at 6px/6px in a darker tint of the block's fill color, giving a screen-printed, slightly offset registration effect - Blocks occasionally overlap their neighbors by 20-40px vertically, creating a layered collage effect where z-index determines reading hierarchy **Grid System:** The underlying grid is a 12-column system with 24px gutters, but blocks deliberately break the grid at intervals -- spanning 5 columns when 4 would be expected, or leaving 3 columns of negative space where the eye anticipates content. This controlled grid-breaking is the Memphis ethos applied to layout: rules exist to be visibly, joyfully violated. **Section Transitions:** Between major content zones, decorative "divider bars" span the full viewport width. These are thin (8-12px tall) horizontal bands filled with repeating Memphis patterns: black-and-white checkerboard, diagonal candy stripes (alternating #FF6EC7 and #FFD93D), or a row of tiny crystalline diamond shapes in #7DF9FF. These dividers act as visual palate cleansers between the dense modular sections. ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) -- a grotesque-neo sans-serif with distinctive angular terminals and a slightly squared geometry that echoes the crystalline motif. Used at 700 weight, sizes ranging from 3rem to 7rem. Letter-spacing is tightened to -0.03em at display sizes to create dense, impactful headline blocks. All headlines are set in uppercase with optical kerning. - **Body Text:** "DM Sans" (Google Fonts) -- a geometric sans-serif with open apertures and clean curves that balances Space Grotesk's angularity with warmth. Used at 400 weight for body (1.125rem, line-height 1.7) and 500 weight for emphasis. Its rounded terminals soften the reading experience against the sharp visual environment. - **Accent/Decorative:** "Syne" (Google Fonts) -- a variable-width grotesque with eccentric letterform variations, used sparingly for pull-quotes, labels, and decorative captions. Weight 600-800, sizes 1.5rem-2.5rem. Its slightly unusual proportions (wide 'M', narrow 'I') add typographic personality to callout elements. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Primary Pink | Hot Magenta | #FF6EC7 | Headlines, primary block borders, accent fills | | Secondary Yellow | Banana Mania | #FFD93D | Secondary block fills, hover states, divider stripes | | Tertiary Cyan | Electric Cyan | #7DF9FF | Crystalline wireframes, tertiary accents, link underlines | | Deep Violet | Grape Fizz | #8B5CF6 | Block shadows, secondary text emphasis, gradient endpoints | | Background White | Cotton | #FFFDF7 | Page background, block fills for text-heavy modules | | Near-Black | Obsidian | #1A1A2E | Body text, headline text, border outlines | | Accent Green | Lime Pop | #BFFF00 | Micro-interaction highlights, notification dots, sparkle effects | | Warm Coral | Papaya Punch | #FF8370 | Secondary fills, gradient mid-tones, decorative shapes | The palette operates on a candy-bright spectrum where every color can stand alone at full saturation without apology. Backgrounds are predominantly Cotton (#FFFDF7) to let the candy colors pop. Gradients are used within individual blocks, never as full-page washes -- typically a two-stop diagonal gradient from Hot Magenta to Banana Mania or from Electric Cyan to Grape Fizz. The crystalline elements use Electric Cyan at 40-60% opacity, creating a frosted-gem effect against whatever block color sits behind them. ## Imagery and Motifs **Mixed-Media Collage Approach:** All visual content blends hand-drawn Memphis pattern textures with crisp vector geometry and photographic fragments. Photographs (when used) are aggressively cropped into geometric shapes -- pentagons, parallelograms, diamond cuts -- and placed within modular blocks alongside flat-color Memphis shapes. The effect is a David Carson-meets-Nathalie du Pasquier collage aesthetic where no single media type dominates. **Memphis Pattern Library:** A set of repeating micro-patterns appears throughout the site as block fills, backgrounds, and decorative accents: - **Confetti Scatter:** Tiny triangles, circles, and squares (8-12px) in assorted candy colors scattered at random rotations on a Cotton background. Used as block fills for secondary content modules - **Squiggle Lines:** Hand-drawn-style wavy lines (2px stroke, #1A1A2E) repeating horizontally at 20px intervals. Used as subtle background textures in text-heavy blocks - **Checkerboard:** 16x16px alternating #1A1A2E and #FFFDF7 squares. Used in divider bars and as hover-state backgrounds on interactive elements - **Dot Grid:** 6px circles at 24px intervals in #8B5CF6 at 30% opacity. Used as a ghost-grid background on the page body, giving the impression of graph paper beneath the modular blocks **Crystalline Wireframes:** The crystalline motif manifests as thin-line (1-2px) geometric wireframe structures rendered in Electric Cyan (#7DF9FF). These are abstract polyhedra -- icosahedrons, dodecahedrons, truncated octahedrons -- drawn in pure line art with no fill, rotating slowly (one full rotation per 20 seconds) via CSS transforms. They appear as decorative background elements behind content blocks, scaled between 200px and 600px. At intersection points, small diamond-shaped nodes (4px) glow with a subtle pulse animation. These structures provide the "crystalline" counterweight to the loose Memphis energy -- order visible through chaos. **Decorative Shapes:** Standalone Memphis shapes float at the margins of modular blocks: - Thick-bordered circles (40-80px diameter, 4px stroke, no fill) in Hot Magenta or Banana Mania - Solid right triangles (50-100px) in Lime Pop or Papaya Punch, rotated at 15/30/45-degree angles - Zigzag lines (3px stroke, 5 peaks, spanning 200-400px) in Obsidian, placed diagonally across block corners - Small "sparkle" four-pointed stars (12-20px) in Electric Cyan, scattered in clusters of 3-5 near headlines ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should open with a full-viewport hero that immediately establishes the Memphis-crystalline fusion. The background is Cotton (#FFFDF7) with a faint Dot Grid pattern. On load, the three hero blocks slide into view from different directions (primary from left, secondary from bottom, accent from top-right) using CSS transforms with cubic-bezier(0.34, 1.56, 0.64, 1) easing -- an overshoot spring curve that makes blocks bounce slightly past their final positions before settling. The crystalline wireframe in the secondary block begins its slow rotation immediately. The headline in the primary block uses Space Grotesk at 6rem, uppercase, in Obsidian, with individual letters staggering in via opacity (0 to 1) with 40ms delays between characters. **Slide-Reveal Transitions:** As the user scrolls, each modular block enters via a slide-reveal animation. Blocks on the left slide in from x:-100% with a 0.6s duration. Blocks on the right slide in from x:100%. The reveal uses a clipping mask approach: a colored overlay rectangle (matching the block's accent color) sweeps across the block from the entry direction, revealing content beneath it as it passes -- like a curtain being pulled aside. This creates the slide-reveal pattern with visual richness beyond a simple translate. The overlay rectangle exits the block's opposite edge and disappears. IntersectionObserver triggers each reveal when the block is 20% visible in the viewport. **Interactive Micro-Moments:** - Hovering over a modular block lifts it 8px (translateY) and intensifies its drop shadow from 6px/6px to 10px/10px with a simultaneous hue-shift on the shadow color (+15deg) - Hovering over crystalline wireframes accelerates their rotation to 5 seconds per revolution and brightens the node pulse to full opacity - Clicking or tapping a block triggers a brief "confetti burst" -- 15-20 tiny Memphis shapes (triangles, circles, squares) explode outward from the click point, animated over 0.8s with random trajectories and gravity, fading to opacity 0 at endpoint. Implemented with dynamically created absolutely-positioned elements and CSS keyframe animations - Links have an Electric Cyan underline that grows from 0% width (centered) to 100% width on hover, with a 0.3s ease-out transition **Scrolling Crystalline Parallax Layer:** Behind all modular blocks, a fixed-position background layer contains 3-5 large crystalline wireframes (400-600px) positioned at various points. These wireframes translate at 40% of the scroll speed (parallax reduction via transform: translateY(calc(var(--scroll) * 0.4))), creating a subtle depth effect. Their opacity is 0.15-0.25, ensuring they remain atmospheric rather than competing with content. On mobile, this layer is hidden for performance. **Memphis Divider Animation:** The horizontal divider bars between sections animate on scroll entry: the repeating pattern (checkerboard, stripes, or diamonds) translates horizontally at a steady 30px/s, creating an infinite-scroll ticker effect. The animation runs continuously once triggered and pauses when the divider scrolls out of view (IntersectionObserver controls play state). **Responsive Behavior:** On viewports below 768px, modular blocks stack vertically in a single column but retain their candy-colored borders, drop shadows, and slight rotation offsets. The zigzag reading path collapses to a centered stack, but each block alternates its rotation between +1deg and -1deg to preserve the Memphis tilt energy. Crystalline wireframes scale to 50% and reduce to a single background element. **AVOID:** CTA-heavy layouts, pricing comparison tables, stat-counter grids, testimonial carousels, generic hero-with-stock-photo patterns, cookie-cutter SaaS landing page structures. The site is a visual experience, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Memphis-Crystalline Fusion:** No other design in the portfolio combines the loose, irreverent energy of Memphis design (confetti patterns, clashing candy colors, tilted shapes) with the mathematical precision of crystalline wireframe geometry. This creates a unique visual tension -- structured disorder -- that is distinct from the watercolor approaches (DDAZZL), the wabi-sabi patina aesthetic (GGIGGL), or the botanical/nature themes prevalent in other sites. 2. **Physical Modular Block System:** Rather than flowing sections or seamless scroll experiences, goomimi.com uses discrete, bordered, shadowed content modules that feel like physical tiles or printed cards arranged on a surface. The visible borders, offset drop shadows, and deliberate overlaps give the layout a tactile, screen-printed quality that no other design in the portfolio employs. Each block is a self-contained visual unit with its own color logic. 3. **Curtain Slide-Reveal Animation Pattern:** The slide-reveal animation uses a colored overlay that sweeps across each block like a stage curtain, revealing content beneath. This is mechanically and visually distinct from the fade-reveals, parallax entrances, and morph transitions used elsewhere. The sweeping colored rectangle adds a moment of pure color before content appears, reinforcing the candy-bright palette with every scroll interaction. 4. **Confetti Micro-Interaction on Click:** The click-triggered confetti burst -- tiny Memphis shapes exploding from the cursor point with physics-based trajectories -- is a unique interactive moment not present in any other design. It transforms passive reading into active play, rewarding exploration with visual delight. 5. **Decorative Divider Ticker Animation:** The infinitely scrolling pattern dividers between sections (checkerboard, candy stripes, crystalline diamonds) act as kinetic visual breaks that keep the page alive even when the user pauses scrolling. These moving texture bands are unique to this design's vocabulary. **Chosen Seed/Style:** - aesthetic: memphis - layout: modular-blocks - typography: grotesque-neo - palette: candy-bright - patterns: slide-reveal - imagery: mixed-media - motifs: crystalline - tone: playful **Avoided Patterns (from frequency analysis):** - AVOIDED scroll-triggered as sole animation pattern (96% overused) -- used slide-reveal as primary, with IntersectionObserver only as a trigger mechanism - AVOIDED centered layout (99% overused) -- used zigzag modular-blocks with deliberate asymmetry - AVOIDED warm palette (100% overused) -- used candy-bright with cool cyan and violet as counterweights - AVOIDED mono typography (99% overused) -- used grotesque-neo (Space Grotesk) paired with geometric sans (DM Sans) and eccentric grotesque (Syne) - AVOIDED minimal imagery (95% overused) -- used mixed-media collage combining patterns, vectors, photo fragments, and wireframes - AVOIDED vintage motifs (78% overused) -- used crystalline wireframe polyhedra as the primary decorative motif - AVOIDED parallax as primary pattern (80% overused) -- parallax is relegated to a subtle background layer at reduced intensity, not the core interaction model