# Design Language for munju.org ## Aesthetics and Tone munju.org channels the visual philosophy of the 1920s Weimar Bauhaus workshop translated through the lens of a 1982 Tokyo electronics catalog -- a place where Oskar Schlemmer's geometric costumes meet the glowing phosphor grids of early CRT interfaces, where primary-colored wooden blocks sit on brushed aluminum surfaces, and where every element exists because it performs a function, yet the sum total of that function produces something unexpectedly beautiful. The aesthetic is **bauhaus-retro-futuristic**: the radical functionalism of Gropius and Moholy-Nagy's design principles -- geometric purity, truth to materials, the marriage of art and technology -- re-expressed through the visual language of a future that was imagined but never arrived. Think of it as the design manual for a computing laboratory that Walter Gropius might have built in 1978, had he lived to see the microprocessor revolution. The tone is **professional** in the original Bauhaus sense: not the sanitized corporate professionalism of LinkedIn profiles and stock photography, but the exacting, serious professionalism of a master craftsman who files metal to sub-millimeter tolerances because craft demands nothing less. There is warmth here, but it is the warmth of a well-lit workshop, not a living room. There is precision here, but it is the precision of a hand that has practiced a stroke ten thousand times, not the sterile perfection of a machine. Every pixel placement should feel like it was debated by a committee of very talented, very opinionated architects who ultimately agreed on the only possible correct position. The domain name "munju" carries a phonetic weight that evokes both the Japanese word for "pattern" (紋) and the Korean word for "question" (문제) -- a convergence of Eastern structural thinking and Western industrial design that the Bauhaus itself aspired to but never fully achieved. The site should feel like a document from this alternate timeline: an instruction manual for a machine that teaches you how to see. ## Layout Motifs and Structure The layout employs a **modular-blocks** system directly inspired by Bauhaus grid exercises -- content is organized into discrete, self-contained rectangular modules that interlock like the wooden building blocks in Josef Albers' preliminary course. Each module is a complete unit of meaning: it has clear boundaries, consistent internal padding (24px on all sides), and relates to its neighbors through precise spatial intervals rather than flowing connections. **Grid Foundation:** The master grid is a 6-column system at max-width 1080px, with 16px gutters. This is deliberately narrower than standard web widths because the Bauhaus principle demands that the content area feel like a defined "page" floating in the viewport, not an infinite surface. The 6-column structure allows for modules of 1/6, 1/3, 1/2, 2/3, and full-width, creating a vocabulary of exactly five module widths. No other widths are permitted. The rigid constraint is the point -- it forces compositional inventiveness within strict limits, exactly as Albers demanded of his students. **Module Hierarchy:** - **Primary modules** (2/3 or full-width): House the main narrative text blocks. These are visually anchored by a 3px left border in Signal Red (#D32F2F) that runs the full height of the module, a reference to the Bauhaus practice of color-coding architectural functions. - **Secondary modules** (1/3 or 1/2-width): Contain supporting visual elements, diagrams, or callout text. These have no left border but instead feature a thin top rule (1px, #4A4A52) that connects them visually to the grid. - **Tertiary modules** (1/6-width): Narrow annotation columns containing labels, dates, or reference numbers in monospaced type. These are the marginalia of the system, always aligned to the leftmost or rightmost column. **Vertical Rhythm:** Modules are separated by 32px vertical gaps, except at section breaks where the gap expands to 96px -- exactly 3x the standard gap, maintaining mathematical proportion. Section breaks are marked by a full-width horizontal rule: a 1px line in #4A4A52, flanked by 48px of breathing space above and below. **Compositional Rules:** No two adjacent rows may have identical column configurations. If row 1 is [2/3 + 1/3], row 2 must be [1/3 + 2/3] or [1/2 + 1/2] or [full] or any other permutation. This anti-repetition rule creates visual syncopation -- a rhythm that is regular in its spacing but varied in its proportions, like a Mondrian composition extended vertically. The page should feel like a timeline of decisions, each row a new thought, each module a new proposition. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Mono" (Google Fonts) -- weight 700 (Bold). A fixed-width grotesque with a technical, engineer's-notebook quality. Used at 2.8rem-4.5rem for section titles and at 1.6rem-2.2rem for module headlines. Letter-spacing is set to 0.04em at display sizes for a slightly airy, technical-drawing feel. Line-height: 1.1 for large display, 1.25 for module headlines. All display text is set in UPPERCASE -- a direct Bauhaus typography convention that Herbert Bayer championed, where the abolition of capital/lowercase distinction enforced visual democracy among letterforms. - **Body / Running Text:** "IBM Plex Mono" (Google Fonts) -- weight 400 (Regular) for body text, weight 500 (Medium) for emphasis within paragraphs. A monospaced typeface designed by Mike Abbink for IBM, carrying the heritage of Selectric typewriters and early computer terminals. Used at 0.95rem (approximately 15.2px) for body text, 0.85rem for annotation columns. Letter-spacing: 0.01em for body, 0.06em for small annotation text. Line-height: 1.7 for body text (generous to compensate for the fixed-width letter-fitting), 1.5 for annotations. The monospaced body text is crucial to the design identity: it signals that this is a space where precision matters, where every character occupies exactly the same territory, where the grid extends all the way down to the level of individual glyphs. - **Accent / Labels:** "Space Grotesk" (Google Fonts) -- weight 500 (Medium). The proportional sibling of Space Mono, used exclusively for UI labels, navigation elements, and metadata captions at 0.75rem-0.9rem. Weight 300 (Light) for secondary labels. This creates a typographic hierarchy where fixed-width type carries the content and proportional type handles the interface, a clear separation of concerns that mirrors the Bauhaus principle of material honesty. **Color Palette:** The palette is **retro-futuristic** -- the colors of a 1970s vision of the year 2000, where everything would be white plastic, primary accents, and glowing screens. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Bone White | #F0ECE3 | Main page background -- not pure white, but the warm off-white of aged Bauhaus exhibition catalogs printed on uncoated stock | | Background Secondary | Concrete Gray | #E2DDD4 | Module backgrounds for secondary blocks, creating subtle depth without shadow | | Text Primary | Carbon Black | #1C1C1E | Body text and headlines -- a soft black with the faintest blue undertone, like India ink | | Text Secondary | Graphite | #4A4A52 | Secondary text, annotations, horizontal rules -- the color of a freshly sharpened 2H pencil | | Accent Primary | Signal Red | #D32F2F | Left borders on primary modules, interactive hover states, critical emphasis -- the red of Bauhaus signage and Kandinsky's color theory assignments | | Accent Secondary | Cobalt Blue | #1565C0 | Links, visited states, selected module indicators -- the blue of cyanotype prints and engineering blueprints | | Accent Tertiary | Chrome Yellow | #F9A825 | Skeleton loading pulse color, progress indicators, warning states -- the yellow that completes the Bauhaus primary triad | | Surface Overlay | Phosphor Green | #4CAF50 | Terminal-style status indicators, success states, active connection markers -- the green of CRT phosphor screens that represents the retro-futuristic digital layer | ## Imagery and Motifs **Hand-Drawn Illustration System:** The primary imagery mode is **hand-drawn** -- but not the casual, whimsical sketchiness of napkin doodles. This is the precise hand-drawing of a Bauhaus preliminary course exercise: geometric constructions rendered with ruling pen and compass, where the slight wobble of the human hand is visible in every line but the underlying geometry is mathematically exact. Think of Kandinsky's pedagogical diagrams, Paul Klee's notebooks, or the technical illustrations in Moholy-Nagy's "The New Vision." All illustrations are rendered as inline SVGs in a single stroke weight (1.5px) using Carbon Black (#1C1C1E) on the Bone White (#F0ECE3) background. No fills, no gradients, no color in the illustrations themselves -- they are pure line work. The illustrations depict: - **Geometric Constructions:** Circles inscribed in squares, triangles bisecting rectangles, golden-ratio spirals overlapping grid systems. These appear as decorative header elements within primary modules, always precisely aligned to the module's left border. - **Axonometric Projections:** Simple 3D wireframe forms (cubes, cylinders, prisms) drawn in isometric perspective, used as section dividers between major content areas. These carry the retro-futuristic flavor of early computer graphics manuals. - **Diagrammatic Arrows and Flow Lines:** Thin arrows and dotted connection lines that link modules to each other, drawn as if by a systems architect sketching a flowchart. These appear at section transitions, guiding the eye from one content block to the next. **Flowing-Curves Motif:** Beneath the rigid rectilinear grid of the modular layout, a secondary layer of **flowing curves** provides organic counterpoint -- like the calligraphic exercises that Bauhaus students practiced alongside their geometric constructions. These curves manifest as: - **Bezier Thread Lines:** Thin (0.75px), light gray (#C5C0B8) curved lines that arc between modules, connecting related content blocks with graceful parabolic paths. These are purely decorative, drawn as SVG path elements positioned absolutely behind the content layer. They evoke the thread lines on a Bauhaus weaving loom diagram. - **Section Transition Arcs:** At each 96px section break, a single flowing curve sweeps from the left margin to the right, dipping below the horizontal rule like a suspension bridge cable. The curve uses a cubic bezier with asymmetric control points, producing an organic, hand-drawn quality. - **Background Wave Pattern:** A repeating pattern of low-amplitude sine curves (amplitude: 8px, wavelength: 200px) rendered at 0.15 opacity in Graphite (#4A4A52), tiling across the full viewport behind the content area. This provides the faintest textural depth, visible only when the eye rests between reading, like the watermark in high-quality paper. **Skeleton Loading States:** All content modules implement **skeleton-loading** animations during initial page load and lazy-loading transitions. The skeleton states are not generic gray rectangles but are designed as part of the visual language: - Text placeholders are rendered as horizontal lines at the exact line-height of the final typography (1.7 * 0.95rem), with widths that vary pseudo-randomly between 60% and 95% of the module width, mimicking the ragged right edge of real text. - Image placeholders display a pulsing geometric construction (a circle inscribed in a square, animated with a slow 2.4s CSS animation) in Chrome Yellow (#F9A825) at 0.3 opacity. - The loading pulse animation uses a custom easing curve `cubic-bezier(0.4, 0, 0.2, 1)` and oscillates the background between Bone White (#F0ECE3) and Concrete Gray (#E2DDD4), creating a gentle breathing rhythm. - Skeleton elements animate in with a 120ms stagger delay between modules, giving the loading state its own compositional rhythm rather than appearing all at once. ## Prompts for Implementation **Full-Screen Narrative Entry Sequence:** The site opens to a full-viewport Bone White (#F0ECE3) field. For the first 0.4 seconds, the screen is completely empty -- deliberate silence, the visual equivalent of a conductor's raised baton before the downbeat. Then, from the exact center of the viewport, a single thin vertical line (1.5px, Carbon Black #1C1C1E) begins to draw itself, extending 120px upward and 120px downward over 0.6 seconds, using `stroke-dasharray` and `stroke-dashoffset` animation. This is the spine of the grid. At 1.0 seconds, two horizontal lines extend from the midpoints of the vertical line, growing left and right to the edges of the content area (max-width 1080px), taking 0.4 seconds each. These are the primary grid lines. The intersection creates a cross -- the universal symbol of the grid, the foundational mark of Bauhaus compositional teaching. At 1.4 seconds, the cross fades to 0.15 opacity (becoming the background grid texture), and the first content modules begin their skeleton-loading sequence. Each module boundary draws itself as a thin rectangle (1px, Graphite #4A4A52), appearing in a staggered cascade from top-left to bottom-right with 80ms delays between modules. The skeleton loading pulses begin within each module as its boundary completes drawing. At 2.6 seconds, the skeleton states resolve into actual content: text fades in with `opacity: 0 -> 1` over 300ms, and the left borders on primary modules draw themselves downward using `scaleY(0) -> scaleY(1)` with `transform-origin: top`. The entire entry sequence takes approximately 3.2 seconds and establishes the design language before any reading begins. **Scroll Behavior:** Scrolling is continuous (no snap-scrolling) but section transitions are marked by subtle events: - When a section break's horizontal rule enters the viewport, the flowing-curve arc beneath it draws itself using the same `stroke-dashoffset` technique as the opening sequence, taking 0.6 seconds. - Modules within a new section animate in with a 60ms stagger: `transform: translateY(16px) -> translateY(0)` combined with `opacity: 0 -> 1`, using `cubic-bezier(0.22, 1, 0.36, 1)` easing for a slightly springy feel without the bounciness of true spring physics. - The bezier thread lines between modules draw themselves as the user scrolls past their origin module, using Intersection Observer with a 0.3 threshold. Each thread line takes 0.8 seconds to draw. **Interactive Module Behavior:** Modules respond to hover with restrained, professional interactions: - Primary modules: The 3px Signal Red left border extends by 2px (to 5px) over 200ms, and the module's background shifts from transparent to `rgba(226, 221, 212, 0.4)` (a hint of Concrete Gray). - Secondary modules: The 1px top rule changes color from Graphite (#4A4A52) to Cobalt Blue (#1565C0) over 200ms. - Tertiary modules: The monospaced annotation text shifts from Graphite to Carbon Black over 150ms. - No box-shadows, no transforms, no elevation changes. The Bauhaus ethos rejects the illusion of depth created by drop shadows -- depth is communicated through color value and spatial position, never through simulated lighting. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Hamburger menus and sticky navigation bars - Card-based layouts with rounded corners and drop shadows (antithetical to the Bauhaus rectilinear discipline) - Gradient backgrounds or glassmorphism effects (these dissolve the material honesty that the design demands) - Stock photography or photographic imagery of any kind (the hand-drawn illustration system is the only permitted imagery mode) - Parallax scrolling effects (the modules should feel grounded and architectural, not floating) - Any typeface other than the three specified (Space Mono, IBM Plex Mono, Space Grotesk) **BIAS TOWARD:** - Full-screen narrative experience where the opening animation sequence establishes the visual grammar before content appears - Treating the entire page as a single vertical composition rather than a series of independent sections - Using the skeleton-loading system as a design feature, not just a performance optimization -- the loading states should be beautiful in their own right - Making the hand-drawn SVG illustrations interactive: on hover, construction lines could extend or additional geometric elements could draw themselves in - Maintaining absolute fidelity to the 6-column grid -- every element must align to column edges, no exceptions ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus-Retro-Futuristic Synthesis:** No other design in the portfolio combines the Bauhaus aesthetic (2% frequency) with a retro-futuristic palette (3% frequency). This creates a unique temporal collision: the 1920s design philosophy of "art into industry" meets the 1970s vision of "technology as aesthetic." The result is a visual language that is simultaneously historical and speculative -- a design from a timeline where the Bauhaus school survived into the digital age and designed the first computer interfaces. 2. **Skeleton Loading as Design Language:** While skeleton-loading appears at only 4% frequency in the portfolio, no other design treats it as a primary visual element rather than a utilitarian performance pattern. Here, the skeleton states are deliberately designed with the same geometric precision as the final content, using the Chrome Yellow (#F9A825) pulsing constructions and typography-accurate line placeholders to create loading states that are compositionally complete in themselves. The 120ms stagger between modules during loading creates a choreographed reveal that functions as the site's opening act. 3. **Strict Modular-Block Grid with Anti-Repetition Rule:** The modular-blocks layout (7% frequency) is implemented here with a constraint that no two adjacent rows share the same column configuration. This anti-repetition rule is unique in the portfolio and directly references the Bauhaus pedagogical method of "constraint as creative catalyst." Combined with the 6-column, 5-width-vocabulary limitation, it produces layouts that are rigorously systematic yet never monotonous -- each row is a fresh compositional proposition within an unbreakable framework. 4. **Hand-Drawn Geometric Illustrations as Pure Line Work:** While hand-drawn imagery exists in the vocabulary, no other design restricts it to single-weight (1.5px), fill-less, gradient-less geometric constructions in the Bauhaus pedagogical tradition. These are not decorative illustrations but diagrammatic propositions -- circles inscribed in squares, axonometric projections, flow-line annotations -- that function simultaneously as visual ornament and as demonstrations of the grid system that organizes the entire page. 5. **Dual-Layer Composition (Rectilinear + Organic Curves):** The combination of rigid modular blocks with flowing bezier curves creates a dual-layer visual system unique in the portfolio. The flowing-curves motif (2% frequency) operates as a counterpoint to the grid, like the warp and weft of a Bauhaus textile -- one layer provides structure, the other provides movement. The curves never override the grid; they exist beneath it, visible in the spaces between modules, creating a subliminal sense of organic connection within the mechanical order. **Documented Seed/Style:** aesthetic: bauhaus, layout: modular-blocks, typography: tech-mono, palette: retro-futuristic, patterns: skeleton-loading, imagery: hand-drawn, motifs: flowing-curves, tone: professional **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), mono typography baseline (99%), warm palette (100%), scroll-triggered patterns (97%), friendly tone (98%), minimal imagery (94%), vintage motifs (85%). Every seed dimension was chosen from the bottom half of its frequency distribution, ensuring maximum differentiation from the existing portfolio.