# Design Language for maljosim.com

## Aesthetics and Tone

maljosim.com is an imagined tide-pool field journal kept by a botanist who wandered too far into the shallows and never came back — a site that lives at the brackish edge where goblincore's love of found, mossy, unglamorous things collides with an ineffable longing for the sea. The word *maljosim* (말조심 — "mind your words" in Korean) sets the register: careful, watchful, a little secretive, speaking in hushed asides rather than headlines.

The aesthetic is **goblincore-pastoral-aquatic**: not the chaotic clutter of a goblin's hoard, but the *curated hoard* — a glass display case filled with dried kelp fronds, a pressed tropical fish specimen, a ceramic inkwell shaped like a sea urchin, a jar of salt and lichen. The palette is **ethereal blue** run through damp sea-glass: deep teal-night backgrounds shifting toward pale phosphorescent blue-greens, with warm amber and verdigris as accent counterweights so nothing floats away into digital coldness.

Motion is the motion of water: things *drift in* on gentle arcs (bounce-enter), settle with a faint wobble like something carried by a current, then stay still for a long time. The site refuses urgency. There are no CTAs in the conventional sense — only invitations, written in small type, at the bottom of things.

Tone: hushed, tender, slightly feral. Pastoral-romantic in the sense of a Keatsian ode — intense attention to the small, material, perishable. The site feels handmade even though it is not.

## Layout Motifs and Structure

The structural metaphor is a **naturalist's field notebook** left open to a spread, viewed through a glass-bottomed boat hull. Every section is full-bleed: the ocean-dark background floods each panel edge to edge, and content floats above it as though suspended mid-water-column.

**Full-bleed vertical narrative.** The page is a single continuous scroll of full-viewport panels — not a grid, not cards, not a magazine spread. Each panel is one full screen height and full viewport width. The only internal grid is within each panel: content within panels follows a loose off-center single-column, shifted 10–15% to the right of center on desktop, like a hand-drawn label on a specimen bottle that was affixed slightly off-plumb.

**Asymmetric anchoring.** Primary text columns sit at 55–65% viewport width, left-padded but not centered. Illustrations and motifs (tropical-fish vectors) bleed from the left edge or bottom-left corner, partly cropped by the panel boundary — they arrive as if swimming in from outside the frame, only partially visible.

**Horizontal drift lines.** Fine 1px lines in `#2a4a5e` appear at irregular vertical intervals, like the faint ruled lines of a water-stained notebook page. They are decorative, not structural.

**Panel structure (single vertical scroll):**
1. **Entry Panel** — Full-bleed deep teal-black. The wordmark *maljosim* appears bottom-center in small monospace, below a large half-visible tropical fish vector drifting in from the left. Tagline in two lines, max 8 words total.
2. **Archive Panel** — Pale phosphorescent background. Three specimen cards arranged in a staggered column (not a row-grid), each rotated ±2–4° as if pinned into cork.
3. **Field Notes Panel** — Dark ocean-night background. A long-form text column, max 520px wide, set in body mono font. Margins filled with tiny inline fish silhouettes at line-endings.
4. **Collection Panel** — Mid-teal background. A horizontal ribbon of 5–7 tropical-fish vector illustrations, scrolling slowly via CSS animation (parallax drift), each fish at a different depth/opacity.
5. **Colophon Panel** — Deep near-black. Wordmark repeated small, a single line of contact text, and a stamped oval mark (SVG, looks like a wax seal with a fish inside).

**No navigation bar.** A fixed minimal indicator at top-right: three small horizontal lines that are actually fish silhouettes at 12px — a secret for those who notice.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Wordmark / Display headings:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) — weight 400 and 700. All lowercase for the wordmark, small caps optical simulation via letter-spacing: 0.15em. Space Mono's fixed-width register gives every letterform the quality of a typewriter key pressed carefully. Used at clamp(1.6rem, 5vw, 4.8rem) for the wordmark and clamp(1rem, 2.5vw, 2rem) for panel headings.

- **Body / Field Notes:** [`IBM Plex Mono`](https://fonts.google.com/specimen/IBM+Plex+Mono) — weight 300 and 400. This is the journal's handwriting: slightly warmer than Space Mono, with subtler ink-trap details that read beautifully at body sizes (17–18px, line-height 1.75). Used for all running text, specimen labels, and captions.

- **Accent / Specimen Labels:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono) — weight 300 italic. Rotated ±2–4° on specimen cards. Used at 11–13px for taxonomic-style labels (e.g., *Amphiprion ocellaris*, *depth: 12m*, *collected: low tide*).

**No serif font. No variable-weight display font.** The entire site is mono — three mono fonts of slightly different warmth and mechanical feel, layered like three instrument tracks in the same key.

**Palette:**

