# Design Language for maljosim.com ## Aesthetics and Tone **maljosim.com** — from the Korean **말조심 (mal-josim)**, "guard your speech, mind your tongue" — is built as **a room where words are heavy objects you set down carefully**. The aesthetic is **japanese-zen-portfolio sensibility crossed with the discipline of a Korean calligraphy studio at dawn**: vast cold paper, a single brush, the deliberate weight of breath before a stroke. Not the warm pastoral hush that dominates the corpus — this is a *cooler* quiet, the quiet of a recording booth, a courtroom anteroom, a monastery where the wrong word echoes for years. The governing metaphor is the **ink-drop**: every utterance lands like sumi/먹 hitting wet hanji paper — it spreads, it bleeds at the edges, it cannot be un-dropped. The whole site behaves as if it were paper that *remembers* what was said on it. The tone is **zen-contemplative bordering on solemn**: spare, unhurried, faintly austere, with one recurring gesture of grace — the way an ink bloom, however reckless, eventually settles into a calm gray cloud. No exclamation. No urgency. The page never raises its voice; that is the entire point. This site deliberately rejects the corpus defaults — warm 98%, photography 98%, hand-drawn 96%, parallax 95%, glassmorphism 73%. There is no warmth-by-default, no stock photography, no childlike doodle, no glass card. There is paper, ink, breath, and the discipline of saying less. ## Layout Motifs and Structure The composition uses **ma-negative-space** as the load-bearing structural element (only 9% in the corpus) — emptiness is not background, it is *content*. The page is a **single vertical scroll of nine "breaths"** — nine full-viewport panels, each one a held inhalation followed by a single deliberate mark. Between every breath there is at least 60vh of pure paper-void: you scroll through *silence* to reach the next word. - **The fold axis.** A faint vertical hairline runs down the exact center of the page top to bottom — the crease of a folded letter, the spine of a brush-stroke. All marks hang from or balance across this axis. Text blocks sit *off-center on purpose*, weighted left or right of the fold, never centered (centered is 87% of the corpus; this site refuses it). - **Hanging composition.** Following calligraphy scroll logic, primary text hangs from the *top* of each breath-panel with generous space *below* it — gravity pulls the eye down into emptiness, the way a brush is lifted at the end of a character. - **The nine breaths:** (1) Title — a single dropped ink character. (2) "한 번 뱉은 말" / a word once spoken. (3) The bleed — text that visibly bleeds into the paper. (4) Echo chamber — the same phrase, fading copies. (5) The pause — an almost-empty breath, just a comma of ink. (6) Listening — text that only appears when you stop scrolling. (7) Weight — heavy black mass settling. (8) Settling — the gray cloud, the regret-becoming-calm. (9) Closing seal — a small red 인장/stamp, the only saturated color on the entire site. - **No nav bar, no footer chrome, no card grid.** Movement is scroll-only. A thin vertical progress ink-line on the left edge slowly fills as you descend — like ink wicking up a fiber. ## Typography and Palette **Fonts — Google Fonts only. Three voices: a Korean serif for gravity, a Latin serif for the bleed, a mono for the cold annotations.** - **Korean display & body — *Nanum Myeongjo* (Google Fonts, weights 400 / 700 / 800).** The myeongjo/명조 (Ming-style) serif: sharp triangular serifs, thin-thick contrast, the look of carved type. Used for all Korean text. The single dropped title character is set at 22–34vw, weight 800 — enormous, black, and slightly *off* the fold axis so it feels like it landed there rather than was placed. - **Latin accent — *Cormorant Garamond* (Google Fonts, weights 300 / 400, italic available).** Used only for the few English phrases ("a word once spoken", "you cannot recall it") set in delicate italic at 300 weight — these are whispers in the margin, deliberately frail next to the Korean. - **Annotation / metadata — *Spline Sans Mono* (Google Fonts, weight 400).** Tiny, all-lowercase, letter-spaced. Used for breath numbers ("breath 03 / 09"), the faint timestamps, the ink-density readouts. Mono is 93% of the corpus, but here it is used *coldly and sparingly* — clinical labels on a poem, the lab notes beside the silence. **Palette — a near-monochrome ink wash with one forbidden red. Monochrome is only 12% of the corpus.** - `#F4F1EA` — **hanji paper** — the dominant ground, a cool warm-gray, slightly fibrous. Everything floats on this. - `#E7E2D6` — **paper shadow** — for the fold hairline, the subtle panel separations, the deckled edges. - `#1C1B19` — **black ink (먹)** — the primary mark color; not pure black, faintly warm-charcoal, the color of fresh sumi. - `#6E6B63` — **settled gray** — diluted ink, the "calm cloud" of breath 8; also all body text below display size. - `#A8A399` — **far echo** — the faintest ink wash, for fading echo-copies and the listening text before it resolves. - `#9B2C24` — **vermilion seal (인주)** — the *only* saturated hue on the site, appearing exactly once: the closing stamp. Its rarity is the message. ## Imagery and Motifs **No photography. No 3D renders. No icon sets. No stock anything.** Every visual is generated SVG, CSS, or canvas — built to behave like ink and paper. - **The ink-bloom.** The signature element: a procedurally-grown sumi blot (organic blob silhouette with feathered, bleeding edges and a darker dense core). Generated on canvas or as layered blurred SVG paths. Appears behind/around key words, always *spreading slightly* on first reveal then holding still — the visual proof that the word cannot be taken back. - **Hanji texture.** A subtle paper-fiber grain (very low-opacity noise/`feTurbulence` SVG filter, or a tiled fiber PNG at ~4% opacity) on the entire ground. Faint deckled (torn-fiber) edges on panel divisions. - **Brushstroke hairlines.** The fold axis and progress line are not flat rules — they're slightly tapered, pressure-varied strokes (SVG path with variable width), like a single confident brush pull. - **Bleed letters.** On the "bleed" breath, individual glyphs of a phrase have soft ink-spread halos that grow on scroll — type literally dissolving into paper. - **The vermilion seal.** A small (~88px) square name-stamp design — carved negative-space hangul/seal-script inside a vermilion square with the characteristic chipped, uneven edge of a real 도장. The final image of the site. - **Drifting ink particles.** Optional: a very few (3–5) microscopic ink specks that drift almost imperceptibly across the void between breaths — dust in still air. Subtle to the point of near-invisibility. ## Prompts for Implementation Build maljosim.com as **one route, one HTML file, one CSS file, one JS module — a ~75-second descent through nine held breaths**. Treat the entire page as a single sheet of hanji paper being inked, stroke by stroke, with long silences between strokes. There is **no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email signup, no nav bar, no feature cards**. There is only the breath sequence and the paper. **Storytelling structure (nine breaths, scroll-only, ma-negative-space between each):** 1. **Title breath.** Empty cool paper. Then a single enormous Korean character (말 or a stylized 말조심) *drops* from above the fold — falls, lands slightly off-center on the fold axis with a soft settle, and an ink-bloom feathers outward from where it struck. Mono caption fades in below: `breath 01 / 09`. Hold. Let the silence be uncomfortable for a beat. 2. **"한 번 뱉은 말."** Hanging from the panel top, left of the fold: *한 번 뱉은 말은 / 다시 주워 담을 수 없다* — "a word once spoken cannot be gathered back." Cormorant italic whisper in the right margin: *you cannot recall it*. Stagger-reveal the lines, each landing with a tiny ink-tick. 3. **The bleed.** A short phrase whose glyphs slowly grow ink-spread halos as you scroll past — the type bleeding into the paper, edges softening, becoming a gray cloud. The point: the word changes shape the moment it's out. 4. **Echo chamber.** One phrase repeated downward in fading copies (`#1C1B19` → `#6E6B63` → `#A8A399` → barely-there), each copy slightly offset across the fold axis — what you said, ringing on, distorting. 5. **The pause.** Almost-empty breath. Just a single small comma-shaped ink mark on the fold axis, and `breath 05 / 09` in mono. 80vh of void above and below. This is the literal pause before speaking — make the user *feel* the restraint. 6. **Listening.** Text that is invisible (paper-on-paper, `#F4F1EA`) while the user is scrolling, and only fades in to `#1C1B19` once scroll velocity drops to zero for ~600ms — *말조심* rewards the one who stops and listens. If they keep scrolling fast, they miss it entirely. 7. **Weight.** A heavy dense black ink-mass settles onto the paper from above — slow, gravity-eased, with a faint paper-compression shadow. A line in Nanum Myeongjo 800 emerges from within the mass: about the weight a careless word carries. 8. **Settling.** The black mass slowly dilutes — bleeds and lightens from `#1C1B19` toward `#6E6B63` — a regret becoming a calm gray cloud. Diluted-ink body text: about how restraint is not silence but care. The visual softening *is* the emotional arc. 9. **Closing seal.** Empty paper again. Then the small vermilion 인장 stamp presses down — a quick scale-down + subtle ink-imprint wobble, the chipped-edge square in `#9B2C24` — the first and only saturated color. Beneath it, mono: `breath 09 / 09`. Then stillness. No "learn more." The page simply ends, like a held breath finally released. **Motion vocabulary:** everything is *settle*, not bounce — ease-out curves that decelerate into stillness like ink absorbing. Use `prefers-reduced-motion` to disable bloom-growth and particle drift but keep the static composition fully legible. Ink-bloom growth is the one place SVG path morphing / canvas redraw is welcome. Reveals are scroll-triggered, slow (700–1100ms), heavily staggered. The progress ink-line on the left wicks upward smoothly. Cursor: no magnetic, no tilt-3d, no cursor-follow blob — at most, a faint paper-fiber ripple where the cursor rests, like a fingertip on damp paper. The restraint of the *interaction* mirrors the restraint of *speech*. ## Uniqueness Notes Deliberate departures from the patterns in the frequency analysis: 1. **Cool monochrome ink, not warm pastoral.** Warm palettes are 98% of the corpus and pastoral-romantic is 35% of tones. maljosim.com is near-monochrome (12% of corpus) in cool charcoal-and-hanji, with exactly one saturated color (#9B2C24 vermilion) used once at the very end — its scarcity is the design's thesis. No warmth-by-default. 2. **Ma-negative-space as structure, not card-grid.** Card-grid is 89% and centered is 87% of the corpus; this site uses neither. Nine full-viewport "breaths" separated by 60–80vh of intentional void, all hung off an off-center fold axis. Emptiness is the load-bearing element. 3. **The "listening" breath — content gated by *not* scrolling.** Breath 6 only reveals its text when scroll velocity hits zero — an interaction that rewards stillness rather than engagement. Anti-pattern by design; nothing in the corpus uses scroll-stop as a reveal trigger. 4. **No photography, no hand-drawn doodles.** Photography is 98% and hand-drawn 96% of the corpus. This site has zero photographs and zero playful illustration — only procedurally-generated sumi ink-blooms, hanji paper-fiber filters, and variable-width brushstroke hairlines. 5. **Korean-language-first myeongjo typography.** Nanum Myeongjo carved-serif Hangul is the primary voice, with frail Cormorant italic English as marginal whispers and cold Spline Sans Mono only for clinical breath-labels — an inversion of the usual mono-dominant or humanist-Latin hierarchy. Documented chosen seed/style: **japanese zen portfolio** *(aesthetic: zen, layout: ma-negative-space, typography: elegant-serif, palette: monochrome, patterns: fade-reveal, imagery: noise-texture, motifs: leaf-organic→reinterpreted as ink-bloom, tone: zen-contemplative)*. Referenced avoided patterns from frequency analysis: warm (98%), photography (98%), hand-drawn (96%), parallax (95%), mono-as-dominant-voice (93%), card-grid (89%), cursor-follow (89%), centered (87%), magnetic (79%), glassmorphism (73%), pastoral-romantic (35%), tilt-3d (24%) — none of these are used as defaults here.