# Design Language for recycle.makeup ## Aesthetics and Tone **recycle.makeup** is a **retro-futuristic beauty archive** — imagine a collector who has amassed every cosmetic advertisement from 1968 to 1984 and then fed them into an experimental AI restoration process that rendered them in resolutions that didn't exist yet. The site exists at the intersection of **opulent decadence and grain**: the grain of 35mm film pushed to 1600 ISO; the opulence of Yves Saint Laurent runway lookbooks; the future as imagined by a 1972 issue of French *Vogue*. This is not minimalist. This is not clean. This is lush, layered, slightly-too-much — and proud of it. The **grainy-textured aesthetic** permeates everything. CSS film grain (SVG `feTurbulence` filter at 60% opacity) overlays the entire viewport, as if the page itself is a photograph pulled from a developer tray. Gradients never blend cleanly — they always have 3–5% noise, making them feel like photographic paper rather than digital display. Background colors have perceptible texture depth. **Tone: opulent-grand.** This is not corporate luxury. This is *theatrical* luxury — the luxury of a 1970s Italian cinema poster, of Halston at Studio 54, of lip gloss advertised in a font so large it bleeds off the page. Every typographic choice communicates excess and intention simultaneously. Nothing is accidental; nothing is subtle; nothing is minimalist. The site documents and celebrates **recycled beauty** — repurposed, upcycled, second-life cosmetics culture — framed not as eco-guilt but as **aesthetic archaeology**: finding glamour in the discarded, opulence in the forgotten, beauty in what persists. ## Layout Motifs and Structure The core layout engine is **asymmetric panel stacking**: the viewport is divided into irregular panels (not a uniform grid) where each panel has its own gravity. The dominant pattern is a **60/40 left-heavy split** at desktop, collapsing to a stacked single column at mobile with panels reordering by `order` property based on narrative weight. **Slide-reveal is the primary interaction pattern.** Panels are initially masked by an `overflow:hidden` clip with a `clip-path: inset(0 100% 0 0)` (or `inset(0 0 0 100%)` for rightward reveals). On scroll entry, the clip-path animates from `inset(0 100% 0 0)` to `inset(0 0% 0 0)` over 900ms cubic-bezier(0.25, 0, 0, 1). The reveal direction alternates: left-to-right on odd panels, right-to-left on even panels, bottom-to-top on feature hero cards. This creates a **cinematic unmasking** — as if the page is being developed in a darkroom, each section chemically emerging from the emulsion. **No traditional navigation bar.** Navigation is a **vertical sidebar strip** fixed to the left edge, 48px wide, containing rotated text labels (`writing-mode: vertical-rl; text-orientation: mixed`) in 9px uppercase tracking. At mobile, this collapses to a floating pill button at bottom-right. **Macro structure (top to bottom):** 1. **Full-viewport hero** — two asymmetric panels side by side; left 62% has the logotype mural, right 38% has a large custom-illustration face in profile with flowing-curve hair lines. 2. **Archive Strip** — a horizontal band, full-width, containing five 200px-wide "catalogue cards" of past beauty objects; these slide in from the right via slide-reveal. 3. **Feature Essay Panel** — 60/40 split: left has a single large pull-quote set at `clamp(2.2rem, 5vw, 5rem)`, right has the body text in a 2-column narrow typographic block. 4. **Object Showcase** — three asymmetric tiles in a `grid-template-areas` layout, each with its own slide-reveal direction and delay. 5. **Colophon / Footer** — a 100vw band in the deepest palette tone, with the logotype repeated at 12vw opacity as a watermark, and a single-line copyright in 9px uppercase. **Spatial logic:** No panel is less than 40vh tall. Horizontal gutters are 0 (panels touch or overlap by 1px). Vertical separation uses the panels themselves as negative space — the background color of one panel is the breathing room before the next. ## Typography and Palette **Typography (Google Fonts only — verified):** - **Display / Logotype / Hero Headlines:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 900 italic. Used for the wordmark `recycle.makeup` at `clamp(4rem, 10vw, 12rem)` and all section-opening statements. Playfair's ball terminals and high contrast strokes evoke 1970s fashion editorial typography — it is simultaneously old and sharp. The `.makeup` TLD is set in weight 400 roman at 70% of the headline size, as if it were a subtitle on a vintage perfume bottle. - **Body / Essay Text:** [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 and 700 italic. Used at `clamp(0.95rem, 1.3vw, 1.1rem)` with `line-height: 1.75`. Libre Baskerville's generous x-height and robust serifs survive the grain overlay without pixelating, making it the load-bearing voice of every essay paragraph. - **UI / Labels / Sidebar Navigation:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 300 and 500. Used at 9–11px, uppercase, letter-spacing `0.2em`. DM Mono provides a cool mechanical contrast against the warmth of the serif display and body faces. It reads as "taxonomy label" — a cataloguer's annotation on a specimen card. - **Accent / Pull-Quotes:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic, at `clamp(1.8rem, 3.5vw, 3.2rem)`. Reserved exclusively for pull-quotes and one decorative inscription in the hero. Its extreme weight contrast and delicate hairlines look almost hand-drawn at large sizes, creating a counterpoint to Playfair's authority. **The eclectic-hybrid approach:** Four typefaces in deliberate tension. Playfair for authority; Cormorant for fragility; Libre Baskerville for legibility; DM Mono for clinical precision. Together they read as a beauty archive compiled by someone with taste too specific to conform. **Palette — Retro-Futuristic:** | Name | Hex | Role | |------|-----|------| | Nickel Velvet | `#1C1625` | Primary background, deepest tone | | Burnt Aurora | `#C94F3A` | Primary accent, slide-reveal trigger color | | Warm Mercury | `#D4C9B8` | Primary text, body copy | | Electric Iris | `#7B5EA7` | Secondary accent, sidebar, pull-quote rule | | Champagne Static | `#E8DFC8` | Light panel background, card surfaces | | Antique Copper | `#9C6B3C` | Tertiary accent, catalogue card borders | | Deep Ultraviolet | `#2D1B4E` | Feature panel background | | Ghost White | `#F5F0E8` | Maximum light, used sparingly for type on dark | The palette reads as **1970s Technicolor filtered through a neon-lit laboratory**: warm and filmic in its oranges and coppers, but cut with the cold electricity of iris and ultraviolet. The grain overlay unifies these into a coherent chromatic world that reads as aged but never nostalgic — always forward-looking. ## Imagery and Motifs **All imagery is custom-illustration.** No photography. The corpus uses photography at 87% — this site abstains entirely. The visual world is constructed from **flowing-curve vector drawings** rendered as inline SVG. **Flowing-curves as the defining motif:** Every illustration uses long, continuous Bézier strokes (stroke-only, no fills, 1.5–2px stroke width) that curve through the composition like oil poured across water. Hair coils into spirals before unwinding into abstract arabesques. A lip follows its Cupid's bow and then extends into a calligraphic flourish. A perfume bottle's outline bleeds into decorative line-work. The curves always originate in recognizable beauty iconography (face profiles, hand gestures, cosmetic vessels) and dissolve into pure ornamental flow. **Illustration palette:** All SVG illustrations use only two stroke colors — `#C94F3A` (Burnt Aurora) for primary lines, and `#7B5EA7` (Electric Iris) for secondary/shadow lines — against the background panel color. This creates a two-tone silkscreen print quality that reads simultaneously as vintage poster and contemporary vector art. **Grain texture implementation:** A single full-viewport SVG `` element contains `` fed into `` and ``. Applied via `::after` pseudo-element on `body`, `position: fixed`, `pointer-events: none`, `z-index: 9999`, opacity `0.055`. This is always present regardless of scroll position. **Decorative motifs:** - **Archive Stamps:** DM Mono text in `#9C6B3C` inside a rounded-rectangle `` stroke (no fill), styled as catalogue identification stamps. Used on catalogue cards to label contents ("LOT 047 · MATTE ROUGE · C.1974"). - **Flowing Rule Lines:** Between major sections, a single `` element draws a long S-curve hairline across the full width of the viewport in `#7B5EA7` at 40% opacity. No straight horizontal rules anywhere on the site. - **Catalogue Card Texture:** Each archive strip card has a `background: repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(156,107,60,0.08) 24px)` creating subtle horizontal ruled-paper lines beneath the illustration content. ## Prompts for Implementation **The story to tell.** A visitor opens what appears to be an archive — a beautifully produced catalogue of cosmetic objects that once existed: a 1973 lipstick in a shade called "Embers," a 1968 eyeshadow compact that belonged to someone named V., a 1981 mascara wand still in its original cardboard sleeve. The archive is not a shop. It is not a portfolio. It is a **memorial and a manifesto**: beauty is not waste if it is witnessed. Each catalogue card, each essay panel, each pull-quote slowly slides into view as if being uncovered in a drawer, one object at a time. **Interaction specifics:** - `IntersectionObserver` with threshold `0.2` triggers all slide-reveals. On first entry, add class `.revealed` to the element; the CSS transition handles the `clip-path` animation. Do not use GSAP or heavy animation libraries — pure CSS transitions only, with `will-change: clip-path` set in advance. - The sidebar navigation updates its active label via `IntersectionObserver` on each major section. The active label transitions from `color: #D4C9B8` to `color: #C94F3A` with a `transition: color 400ms ease`. - **Catalogue strip:** On hover over a catalogue card, the SVG illustration inside animates its `stroke-dashoffset` from 0 to full `stroke-dasharray` length and back over 800ms — a drawing/unraveling effect. - **Hero logotype:** The wordmark `recycle.makeup` receives a CSS `background-clip: text` treatment with `background: linear-gradient(135deg, #E8DFC8 0%, #C94F3A 50%, #7B5EA7 100%)`, `background-size: 200% 200%`, animated via `@keyframes` slowly shifting position (40s loop). This gives the logotype a slow-burning, iridescent quality. - **Film grain animation:** The `feTurbulence` `seed` attribute is updated via `requestAnimationFrame` at 12fps (every 83ms) using `Math.random() * 1000` to create subtle animated grain — not flickering noise but slow-rolling texture shift. Use a debounced rAF for performance. **Narrative sections in order:** 1. Hero: "What the discarded holds." 2. Archive strip: Five objects. Five eras. Five saved things. 3. Essay: "On the glamour of the second life." (500-word editorial, no subheads) 4. Object showcase: Three featured pieces at full compositional weight. 5. Colophon: "The archive is ongoing. Beauty does not expire." **AVOID throughout:** - CTA buttons styled as conventional rounded rectangles - Pricing blocks, stat grids, feature comparison tables - Any icon library (no Font Awesome, no Heroicons, no Lucide) - Horizontal navigation bars - Drop shadows (use grain + color contrast instead) - Any animation longer than 1200ms or shorter than 300ms - Flat color fills inside the SVG illustrations ## Uniqueness Notes 1. **Slide-reveal as primary motion grammar (1% frequency — the most underused pattern in the corpus).** Virtually every other site in the registry uses parallax (75%) or stagger (50%). This site uses slide-reveal as its *only* scroll-triggered animation mechanism, applied consistently across all content panels in alternating directions. The result is a cinematic darkroom-development metaphor — content chemically emerging from emulsion — that no other design in the corpus employs. 2. **Grain-over-everything as a structural design choice, not a decoration.** Most sites applying grain (3% of corpus) use it as a hero background texture only. Here, the SVG feTurbulence filter covers the entire viewport at all times via a fixed pseudo-element. This means grain persists across all panels, all colors, all transitions — unifying wildly different palette tones into a coherent photographic-paper world. 3. **Four-typeface eclectic-hybrid system with deliberate tension.** The corpus at 2% for eclectic-hybrid typography. The combination of Playfair Display (authority), Cormorant Garamond (fragility), Libre Baskerville (legibility), and DM Mono (clinical) is calibrated to evoke a beauty archive compiled by an obsessive taxonomist with a fashion education — not a brand, not a persona, but a *practice*. 4. **Flowing-curve custom-illustration at 2% corpus frequency.** Custom-illustration is already rare; flowing-curve as the singular geometric vocabulary (all curves, no straight lines, no geometric shapes) within that is unique in the dataset. The two-color silkscreen constraint (Burnt Aurora + Electric Iris strokes only) creates immediately recognizable visual identity. 5. **Zero straight horizontal rules.** The corpus relies heavily on `
` elements and border-bottom dividers. This site replaces every section separator with a flowing SVG `` S-curve — a formal commitment to the flowing-curves motif that extends beyond illustration into structural layout elements. 6. **Seed:** aesthetic: grainy-textured, layout: asymmetric, typography: eclectic-hybrid, palette: retro-futuristic, patterns: slide-reveal, imagery: custom-illustration, motifs: flowing-curves, tone: opulent-grand. Avoided patterns from frequency analysis: parallax (75%), stagger (50%), centered layout (84%), photography (87%), vintage motifs (35%).