| Name | Hex | Role |
|---|---|---|
| `deep-tide` | `#0b1f2e` | Primary background (entry, field notes, colophon) |
| `sea-glass` | `#1a3d4f` | Secondary background (archive panel) |
| `phosphor` | `#7ecfc4` | Primary text on dark, active borders, fish highlights |
| `kelp-amber` | `#c8903a` | Warm accent — specimen card borders, wax seal |
| `salt-white` | `#e8f0ed` | Body text on dark backgrounds |
| `verdigris` | `#4a8c7e` | Mid-tone — panel divider lines, secondary labels |
| `pale-tide` | `#c0dbd5` | Light panel background (collection panel) |
| `ink-dark` | `#06131c` | Deepest shadow, colophon background |

**Color logic:** The dominant palette is blue-green-dark, running from `#06131c` at the floor to `#c0dbd5` at the surface — a literal water column in color. Warm `#c8903a` appears only twice: on the specimen card borders and the wax seal stamp, so it reads as treasure, not decoration.

## Imagery and Motifs

**All illustration is custom inline SVG — vector-art only, zero raster imagery.**

**The tropical-fish corpus (7 species, each a distinct SVG file):**
1. **Clownfish** (*Amphiprion ocellaris*) — orange-white-black banding, three stripes, bold silhouette at 180–240px wide. The hero fish, partially cropped at the left edge of the entry panel.
2. **Moorish Idol** (*Zanclus cornutus*) — tall dorsal filament, black-white-yellow banding, very vertical aspect ratio. Appears in the collection ribbon.
3. **Blue Tang** (*Paracanthurus hepatus*) — royal blue body, yellow tail wedge, black palette mark. Appears in the field notes panel margin.
4. **Mandarinfish** (*Synchiropus splendidus*) — intricate psychedelic markings in teal, orange, and electric blue. Used as the wax seal motif (simplified to 3-color silhouette).
5. **Puffer Fish** (*Tetraodon nigroviridis*) — spotted, round, slightly comical. Appears in archive panel specimen cards.
6. **Seahorse** (*Hippocampus kuda*) — sinuous vertical form. Used as a repeated 12px running margin ornament in the field notes panel.
7. **Lionfish** (*Pterois volitans*) — elaborate spined silhouette, dramatic. Appears at the bottom of the collection panel, partly off-screen, as if descending.

**SVG style rules:**
- All fish are **two-color or three-color flat vector**: solid fill shapes with a single 1.5px stroke in a darkened version of the fill. No gradients. No shading. No photorealism.
- Fish are oriented facing left, as in classic natural history illustration plates.
- Line weight is consistent: 1.5px stroke everywhere, making them feel like a single illustrator drew all seven on the same afternoon.

**Recurring non-fish motifs:**
- **Kelp frond** — a single sinuous SVG shape, placed in the background layer of the archive panel, at 8% opacity in `#verdigris`.
- **Bubble clusters** — 3–5 SVG circles, 4–12px, stroke-only (no fill), placed near fish to suggest underwater context.
- **Notebook ruled lines** — described in layout section; SVG-drawn at 1px.
- **Wax seal oval** — SVG stamp shape, 80px wide, `#kelp-amber` fill, containing the simplified Mandarinfish silhouette.

## Prompts for Implementation

**The story to tell.** A visitor opens maljosim.com and feels immediately that they have arrived somewhere intentional and quiet — a naturalist's waterproof notebook left open on a tide pool ledge. There are no instructions, no hero text telling them what this place is for. Instead, fish drift in from the left edge as the page loads. The wordmark appears in small mono type, lowercase, below the clownfish: *maljosim*. That is all. The visitor scrolls.

**Entry panel implementation:**
- Background: `#0b1f2e` full-bleed
- The clownfish SVG enters from `translateX(-120%)` to `translateX(0)` over 1.4s with `cubic-bezier(0.34, 1.56, 0.64, 1)` (the bounce-enter easing — a single gentle overshoot, 1.08× scale at peak, then settling). The fish should arrive with ease, not pop.
- Wordmark fades in 0.8s after fish settles, from opacity 0 to 1, no transform.
- No hero headline. No subheadline. Just fish + wordmark + a two-line tagline in DM Mono italic, 13px, `#7ecfc4`, set beneath the wordmark.

**Bounce-enter pattern (applied to all panels on scroll-enter):**
- Every panel's primary content enters via the same bounce-enter: `translateY(30px)` → `translateY(0)` + `opacity: 0` → `opacity: 1`, using `cubic-bezier(0.34, 1.56, 0.64, 1)` over 1.0–1.2s. Stagger children by 0.15s.
- IntersectionObserver, threshold 0.2. Add class `is-visible` which triggers the CSS transition.
- The fish in the collection panel drift via a separate looping CSS animation: `@keyframes drift` — translate X by ±12px, Y by ±6px, over 6–8s, alternating, `ease-in-out`. Each fish gets a different animation-delay (0s, 1.2s, 2.4s, …) so they move independently.

**Specimen card implementation (archive panel):**
- Each card is a `<figure>` with `<figcaption>`. Background `#1a3d4f`. Border: 1.5px solid `#c8903a`. Rotated ±2–4° via `transform: rotate()`.
- Card content: fish SVG (80–100px), species name in Space Mono 14px `#salt-white`, taxonomic label in DM Mono italic 11px `#7ecfc4`, and a single field-note sentence in IBM Plex Mono 300 13px `#c0dbd5`.
- Cards do NOT use a grid. They are positioned in a staggered column via `margin-left: calc(30% + (card-index * 40px))` pattern — each card is indented a bit further than the last.

