# Design Language for recycle.makeup ## Aesthetics and Tone recycle.makeup is a **goblincore reclamation cabinet** — a website built like the inside drawer of someone who refuses to throw away an empty lipstick bullet because the metal is still good and the smell still carries a memory. Where most "sustainable beauty" sites perform sterile minimalism (white voids, sans-serif virtue), this one does the opposite: it is **earthy, hoard-rich, slightly feral**, a magpie's nest of mascara wands repurposed as paintbrushes, compact mirrors gone foggy, glass droppers, foil seals smoothed flat, and crushed eyeshadow turned into watercolor cakes. The `.makeup` TLD is read literally — *make-up* as in *make it up again from what you have left* — and the tone is **grounded-earthy with a whimsical-creative streak**: a forager's diary, not a corporate ESG report. The mood reference is the bottom of a vanity drawer photographed in low afternoon light: brass, dust, beeswax, a thumbprint in old cream. Nothing is glossy. Everything looks **handled, traded, kept**. There is humor in it — the goblin who lives here is proud of their pile. The site should feel like it *smells* of something: clove, candle soot, the faint plasticky warmth of a lipstick cap left in a sunlit window. Decay is not hidden; it is the whole point. A worn thing is a *witnessed* thing. This is explicitly NOT the eco-tech aesthetic (recycling-arrow icons, green gradients, leaf logos, carbon counters). It refuses the gradient mesh, refuses the glassmorphic card, refuses the stat-grid. It is closer to a Victorian curiosity shelf crossed with a riverbank scavenge, organized by an intelligence that values texture over taxonomy. ## Layout Motifs and Structure The layout is **organic-flow** (only 6% of the corpus) layered over a hand-built **honeycomb-irregular drawer grid** — a structure that pretends to be a tidy grid and keeps failing on purpose. Sections are not rectangular bands; they are **trays**: shallow containers with slightly rounded inner corners, uneven gutters (24px here, 41px there, 19px there), and a faint inner shadow as if each tray sits a few millimeters below the page surface. Content nests in trays the way salvaged objects nest in a divided organizer that was never quite the right size for them. **Structural spine — "The Drawer Pulls Open":** - **The lid (above the fold).** The page opens *closed*: a full-bleed dark wood-and-felt surface with a single brass drawer pull rendered in SVG, dead center, and the wordmark "recycle.makeup" stamped into it like an embossing on leather. The first scroll *pulls the drawer* — the lid translates upward and the contents are revealed beneath, with the parallax depth of layered objects (back items move slower than front items). This is the one "wow" gesture; everything after is quieter. - **The trays.** Below: 5–7 trays of irregular size, each one a thematic compartment — *The Bullet Salvage* (lipstick metal), *The Pan Press* (eyeshadow re-cakes), *The Wand Library* (mascara brushes as tools), *The Glass Account* (droppers & jars), *The Foil Field* (peel-off seals flattened), *The Soot Recipes* (lampblack & burnt cork), *The Trade Table* (swaps between strangers). Trays tile in a broken-grid masonry — some span full width, some half, one tiny tray holds a single object and a one-line caption. - **Object scatter.** Within trays, items are absolutely positioned with slight rotation (−7° to +9°), gentle overlap, and a 1px hairline "drawer divider" line that the objects casually cross. Nothing is centered. The eye wanders the way a hand rummages. - **The ledger margin.** A narrow left margin column (about 7vw) runs the full page as a **hand-ruled ledger**: faint horizontal lines, occasional pencil tick marks, and running marginalia in a handwritten face — counts, dates, a crossed-out word. This is the goblin's bookkeeping. It scrolls with the page but the marginalia entries fade in staggered. - **Closing tray.** The page ends by *closing the drawer*: the final section is the underside of the lid sliding back down over the last tray, with a soft thud-frame and the colophon embossed where the wordmark was. No sticky header, no hamburger, no breadcrumb. Navigation is a small brass "tray index" — seven tiny labeled tabs along the right edge, like the protruding tabs of a filing organizer, each one a different worn brass tone. ## Typography and Palette **Typefaces (Google Fonts only):** - **Fraunces** — variable, the primary voice. Used for tray titles and the hero wordmark at its *softest, oldest* optical setting (`opsz` low, `SOFT` high, `WONK` on) so the serifs look slightly melted, like type pressed into warm wax. Tray titles set in Fraunces 9pt-opsz at 32–56px, weight 400–500, with the funky "wonk" alternates enabled. The wordmark "recycle.makeup" is Fraunces 144, weight 500, letter-spacing −0.01em, the dot before "makeup" enlarged 1.4× and tinted brass. - **Gloria Hallelujah** — the handwritten ledger face. Used ONLY in the ledger margin and for object captions: counts, dates, scrawled notes, the crossed-out word (rendered with a strike via `text-decoration` wobbled by a tiny rotation). Small sizes only, 13–16px, in pencil-grey. Never used for headings or body. - **Spline Sans Mono** — the quiet workhorse for body copy and the tray index tabs. A humanist monospace: it gives the "inventory ledger / catalog entry" feel without going full terminal. Body text at 16–17px, line-height 1.7, weight 400, in deep umber on the felt. Tab labels at 11px, tracked +0.08em, uppercase. **Palette — "vanity drawer, low light":** - `#2A2520` — **drawer wood**, the near-black warm brown of the page base / lid - `#3E362C` — **felt shadow**, slightly lighter brown for tray interiors - `#6B5B4A` — **old leather**, mid-tone for dividers, secondary surfaces - `#C8B79A` — **bone cream**, the aged-paper tone for the ledger margin and body text on dark - `#B5894C` — **worn brass**, primary metal accent — drawer pull, tray tabs, the enlarged dot, hover states - `#8C5A3A` — **burnt sienna**, for re-pressed pigment swatches, warm illustrative fills - `#7A8B6F` — **sage tarnish**, the ONE muted green — used sparingly for verdigris on old metal and a single accent, deliberately desaturated so it never reads "eco-green" - `#9C2E2E` — **dried carmine**, the lipstick-red, used at low frequency for emphasis marks, the strike-through, one heading flourish - `#1B1814` — **lampblack**, the soot/burnt-cork tone, deepest shadow and the "soot recipes" tray Texture is mandatory: a fine **grain-overlay** (SVG `feTurbulence`, 3–4% opacity) sits over the whole page, plus subtle paper fiber in the ledger margin. Nothing is a flat fill — every large area carries a slight noisy gradient like felt catching light unevenly. ## Imagery and Motifs **Primary imagery: paper-aged + hand-drawn line illustration.** All objects are **single-line ink drawings** with a slightly broken, scratchy stroke (1.25px, irregular), filled with flat washes of sienna/brass/carmine/sage. The custom object set — drawn, never stock-photo'd — includes at minimum 24 salvaged cosmetic objects: - spent lipstick bullet & empty tube, twist-up mechanism exposed, melted-down lipstick poured into a tin - depotted eyeshadow pan, the magnetic palette tray, a re-pressed pigment cake cracking at the edge - mascara wand cleaned and standing in a jar with other "brushes" - glass dropper, tincture vial, cream jar with a thumbprint, a foggy compact mirror - foil peel-seals smoothed and stacked, a kohl pot, burnt cork & a candle stub (lampblack source) - mortar & pestle with crushed shimmer, a brass nail file, a spatula, a tiny funnel, beeswax block, a sieve - a postal envelope (the "trade table" — swaps mailed between strangers), a luggage tag re-used as a label, a darning needle **Decorative motifs:** - **Embossing/debossing.** Headings and the wordmark look *pressed in*: a 1px light highlight on the top edge, 1px dark on the bottom, like a seal in leather or a mark stamped into a lipstick cap. - **Drawer dividers.** Thin hairlines that pretend to organize the trays and are constantly being crossed by objects, smudged, or stopping short. - **Ledger ruling.** Faint horizontal lines + pencil ticks in the left margin, with handwritten tallies. - **Wax-seal dots.** Section transitions marked by a small carmine wax-blob with a goblin-ish thumbprint texture, not a bullet point. - **Foil glints.** A few objects (the smoothed peel-seals, the brass pull) get a single moving specular highlight — a thin diagonal band of `#E8DCC2` that drifts on scroll or cursor proximity. Used max 3 times on the whole page. No photographs of models, no hands holding products against marble, no green-leaf iconography, no recycling-arrows triangle anywhere. ## Prompts for Implementation Build as a **single self-contained HTML document** + one CSS file + one small JS file. Target under 70KB before fonts. No framework, no build step beyond the Google Fonts ``. Use CSS custom properties for the palette; use SVG inline for the drawer pull, all object illustrations, the grain filter, and the ledger ruling. **Storytelling spine — "Open the drawer, rummage, close it again":** The whole page is one continuous gesture of *opening a vanity drawer, going through what's salvageable, and shutting it.* Implement as a scroll-driven narrative: 1. **The closed lid.** `position: fixed` full-viewport panel: wood-grain SVG noise + the centered brass pull + embossed wordmark. On first scroll (or click of the pull), animate the lid translating `translateY(-100vh)` over ~120vh of scroll with `IntersectionObserver` / scroll progress, easing with a heavy spring (slight overshoot, like a sticky drawer giving way). Behind it, the first tray's objects are already laid out at varying `z`/parallax speeds (back objects `translateY` at 0.4× scroll, front at 1.1×) so the reveal has real depth. 2. **Rummaging.** Each tray scrolls into view with **staggered object entrance**: items don't fade — they *settle*, dropping 8–14px with a tiny rotation correction and a 1-frame "bounce" as if set down by hand. Stagger by 60–90ms across items in a tray. The ledger marginalia entries fade in word-by-word as their tray passes the viewport center. 3. **Cursor as hand.** No cursor-trail particles. Instead: objects within ~120px of the cursor get a very subtle `tilt-3d` (max 4° on each axis) and lift 2–3px with a warm soft shadow — like a hand hovering over a drawer, almost touching. The brass pull and foil-glint objects catch their specular band from the cursor angle. 4. **Re-press interaction.** In *The Pan Press* tray, hovering a depotted shadow pan triggers a `morph`: the loose-powder illustration compresses into a smooth cake with a soft "press" squash-and-stretch, and a tiny carmine dust puff escapes the edges (3–5 CSS-animated specks, then gone). This is the signature micro-interaction — playful, tactile, ~400ms. 5. **The trade table.** *The Trade Table* tray animates a small envelope sliding across the divider line from one side to the other on scroll-trigger, a path-draw SVG dotted line trailing it (postal-route style), landing with a soft thud-shake on the receiving side. 6. **Closing the drawer.** Final section: as the user reaches the bottom, the lid panel slides back *down* over the last tray (`translateY(0)`), the wordmark re-embosses into the brass pull, and a soft `box-shadow` "thud" frame pulses once. Scrolling back up re-opens it. The page literally bookends itself. **Texture & atmosphere requirements:** - Apply the `feTurbulence` grain overlay site-wide via a fixed pseudo-element at 3–4% opacity, `mix-blend-mode: overlay`. - Every tray interior: a low-contrast radial-ish noisy gradient (felt catching light), never `#3E362C` flat. - Headings get the deboss treatment via dual `text-shadow` (one light up-left, one dark down-right) — subtle, ~1px. - `prefers-reduced-motion`: keep the lid open from the start, replace settle/morph with simple opacity, keep the static layered composition. Still looks like a drawer, just doesn't perform the opening. **Hard constraints:** - AVOID: hero CTA buttons, pricing tables, stat/number grids, testimonial carousels, "how it works in 3 steps" with numbered circles, recycling-arrow logos, green eco gradients, glassmorphic frosted cards, stock product photography. - DO: full-screen narrative, irregular trays, hand-drawn objects, ledger marginalia, embossed type, the open→rummage→close arc. ## Uniqueness Notes Differentiators this design commits to and other CMassC sites should not duplicate: 1. **Goblincore for a beauty/recycling domain.** `goblincore` aesthetic sits at 2% in the frequency analysis and `grounded-earthy` tone at 8% — and crucially, the entire genre of "sustainable cosmetics" sites in the wild trends sterile-minimal-green. Doing it as a feral magpie hoard of salvaged makeup objects, organized by texture not taxonomy, is a position no other site in the corpus occupies. 2. **The drawer-as-website conceit.** The page is literally a vanity drawer that opens on scroll, gets rummaged, and closes again — a bookended physical-object metaphor. Not "immersive-scroll" generically; the scroll *is* the act of going through a drawer. `organic-flow` layout (6%) executed as irregular nested "trays" with deliberately failing grid alignment. 3. **The ledger margin.** A persistent hand-ruled left margin in Gloria Hallelujah carrying running marginalia, tallies, and a crossed-out word — a diegetic bookkeeping layer most sites don't have. Combined with embossed/debossed Fraunces "wonk" type pressed like a seal into leather. 4. **Restrained green.** Exactly one desaturated sage-tarnish tone (`#7A8B6F`), used only as verdigris on metal — a deliberate refusal of the eco-green palette the subject matter would normally invite. 5. **Avoided overused patterns:** no cursor-follow particle trail (89% of corpus), no glassmorphism (82%), no gradient-mesh imagery, no card-grid bands, no stat-grids/CTAs/pricing. Parallax is used once (the lid reveal) rather than as a generic background gimmick. Chosen seed/style: **goblincore earthy chaos shop** — expressed as `aesthetic: goblincore, layout: organic-flow, typography: garamond-classic (Fraunces) + handwritten (Gloria Hallelujah) + tech-mono (Spline Sans Mono), palette: warm-earthy, patterns: morph, imagery: paper-aged + hand-drawn, motifs: vintage, tone: grounded-earthy`.