# Design Language for koomimi.com ## Aesthetics and Tone koomimi.com is a quiet observatory for distant mountain weather -- a contemplative atmospheric journal where amateur meteorologists, ridge hikers, and remote-sensing hobbyists publish their long-watch field notes from peaks that no one else is paying attention to. The name reads in our visual system as a half-whispered call across a valley: koo-mi-mi, three syllables, the last two echoing. Everything on the site is built around that echo -- delays, hesitations, the way sound takes time to return from a granite face. The aesthetic is **zen with a calibrated technical undertone**. Imagine a 1970s Japanese alpine club's research bulletin reissued as a modern web journal: rice-paper warmth meets borosilicate glass meets matrix-printer monospace. Nothing shouts. Pages open the way a fog ceiling lifts -- slowly, with patches of clarity and re-occlusion. The tone is **raw-authentic**: actual barometric readings, hand-typed timestamps, unedited GPX tracks, photographs that include the photographer's blurred glove at the edge of frame. We do not retouch. We do not polish. The roughness IS the credibility. There is a deliberate tension between the **muted-vintage palette** (sun-bleached topo paper, oxidized aluminum, wet slate, ranger-station ochre) and the **tech-mono typography** (small-caps 11px serial-terminal labels printed over silk-textured cards). The result feels like a wooden weather hut whose interior has been wired with quiet, accurate instruments. Authoritative without being loud. Cold air, warm wood, soft light, hard data. Mood references: a Patagonia field journal lying open on a thrifted teak desk; the boot screen of a pre-Y2K marine VHF radio glowing in a dawn cabin; the back-cover acknowledgements of an out-of-print Yamakei guidebook; the pale, almost-pink horizon line over a mountain range twenty minutes before sunrise. ## Layout Motifs and Structure **Primary layout: magazine-spread, broken across full-bleed atmospheric "plates."** The site is organized as a vertical sequence of double-page spreads, the way a printed bulletin would lay out -- but each "spread" is actually two stacked viewport-height panels that share a continuous horizon line drawn across them as a single SVG path. The viewer scrolls and the horizon stays mathematically consistent: it is the same ridge profile, traveled along, even as the editorial content above and below it changes. **Spread anatomy** (recurring across the site): - **Left page (or top panel on mobile):** A muted, high-key photographic field. Could be a fog-bank, a granite slab, a hand-drawn weather map. Image occupies ~62% of the spread's vertical space, with generous bleed. - **Right page (or bottom panel):** A glassmorphic card floats over the lower portion of the photographic field, partially obscuring it. The card is a translucent frosted plate (8% black tint, 18px backdrop-blur, 1px inner stroke at 14% white). On the card: a small-caps tech-mono dateline, body text in a soft humanist serif, and a thin SVG sparkline of barometric pressure over the past 12 hours. - **Across both pages:** the **horizon path**, a single hand-traced SVG mountain-landscape silhouette drawn in 0.75px Slate Wash (#5b6770), animated with `path-draw-svg` on scroll. The horizon is never decorative wallpaper -- it always corresponds to a real ridgeline named in the article. **Grid:** 12-column with **asymmetric gutter weighting** -- the left third uses 24px gutters, the right two-thirds uses 64px. Body text columns are deliberately narrow (52ch max) and ragged-right. Marginalia (instrument readings, elevation in m, coordinates in DMS) live in a 14-column outer rail, set in tech-mono at 10px, vertically baseline-grid-locked. **Negative space rule:** every spread reserves at least 28% of its area as untouched background (no text, no card, no graphic). This is the **silence margin** -- the visual equivalent of the pause between a thunderclap and its echo. **Navigation:** a fixed left-rail of 7 small dots, each a vertically labeled chapter glyph in tech-mono (CH.01 / RIDGE / CH.02 / FRONT / etc.). No hamburger menu. No top nav. The reader navigates the way one navigates a folded paper map: by recognizing landmarks. ## Typography and Palette **Typography (Google Fonts only):** - **Display headings:** "JetBrains Mono" (weight 500, slight italic for editorial bylines). Used in small-caps with 0.18em tracking for section labels (e.g., `CH.03 — DAWN ON THE NORTH WALL`). Body display sizes: clamp(1.4rem, 2.6vw, 2.0rem). The technical, slightly-too-precise rhythm of monospace against natural photography is the entire visual joke of the site. - **Editorial body text:** "Newsreader" (weight 400/600, optical-size variable axis enabled). A reader-first serif with low contrast and a slightly humanist, almost letterpress feel. Sized at 17px / 1.7 line-height on desktop, with optical size pinned to 18 for in-card text and 12 for marginalia. - **Field-note callouts and pull quotes:** "Special Elite" (a typewriter face) at 15px, slightly tilted -2deg, given a subtle ink-bleed via a 0.4px text-shadow in the same color. Used sparingly -- meant to feel like a hand-typed correction taped over the printed page. - **Numerical readings (pressure, elevation, wind):** "JetBrains Mono" tabular figures, in Aluminum Oxide on Slate Wash backgrounds, always with a unit suffix in 70% size and 60% opacity (e.g., `1013.4 hPa`). **Palette (muted-vintage, 8 anchors):** - `#e8e1d3` -- **Topo Paper**: the dominant page background. A faintly warm, sun-bleached cream meant to feel like the back of a 1976 1:25,000 survey map. - `#c9bfa9` -- **Folded Edge**: a slightly darker, dustier shade of the same family, used for card edges, rules, and the "fold gutter" down the spread center. - `#5b6770` -- **Slate Wash**: cool wet-stone grey. Primary text color, primary SVG stroke color, primary horizon line. - `#2a3138` -- **Anvil Cloud**: near-black with a navy undertone, used only for the heaviest editorial display moments (chapter titles, section openers). - `#8d6e3c` -- **Ranger Ochre**: a desaturated mustard. Used for active-state underlines, sparkline accents, and the small triangle glyph that marks "currently reading." - `#7a8f7a` -- **Lichen Green**: muted moss tone. Used for tag chips and elevation contour fills. - `#b4a89a` -- **Aluminum Oxide**: oxidized warm grey, used for the inside of glassmorphic cards and the secondary sparkline tone. - `#d97757` -- **Alpenglow**: the only "warm" color in the system, used at <2% of total surface area. Reserved for the single moment of dawn light on the hero spread, and for the tiniest meaningful punctuation -- a 4px circle indicating "live reading." Color discipline: no color is ever used at full saturation. Every hex listed above is the maximum saturation that color is allowed to reach on the site. There are no gradients except for one specific element: the dawn-band gradient on the hero (Topo Paper -> Aluminum Oxide -> a 4% tint of Alpenglow), which appears once and never repeats. ## Imagery and Motifs **Core visual elements:** 1. **The continuous horizon (mountain-landscape motif):** A single hand-traced SVG mountain ridge runs through the entire site as a connective thread. It is generated from real GPX elevation data (interpolated, not stylized) and is animated with `path-draw-svg` so it draws in as the viewer scrolls. Different sections reveal different traverses of the same ridge, like turning the head along a panorama. Stroke is 0.75px Slate Wash, with a 0.4px Folded Edge "shadow ridge" offset 2px below to suggest distance haze. 2. **Glassmorphic field cards (glassmorphic-cards imagery):** Translucent rectangular plates with backdrop-blur(18px), 8% black tint, and a 1px inner stroke at 14% white. They do NOT use the standard glassmorphism cliche of saturated rainbow blobs behind them. Instead, they sit over photographic fog and granite, so the blur reveals soft, monochromatic, atmospheric textures. Each card has a 2px Ranger Ochre tab on its top-left corner -- the visual reference is a tab on a manila field-folder. 3. **Hand-traced isobars:** Faint, dotted Slate Wash lines that curve organically across spread backgrounds at 6% opacity. They evoke a synoptic weather chart but never form a literal map. They animate slowly (15s loop) with a 1px sub-pixel drift, suggesting living atmosphere. 4. **Topographic contour ornaments:** SVG closed-loop contour lines used as section dividers. Always concentric, always asymmetric. The eye reads them as the top of a peak seen from above. Stroke 0.5px Lichen Green at 22% opacity. 5. **Marginalia rule-marks:** Every editorial paragraph has a thin 8mm horizontal Folded Edge tick to its left, at the baseline of the first line. Like an editor's pencil mark. Subtle but everywhere. 6. **The instrument cluster:** A small fixed component in the bottom-right corner showing live (or live-feeling) values: barometric pressure (rising/falling arrow), temperature, wind direction (8-point compass glyph), local time at the ridge being read about. Tech-mono, 10px, on a glassmorphic plate. This is the only persistent UI element besides the chapter rail. 7. **Imperfection markers (raw-authentic):** Visible JPEG compression on hero photographs (intentional 0.78 quality). One photograph per spread has a soft thumbprint smudge in a corner. Timestamps include seconds and timezone offsets. Coordinates use DMS, not decimal. Authenticity through specificity. 8. **The triangle glyph:** A single 6px solid Ranger Ochre triangle (▲) that follows scroll position in the chapter rail. The only animated cursor-like element. Its motion is spring-eased with 0.62 damping -- it overshoots then settles, like a needle finding magnetic north. ## Prompts for Implementation **Full-screen narrative experience -- the opening sequence:** The site loads on a pure Topo Paper field. After 600ms, the **horizon path** begins drawing from the left edge of the viewport, slow (4.2s ease-out, `path-draw-svg`). As it draws, the page's atmospheric audio metaphor builds: not literal sound, but visual cues -- a single Lichen Green contour ring blooms outward from the eventual peak, then fades. Once the horizon completes, the page title "koomimi · 구미미 · field bulletin no. 47" fades in, character by character with a 28ms stagger, in JetBrains Mono small-caps, Slate Wash. Below it: a single **dateline** appears in Special Elite typewriter face (`OBSERVATORY OPENED -- 04:42 KST -- 36°34'N 127°54'E`) with a 1.2s typewriter-effect reveal. 400ms after the dateline finishes, the first **glassmorphic card** rises from below the fold by 80px with a spring transition (stiffness 120, damping 24). The card contains the lede paragraph of bulletin no. 47. To the right of the card, a sparkline of last-12-hour pressure draws in via `path-draw-svg`, terminating in a single pulsing Alpenglow dot. This single dot is the only animated element that loops indefinitely (1.6s pulse, 80% to 100% scale). **Scroll-driven storytelling:** - Every spread transition is a `scroll-triggered` event. The horizon line never restarts -- it CONTINUES drawing as the reader scrolls, mathematically extending leftward off-screen and rightward into the next spread. The reader is traversing a single panoramic ridge over the entire site. - Glassmorphic cards on subsequent spreads enter with `slide-reveal` from the bottom-right, with a 12px translation and a 240ms fade. - Marginalia text uses `stagger` reveal: each marginalia line appears with a 60ms offset after its parent paragraph enters viewport. - Photographs use a slow `parallax` (0.85x speed) that creates an almost imperceptible drift -- the kind of drift one feels watching distant weather move across a valley. **Micro-interactions:** - Hovering over a glassmorphic card increases its backdrop-blur from 18px to 22px and gently raises it 4px with a soft Anvil Cloud shadow (raw, ink-bleed quality, not a cartoon drop-shadow). - Hovering over an inline coordinate (e.g., `36°34'07"N`) reveals a 1:1 mini-map below the line with a 2-frame draw-in of the local contour ring. - Hovering over the instrument cluster's pressure value cycles through last-1h / last-6h / last-24h sparkline views, each transition a 320ms `morph` between paths. - The chapter rail's triangle glyph follows scroll with a 200ms spring delay -- it always lags slightly behind, then catches up. **What this site is NOT:** - No CTA-heavy hero. There is no "Subscribe Now" button on the first spread. There is no "Get Started." There is no banner. - No pricing block. No tiered plans. No "Enterprise / Pro / Free." - No stat-grids ("10K observers / 200 ridges / 99.9% uptime"). The only numbers on the site are real measured atmospheric values and real elevations. - No social proof carousel. No testimonials. No logo wall. - No video background. The atmospheric movement is generated entirely by SVG drift and scroll-driven parallax. - No modal dialogs, no toast notifications, no cookie banners that interrupt the spread continuity. **The reader's journey** is: arrive in fog, watch the horizon draw itself, descend through seven chapter spreads each documenting one observation from one ridge, finish at a final spread that reveals the full panoramic horizon line in its complete drawn form. The last spread contains a single glassmorphic card with a single line: a typewriter timestamp marking when the bulletin closed. Then quiet. ## Uniqueness Notes **Differentiators from the 230+ other designs in this portfolio:** 1. **The continuous horizon as structural backbone.** No other site in the portfolio uses a single SVG path drawn from real GPX elevation data as the connective spine across all sections. The horizon is not decoration; it is the navigation, the metaphor, and the literal scroll-progress indicator simultaneously. This binds magazine-spread layout to mountain-landscape motif in a way no other design attempts. 2. **Tech-mono typography against muted-vintage warmth, used as a deliberate tonal contradiction.** Most mono-typography sites lean cyberpunk/terminal/dark-mode. This site does the opposite: small-caps JetBrains Mono on cream Topo Paper next to Newsreader serif body and Special Elite typewriter callouts. The tension between the precision of monospace and the softness of vintage paper is the entire emotional argument. Tech-mono is at 4% in the portfolio; combined this way with muted-vintage (3%) and zen aesthetic (9%), this combination is unique. 3. **Glassmorphic cards used in a non-glassmorphism context.** Glassmorphic-cards imagery is at 0% in the portfolio. We adopt it but strip away its usual saturated-rainbow-blob context. Our glass plates float over fog and granite -- monochromatic atmospheric textures only. This recovers the original intent of glass (to soften and abstract what's behind it) without the now-cliche neon backdrop. 4. **Mountain-landscape motif at 0% in the portfolio.** No other site uses literal ridge silhouettes, isobars, or topographic contour ornaments. We commit to this motif system entirely -- not as occasional decoration but as the core visual grammar. 5. **Raw-authentic tone enforced through technical specificity.** Real DMS coordinates, real timezone offsets, real hPa pressure readings, real GPX-derived horizons, intentional JPEG compression on photographs. Authenticity is not claimed; it is demonstrated by the data structure of every visible element. 6. **The 28% silence margin rule.** A formal compositional constraint not present in any other design's layout system. Each spread must reserve 28% of its area as untouched background. This is what makes the site feel zen-contemplative without resorting to generic minimalism. 7. **Single warm color, used only once.** Alpenglow (#d97757) appears at less than 2% of total page surface area, and the dawn-band gradient appears exactly once on the hero and never repeats. This radical color discipline is the opposite of the gradient (96%) and warm (90%) saturation typical of the portfolio. **Chosen seed (from assignment):** aesthetic: zen, layout: magazine-spread, typography: tech-mono, palette: muted-vintage, patterns: path-draw-svg, imagery: glassmorphic-cards, motifs: mountain-landscape, tone: raw-authentic. **Avoided patterns from frequency analysis:** - Avoided **corporate** aesthetic (92% in portfolio) -- replaced with zen (9%). - Avoided **gradient palette** (96%) -- the site uses a single one-time gradient and is otherwise flat muted-vintage. - Avoided **mysterious-moody tone** (94%) -- replaced with raw-authentic (6%). - Avoided **mono typography** in its dominant form (93%) -- adopted the rarer **tech-mono** (4%) variant with deliberate small-caps treatment paired against serif body and typewriter callouts, which is structurally distinct from the standard monospace pattern. - Avoided **counter-animate** pattern (91%) -- the site does not animate large numerical counters; it uses path-draw-svg (28%) and slow scroll-triggered reveals instead. - Avoided **centered layout** (92%) -- adopted **magazine-spread** (12%) with asymmetric gutter weighting. - Avoided **photography** as primary imagery in its standard treatment (63%) -- adopted **glassmorphic-cards** (0%) layered over photography rather than photography presented directly.