# Design Language for recycle.makeup ## Aesthetics and Tone recycle.makeup exists at the intersection of haute couture runway chaos and environmental punk -- a world where discarded lipstick tubes become sculptural art, where expired foundation bottles are arranged like museum specimens under gallery lighting, and where the act of recycling cosmetics is treated as a radical creative performance rather than a chore. The aesthetic is **avant-garde** in the truest sense: confrontational, experimental, deliberately uncomfortable in its beauty. Think Rei Kawakubo's Comme des Garcons deconstructed garments applied to web design -- asymmetric collisions of photographic grit, typographic explosions, and deliberate visual dissonance that somehow resolves into something magnetic and memorable. The tone is **whimsical-creative** -- not cute-whimsical, but the whimsy of an artist who takes discarded eyeliner pencils and arranges them into a map of constellations. There is humor here, but it is dry and knowing. The site winks at the absurdity of beauty industry waste while celebrating the transformative potential of reuse. Every scroll interaction should feel like turning the page of an avant-garde fashion magazine that has been reassembled from recycled paper by a very talented collage artist who spent too long in a Zurich Dada café. The visual world draws from three specific references: (1) the chaotic editorial spreads of early-2000s *Visionaire* magazine, where photography, typography, and illustration collided without hierarchy; (2) the textured, grain-heavy aesthetic of risograph printing, where imperfection is the point; (3) the defiant maximalism of punk zine culture, where cut-and-paste layouts communicated urgency and authenticity. ## Layout Motifs and Structure The layout follows a **magazine-spread** composition -- each viewport-height section is treated as a separate spread in an oversized fashion editorial. Content is arranged in overlapping layers rather than neat rows, with text blocks, image areas, and decorative elements occupying different z-index planes that create genuine spatial depth. **Magazine-Spread Architecture:** - **The Cover Spread (Hero):** A full-viewport opening that presents the domain name "recycle.makeup" as if it were the masthead of a fashion magazine -- oversized, tilted 2.3 degrees counter-clockwise, partially cropped by the viewport edge. A secondary subtitle line ("the beauty of what's left behind") sits in a contrasting typeface at the bottom-right, deliberately small against the massive headline. The background is a field of CSS-generated noise grain in warm charcoal (#2A2A2A) with a single accent slash of electric coral (#FF6B6B) cutting diagonally across the lower third. - **Spread 2 -- The Collection:** A magazine-spread layout with a dominant left panel (65% width) featuring a tall vertical content block, and a right panel (35% width) containing three stacked caption boxes with generous padding. The left panel's content bleeds past its container by 40px on the left edge, creating the sense that the page extends beyond the screen. Text wraps around an irregularly-shaped CSS clip-path void, as if cut around an invisible object. - **Spread 3 -- The Process:** A three-column layout where columns have dramatically different widths (15% / 50% / 35%) and different vertical offsets (0px / -80px / -160px), creating a cascading staircase effect. Each column contains a different content type: a vertical label in the narrow column, a long-form narrative in the wide column, and a stack of small annotated diagrams in the third. - **Spread 4 -- The Gallery:** A layered-depth composition where four rectangular content panels overlap each other at slight angles (rotate values between -1deg and 3deg), stacked via z-index. Each panel has a different background color from the palette, and hovering reveals the full panel by animating it to the top of the stack with a spring-physics ease. The panels cast no shadows -- depth is communicated purely through overlap and color contrast. - **Spread 5 -- The Manifesto:** A single centered text block on a stark white (#FAFAFA) background, using the display typeface at maximum size. The text is set in a narrow measure (max-width: 480px) creating an intimate, almost claustrophobic reading experience against the vast white space. A single thin line (1px, #2A2A2A) extends from the bottom of the text block to the bottom of the viewport. **Layered-Depth System:** Throughout the site, elements exist on three distinct visual planes: (1) background textures and noise, (2) primary content blocks with slight transforms, (3) floating accent elements (small typographic labels, decorative marks, thin rules) that sit above everything. This three-plane system creates a sense of physical depth without relying on drop-shadows or 3D transforms. ## Typography and Palette **Typography:** - **Headlines / Display:** "Libre Baskerville" (Google Fonts) at weight 700, italic variant. This typeface carries the weight of editorial tradition -- its high-contrast letterforms and elegant serifs ground the avant-garde chaos in something historically legible. Used at sizes from 4rem to 9rem, with letter-spacing tightened to -0.03em. The italic variant adds a sense of urgency and forward motion, as if the headlines are leaning into the reader. - **Accent / Labels:** "Space Mono" (Google Fonts) at weight 400. Used for small annotations, category labels, section markers, and metadata. Always uppercase, letter-spacing set wide at 0.15em, size range 0.65rem-0.85rem. The monospace grid of Space Mono provides a mechanical counterpoint to the organic curves of Libre Baskerville, embodying the eclectic-hybrid typography approach -- two typefaces that should not work together but create productive tension. - **Body Text:** "DM Sans" (Google Fonts) at weight 400 and 500. A clean geometric sans-serif that serves as the neutral workhorse -- readable at 1rem-1.15rem, line-height 1.72, providing calm intervals between the visual storms of the display and accent type. Paragraph text is set in #3D3D3D on light backgrounds and #E0E0E0 on dark backgrounds. **Palette:** The palette is **high-contrast** -- built on the collision between near-black and near-white with precisely deployed accent colors that hit like punctuation marks. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ground | Smokescreen | #1E1E1E | Primary dark background, hero sections | | Soft Ground | Recycled White | #F2EDE8 | Light background sections, paper texture base | | Text Dark | Almost Black | #2A2A2A | Headlines on light, rules, borders | | Text Light | Warm Ash | #E8E2DA | Body text on dark backgrounds | | Accent Primary | Electric Coral | #FF6B6B | Primary action color, diagonal slashes, hover states | | Accent Secondary | Oxidized Teal | #3ABFAD | Secondary highlight, small labels, link underlines | | Accent Tertiary | Bruised Violet | #8B5CF6 | Rare emphasis, pull quotes, section markers | | Neutral Mid | Concrete | #9A9A9A | Metadata, captions, disabled states | The high-contrast system means backgrounds are either very dark (#1E1E1E) or very light (#F2EDE8), never medium gray. Accent colors appear sparingly -- no more than 15% of any given viewport should contain color; the rest is the push-pull of dark and light. ## Imagery and Motifs **Noise-Texture as Foundation:** Every background surface carries a subtle CSS-generated noise grain -- not a static image overlay, but a procedurally generated SVG `` filter applied to background pseudo-elements. The noise parameters are: `baseFrequency="0.65"` for coarse grain on dark sections (simulating expired film stock) and `baseFrequency="1.2"` for fine grain on light sections (simulating recycled paper texture). The noise opacity is kept low (0.04-0.08) so it functions as a tactile quality rather than a visual distraction. This noise-texture approach gives every surface a physical, almost printerly quality -- nothing feels digital or sterile. **Layered-Depth Motifs:** Decorative elements are arranged in overlapping planes to reinforce the magazine-spread feeling: 1. **Diagonal Slash Marks:** Thin lines (2px) of Electric Coral (#FF6B6B) that cut across sections at 35-degree angles, extending from one edge of the viewport to the other. These lines exist on the topmost z-plane and appear to float above the content, like editorial crop marks or printer registration lines that were left in deliberately. 2. **Typographic Debris:** Small fragments of text -- single words like "REUSE" or "TRANSFORM" or "RECLAIM" -- scattered in Space Mono uppercase at 0.6rem, rotated at random angles between -15deg and 15deg, positioned at the margins of content blocks. These function like the marginal annotations in an avant-garde art catalog, adding visual noise that reinforces the recycled/reassembled aesthetic. 3. **Geometric Punctuation:** Small circles (12px diameter, stroke only, no fill) and short horizontal rules (40px wide, 1px) placed at transition points between sections. These elements use Oxidized Teal (#3ABFAD) at 50% opacity and serve as visual breathing marks -- the design equivalent of punctuation in a long sentence. 4. **Clip-Path Voids:** Irregular polygon clip-paths applied to content blocks, creating the impression that sections have been torn or cut, like pages ripped from a magazine. The clip-path edges are angular (not curved), with 5-7 vertices, suggesting scissors rather than water damage. **SVG Pattern Backgrounds:** Two custom SVG patterns used as subtle background textures in alternating sections: - A cross-hatch pattern (45-degree lines, 1px stroke, 8px spacing) in #2A2A2A at 0.03 opacity -- barely visible, creating a sense of woven fabric or screen-printed mesh. - A dot grid (2px circles, 20px spacing) in #9A9A9A at 0.05 opacity -- referencing halftone printing and Ben-Day dots, tying the visual language back to print culture. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be built as a single-page vertical scroll experience divided into 5 viewport-height spreads, each functioning as a page in an avant-garde beauty magazine about cosmetic recycling. The narrative arc moves from provocative opening (the cover) through education (the collection and process) to emotional resonance (the gallery and manifesto). There should be no traditional navigation bar -- instead, a small fixed element in the top-right corner shows the current spread number in Space Mono (e.g., "03/05"). **Pulse-Attention Animation System:** Rather than scroll-triggered animations that play once and stop, the site uses a persistent pulse-attention pattern: key elements subtly animate on a continuous loop to draw the eye. Specifically: - The Electric Coral diagonal slash marks pulse in opacity between 0.6 and 1.0 on a 3-second CSS animation cycle, creating a breathing rhythm that makes the page feel alive. - Small geometric punctuation marks (circles, rules) rotate very slowly (360 degrees over 30 seconds), providing almost subliminal motion. - The spread counter in the top-right corner has a gentle scale pulse (1.0 to 1.05) every 4 seconds, drawing attention without being aggressive. - On the Gallery spread, the overlapping panels have a subtle vertical float animation (translateY oscillating 4px) at different phase offsets, creating a layered parallax-like drift that emphasizes depth without requiring scroll input. **Noise Grain Implementation:** Apply SVG filter noise to all major background sections via inline SVG in the HTML: ``` ``` Background pseudo-elements (`::before`) on each section receive `filter: url(#grain-coarse)` or `filter: url(#grain-fine)` with low opacity. This creates an organic, physical texture across the entire site without any image assets. **Eclectic-Hybrid Typography in Practice:** The collision of Libre Baskerville Italic (headlines), Space Mono (labels), and DM Sans (body) must be visually deliberate -- never accidental. Rules for maintaining productive tension: - Headlines and labels should appear in close proximity (within 20px vertical distance) to maximize the serif/mono contrast. - Body text should always have at least 40px separation from display type, creating clear hierarchical zones. - At least one instance per spread should feature a Space Mono label overlapping the edge of a Libre Baskerville headline, creating a collision that looks intentional and editorial. **Spring Physics for Interactions:** All hover states and click interactions use CSS spring-timing-function approximations via `cubic-bezier(0.175, 0.885, 0.32, 1.275)` -- an overshoot curve that creates a slight bounce. This applies to: - Gallery panel z-index reordering animations - Link underline draw animations (underlines are Oxidized Teal, drawn from left to right on hover over 300ms) - The spread counter's pulse animation **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie-cutter hero sections with centered H1 and subtitle, generic card grids, any layout that could belong to a SaaS landing page. This site should feel like an art object, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Avant-Garde Editorial as Structural System, Not Decoration:** While 95% of designs in the portfolio use playful aesthetics and 99% use centered layouts, recycle.makeup treats the avant-garde magazine-spread as its actual structural DNA. Content is arranged as overlapping, angled, deliberately asymmetric spreads that reference print editorial culture -- not as decoration on top of a conventional grid, but as the grid itself. This is fundamentally different from the dominant centered/playful approach. 2. **Continuous Pulse-Attention Over One-Shot Scroll-Triggers:** 96% of existing designs rely on scroll-triggered animations. recycle.makeup inverts this pattern entirely: its primary motion system is continuous pulse-attention -- looping, breathing animations that persist regardless of scroll position. The site feels alive at rest, not just alive when scrolled. This creates a meditative, slightly hypnotic quality that distinguishes it from the scroll-and-reveal norm. 3. **Noise-Texture as Total Surface Treatment:** While noise-texture appears in only 1% of existing designs, here it is not an accent but a foundational material. Every single background surface carries procedural SVG grain, giving the entire site the tactile quality of risograph printing or expired film. This pervasive texture system is unique in the portfolio and directly serves the "recycled" concept -- nothing on the site looks digitally pristine. 4. **Eclectic-Hybrid Typography as Deliberate Collision:** The pairing of Libre Baskerville Italic (editorial serif), Space Mono (mechanical mono), and DM Sans (neutral geometric) creates a three-voice typographic system where each voice has a distinct role and personality. At only 2% frequency, eclectic-hybrid typography is rare in the portfolio, and the specific strategy of overlapping serif headlines with mono labels creates visual friction that no other design employs. 5. **Domain-Concept Unity Through Materiality:** The domain "recycle.makeup" is reflected not through literal recycling imagery (arrows, green colors) but through the material qualities of the design itself -- torn clip-paths suggest cut paper, noise grain suggests reprinted surfaces, overlapping panels suggest layered collage, and typographic debris suggests reassembled text. The recycling concept is embedded in the design language rather than illustrated on top of it. **Chosen Seed:** aesthetic: avant-garde, layout: magazine-spread, typography: eclectic-hybrid, palette: high-contrast, patterns: pulse-attention, imagery: noise-texture, motifs: layered-depth, tone: whimsical-creative **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (96%), friendly tone (98%), minimal imagery (95%), vintage motifs (88%). None of these dominant patterns appear in the design seed or implementation guidance.