# Design Language for munj.uk ## Aesthetics and Tone munj.uk (Munju — 먼저, Korean for "first" or "before") channels a terminal aesthetic — the stark beauty of command-line interfaces, monospace typography, and the raw power of text-based computing applied to a technology platform prioritizing speed and first-mover advantage. The site looks like a sophisticated terminal session — blinking cursors, green-on-dark text, and the no-nonsense efficiency of systems designed for experts. Inspiration draws from classic VT100 terminals, the hacker interfaces of Mr. Robot, Bloomberg Terminal's information density, and the retro-futuristic command lines of WarGames. The tone is mysterious-moody — atmospheric, enigmatic language that treats technology as a dark art practiced by those who move first. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — layered content moving at different scroll speeds, creating dimensional depth like looking through stacked terminal windows. **Parallax Sections Architecture:** - Full-width sections with parallax background elements at 0.3-0.5x scroll speed - Foreground content scrolls at normal speed - Content within sections: max-width: 800px centered - Section backgrounds: full-viewport with depth-creating gradients - Terminal-style content frames with visible borders **Section Sequence:** 1. **Boot:** Hero with tech-mono title on midnight-blue gradient, marble-texture processed background with CRT scan-line effect, futuristic circuit accents 2. **Init:** Platform capabilities in parallax-scrolling sections with path-draw-svg animated circuit diagrams and marble-texture panel surfaces 3. **Execute:** Technical deep-dives with terminal-style code blocks and futuristic accent borders 4. **Process:** Workflow documentation in sequential parallax-depth layers with path-draw-svg connecting illustrations 5. **Exit:** Footer as terminal session close — mysterious sign-off with blinking cursor and futuristic border frame ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — tech monospace at 2rem-3rem, weight 700. Its rigid monospace forms create the authentic terminal quality the aesthetic demands. - **Body Text:** "Space Mono" at 0.85rem, weight 400, line height 1.8. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.8rem with ligatures for code blocks. - **Labels:** "Space Mono" at 0.7rem, weight 400, uppercase, letter-spacing 0.04em. **Color Palette:** - **Midnight:** #080c18 — deep midnight blue for primary backgrounds - **Navy Dark:** #101828 — dark navy for secondary backgrounds - **Terminal Green:** #40c080 — classic terminal green for primary accents - **Phosphor Amber:** #c0a040 — phosphor amber for secondary accents - **Ice Blue:** #4080c0 — cool ice blue for tertiary accents - **Screen Text:** #b0c8b0 — greenish screen text - **Dim Text:** #506050 — dim terminal text - **Border Terminal:** #1a2838 — dark terminal border ## Imagery and Motifs **Marble-Texture Terminal Surfaces:** Panel surfaces feature a marble-like texture — subtle veining patterns (SVG paths at 0.03 opacity in Border Terminal) overlaid with CRT scan-line effect (repeating-linear-gradient creating 1px horizontal lines every 3px in rgba(0,0,0,0.05)). The marble-meets-terminal creates the quality of stone-carved digital interfaces. **Path-Draw-SVG Circuit Animations:** System connections illustrated as circuit diagrams that draw on scroll — SVG paths using stroke-dasharray/stroke-dashoffset, animating over 700ms. Lines in Terminal Green (1.5px stroke) with small square junction points (4px, rotated 45deg). The circuits connect platform sections like wiring in a mainframe. **Futuristic Border Accents:** Content frames use futuristic border details — thin (1px) lines in Terminal Green at 0.2 opacity with small geometric notches at corners (8px L-shaped cutouts). Some borders animate: a thin light (2px wide, Terminal Green at 0.3 opacity) travels along the border path over 4s using background-position animation. **Midnight-Blue Parallax Depth:** Background layers use midnight-blue gradients at different parallax speeds — deepest layer: linear-gradient(180deg, #080c18, #101828), mid layer: scattered small dot clusters (Terminal Green at 0.02 opacity), foreground: content frames. The layered depth creates dimensional terminal space. **Terminal Cursor Blink:** Key interactive elements feature blinking cursor indicators — a 2px wide rectangle in Terminal Green animating opacity between 0 and 1 over 1s (step-end timing for sharp blink). Used beside active navigation items and at the end of terminal-style text blocks. ## Prompts for Implementation Build the page as a terminal parallax platform. Parallax: .parallax-bg { position: fixed; inset: 0; z-index: -1; } or JavaScript-controlled transform: translateY(calc(var(--scroll) * 0.3)). Content: max-width: 800px, margin: 0 auto. Circuit draw: .circuit-path { stroke: #40c080; stroke-width: 1.5; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 700ms ease; } .circuit-path.visible { stroke-dashoffset: 0; } Futuristic borders: .terminal-frame { border: 1px solid rgba(64,192,128,0.2); position: relative; } .terminal-frame::before, .terminal-frame::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid rgba(64,192,128,0.3); } .terminal-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .terminal-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } Cursor blink: .cursor { display: inline-block; width: 2px; height: 1em; background: #40c080; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } CRT scanlines: .crt::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 3px); pointer-events: none; } AVOID: Modern SaaS interfaces, bright technology platforms, and standard developer tool layouts. Let terminal authenticity and mysterious-moody atmosphere create a platform where technology feels like a dark, powerful craft. ## Uniqueness Notes 1. **Terminal aesthetic for first-mover platform:** Command-line interface design communicates the raw power and expertise of those who move first. 2. **Parallax-sections as layered terminal windows:** Depth-creating scroll mirrors the stacked layers of terminal sessions. 3. **Path-draw-SVG as circuit wiring:** Animated circuit diagrams physically connect platform sections like mainframe infrastructure. 4. **Marble-texture on CRT surfaces:** Stone-carved-meets-digital creates terminals that feel ancient and futuristic simultaneously. 5. **Mysterious-moody for technology platform:** Enigmatic language treats technology as a dark art known to the initiated. **Seed/Style:** aesthetic: terminal, layout: parallax-sections, typography: tech-mono, palette: midnight-blue, patterns: path-draw-svg, imagery: marble-texture, motifs: futuristic, tone: mysterious-moody **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 terminal aesthetic, parallax-sections layout, midnight-blue palette, marble-texture imagery, and mysterious-moody tone.