# Design Language for recycle.makeup ## Aesthetics and Tone recycle.makeup channels a skeuomorphic aesthetic — the tactile, real-world material quality of physical objects rendered digitally applied to a cosmetics recycling and sustainable beauty platform. The site feels — buttons with depth and shadow, surfaces with material texture, and the satisfying physicality of interacting with objects that look like they could be picked up. Inspiration draws from the product design of early iPhone apps, the material interfaces of Dieter Rams' Braun products, the tactile packaging of Aesop cosmetics, and the textured surfaces of sustainable beauty brand packaging. The tone is grounded-earthy — practical, honest language that keeps sustainable beauty feeling real and achievable. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content flowing in a direct vertical stream that creates the beauty-blog quality of scrolling through a carefully curated sustainable beauty guide. **Single Column Architecture:** - Content column: max-width: 720px centered - Product cards: full column width with tactile depth - Feature panels: expand to 880px for product spotlights - Section breaks as physical shelf-edge dividers - Container: max-width: 720px; margin: 0 auto - The single column creates the beauty-counter quality of products displayed on a single shelf **Section Sequence:** 1. **Counter:** Hero with playful-rounded title on navy-metallic skeuomorphic gradient, icon-heavy cosmetic element illustrations, aurora-lights soft ambient color shifts 2. **Collection:** Product recycling guides in single column — underline-draw interactive product highlight with icon-heavy beauty iconography 3. **Spotlight:** Featured product recycling in expanded panel with aurora-lights atmospheric glow and icon-heavy detailed icons 4. **Routine:** Step-by-step recycling guides in focused column with icon-heavy process icons 5. **Vanity:** Footer as beauty-table close — grounded-earthy farewell with aurora-lights settled atmosphere and practical sign-off ## Typography and Palette **Typography:** - **Headlines:** "Quicksand" (Google Fonts) — playful rounded at 2.2rem-3rem, weight 700. Its soft, approachable roundness creates the friendly beauty-brand quality of cosmetics packaging that invites touch. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "Quicksand" at 1rem, weight 600 for product names and recycling labels. - **Labels:** "Quicksand" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Navy Deep:** #101828 — deep navy for backgrounds - **Navy Surface:** #182030 — rich navy for panels - **Metal Rose:** #c87888 — metallic rose for primary accent - **Metal Gold:** #c8a858 — metallic gold for secondary accent - **Metal Silver:** #a0a8b8 — cool silver for tertiary accent - **Navy Light:** #d0d4e0 — cool light for text - **Shadow Navy:** #283040 — navy shadow for secondary text - **Border Metal:** rgba(200,120,136,0.1) — rose metal border ## Imagery and Motifs **Icon-Heavy Beauty Iconography:** Recycling guides illustrated through dense, detailed icons — lipstick tubes, compact cases, bottles, brushes, and recycling symbols (16-24px) in Metal Rose and Metal Gold with 1.5px strokes. The icon density creates the product-catalog quality of a beauty counter with many items to explore. **Underline-Draw Product Highlights:** Product names feature animated underlines — pseudo-element width growing from 0 to 100% in Metal Rose (height: 2px) over 250ms ease-out on hover. The underline creates the beauty-catalog quality of highlighting a specific product for attention. **Aurora-Lights Ambient Color:** Soft color shifts behind content — radial-gradient(at 30% 40%, rgba(200,120,136,0.03), transparent 35%), radial-gradient(at 70% 60%, rgba(200,168,88,0.02), transparent 30%). The aurora creates the vanity-mirror quality of warm, flattering light on beauty products. **Navy-Metallic Skeuomorphic Surface:** Panels feature material depth — background: linear-gradient(180deg, #1c2434, #182030); box-shadow: 0 2px 0 rgba(200,120,136,0.04), inset 0 1px 0 rgba(255,255,255,0.03); border-radius: 12px. The metallic quality creates the product-packaging feel of premium cosmetics containers. **Shelf-Edge Dividers:** Section breaks styled as physical shelving — 2px horizontal lines with subtle shadow (box-shadow: 0 2px 4px rgba(0,0,0,0.1)) in Metal Silver at 0.1 opacity. The shelves create the retail-display quality of products organized on beauty counter shelving. ## Prompts for Implementation Build the page as a skeuomorphic beauty recycling counter. Single column: .beauty-column { max-width: 720px; margin: 0 auto; padding: 60px 24px; } .beauty-spotlight { max-width: 880px; margin: 0 auto; padding: 80px 32px; } Underline-draw: .product-name { position: relative; display: inline-block; } .product-name::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #c87888; transition: width 250ms ease-out; } .product-name:hover::after { width: 100%; } Skeuomorphic panel: .beauty-card { background: linear-gradient(180deg, #1c2434, #182030); box-shadow: 0 2px 0 rgba(200,120,136,0.04), inset 0 1px 0 rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(200,120,136,0.06); padding: 24px; } Beauty icons: .beauty-icon svg { stroke: var(--icon-color, #c87888); stroke-width: 1.5; fill: none; stroke-linecap: round; } Shelf divider: .shelf-edge { height: 2px; background: rgba(160,168,184,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 40px 0; } AVOID: Standard product databases, corporate sustainability platforms, and minimal recycling guides. Let skeuomorphic tactility and grounded-earthy honesty create a beauty recycling counter where cosmetics recycling feels as satisfying and tangible as the products themselves. ## Uniqueness Notes 1. **Skeuomorphic for beauty recycling:** Tactile material surfaces make digital recycling guides feel as physical as the cosmetics products themselves. 2. **Single-column as beauty counter:** Vertical product flow creates the retail-display quality of browsing a curated beauty shelf. 3. **Icon-heavy as product catalog:** Dense beauty iconography creates the rich, detailed quality of a professional cosmetics counter. 4. **Navy-metallic as premium packaging:** Dark metallic surfaces create the luxury-cosmetics quality of premium product containers. 5. **Shelf-edge dividers as retail display:** Physical shelf elements create the beauty-counter quality of organized retail presentation. **Seed/Style:** aesthetic: skeuomorphic, layout: single-column, typography: playful-rounded, palette: navy-metallic, patterns: underline-draw, imagery: icon-heavy, motifs: aurora-lights, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses skeuomorphic aesthetic, single-column layout, navy-metallic palette, icon-heavy imagery, and grounded-earthy tone.