# Design Language for lrx.wiki ## Aesthetics and Tone lrx.wiki (License and Right eXchange Wiki) channels an inflated-3d aesthetic — plump rounded forms, exaggerated depth, and the soft tactile quality of balloon-like three-dimensional shapes applied to license and rights knowledge management. The site presents the LRX encyclopedia as a playful, touchable world where complex legal concepts are inflated into approachable, squeezable forms that invite exploration. Inspiration draws from Apple's recent 3D emoji designs, Claymation stop-motion sets, inflatable furniture design of the 1960s, and the comforting roundness of Studio Ghibli's world-building. The tone is conversational — wiki content delivered in accessible, everyday language that makes rights management feel less intimidating. The masonry layout creates an organic arrangement of knowledge blocks that feels like browsing a cabinet of curiosities. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content cards of varying heights fill columns naturally, creating a dense but browsable knowledge repository. **Masonry Architecture:** - CSS columns: 3 at max-width 1200px, column-gap: 20px - Cards: break-inside: avoid, varying heights (200-450px) based on content - Cards have generous padding (28px) and large border-radius (20px) for inflated softness - Each card has a subtle 3D shadow suggesting depth and inflation **Section Sequence:** 1. **Atlas Cover:** Hero with inflated 3D-style title text (CSS text-shadow stack creating depth), collage-style background with overlapping vintage-tinted images, mountain landscape silhouette 2. **Knowledge Shelf:** Masonry grid of wiki topic cards — each with an inflated icon header and content text 3. **Deep Dive:** Expanded articles in wider cards (spanning 2 columns) with collage illustrations 4. **Terrain Map:** Mountain landscape section divider showing the breadth of LRX knowledge as geographical territory 5. **Index:** Footer as a classic wiki index — alphabetical links in a clean grid ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — technical monospace at 2rem-3rem, weight 700. Its rigid monospace geometry creates interesting tension with the inflated visual aesthetic. - **Body Text:** "Outfit" (Google Fonts) — modern geometric sans at 0.95rem, weight 400, line height 1.7. Friendly and readable. - **Wiki References:** "Space Mono" at 0.8rem, weight 400 for citations, cross-references, and technical identifiers. - **Labels:** "Outfit" at 0.7rem, weight 600, uppercase for category tags. **Color Palette:** - **Vintage Sage:** #7a8a6a — muted olive green for primary card backgrounds - **Vintage Rose:** #b87a78 — muted dusty pink for secondary accents - **Parchment:** #f0e8d8 — warm cream for page background - **Vintage Indigo:** #4a4a6a — muted blue-purple for tertiary accents and links - **Dark Walnut:** #3a2a20 — warm dark brown for primary text - **Faded Gold:** #c4a868 — warm gold for decorative elements and highlights - **Mist Gray:** #c8c0b0 — warm gray for borders and secondary text - **Ivory Light:** #faf4e8 — lighter cream for card content backgrounds ## Imagery and Motifs **Collage-Style Illustrations:** Wiki topics illustrated with collage compositions — layered SVG elements combining geometric shapes, vintage-style photographic snippets (sepia-toned), and handwritten annotations. Each collage uses 3-4 overlapping elements with slight rotation (1-3deg) and drop shadows, creating depth and tactile quality. **Mountain Landscape Section Dividers:** Between major wiki sections, SVG mountain silhouette shapes span the full width — layered ridgelines (3-4 layers) in Vintage Sage, Mist Gray, and Parchment at varying opacities, suggesting Korean mountain landscapes (산) as a metaphor for the vast terrain of rights knowledge. **Elastic Scroll Response:** Cards respond to scroll with an elastic bounce effect — when entering the viewport, cards scale from 0.92 to 1.0 with timing cubic-bezier(0.68, -0.55, 0.27, 1.55) over 500ms, creating a satisfying springy arrival that reinforces the inflated 3D aesthetic. **Inflated 3D Shadow Stack:** Cards use a multi-layer box-shadow to create the inflated, pillow-like depth: box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.02). On hover, shadows deepen slightly and card lifts 2px. **Vintage Texture Grain:** A subtle noise texture (SVG feTurbulence filter at 0.02 opacity) applied as a global overlay gives the entire page the warm grain of vintage print media. ## Prompts for Implementation Build the page as an inflated-3d masonry wiki. CSS columns: 3, column-gap: 20px. Cards: border-radius: 20px, padding: 28px, background: Ivory Light, break-inside: avoid. Shadow stack: box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.02). Elastic entrance: cards start opacity: 0, transform: scale(0.92). On .visible: opacity: 1, transform: scale(1), transition: all 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55). Mountain dividers: SVG with viewBox 0 0 1200 120. Multiple path elements creating overlapping mountain ridges. Fill colors: layers of Vintage Sage at 0.15, Mist Gray at 0.1, Parchment at 0.08. Collage illustrations: layered absolutely-positioned divs within a relative container. Each layer slightly rotated and offset, with different background colors or clip-path shapes. Drop-shadow filter on each layer. Inflated 3D text: text-shadow: 0 1px 0 #d8d0c0, 0 2px 0 #d0c8b8, 0 3px 0 #c8c0b0, 0 4px 6px rgba(0,0,0,0.1) creating the extruded depth illusion for headlines. AVOID: Flat, sterile wiki layouts, aggressive search-first interfaces, and dense text walls. Let the inflated forms and vintage collage create a tactile, exploratory knowledge experience. ## Uniqueness Notes 1. **Inflated-3d for wiki content:** Plump, rounded visual forms make legal knowledge feel approachable and touchable rather than dry and intimidating. 2. **Masonry as curiosity cabinet:** The organic card arrangement invites browsing discovery rather than targeted search. 3. **Collage illustrations for legal concepts:** Layered mixed-media compositions make abstract rights concepts visually rich and memorable. 4. **Mountain landscape as knowledge terrain metaphor:** Korean-inspired mountain silhouettes represent the vast, navigable territory of licence knowledge. 5. **Elastic scroll as inflated physics:** Spring-bounce animations reinforce the soft, inflated materiality of the 3D design language. **Seed/Style:** aesthetic: inflated-3d, layout: masonry, typography: tech-mono, palette: muted-vintage, patterns: elastic, imagery: collage, motifs: mountain-landscape, tone: conversational **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses inflated-3d aesthetic, masonry layout, muted-vintage palette, collage imagery, and conversational tone.