# Design Language for gabs.day ## Aesthetics and Tone gabs.day channels the explosive, rule-breaking energy of late-1980s Memphis Group design -- Ettore Sottsass's riotous furniture, Nathalie Du Pasquier's clashing textile prints, the Carlton bookcase's defiant asymmetry -- but refracted through a contemporary candy-coated digital lens. The aesthetic is **crystalline Memphis**: imagine a Memphis Milano showroom where every surface has been transmuted into faceted, gem-like polygons, each face catching and refracting candy-bright light into prismatic spray patterns across terrazzo floors. The tone is irrepressibly playful -- not cute-playful but design-literate-playful, the kind of playfulness that knows exactly which rules it's breaking and grins while snapping them in half. There is a deliberate tension between the geometric rigor of crystalline facets (sharp edges, precise angles, transparent refractive surfaces) and the anarchic pattern-clashing of Memphis (zigzags colliding with leopard prints, squiggles elbowing polka dots). The site feels like opening a jewel box stuffed with candy wrappers folded into origami crystals -- precious, ridiculous, and utterly magnetic. Every section should feel like a new room in an impossible crystal palace where the walls are papered in competing geometric prints and the chandeliers are made of solidified bubblegum. ## Layout Motifs and Structure The layout is built on a **modular-blocks** system -- a grid of discrete, self-contained rectangular modules that tile together like a Memphis-inspired puzzle. Unlike centered or single-column layouts, the modular-blocks approach treats the viewport as a field of autonomous zones, each block operating as its own micro-composition with its own internal alignment, background pattern, and visual hierarchy. **Block Architecture:** - **The Grid:** A CSS Grid container using `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` with `gap: 0` -- blocks butt directly against each other with no gutter space, relying on their contrasting background patterns and colors to define boundaries. On wider viewports (>1200px), the grid becomes a fixed 4-column layout with explicit `grid-row` and `grid-column` spanning: some blocks occupy 1x1, others span 2x1, 1x2, or the hero block spans 2x2. The result is a Mondrian-esque irregular grid where block sizes vary unpredictably. - **Block Types:** 1. **Hero Crystal Block (2x2):** The largest module, positioned top-left on desktop. Contains the domain name "gabs.day" rendered as a 3D crystalline text effect (CSS `background-clip: text` with a faceted gradient that simulates gem faces). Background is a rotating Memphis terrazzo pattern (CSS-generated using radial-gradient confetti dots in candy colors atop a solid #FF6B9D pink base). The text sits at an intentional 7-degree tilt (`transform: rotate(-7deg)`). 2. **Pattern Blocks (1x1):** Pure decorative modules containing only a repeating Memphis pattern -- zigzag stripes, confetti dots, squiggle lines, or cross-hatch grids, each in a different candy-bright colorway. These blocks have no text content; they serve as visual palette cleansers between content blocks. Each pattern is generated entirely in CSS using `repeating-linear-gradient`, `repeating-conic-gradient`, and layered `radial-gradient` techniques. 3. **Content Blocks (1x1 or 2x1):** Text-bearing modules with a solid background color from the candy palette. Text is left-aligned within the block with generous padding (clamp(1.5rem, 4vw, 3rem)). Each content block has a signature decorative element: a thick geometric border on one side only (e.g., left border 8px solid #FFD93D, or bottom border 12px solid #6BCB77) that identifies it as a "content" block. 4. **Crystal Shard Blocks (1x2, vertical):** Tall, narrow modules with a CSS clip-path cutting the block into a faceted crystal shard shape (`clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`). These contain a single visual -- an SVG crystalline motif or a mixed-media image treated with a faceted overlay. Background uses a candy-to-clear gradient simulating crystal transparency. - **Block Interaction:** Blocks are not static tiles. On hover, each block performs a subtle spring-physics bounce (scale from 1.0 to 1.03 with a `cubic-bezier(0.34, 1.56, 0.64, 1)` easing, 300ms duration) and its internal pattern shifts hue by 15 degrees (`filter: hue-rotate(15deg)`). Adjacent blocks respond with a sympathetic micro-shift (translate 2px away from the hovered block) using CSS `:has()` selectors on the grid container. - **Mobile Collapse:** On viewports <768px, the grid collapses to a single column but retains alternating block heights -- content blocks are auto-height, pattern blocks are fixed at 120px, crystal shards become full-width horizontal bars with the clip-path adapted to a horizontal facet shape. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional grotesque with distinctive geometric character shapes (the angular 'a', the squared 'G', the kinked 'k') that perfectly bridges Memphis's geometric exuberance with grotesque-neo precision. Used at 2.5rem-7rem for block titles and the hero domain name. Weight: 700 (bold). Set with `letter-spacing: -0.03em` and `line-height: 0.92` for a tight, punchy, poster-like feel. Headlines are always set in ALL CAPS with `text-transform: uppercase`. The tight tracking and low line-height create a compressed, physical presence -- text as object, text as block, text as Memphis column. - **Sub-headlines / Labels:** "DM Sans" (Google Fonts) -- a clean, low-contrast geometric sans-serif that provides a calm counterpoint to Space Grotesk's angularity. Used at 1rem-1.5rem for block labels, tags, and navigation elements. Weight: 500 (medium). Set with `letter-spacing: 0.08em` and `text-transform: uppercase` for a small-caps effect without actual small caps. Line-height: 1.4. DM Sans's even stroke width and open apertures make it effortlessly readable at small sizes against the busy Memphis backgrounds. - **Body Text:** "IBM Plex Sans" (Google Fonts) -- a humanist-inflected sans-serif with subtle ink traps and a warm, approachable personality that prevents the design from tipping into cold geometric sterility. Used at 1rem-1.125rem for paragraph text within content blocks. Weight: 400 (regular) for body, 600 (semi-bold) for emphasis. Line-height: 1.65 with `letter-spacing: 0.01em`. The generous line-height ensures readability against the high-energy visual context. **Color Palette (Candy-Bright):** | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary | Bubblegum Pink | #FF6B9D | Hero block background, primary accent borders | | Secondary | Lemon Drop | #FFD93D | Pattern block fills, highlight text backgrounds | | Tertiary | Mint Fizz | #6BCB77 | Content block accents, hover states | | Accent 1 | Electric Lilac | #C77DFF | Crystal shard gradients, decorative borders | | Accent 2 | Tangerine Pop | #FF8C42 | Link hover color, pattern block alternate | | Accent 3 | Sky Taffy | #4CC9F0 | Inline code backgrounds, secondary pattern fill | | Dark Base | Obsidian | #1A1423 | Primary text color, dark block backgrounds | | Light Base | Cream Soda | #FFF8F0 | Light block backgrounds, body text on dark | All colors are deployed at full saturation -- no muting, no opacity reduction, no pastel softening. The candy-bright palette demands maximum chromatic punch. Background patterns layer 2-3 palette colors simultaneously (e.g., #FFD93D zigzags on #FF6B9D, with #4CC9F0 confetti dots). Text always sits on solid color fields for readability, never directly on patterns. ## Imagery and Motifs **Crystalline Geometry as Primary Motif:** The crystalline motif manifests as a family of SVG shapes -- hexagonal prisms, octahedra, elongated diamond facets, and irregular crystal cluster formations. These are rendered as flat geometric line drawings (2px stroke, no fill) in candy-bright colors against contrasting backgrounds. Each crystal form uses subtle CSS gradients on its facets to simulate light refraction: adjacent triangular faces within a single crystal shape receive slightly different tint values from the candy palette (e.g., one face #FF6B9D at 80% opacity, the adjacent face #C77DFF at 60% opacity), creating a stained-glass-window effect. **Memphis Pattern Library:** A set of 6 distinct CSS-only patterns form the site's decorative backbone: 1. **Confetti Terrazzo:** Dozens of small circles (4px-12px diameter) in random positions using layered `radial-gradient` declarations. Colors cycle through #FFD93D, #6BCB77, #4CC9F0, #FF8C42 on a #1A1423 dark field. 2. **Zigzag Bars:** Repeating diagonal stripes at 45-degree angles using `repeating-linear-gradient`, alternating between #FF6B9D and #FFF8F0, each stripe 16px wide. 3. **Squiggle Grid:** A background of wavy horizontal lines achieved with `repeating-linear-gradient` combined with a `border-image` SVG squiggle pattern. Lines in #C77DFF on #FFD93D field. 4. **Polka Burst:** Large circles (40px diameter) arranged in a offset grid pattern using two overlapping `radial-gradient` layers. #6BCB77 dots on #FF8C42 field. 5. **Cross Hatch:** Perpendicular thin lines (2px) at 0 and 90 degrees using `repeating-linear-gradient`, creating a graph-paper effect. #4CC9F0 lines on #FFF8F0 field. 6. **Triangle Scatter:** CSS clip-path triangles of varying sizes scattered across the block, achieved with multiple `conic-gradient` declarations. #FF6B9D and #FFD93D triangles on #1A1423 field. **Mixed-Media Image Treatment:** Any photographic or illustrative imagery is processed through a mixed-media pipeline that composites multiple visual layers: 1. Base image is desaturated 70% (`filter: saturate(0.3)`) and contrast-boosted (`contrast(1.3)`) 2. A candy-bright duotone overlay maps shadows to #1A1423 and highlights to a rotating palette color (different per block) using `mix-blend-mode: color` 3. A Memphis pattern pseudo-element (`::after`) is layered on top at 15% opacity, creating the illusion that the image was printed on patterned paper 4. A crystalline SVG clip-path crops the image into a faceted gem shape rather than a rectangle **Decorative Squiggles and Shapes:** Floating decorative elements -- thick squiggle lines, hollow circles, small triangles, and elongated ovals -- are positioned absolutely within blocks. These are pure CSS shapes (using `border-radius`, `clip-path`, and `border` tricks) in candy-bright colors, placed at intentionally "wrong" positions (overlapping block edges, extending beyond containers with `overflow: visible`) to create the Memphis sense of playful disorder. Each shape has a slow, continuous CSS animation: rotation (360deg over 20s), gentle float (translateY +-8px over 4s), or pulse (scale 0.95-1.05 over 3s). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should NOT be a conventional scrolling page. Instead, it opens with the Hero Crystal Block occupying the full viewport on initial load. After a 1.5-second pause, the remaining blocks spring into view from off-screen edges using staggered spring-physics animations -- blocks from the left slide in with `translateX(-120%)`, blocks from the right with `translateX(120%)`, blocks from below with `translateY(120%)`. Each block's entrance is staggered by 80ms, and each uses the spring easing curve `cubic-bezier(0.34, 1.56, 0.64, 1)` over 600ms. The overall effect is of a Memphis puzzle assembling itself from scattered pieces. **Spring-Physics Interactions:** All interactive elements use spring-based easing (the `cubic-bezier(0.34, 1.56, 0.64, 1)` curve that overshoots and settles). This applies to: - Block hover scaling (1.0 to 1.03, 300ms) - Button press feedback (scale to 0.96 on mousedown, spring back to 1.0 on mouseup) - Pattern block color cycling on click (hue-rotate 0 -> 30 -> 60 -> 90 degrees, each step springy) - Crystal shard rotation on hover (rotate 3deg, spring easing) - Scroll-triggered block reveals: blocks that enter the viewport via scrolling use `IntersectionObserver` with threshold 0.2, triggering a spring-up animation (translateY(60px) + opacity 0 -> translateY(0) + opacity 1, 500ms spring easing) **Pattern Animation System:** Memphis patterns are not static. Each pattern block contains a continuously animating background: - Confetti Terrazzo: background-position shifts 200px diagonally over 15s (linear, infinite), making confetti appear to drift - Zigzag Bars: the stripe angle rotates from 45deg to 135deg and back over 10s using `@property` animated gradient angles - Squiggle Grid: line thickness oscillates between 1px and 3px over 4s - All pattern animations run at reduced motion by default and are disabled entirely via `prefers-reduced-motion: reduce` **Crystalline Text Effects:** The hero domain name "gabs.day" uses a layered text treatment: 1. Base text in Space Grotesk 700, `color: transparent` 2. `background: linear-gradient(135deg, #FF6B9D, #C77DFF, #4CC9F0, #FFD93D)` with `background-clip: text` 3. `background-size: 400% 400%` with a slow animation shifting the gradient position over 8 seconds, creating a shimmering gem-face effect 4. A `text-shadow` stack: `2px 2px 0 #1A1423, 4px 4px 0 rgba(26,20,35,0.3)` for a retro Memphis shadow-block effect 5. On hover, the gradient animation speed doubles and a crystalline sparkle effect (CSS `radial-gradient` dots animating opacity) appears around the text **AVOID:** - CTA-heavy layouts with "Sign Up Now" buttons - Pricing blocks, feature comparison tables, stat-grids - Corporate testimonial carousels - Generic hero-image-plus-headline layouts - Centered single-column blog-style flow - Monochromatic or muted color approaches - Warm-earthy palettes or gradient-heavy backgrounds - Conventional navigation bars (use block-based navigation instead, where clickable blocks serve as navigation targets) **PREFER:** - Full-viewport block compositions that reward exploration - Unexpected block arrangements that break reading patterns - Decorative elements that cross block boundaries - Pattern-on-pattern layering (Memphis maximalism) - Crystal-sharp geometric precision in layout with anarchic color freedom - Interactive surprises hidden in pattern blocks (click a confetti block and its colors scramble) ## Uniqueness Notes **Differentiators from other designs:** 1. **Memphis-Crystalline Fusion:** No other design in the portfolio combines the pattern-clashing maximalism of Memphis Group design (1% frequency -- deeply underused) with crystalline geometric motifs. The Memphis aesthetic is about flat, printed patterns and anti-functional decoration; the crystalline motif is about three-dimensional faceted geometry and light refraction. Fusing these creates a visual language that is simultaneously flat and volumetric, printed and gem-like, chaotic and precisely structured. 2. **Candy-Bright Palette at Full Saturation:** The candy-bright palette category sits at only 1% frequency in existing designs. While most designs default to warm, muted, or gradient palettes (100%, 70%, 91% frequency respectively), gabs.day deploys 8 fully-saturated candy colors with zero muting. The palette is unapologetically loud -- pink against yellow against purple against green -- in direct opposition to the muted-warm-gradient consensus. 3. **Modular-Block Grid Without Centering:** The modular-blocks layout (6% frequency) is used here without any centered alignment -- blocks tile edge-to-edge with no gutters, each block an autonomous visual unit. This stands in stark contrast to the 99% frequency of centered layouts. The grid operates more like a game board or a quilting pattern than a webpage, and blocks span unpredictably (1x1, 2x1, 1x2, 2x2) creating a Mondrian-meets-Memphis spatial rhythm. 4. **Spring-Physics Animation Model:** While spring patterns appear at 27% frequency, gabs.day makes spring physics the exclusive animation paradigm -- every movement on the site (hover, scroll-reveal, entrance, interaction feedback) uses the same spring easing curve. This creates a cohesive physical personality where everything bounces, overshoots, and settles, as if the entire interface is made of resilient candy-colored rubber. 5. **CSS-Only Memphis Pattern Library:** The six generative Memphis patterns are built entirely with CSS gradients and do not use any image assets or SVG pattern fills. This technical approach is unique: patterns are animatable (gradient angles, positions, and sizes can be keyframed), themeable (swap hex values to recolor entire patterns), and infinitely tileable without visible seams. **Chosen Seed:** - aesthetic: memphis - layout: modular-blocks - typography: grotesque-neo - palette: candy-bright - patterns: spring - imagery: mixed-media - motifs: crystalline - tone: playful **Avoided Overused Patterns:** - Centered layout (99% frequency) -- replaced with edge-to-edge modular blocks - Warm palette (100%) -- replaced with candy-bright at full saturation - Gradient palette (91%) -- solid colors dominate; gradients used only on crystal facets - Muted palette (70%) -- zero muting; all colors at maximum chromatic intensity - Mono typography (99%) -- no monospace fonts used; grotesque-neo (Space Grotesk) leads - Vintage motifs (76%) -- replaced with crystalline geometry, zero nostalgic references - Parallax patterns (79%) -- no parallax scrolling; spring-physics block animations instead - Scroll-triggered (97%) -- used sparingly for block entrances only, not as the primary animation paradigm