# Design Language for mujun.wiki ## Aesthetics and Tone mujun.wiki (Mujun — 矛盾, contradiction) channels a brutalist aesthetic — raw, unfinished, and unapologetically functional design where structure is exposed and decoration is stripped away, applied to an encyclopedia of contradictions across philosophy, science, and culture. The site refuses to hide its construction — borders are visible, typography is loud, and the HTML structure shows through like exposed concrete in a brutalist building. Inspiration draws from Bloomberg's dense data interfaces, the raw HTML of early web directories, Yale School of Art's deliberately unpolished website, and the exposed concrete of Le Corbusier's Unite d'Habitation. The tone is friendly — warm, approachable language that creates paradoxical comfort within the brutalist visual aggression. ## Layout Motifs and Structure The layout uses a **stacked-sections** architecture — content blocks stacked vertically with visible borders and raw structural exposure, like floors in a brutalist building. **Stacked Sections Architecture:** - Full-width sections stacked vertically - Content: max-width: 880px centered - Sections separated by bold 3px borders (visible structural joints) - Consistent section padding: 48px vertical - No rounded corners anywhere — all sharp 0px radius - Raw, visible grid structure **Section Sequence:** 1. **Raw:** Hero with handwritten-style title on dopamine-neon gradient, mixed-media collage header imagery, mountain-landscape atmospheric background element 2. **Index:** Encyclopedia entries in stacked sections — scroll-triggered reveals with mixed-media illustration treatments and mountain-landscape section divider silhouettes 3. **Categories:** Contradiction taxonomy in bold stacked blocks with handwritten annotation overlays and neon accent highlights 4. **Sources:** Reference materials in raw list format with mixed-media citation styling 5. **Foundation:** Footer as brutalist base — friendly closing with raw structural border frame and mountain silhouette horizon ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) — handwritten style at 2.5rem-4rem, weight 700. Its informal handwritten quality creates raw, human contrast against the brutalist structural grid. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.95rem, weight 400, line height 1.75. - **Code/Refs:** "Fira Code" (Google Fonts) — monospace at 0.8rem for citations and reference codes. - **Labels:** "Inter" at 0.75rem, weight 700, uppercase, letter-spacing 0.04em. **Color Palette:** - **Concrete Dark:** #141414 — raw concrete dark for backgrounds - **Concrete Mid:** #1c1c1c — medium concrete for sections - **Neon Lime:** #c0e020 — dopamine neon lime for primary accent - **Neon Pink:** #e040a0 — hot neon pink for secondary accent - **Neon Yellow:** #e0d020 — bright neon yellow for tertiary accent - **Raw White:** #f0f0e8 — slightly warm raw white for light sections - **Text Raw:** #e0e0d8 — warm raw text on dark - **Border Brutal:** #404040 — visible brutal border ## Imagery and Motifs **Mixed-Media Contradiction Collages:** Encyclopedia entries illustrated with mixed-media collages — CSS-composed layers combining geometric shapes (clip-path polygons), photography fragments (grayscale, high contrast), and text overlays (rotated 5-15deg) in Neon Lime and Neon Pink. Each collage unique but sharing the raw, cut-and-paste aesthetic. **Scroll-Triggered Structural Reveals:** Content sections enter with raw structural animation — translateY(20px) opacity(0) to final position over 300ms with ease-out. No fancy easing, no smooth curves — the animation is deliberately blunt and functional, matching the brutalist philosophy. **Mountain-Landscape Atmospheric Silhouettes:** Between major sections, simplified mountain range silhouettes (SVG, 100% width, 40-60px height) in Border Brutal at 0.08 opacity create subtle landscape horizons. The mountains represent the immovable foundations beneath shifting philosophical terrain. **Dopamine-Neon on Concrete:** Neon accent colors applied to concrete-dark backgrounds create maximum visual contrast — borders in Neon Lime, highlights in Neon Pink, markers in Neon Yellow. The neon-on-concrete combination is deliberately confrontational, demanding attention rather than earning it gently. **Handwritten Annotation Overlays:** Key contradiction definitions and editorial notes appear as handwritten-style overlays — positioned absolute, rotated 2-5deg, in Caveat font at 0.9rem, color: Neon Lime at 0.6 opacity. These margin scribbles create the sense of an actively annotated reference work. ## Prompts for Implementation Build the page as a brutalist contradiction encyclopedia. Sections: width: 100%, border-bottom: 3px solid #404040, padding: 48px 0. Inner: max-width: 880px, margin: 0 auto. No border-radius anywhere. Structural reveal: .entry { opacity: 0; transform: translateY(20px); transition: all 300ms ease-out; } .entry.visible { opacity: 1; transform: translateY(0); } Mixed media: .collage { position: relative; } .collage .layer-shape { clip-path: polygon(10% 0, 90% 5%, 85% 95%, 5% 100%); background: #c0e020; } .collage .layer-photo { filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; } Mountain silhouette: SVG polygon with simple mountain peaks. fill: rgba(64,64,64,0.08). Positioned between sections. Handwritten notes: .annotation { position: absolute; font-family: 'Caveat', cursive; transform: rotate(-3deg); color: rgba(192,224,32,0.6); font-size: 0.9rem; } Neon on concrete: .neon-border { border: 2px solid #c0e020; } .neon-highlight { background: rgba(224,64,160,0.1); padding: 2px 6px; } AVOID: Clean wiki layouts, polished encyclopedia design, and organized knowledge-base aesthetics. Let brutalist raw structure and friendly warmth create a contradiction encyclopedia that practices what it preaches — structure and chaos coexisting. ## Uniqueness Notes 1. **Brutalist for contradiction encyclopedia:** Raw, exposed design structure mirrors the unresolved, unconcealed nature of contradictions. 2. **Stacked-sections as building floors:** Visible structural joints create the concrete-floor-on-concrete-floor quality of brutalist architecture. 3. **Mixed-media as contradiction collage:** Cut-and-paste compositions embody the clashing elements that make contradictions compelling. 4. **Handwritten annotations as living document:** Margin scribbles transform the encyclopedia from static reference to actively questioned knowledge. 5. **Friendly tone within brutalist aggression:** Warm language inside raw visual design creates the ultimate contradiction (矛盾). **Seed/Style:** aesthetic: brutalist, layout: stacked-sections, typography: handwritten, palette: dopamine-neon, patterns: scroll-triggered, imagery: mixed-media, motifs: mountain-landscape, tone: friendly **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 brutalist aesthetic, stacked-sections layout, dopamine-neon palette, mixed-media imagery, and friendly tone.