**Field notes panel implementation:**
- Body text column: max-width 520px, IBM Plex Mono 300, 17px, line-height 1.75, `#e8f0ed` on `#0b1f2e`.
- Inline seahorse SVGs (12px) appear every 6–8 lines as `::after` pseudo-decoration on `<p>` tags, in `#4a8c7e`.
- No subheadings within this panel. One unbroken prose block, 4–6 sentences.

**Collection panel:**
- The fish ribbon is a `<div>` with `overflow: hidden`. Inside: a `<div>` twice the viewport width containing all 7 fish SVGs, spaced by varying margins. CSS animation translates it from `0` to `-50%` over 30s, linear, infinite. On hover: pause.
- Individual fish also have the drift animation layered on top.
- Background is `#c0dbd5` — the only light panel — so the fish (dark outlines with `#0b1f2e` strokes) read as ink drawings on watercolor paper.

**Colophon panel:**
- Wax seal SVG centered, 80px, `#c8903a`.
- Wordmark below in Space Mono 400 lowercase, `#7ecfc4`, 1.2rem.
- Single contact line in IBM Plex Mono 300, `#4a8c7e`, 13px.
- Background: `#06131c` — the darkest panel, so the colophon feels like closing the notebook.

**AVOID:** any CTA buttons. Any navigation bar with labels. Any pricing block. Any stat grid. Any testimonial carousel. Any modal. Any auto-playing video. Any background gradient (solid colors only — the "gradient" of the page comes from panel-to-panel background color changes as you scroll).

**PREFER:** long dwell time, unhurried pacing, inline SVG illustration, micro-interactions that feel biological not mechanical, text that has been actually written rather than structured.

## Uniqueness Notes

1. **Triple-mono typography with zero serif and zero sans-serif.** The frequency analysis shows mono at 82% — but in the corpus, mono almost always means a single mono font used for code snippets or a secondary label accent, not as the exclusive typographic system. This design uses three distinct mono fonts (Space Mono, IBM Plex Mono, DM Mono) layered for warmth, weight, and purpose, with no fallback to any sans or serif. The mono-only rule makes the site feel like it was typeset on a typewriter, then scanned, then cleaned up — but without any texture-overlay fakery.

2. **Goblincore × aquatic — an untouched intersection.** The frequency report shows goblincore at 1% (one prior design) and tropical-fish at 3% (a handful). Zero designs in the registry combine them. The conventional goblincore site is earthy, mossy, brown-green-amber, and terrestrial. This design takes goblincore's *collecting logic* (the hoard, the specimen case, the found object) and relocates it entirely underwater, producing a genuinely novel aesthetic register: not ocean-brand-blue, not goblin-forest-earth, but a brackish naturalist obsession.

3. **Bounce-enter as biological motion, not interface affordance.** bounce-enter appears at 1% in the corpus, always used as a playful micro-interaction for buttons or cards popping into place. Here it is applied at the macro-narrative level — entire panels and their fish arrive via bounce-enter, and the easing is calibrated to mimic the deceleration of a buoyant object settling in water (one overshoot, immediate damping). The motion vocabulary is consistent with the aquatic theme rather than being imported from a UI component library.

4. **The palette is a literal water-column cross-section.** Most ethereal-blue designs in the corpus use blue as a sky or atmosphere metaphor — light, airy, upward. This design inverts that: the darkest color (`#06131c`) is the deepest water, and the lightest (`#c0dbd5`) is the surface. Scrolling down the page is scrolling *down into* the water column. The one warm color (`#c8903a`) appears only as amber light filtering through from above — treasure, not decoration.

5. **No navigation, no menu, no anchor links — orientation via fish.** The corpus uses navigation at high frequency. This site's only orientation system is the fish: each species appears in a consistent panel, so a returning visitor navigates by species recognition. The three 12px fish-silhouette lines at top-right function as a menu icon for the technically curious, but the site is fully navigable by scrolling alone.

**Chosen seed:** aesthetic: goblincore, layout: full-bleed, typography: mono, palette: ethereal-blue, patterns: bounce-enter, imagery: vector-art, motifs: tropical-fish, tone: pastoral-romantic

**Avoided patterns (from frequency analysis):** full-bleed used as generic hero background (72% of corpus — this design uses full-bleed as a deliberate panel system, not as a single hero treatment); mono used as accent-only (82% corpus — this design goes all-mono); bounce-enter as button micro-interaction (corpus standard — here applied at panel/narrative level).
<!-- DESIGN STAMP
  timestamp: 2026-05-08T22:55:07
  domain: maljosim.com
  seed: seed:
  aesthetic: maljosim.com is an imagined tide-pool field journal kept by a botanist who wande...
  content_hash: e767ea981f82
-->