# Design Language for recycle.auction ## Aesthetics and Tone **recycle.auction** is a solemn chamber of second lives. The site is built around one central fiction: every discarded object passes through a house of ritual before it finds its next owner. The auction block is not a marketplace — it is a consecrated stage. Materials that have been used, worn, and weathered carry the weight of their former lives; this site makes that weight visible. The aesthetic is **skeuomorphic-archival** — a world where the interface itself is made of aged paper, brass hardware, and embossed leather. Depth is not metaphorical: panels cast real drop shadows; header bars are modeled after stamped wax seals; form fields have the inset appearance of type pressed into damp pulp. Every UI affordance recalls a physical predecessor — the bid button looks like a brass auction paddle, the lot number is letterpress-printed in a debossed circle. The tone is **authoritative without coldness** — the language of a respected auction house, not a corporate liquidator. Think Christie's if Christie's had a philosophy of material redemption. The site speaks slowly and with gravitas. It does not rush toward conversion. It lingers on the story of each object. A chipped ceramic bowl is not "ceramic bowl, used" — it is "Provenance: a kitchen in coastal Brittany, circa 1963, evidenced by the salt-glaze pattern typical of Finistère potters." Color inspiration: the aged paper of a 1920s auction catalog — cream-ivory deepening to warm umber at the edges, with emerald-green ledger-ink headers and a deep verdigris gradient suggesting copper weathered by decades of coastal air. ## Layout Motifs and Structure The layout is a **broken-grid of archival panels** — imagine the inside of a mahogany auction catalog case, where each lot card has been pinned and re-pinned until the grid is approximate rather than exact. No two panels share the same baseline. Cards are sized to their content, not to a column system. Specific structural decisions: - **The folios:** Each scroll section is a "folio" — a double-page spread that tears across the viewport. The left folio is narrow (35vw), text-heavy, set in small caps with generous tracking. The right folio is wide (65vw), dominated by the aged image of the lot. The fold between them is a subtle deckle-edge SVG, as if the paper was hand-torn. - **Rotational drift:** Lot cards rotate between -1.8° and +2.3°, always returning to 0° on hover with a smooth physical snap (cubic-bezier with slight overshoot). The drift makes the catalog feel like cards stacked on an oak table, not items in a database. - **Staggered depth:** Six elevation layers, from the background vellum texture (z=0) through mid-layer panel cards (z=2, z=4) to foregrounded price badges and provenance ribbons (z=6). Drop shadows lengthen with elevation — a card at z=4 casts a longer, softer shadow than one at z=2, following the light from a single high-right lamp source. - **The ledger rule:** Every folio section is underscored by a single horizontal rule in verdigris ink, exactly 1px, extending from left edge to right edge with no gap. This is the only consistent structural element — the line that runs through all the chaos, like the red line in a Dickensian account book. - **Wave-form breaks:** Between folios, a full-width ripple SVG animated in slow motion (8-second loop) acts as a section separator. The ripple is generated as a sine-wave path in verdigris, at 60% opacity over the cream background, suggesting water seen through old glass. ## Typography and Palette **Typefaces — all from Google Fonts:** - **Display / Lot Headings:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 600 Italic — chosen for its Renaissance authority and its extreme contrast between hairline serifs and swelling strokes. Set at 4.8rem for primary lot names, tracking -0.01em. This is the face of a 16th-century Venetian printer; it carries the weight of centuries without effort. - **Secondary Display / Provenance Labels:** [IM Fell English](https://fonts.google.com/specimen/IM+Fell+English) — a digitization of an actual 17th-century Fell type specimen from the Bodleian Library. Used for provenance text, lot descriptions, and historical notes. The slight irregularities in letterform (ink traps that weren't always necessary, slight baseline drift) reinforce the aged-paper fiction. - **Numeric / Lot Numbers & Prices:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 700 — sturdy, unflinching numerals. The bid amount in a sealed room must be legible across the room. Set in deep umber on cream. - **UI Labels / Metadata:** [Raleway](https://fonts.google.com/specimen/Raleway), weight 300 Small Caps — the only concession to modernity. Used only for field labels, navigation items, timestamps. The lightness of the weight against the gravitas of the display faces creates productive tension: the contemporary and the archival share the stage. **Palette — the coastal copper-paper gradient:** - `#F5EDD8` — Aged Ivory (primary background, the base of all panels) - `#E8D9B5` — Warm Vellum (panel interior fill, slightly deeper than ivory) - `#C4A96B` — Antiqued Gilt (borders, rule accents, lot number badges) - `#2D5A4A` — Deep Verdigris (primary text, headings, the ledger-ink green) - `#1A3D2E` — Forest Shadow (dark verdigris for high-contrast moments, price points) - `#7A3B1E` — Sienna Umber (secondary text, worn leather evocation, hover states) - `#3E2010` — Dark Espresso (deepest value, used for drop shadows and depth) - `#A8C5B5` — Patina Mist (gradient terminus — the light verdigris at the horizon, used in wave-form ripples and folio dividers) **Gradient strategy:** The body background is a vertical gradient from `#F5EDD8` at top to `#E8D9B5` at bottom, as if the page is lit from above and gathers warmth toward the floor. Each folio section has a subtle radial gradient centered on the right folio image, suggesting the lamp that illuminates each lot individually. The wave-form separators gradient from `#2D5A4A` to `#A8C5B5` along the path stroke. ## Imagery and Motifs **Paper-aged imagery as the primary visual register.** Every lot image is treated with a multi-layer CSS filter stack: a sepia base (15%), a yellowing overlay (warm amber at 20% multiply), a vignette (radial gradient dark at edges), and a grain layer (SVG feTurbulence noise at 4% opacity). The effect is not retro-kitsch — it is deliberately uncertain about its own era, as if the photograph has been in a drawer for forty years. **Specific visual elements:** - **Deckle edge dividers:** Between every folio, an SVG path that traces the irregular torn edge of handmade paper. The path is unique per divider — each is generated from a slightly different Perlin noise seed. The edge is deep ivory with a 1px inner shadow in umber, making it feel dimensional. - **Wax seal provenance stamps:** Each lot carries a circular embossed badge — the lot number in Libre Baskerville set inside a ring of fine concentric circles, all in antiqued gilt. The badge has a CSS box-shadow stack: three inset layers suggesting debossed relief, and one outset layer of umber for the shadow the seal casts on the paper. - **Wave-form ripple separators:** SVG sine-wave paths animating in a slow horizontal drift (8s ease-in-out infinite). Three waves at different frequencies and amplitudes, stacked with opacity 0.3 / 0.5 / 0.2. The effect is seen-through-glass coastal water — slow, authoritative, slightly hypnotic. Colors are drawn from the verdigris-to-patina gradient. - **Aged ink texture:** A repeating SVG pattern tile (20×20px) using feTurbulence to simulate the uneven ink absorption of letterpress on laid paper. Applied at 6% opacity over all panel backgrounds. Invisible at a glance; unmistakable on inspection. - **Brass paddle icon:** The "Place Bid" affordance is styled as a circular brass disc with a handle — a letterpress-printed paddle number inside. On hover, it lifts (translateY -4px) with a lengthening shadow, as if physically picked up from the table. ## Prompts for Implementation Build this as **one continuous descending scroll through an auction catalog** — not a product listing page, not a marketplace grid, but a ceremony of revelation. Each folio reveals one lot at a time. The scroll is unhurried. Sections do not snap; they ease. **Scroll choreography:** - At 0vh: A full-viewport aged-paper folio showing only the auction house wordmark (set in Cormorant Garamond Italic, 8rem) and the session date in IM Fell English small caps. No image, no price. The page breathes. - At 100vh: The first wave-form ripple separator scrolls into view, animated. Below it, the first lot folio slides in from opacity 0 at translateY +40px — a slow, gravity-respecting reveal (800ms ease-out). - Each subsequent lot folio: triggered at 60% scroll-into-view threshold. The lot image fades in with the aging filter stack applying progressively (sepia from 0% to 15% over 1200ms). The provenance text in IM Fell English types itself in at one word per 80ms using a custom typewriter effect without the cliché cursor blink. - Between lots: wave-form separators pulse once as they enter the viewport — a single amplitude surge and return over 2.4 seconds, then resume the slow drift. **Skeuomorphic depth implementation:** - All panel cards use `box-shadow` stacks of 4–6 layers to simulate real depth: a near-black base shadow (large blur, low opacity), a mid-tone umber fill (medium blur), a sharp highlight on the top-left edge (white, 1px, inset), and a warm rim light on the bottom-right (ivory, 2px, inset). - The folio "spine" between left and right panels is a 4px strip with a gradient from `#3E2010` (near edge) to `#C4A96B` (center) to `#3E2010` (far edge), suggesting a bookbinding ridge. - Form fields (bid amount input) have an inset shadow of 3px blur, umber color, suggesting the field has been pressed into the surface of the page. **Animation principles:** - All transitions reference physical material behavior: paper lifts slowly, brass swings with slight overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)), ink absorbs gradually (ease-in for color fills, ease-out for reveals). - NO snap-scroll. NO parallax that moves faster than the scroll. The page is weighted — everything moves as if it has mass. - Ripple animation: `stroke-dashoffset` animation on the SVG wave paths, giving the impression of flowing water rather than a repeating loop. **AVOID entirely:** - Hero CTA buttons, pricing comparison tables, "Start bidding now" urgency elements - Feature grids, stat blocks, testimonial carousels - Dark-mode toggle (this page exists in a specific material reality — candlelit ivory) - Navigation hamburger menus, sticky headers - Progress bars, loading skeletons, skeleton screens - Any element that reads as a SaaS product or e-commerce platform ## Uniqueness Notes 1. **Skeuomorphic-archival aesthetic is at 0% in the frequency registry.** The registry shows skeuomorphic design has been entirely avoided — likely because it was considered passé after 2013. Deploying it now is not nostalgia; it is reclamation. The physical metaphors of an auction house (wax seals, debossed reliefs, paper weights) are genuinely content-appropriate, not decorative pretense. No other design in the registry does this. 2. **IM Fell English as a primary voice typeface is unprecedented.** The registry shows mono at 74% and humanist at 31% — and even the serif-revival typefaces in the registry reach for Cormorant or Garamond in their more conventional forms. IM Fell English is the only Google Font digitized from actual historical type specimens with preserved physical imperfections. Its use as the provenance-text voice (not the heading face) is a deliberate inversion of hierarchy: the irregular, human face carries the most important content. 3. **The wave-form separator as primary structural divider (not decorative element) is novel.** Frequency shows wave-forms at 3% and almost always deployed as background decoration. Here the wave-form is the sectional architecture — it is the wall between rooms in the auction house. The ripple animation on entrance (amplitude surge) gives it functional meaning: it marks the moment of transition between lots, like a gavel tap. 4. **Gradient palette derived from copper patina chemistry.** Most gradient palettes in the registry drift toward aurora/neon (digital) or sunset (warm analog). The verdigris gradient (`#2D5A4A` → `#A8C5B5`) is derived from the actual color shift of copper sulfate patination — a gradient that exists in the natural world as a chemical process over time. This connects to the domain's core theme of material transformation (objects that have become something other than what they were made to be). 5. **Single-light-source shadow discipline throughout.** All drop shadows in the design originate from the same upper-right lamp position, at the same angle. This is a skeuomorphic principle that most "skeuomorphic-inspired" designs ignore — they mix shadow angles arbitrarily. Here, every shadow is consistent, so the illusory space feels physically real. The lamp is always there, just off-frame, warm and incandescent. Chosen seed: aesthetic: skeuomorphic, layout: broken-grid, typography: elegant-serif, palette: gradient, patterns: ripple, imagery: paper-aged, motifs: wave-forms, tone: authoritative Avoided (overused per frequency analysis): hand-drawn, editorial, terminal, botanical aesthetics; photography imagery; mono typography; friendly/professional tone; minimal layout patterns.