# Design Language for mujun.wiki ## Aesthetics and Tone mujun.wiki inhabits the visual space of a late-night SSH session into a machine that knows too much -- a terminal interface that has accumulated wisdom like lichen on stone, where every command prompt is a question and every output is a koan. The word "mujun" (矛盾) means contradiction in Japanese, and the entire design language is built on productive contradictions: the rigid geometry of a terminal married to the organic fluidity of calligraphic curves; the cold logic of monospaced output softened by an ethereal blue palette that suggests bioluminescent deep-sea organisms; the no-nonsense directness of command-line culture expressed through conversational, almost intimate prose. The aesthetic is **terminal** -- but not the stereotypical green-on-black hacker fantasy. This is a terminal that has dreamed. The screen has been left on for years, and the phosphors have shifted toward blue, the interface has grown ornamental scroll-work in the margins like illuminated manuscript decorations that sprouted from buffer overflows. Think of it as what would happen if Ursula K. Le Guin had designed a Unix shell -- functional, philosophical, and quietly beautiful in ways that reward sustained attention rather than demanding immediate engagement. The tone is **conversational** -- the site speaks to you the way a knowledgeable friend explains something complex over tea. Not lecturing, not performing expertise, but genuinely communicating. Sentences are mid-length, rhythmic, occasionally wry. The voice assumes intelligence in the reader without assuming specific knowledge. It is the opposite of corporate copy: it has opinions, it pauses, it sometimes admits uncertainty. This conversational register is reinforced typographically through careful use of em-dashes, ellipses rendered as three discrete dots with letter-spacing, and occasional parenthetical asides that create intimacy. ## Layout Motifs and Structure The layout is a **horizontal-scroll** composition -- the primary axis of navigation is lateral, not vertical. Content unfolds left-to-right like a Japanese emaki (picture scroll) or a filmstrip, each panel occupying the full viewport height and a variable width determined by its content density. This is not a carousel or a slider with discrete snapping points; it is a continuous horizontal plane that the user traverses at their own pace, with momentum-based inertial scrolling that makes the experience feel physical, like unrolling a scroll on a table. **Structural Architecture:** - **The Scroll Container:** A single horizontal track with `display: flex; flex-direction: row; height: 100vh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;` -- note "proximity" rather than "mandatory," allowing the user to rest between panels rather than being snapped into rigid positions. The total scroll width is approximately 6-8 viewport-widths, creating a journey of deliberate length. - **Panel System:** Each content panel is a full-height section with width set via `clamp(80vw, 90vw, 100vw)` for primary panels and `clamp(40vw, 60vw, 70vw)` for secondary/transitional panels. Panels are not separated by hard borders but by gradient-fade zones: 120px-wide regions where the background color shifts subtly, creating a sense of atmospheric transition rather than architectural division. - **The Terminal Frame:** Every panel is visually contained within a terminal-window metaphor -- a thin 1px border of `#4A7C9B` (muted steel blue) with rounded corners at 6px, a top bar containing three decorative dots (close/minimize/maximize, rendered in `#2D4A5E`, `#3B6B8A`, `#5BA3C9`) and a faux title-bar displaying the panel's identifier in slab-serif type. This frame floats with 3vh top/bottom margin and 2vw left/right margin within each panel, creating a "window within the window" that reinforces the terminal metaphor while preventing the layout from feeling like an actual operating system. - **Flowing-Curve Connectors:** Between panels, thin SVG curves (stroke: `#5BA3C9` at 0.4 opacity, stroke-width: 1.5px) arc gracefully from the right edge of one panel to the left edge of the next. These curves use cubic bezier paths with control points that create gentle S-shapes, visually threading the panels together like a river connecting lakes. The curves are not decorative afterthoughts -- they are structural elements that guide the eye and reinforce the horizontal reading direction. - **Navigation Rail:** A thin horizontal progress indicator fixed at the bottom of the viewport (bottom: 2vh, height: 3px, full viewport width). The track is `#1A2E3D` and the progress fill is a gradient from `#5BA3C9` to `#8ED1F0`, advancing as the user scrolls right. Small diamond-shaped markers on this rail indicate panel positions, rendered as 6px rotated squares in `#3B6B8A`. - **Vertical Exceptions:** Within individual panels, content scrolls vertically if it exceeds the viewport height. This creates a scroll-within-scroll that is carefully managed: vertical scroll is only enabled when the user's cursor/focus is within a panel's content area, and a subtle visual indicator (a fading gradient at the panel's bottom edge) signals when vertical content exists below the fold. ## Typography and Palette **Typography:** - **Display / Headlines:** "Rockwell" is the spiritual reference, but the actual Google Font is **"Roboto Slab"** (Google Fonts) at weights 400 and 700. Slab-serifs carry the mechanical authority of typewriter output and stamped industrial markings -- they belong in terminals and on crate stencils. Used at `clamp(2rem, 4vw, 3.5rem)` for primary panel titles, always in sentence case. The thick, bracketed serifs of Roboto Slab create visual anchors that ground each panel's identity. Letter-spacing: -0.02em at display sizes to keep headlines compact and authoritative. - **Secondary Headlines / Panel Labels:** **"Alfa Slab One"** (Google Fonts) at weight 400 -- a more expressive, high-contrast slab-serif used sparingly for the faux terminal title-bars and for pull-quotes. Its exaggerated thick-thin contrast adds personality without competing with Roboto Slab's workhorse clarity. Used at `clamp(0.85rem, 1.2vw, 1.1rem)` for title-bars and `clamp(1.5rem, 3vw, 2.5rem)` for pull-quotes. - **Body Text:** **"Source Sans 3"** (Google Fonts) at weights 300 and 400. A humanist sans-serif that is legible at small sizes and warm enough to support the conversational tone. Line-height: 1.75 for body text -- generous vertical rhythm that makes horizontal-scroll reading less fatiguing. Paragraph max-width within panels: 58ch, preventing eye-strain on wide panels. Font-size: `clamp(1rem, 1.1vw + 0.4rem, 1.15rem)`. - **Code / Terminal Output:** **"IBM Plex Mono"** (Google Fonts) at weight 400. Used for inline code, command examples, and decorative terminal-output elements. Color: `#8ED1F0` on dark backgrounds, creating the classic terminal-glow effect. Font-size: 0.9em relative to body text. When used in decorative blocks, line-height tightens to 1.45 to create the dense, information-rich texture of actual terminal output. **Palette -- Ethereal Blue:** The palette is built on the premise that blue light is the only light that penetrates deep ocean water, and this site exists at depth -- where everything is filtered through kilometers of cold, clear liquid. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Deep Background | Abyssal Ink | `#0B1A24` | Near-black with strong blue undertone; the void behind the terminal | | Panel Background | Midnight Current | `#0F2433` | Dark navy-blue; the primary surface for content panels | | Frame Border | Steel Tide | `#4A7C9B` | Muted steel blue; all borders, rules, and structural lines | | Primary Accent | Phosphor Blue | `#5BA3C9` | The dominant interactive/highlight color; links, active states, curve connectors | | Bright Accent | Bioluminescent | `#8ED1F0` | Pale electric blue; code text, hover states, the progress bar fill | | Text Primary | Foam White | `#D8E8F0` | Cool off-white with blue tint; primary body text | | Text Secondary | Drift Gray | `#8A9DAD` | Muted blue-gray; secondary text, captions, timestamps | | Warm Exception | Coral Signal | `#D4826A` | A single warm color used exclusively for warnings, emphasis marks, and the underline-draw animation endpoint -- the contradiction that proves the rule | The palette deliberately avoids pure white (`#FFFFFF`) and pure black (`#000000`). Every value exists within the blue channel, creating a cohesive chromatic environment that feels immersive rather than designed. The Coral Signal color is the only warm hue, and its rarity makes it powerful -- when it appears, the eye is drawn to it immediately, making it the palette's exclamation point. ## Imagery and Motifs **Duotone Photography:** All photographic imagery is processed through a strict duotone filter: shadows mapped to `#0B1A24` (Abyssal Ink) and highlights mapped to `#5BA3C9` (Phosphor Blue). This creates a unified visual language where photographs lose their documentary reality and become atmospheric texture -- faces become luminous masks, landscapes become sonar readings, objects become blueprints of themselves. The duotone treatment transforms photography into something closer to cyanotype prints (the 19th-century photographic process that produced cyan-blue images), connecting the digital terminal aesthetic to an analog historical precedent. Specific photographic subjects to favor: - **Underwater scenes:** Jellyfish, deep-sea formations, light shafts through water -- all reinforcing the depth metaphor - **Architecture at night:** Buildings as geometric forms defined by their own illumination, rendered in blue duotone as luminous wireframes - **Close-up textures:** Weathered metal, oxidized copper (which naturally tends blue-green), circuit boards, woven textiles -- surfaces that reveal complexity at close inspection - **Fog and mist:** Atmospheric conditions that naturally create duotone-like depth layering **Flowing-Curve Motifs:** The flowing-curves motif manifests in three registers: 1. **Structural Curves:** The SVG connectors between panels described in Layout. These are the most prominent curve elements, rendered at 0.4 opacity with `#5BA3C9` stroke. They use cubic-bezier paths: `M startX,startY C cp1X,cp1Y cp2X,cp2Y endX,endY` where control points create gentle, wave-like S-curves that never become circular or symmetrical. Each connector has a unique curve profile -- no two are identical, creating organic variety within a consistent system. 2. **Decorative Curves:** Background SVG patterns within panels -- thin, nearly transparent (`opacity: 0.06`) curves that drift across the panel backgrounds like ocean currents. These are generated from sine-wave functions with varying amplitude and frequency, layered 3-4 deep to create interference patterns. They scroll at 0.3x the speed of the primary horizontal scroll, creating a parallax-like depth separation without traditional parallax. 3. **Typographic Curves:** The underline-draw animation (see Patterns) uses a curved path rather than a straight line. When text is underlined, the line follows a gentle wave that peaks at roughly 2px amplitude -- barely perceptible as a curve, but subtly different from a mechanical straight underline. This micro-detail reinforces the flowing-curves motif at the smallest scale. **Terminal Ornamentation:** - **Cursor Blink:** A blinking cursor element (the classic block cursor, `#5BA3C9`, 0.5s on / 0.5s off) appears at strategic points -- at the end of the last line of body text in each panel, beside interactive elements, at the terminus of the progress rail. It signals "the system is alive, waiting for your input." - **ASCII Dividers:** Section breaks within panels use ASCII-art horizontal rules composed of characters like `~-._.-~-._.-~` rendered in IBM Plex Mono at `#4A7C9B` opacity 0.3. These are not generic lines but character-based ornaments that belong to terminal culture. - **Prompt Symbols:** Section headers are prefixed with a `>` character in Phosphor Blue, rendered in IBM Plex Mono, followed by a space, then the headline in Roboto Slab. This hybrid creates a visual grammar where every section feels like a command being entered into a philosophical machine. ## Prompts for Implementation **Full-Screen Horizontal Narrative Experience:** The site opens to a full-viewport panel that is entirely dark (`#0B1A24`) except for a single blinking block cursor at the center of the screen. After 800ms, the domain name "mujun.wiki" types itself out letter-by-letter in Roboto Slab at `clamp(2.5rem, 5vw, 4rem)`, color `#D8E8F0`, with a 70ms delay between characters (typewriter effect using CSS `@keyframes` with `steps()` timing or JS `requestAnimationFrame` loop). The cursor remains at the end of the text. After typing completes, a 400ms pause, then a subtitle line types itself below: a brief tagline in Source Sans 3 Light at 1rem, color `#8A9DAD`. After another 400ms pause, a flowing SVG curve draws itself from the right edge of the text toward the right side of the viewport (path-draw using `stroke-dasharray` and `stroke-dashoffset` animation, 1200ms duration, ease-in-out), inviting the user to scroll right. **Underline-Draw Interactions:** All interactive text elements (links, navigation labels, panel titles on hover) use the underline-draw animation: an SVG `` element positioned beneath the text, initially with `stroke-dashoffset` equal to its `stroke-dasharray` (fully hidden). On hover/focus, `stroke-dashoffset` animates to 0 over 350ms with `cubic-bezier(0.25, 0.1, 0.25, 1)` timing, drawing the underline from left to right. The underline path is a subtle sine-wave (2px amplitude, wavelength equal to text width), and its stroke color transitions from `#5BA3C9` to `#D4826A` (Coral Signal) over the draw duration, ending warm -- the contradiction made visible. **Panel Transitions During Scroll:** As the user scrolls horizontally, panels implement the following behaviors: - **Enter Animation:** When a panel's left edge crosses the 80% viewport-width threshold (i.e., it is about to become visible), its content elements stagger-animate inward: the terminal frame fades from 0 to 1 opacity (200ms), then the title types itself (typewriter, 50ms/char), then body text fades up from 15px below (300ms, ease-out), then any images cross-fade through their duotone filter (400ms). - **Active State:** The currently centered panel's terminal frame border brightens from `#4A7C9B` to `#5BA3C9` (200ms transition), and its decorative background curves increase opacity from 0.06 to 0.12. - **Exit Animation:** As a panel scrolls past the 20% viewport-width threshold leftward, its content subtly reduces opacity to 0.6 (400ms), creating depth -- passed panels recede but remain visible, like windows in a train you have moved beyond. **Keyboard Navigation:** Arrow-left and arrow-right keys scroll the horizontal container by one panel-width with smooth scroll behavior. This is essential for accessibility and for reinforcing the "terminal user" metaphor -- keyboard-driven navigation feels native to the terminal aesthetic. The `Tab` key cycles through interactive elements within the current panel before advancing to the next panel. **AVOID:** CTA-heavy layouts with "Sign Up Now" buttons. Pricing blocks, feature comparison grids, stat-counter animations. Testimonial carousels. Hamburger menus (navigation is the scroll itself). Footer link columns. Hero sections with stock photography. Any element that signals "SaaS landing page" rather than "immersive reading experience." **BIAS TOWARD:** Full-screen narrative sequences. Long-form prose panels. Atmospheric transitions. Moments of emptiness and pause. Content that rewards slow, deliberate traversal. The sense that the site is a single continuous document rather than a collection of pages. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal-Scroll as Primary Navigation Axis:** At only 1% frequency in the portfolio, horizontal-scroll layout is drastically underused. Most designs default to vertical scrolling with centered composition (99%). This design commits fully to lateral movement, creating a fundamentally different spatial experience -- the user moves *through* the content like traversing a landscape, rather than *down* through it like descending a well. The emaki (picture scroll) reference gives this choice cultural grounding rather than making it feel like a gimmick. 2. **Terminal Aesthetic Without Mono Typography Dominance:** While the terminal aesthetic (26%) is moderately represented, it is almost always paired with mono typography (99%). This design breaks that coupling by leading with slab-serif typography (3% frequency), using mono only for code/terminal-output accents. The result is a terminal that feels literary rather than purely technical -- as if the machine learned to set type with the authority of a 19th-century newspaper rather than the uniformity of a teletype. 3. **Ethereal Blue Palette in a Warm-Dominated Portfolio:** The portfolio is 100% warm-palette dominated. This design's ethereal-blue palette (2% frequency) is a deliberate countercurrent -- every color exists in the cool-blue spectrum except for the single Coral Signal accent. This chromatic isolation makes the design immediately distinguishable from the warm-earth tones, warm-neutrals, and warm-accents that characterize the vast majority of sibling designs. 4. **Duotone Photography as Worldbuilding:** At 1% frequency, duotone-photo imagery is nearly absent from the portfolio. Rather than using duotone as a filter effect applied to otherwise normal photography, this design uses it as a worldbuilding tool -- every image exists within the same cyanotype blue universe, making photographs feel like artifacts from the site's own reality rather than imported content. The historical connection to cyanotype printing (Anna Atkins, 1843) adds intellectual depth. 5. **Conversational Tone with Terminal Frame:** The conversational tone (4%) is rarely paired with terminal aesthetics, which typically default to terse, command-line brevity. This contradiction is the heart of the design: the warm, discursive, human voice housed within the cold, precise, machinic frame. The site's name -- mujun, contradiction -- is its method. **Documented seed/style:** - aesthetic: terminal - layout: horizontal-scroll - typography: slab-serif - palette: ethereal-blue - patterns: underline-draw - imagery: duotone-photo - motifs: flowing-curves - tone: conversational **Avoided overused patterns:** centered layout (99%), mono typography dominance (99%), warm palette (100%), friendly tone (98%), scroll-triggered as primary animation pattern (97%), minimal imagery (94%), playful aesthetic (95%), vintage motifs (84%), parallax as primary motion (76%), stagger animation (61%). None of these overrepresented patterns appear as primary design choices in this document.