# Design Language for cosplay.quest ## Aesthetics and Tone Cosplay.quest is a neubrutalist pilgrimage scroll - a deep, full-screen narrative experience where each cosplay character arc becomes a chapter you descend through. The aesthetic fuses raw blocky concrete typography (think SOTA-display brutalism) with cutting-edge bokeh-blurred photographic backgrounds and magnetic, gravity-bent hover behavior. Tone is futuristic-cutting-edge but with a slightly menacing edge: each chapter feels like opening a sealed dossier on an iconic costume. Visual references include 2003 OMA architectural plates, the cover system of Bloomberg Businessweek, Korean speculative-fiction movie posters, and the holographic embossing of high-end skateboard graphics. The interface is unapologetic: oversized brutalist blocks layered over hazy out-of-focus character bokeh, with thin leaf-motif outlines whispering at the corners. ## Layout Motifs and Structure The page is built for immersive-scroll: each chapter is a single 100vh viewport with a fixed neubrutalist card pinned to a 35vw column on alternating sides, while the right or left two-thirds carries a full-bleed bokeh photograph that slowly parallaxes. As you scroll, the brutalist card stays magnetically anchored while the photo behind it dissolves into the next character's bokeh. There are no traditional sections - just chapters numbered 01 through 12, each a wide rectangular concrete slab with thick 6px raw outline, a serif title, a one-paragraph character dossier, and a tactical leaf glyph at the corner. A vertical progress spine on the far left marks chapter dots, magnetically pulling toward the cursor when nearby. ## Typography and Palette Headlines use Playfair Display Black at clamp(3.5rem, 9vw, 9rem) with -2% tracking, weight 900, treated as engraved metal plates. Subheads use Playfair Display Italic 600 at 1.6rem with character spacing 0.02em. Body copy is set in Manrope Medium 500 at 1.1rem with 1.6 line-height for the dossier text. The palette is high-contrast: jet #050505, paper-white #FAFAF7, blade-red #FF2A2A (used only on chapter number, magnetic hover ring, and one decorative diagonal), arctic-cyan #00E5FF (used only on photo overlay gradient mix), and a single warm-iron #C7B299 for the leaf-motif outlines. Borders are raw 6px solid #050505 on the brutalist cards. No soft shadows - only sharp 12px offset shadows. ## Imagery and Motifs Imagery is bokeh-background: defocused photographic portraits of cosplayers, blurred to 30-50px gaussian and tinted with the cyan-red gradient overlay, so individual costumes read as silhouettes inside colored fog. Each chapter rotates a different bokeh portrait. Motifs are leaf-organic: hand-illustrated SVG leaf outlines (single-line botanical drawings) layered in warm-iron at 8% opacity behind the brutalist cards, plus tiny leaf glyphs as bullet markers and chapter terminals. Decorative leaves drift slowly in parallax, with one prominent leaf-cluster anchoring the bottom-left of every viewport. The juxtaposition of raw brutalist concrete and delicate botanical lines is intentional - civilization confronting nature. ## Prompts for Implementation Build cosplay.quest as a chapter-by-chapter pilgrimage descent. Implement scroll-snap-type: y mandatory; each 100vh chapter is a frozen tableau where the bokeh background photo crossfades into the next character's defocused portrait over 1.2s as the visitor scrolls into the new chapter. The neubrutalist card slides in from the opposite side with a 700ms cubic-bezier and a hard thunk feel. Implement magnetic pattern aggressively: the brutalist card subtly tilts toward the cursor on a 200ms ease (max -3deg/+3deg on perspective-1200), the red chapter number swells 1.12x when cursor is within 80px, and chapter dots on the left spine literally translate 6-10px toward the cursor when in range, returning with a spring. Leaf SVGs parallax at 30% scroll speed, rotating gently. Avoid CTA banks and pricing - each chapter ends with a single italic Playfair quote: "Now you know who she is." Cursor becomes a small red crosshair with a magnetic ring. The whole experience is a sealed-dossier reveal, not a gallery. ## Uniqueness Notes - Combines raw 6px neubrutalist outlines with delicate single-line leaf-motif botanical illustrations - a deliberate civilization-vs-nature tension nobody else attempts. - Builds an immersive-scroll chapter-pilgrimage where each 100vh is a frozen tableau and the brutalist card is magnetically tilt-anchored to the cursor. - Treats the entire homepage as a 12-chapter sealed dossier rather than a marketing layout, ending each chapter with a single italic Playfair pull-quote. - Chosen seed/style: neubrutalism aesthetic, immersive-scroll layout, playfair-elegant typography, high-contrast palette, magnetic pattern, bokeh-background imagery, leaf-organic motifs, futuristic-cutting-edge tone. - Frequency analysis avoidance: sidesteps overused mono typography (82%), centered/card-grid layouts (96%/93%), mysterious-moody tone (71%), warm-gradient palettes (95%/78%), photography imagery default (90% generic), parallax pattern (96%). Leans into underused immersive-scroll (5%), magnetic pattern (4%), bokeh-background imagery (3%), leaf-organic motifs (2%), and futuristic-cutting-edge tone (2%).