# Design Language for maljosim.com ## Aesthetics and Tone maljosim.com -- the Korean word for "simulation" -- inhabits a world where Roy Lichtenstein painted fever dreams in a dimly lit museum archive instead of comic book panels. The aesthetic is **pop-art refracted through a foggy lens**: bold graphic outlines and Ben-Day dot patterns, but drained of their usual screaming primaries and recast in the faded palette of a 1970s Kodachrome slide found in a dead collector's drawer. Every visual element carries the structural DNA of pop-art -- hard outlines, halftone screens, flattened perspective, comic-panel framing -- but the colors have been left in a sunlit window for forty years, bleaching into dusty roses, oxidized teals, and yellowed ivories. The tone is **mysterious-moody**: not horror-dark, but the specific unease of a simulation that knows it is being observed. Think of a Warhol silkscreen of Marilyn Monroe, but printed on vellum that has aged in a Florentine archive, the inks shifting toward sepia, the celebrity face becoming an anonymous icon. The mood is contemplative surveillance -- the site watches the visitor as much as the visitor watches the site. There is a quiet theatricality: every scroll reveals something that was always there but previously invisible, as if the page remembers being looked at and changes accordingly. ## Layout Motifs and Structure The layout follows a **single-column vertical descent** that mimics the experience of walking through a narrow gallery corridor where oversized pop-art canvases hang on both sides but you can only look straight ahead. The column occupies 60-70% of the viewport width on desktop, positioned dead-center but with content that constantly shifts its internal alignment -- a headline flush-left, followed by a data visualization centered, followed by body text flush-right -- creating a serpentine reading path within the strict single-column constraint. **Structural Architecture:** - **The Dot Matrix Frame:** The entire page sits within a subtle border of halftone dots (CSS radial-gradient pattern) that fade from visible at the viewport edges to invisible toward the content center. This dot-field is fixed-position, creating a persistent "print screen" effect as content scrolls beneath it. The dots use the muted teal (#6B8F8E) at 15% opacity. - **Panel Sections:** Each major content section is framed as a comic panel -- a rounded-corner rectangle with a 3px solid border in faded charcoal (#4A4A52). But unlike traditional comic panels, these have no gutters between them. Instead, they overlap slightly (negative margin of -20px), creating a stacked, compressed feeling as if the simulation is running out of memory and compressing its own frames. - **The Bleed Zone:** Between every third panel, a full-bleed section breaks the column constraint entirely, stretching edge-to-edge with a single large data visualization or marble texture. These bleed zones function as chapter breaks in the narrative scroll, moments where the simulation "resets" and the visitor is reminded of the larger frame. - **Vertical Rhythm:** Line-height and section spacing follow a musical 8px base grid, with section padding alternating between 64px and 96px to create an irregular breathing rhythm -- deliberate arrhythmia that keeps the scroll from feeling mechanical. ## Typography and Palette **Typography:** - **Display / Headlines:** "Libre Baskerville" (Google Fonts) -- the refined, high-contrast serif that anchors the baskerville-refined category. Used at 3rem-5.5rem for primary headlines, weight 700 (bold). The sharp, angular serifs of Baskerville create an unexpected tension against the rounded, organic shapes of pop-art halftone dots. Headlines are set in sentence case with generous letter-spacing (+0.02em) to let each character breathe inside its comic-panel frame. Italic variant used for single-word emphasis within headlines, never for entire headlines. - **Body Text:** "Lora" (Google Fonts) -- a well-balanced contemporary serif with roots in calligraphy, providing warmth and readability at text sizes. Used at 1.1rem-1.25rem, weight 400 regular, with line-height 1.8. The subtle brushed quality of Lora's strokes complements the hand-printed feel of the muted pop-art palette. Weight 600 (semi-bold) used for inline emphasis. - **Data Labels / Captions / UI Elements:** "IBM Plex Mono" (Google Fonts) -- a technical monospace that grounds the data-viz imagery in credibility. Used at 0.8rem-0.95rem for chart labels, figure captions, metadata tags, and navigation elements. Weight 400 regular, letter-spacing +0.05em. The monospace creates a clinical counterpoint to the emotional warmth of the serif pairing, reinforcing the "simulation monitoring itself" narrative. - **Typographic Rules:** No uppercase transforms anywhere on the page. All text in sentence case or natural case. Pull quotes rendered in Libre Baskerville Italic at 2.5rem with a left border of 4px in faded coral (#C4837A). Footnotes and annotations in IBM Plex Mono at 0.75rem with 60% opacity. **Palette:** The muted-vintage palette is built from pigments that feel like they were mixed in 1968 and have been slowly oxidizing ever since: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Aged Ivory | #F2EDE4 | Warm off-white with yellow undertone, like unbleached linen | | Background Secondary | Smoke Parchment | #E8E0D4 | Slightly deeper warm gray for alternating panels | | Text Primary | Archive Charcoal | #3B3B42 | Not true black -- a warm, dusty near-black with violet undertone | | Text Secondary | Faded Graphite | #6E6E78 | For body text and secondary content | | Accent Primary | Oxidized Teal | #6B8F8E | The signature color -- a green-blue that has lost its saturation, like verdigris on copper | | Accent Secondary | Faded Coral | #C4837A | A warm pink-orange drained of its vibrancy, like a sun-bleached Warhol print | | Accent Tertiary | Dusty Mauve | #9E8B96 | A muted purple-pink for data visualization highlights | | Highlight | Yellowed Gold | #C9B87A | The color of aged varnish on a Renaissance painting | | Panel Border | Warm Graphite | #4A4A52 | For comic-panel outlines and structural lines | | Dot Pattern | Halftone Teal | #6B8F8E at 15% opacity | For the persistent Ben-Day dot overlay | **Palette Relationships:** The palette avoids complementary clashes. All colors sit within an analogous range of warm neutrals with two muted chromatic anchors (teal, coral). No color exceeds 45% saturation. The overall effect is a photograph of a pop-art painting, not the painting itself. ## Imagery and Motifs **Data Visualization as Pop-Art:** The primary imagery mode fuses data-viz with pop-art visual language. Charts and graphs are rendered not as clinical dashboard components but as stylized graphic art pieces -- imagine a Lichtenstein painting of a stock ticker, or a Warhol grid of identical bar charts in shifting muted hues. Specific approaches: 1. **Halftone Data Points:** Scatter plots and bubble charts use Ben-Day dot fills instead of solid fills. Each data point is a cluster of tiny dots whose density encodes the value, creating a visual texture that is simultaneously analytical and decorative. Dots rendered via CSS `radial-gradient` patterns at varying sizes (2px-6px) within SVG circle elements. 2. **Comic-Panel Charts:** Line charts are drawn with the thick, confident outlines of comic illustration (stroke-width: 3-4px) in Archive Charcoal, with areas beneath the lines filled using the muted palette at 20% opacity. Grid lines are rendered as dashed patterns reminiscent of action lines in manga, radiating from data peaks. 3. **Warhol Grid Repetition:** Key data visualizations are repeated in a 2x2 or 3x3 grid, each instance rendered in a different combination from the muted palette -- the same chart in Oxidized Teal, Faded Coral, Dusty Mauve, and Yellowed Gold. This repetition-with-variation is pure Warhol methodology applied to quantitative information. 4. **Speech Bubble Annotations:** Data callouts and tooltips are styled as comic speech bubbles with rounded borders and the classic triangular tail, but rendered in the muted palette with Libre Baskerville italic text inside. The bubbles have a subtle CSS `box-shadow` that places them slightly above the chart surface. **Marble-Classical Motifs:** Marble textures appear as transitional elements between content panels. These are not photographic marble textures but **stylized, pop-art interpretations of marble** -- simplified vein patterns rendered as bold SVG curves in Warm Graphite (#4A4A52) on Aged Ivory (#F2EDE4), looking like Lichtenstein drew Carrara marble. The marble motifs serve three functions: - **Section Dividers:** Horizontal strips of stylized marble pattern (48px tall) separate the bleed-zone sections from regular panels - **Background Fragments:** Partial marble vein patterns peek from behind content blocks, as if the classical substrate is showing through the pop-art surface - **Loading States:** When content enters the viewport via blur-focus animation, it resolves from a marble-textured placeholder into the actual content, suggesting that everything in the simulation was carved from stone before being painted **The Simulation Eye:** A recurring motif of a single stylized eye (thick pop-art outline, halftone-dot iris in Oxidized Teal, no pupil) appears at three points on the page -- once in the hero, once at the midpoint, once at the footer. Each instance is slightly different in size and orientation. The eye reinforces the "simulation observing itself" narrative. It is rendered as an inline SVG with CSS animation: the halftone dots in the iris slowly rotate (360-degree transform over 30 seconds, linear, infinite). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a viewport-filling hero panel framed by the halftone dot border. The domain name "maljosim.com" is set in Libre Baskerville Bold at 5rem, centered vertically and horizontally, in Archive Charcoal. Below the name, a single line in Lora Regular at 1.1rem reads a tagline in Faded Graphite. The background is Aged Ivory with a very faint (5% opacity) marble vein pattern rendered in SVG. The Simulation Eye sits in the upper-right quadrant at 120px diameter, its halftone iris rotating. No navigation, no menu, no buttons. The visitor scrolls to enter. **Blur-Focus Animation System (Primary Pattern):** Every content element enters the viewport through a **blur-focus transition**: elements begin at `filter: blur(12px); opacity: 0.3` and transition to `filter: blur(0); opacity: 1` over 800ms with an ease-out-cubic timing function. This is triggered by IntersectionObserver at a threshold of 0.15. The blur-focus effect reinforces the simulation metaphor -- content "renders" into clarity as the observer's attention falls upon it, as if the simulation allocates rendering resources on demand. Different content types resolve at different speeds: - Headlines: 600ms (fast resolution, high priority) - Data visualizations: 1200ms (slow, deliberate reveal) - Body text: 800ms (default) - Marble motifs: 400ms (near-instant, as if already cached by the simulation) Stagger child elements within a panel by 120ms each, so a panel with a headline, chart, and paragraph reveals as a cascade: headline sharpens first, then chart, then text. **Comic Panel Scroll Mechanics:** As panels scroll, they exhibit a subtle **parallax compression**: the panel border (3px line) thickens to 5px as the panel reaches the vertical center of the viewport, then thins back as it scrolls past. This is achieved with a CSS custom property (`--panel-prominence`) driven by JavaScript scroll position calculation, applied to `border-width` via `calc()`. The effect is barely perceptible but creates a subliminal sense that the panel currently in view is "more real" than its neighbors. **Warhol Grid Interaction:** The 2x2 data visualization grids respond to hover/touch: mousing over one instance causes the other three to shift their palette -- each cycling to the next color in the muted palette sequence. The transition uses `filter: hue-rotate()` combined with `saturate()` over 400ms. On mobile, this triggers on scroll rather than hover, with each grid instance shifting as it crosses the viewport center. **The Watching Scroll:** As the visitor scrolls past the hero, the Simulation Eye in the hero section does not scroll away. Instead, it detaches from document flow, becomes `position: fixed` in the upper-right corner at 48px diameter, and follows the scroll for the rest of the page -- a persistent observer. Its opacity is 0.4 so it does not dominate, but it is always present. At the footer, it returns to inline position at 120px, completing the narrative loop. This fixed-position eye slowly adjusts its rotation speed based on scroll velocity: fast scrolling makes the iris dots spin faster, as if the simulation is processing more data. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, gradient mesh backgrounds, neon glow effects, card grid layouts, dashboard-style metrics. **Color Application:** - Use Aged Ivory (#F2EDE4) as the dominant background on 70% of the page surface - Smoke Parchment (#E8E0D4) for alternating panels to create subtle depth without harsh contrast - Oxidized Teal (#6B8F8E) only for interactive elements, the Simulation Eye iris, and primary data series - Faded Coral (#C4837A) as the secondary data color and for pull-quote borders - Archive Charcoal (#3B3B42) for all text and panel borders -- never use pure #000000 ## Uniqueness Notes **Differentiators from other designs:** 1. **Pop-Art-as-Archaeology:** While pop-art (2% frequency) typically demands saturated, high-energy palettes, this design pairs it with the never-before-used muted-vintage palette (0% frequency), creating a visual language that looks like pop-art artifacts discovered in a museum basement. The Ben-Day dots are there, the comic panels are there, the Warhol grids are there -- but everything has aged, faded, and acquired the gravitas of a historical artifact. No other design in the portfolio treats pop-art as something old. 2. **Blur-Focus as Simulation Rendering:** The blur-focus animation pattern (1% frequency) is used not as a decorative entrance effect but as a core narrative device. Content literally "renders" into existence as if the simulation is allocating computation to whatever the viewer is looking at. The variable resolution speeds (600ms for headlines, 1200ms for data-viz) create a hierarchy of rendering priority that reinforces the simulation metaphor. No other design ties its primary animation pattern to a conceptual narrative this tightly. 3. **Data-Viz Meets Comic Art:** Data visualization appears in only 7% of existing designs and is always presented in clinical or analytical contexts. Here, data-viz is hybridized with pop-art visual language -- halftone dot fills in scatter plots, comic-panel chart frames, Warhol-grid repetition of the same chart in shifting palettes, speech-bubble annotations. The data becomes art, the art becomes data. This cross-pollination between quantitative and graphic-art traditions is unique in the portfolio. 4. **The Persistent Observer Eye:** A single animated SVG eye that transitions from hero element to fixed-position persistent companion creates a narrative throughline that no other design employs. The eye's rotation speed responding to scroll velocity is a form of data-responsive decoration -- the ornament itself is a visualization of user behavior, collapsing the boundary between content and chrome. 5. **Marble as Pop-Art Substrate:** Marble-classical motifs (4% frequency) typically appear in luxury or academic contexts. Here, marble is reinterpreted through a pop-art lens -- simplified SVG vein patterns that look hand-drawn rather than photographic, used as transitional textures and loading-state placeholders. The implication that the simulation's "default texture" is classical marble before content renders creates a unique layering of historical periods. **Chosen Seed/Style:** `aesthetic: pop-art, layout: single-column, typography: baskerville-refined, palette: muted-vintage, patterns: blur-focus, imagery: data-viz, motifs: marble-classical, tone: mysterious-moody` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with mysterious-moody tone - centered layout (99%) -- using single-column with serpentine internal alignment - scroll-triggered (97%) -- primary pattern is blur-focus, not generic scroll triggers - parallax (79%) -- no parallax scrolling; using blur-focus and panel compression instead - warm palette (100%) -- using muted-vintage, which is technically warm-adjacent but with desaturated, oxidized character that reads as neutral-cool - mono typography (99%) -- IBM Plex Mono is used only for data labels, not as a primary typeface; the lead is Baskerville serif - friendly tone (98%) -- deliberately mysterious-moody - vintage motifs (81%) -- using marble-classical instead of generic vintage decorative elements