# Design Language for munju.im

## Aesthetics and Tone

munju.im -- a domain that phonetically echoes "munju" (문주, a Korean word suggestive of a literary pillar or cultural gatekeeper) and visually reads as an intimate, personal stamp -- inhabits the visual world of **a handmade ceramic bowl found at a countryside flea market in Provence, turned over to reveal a maker's mark pressed into terracotta clay**. The aesthetic is wabi-sabi at its most tangible: the beauty of the unfinished, the cracked, the sun-faded, the hand-touched. But this is not the sterile museum-wabi-sabi of a white gallery with one pot on a pedestal. This is the *living* wabi-sabi of a working potter's studio in rural Tuscany or Gyeongju -- shelves crowded with bisqueware, glaze drips frozen mid-run on kiln shelves, linen cloths stained with iron oxide, wooden tools worn smooth by decades of use.

The tone is **pastoral-romantic**: unhurried, tender, slightly melancholic in the way that golden hour light is melancholic -- aware that the beautiful moment is passing even as it unfolds. The site should feel like opening a handwritten letter from someone who lives in the countryside. Not naive, not twee, but genuinely warm. The kind of warmth that comes from clay that has been fired, from bread that has been baked, from wood that has been weathered. Every pixel should carry the weight of something that has been made by hand, imperfectly, with care.

The emotional register moves between **quiet pride** (in craft, in slowness, in attention) and **gentle invitation** (come closer, look at this, feel the texture). There is no urgency. There is no FOMO. There is only the steady accumulation of beautiful, useful, imperfect things.

## Layout Motifs and Structure

The layout follows a **bento-box** composition -- content is organized into discrete rectangular compartments of varying proportions, arranged in a grid that is orderly but not mechanical, like a Japanese bento where each compartment holds something different but contributes to a harmonious whole. The grid is **not CSS Grid's rigid equal-column system** but a hand-tuned arrangement where cells have intentional size ratios (1:1, 1:2, 2:3, golden ratio fragments) that create visual rhythm through asymmetric balance.

**Bento Grid Architecture:**

- **Primary Grid:** A 12-column base grid with `gap: 12px` (the gap itself is a design element -- visible as thin channels of the warm background, like the dividers in a lacquered bento box). Content blocks snap to 3-column, 4-column, 6-column, and 8-column widths, creating cells of different proportions on each row.
- **Row Composition:** Each horizontal band of the page is a self-contained bento tier. Row 1 might be: [8-col text block | 4-col image]. Row 2 might be: [4-col square | 4-col square | 4-col tall rectangle]. Row 3 might be: [12-col full-width panoramic strip]. The key is that no two adjacent rows share the same column split.
- **Cell Interiors:** Each bento cell has its own internal padding of `24px` and a barely-visible border: `1px solid rgba(180, 140, 100, 0.15)` -- the faintest terracotta line, as if drawn with diluted iron-oxide wash. Cells are never truly empty; even "spacer" cells contain a subtle texture pattern (linen weave or ceramic glaze surface) at 3-5% opacity.
- **Vertical Rhythm:** The bento composition scrolls vertically as a stack of these tiers. Each tier is between 40vh and 80vh in height, creating a breathing rhythm where some sections demand lingering and others pass quickly. There is no infinite scroll; the page has a definite, satisfying end, like the bottom of a well-packed bento.

**Micro-Layout Details:**
- Text blocks within cells are set with generous `line-height: 1.75` and `max-width: 38ch`, creating narrow, comfortable reading columns that leave space around themselves, like text on a handmade card.
- Images within cells bleed to the cell edges (no internal padding for images) but the cell's border creates a natural frame.
- On mobile (< 768px), the bento collapses to a single-column stack, but each cell retains its border and padding, preserving the compartmentalized feeling.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Nunito" (Google Fonts) -- weight 700 and 800. Nunito's fully rounded terminals and generous x-height embody the wabi-sabi principle of soft imperfection: the letters look like they were shaped by hand from clay, each curve slightly plump and yielding. Used at 2.5rem-4.5rem for section headers and bento cell titles. Set with `letter-spacing: 0.02em` and `line-height: 1.15`. Headlines are always sentence case -- no shouting, no all-caps. The rounded forms of Nunito against the angular bento grid create a tension between geometric structure and organic softness that IS the wabi-sabi dialectic.

- **Body / Reading Text:** "Quicksand" (Google Fonts) -- weight 400 for body, 500 for emphasis, 600 for labels. Quicksand's rounded geometric forms complement Nunito without duplicating it: where Nunito is warm and plump, Quicksand is precise and airy, like the difference between a handmade teacup and a carefully thrown porcelain saucer. Body text at 1rem (16px) with `line-height: 1.75` and `letter-spacing: 0.01em`. Paragraph spacing uses `margin-bottom: 1.5em` for a deliberate, unhurried reading pace.

- **Accent / Monospace:** "Josefin Sans" (Google Fonts) -- weight 300 and 400. Used sparingly for dates, labels, categories, and metadata. Josefin Sans's thin strokes and geometric construction provide a subtle contrast to the roundness of the primary faces, like a fine-tipped pen annotation on a watercolor sketch. Set at 0.75rem-0.875rem in `text-transform: uppercase` with `letter-spacing: 0.12em` for label treatments.

**Palette:**

The palette is **terracotta-warm** -- drawn from the kiln, from clay at different stages of firing, from the natural pigments of an artisan's workshop.

| Role | Color | Hex | Description |
|------|-------|-----|-------------|
| Background (primary) | Warm Parchment | `#F5EDE3` | The color of unbleached linen paper, slightly yellowed by age |
| Background (secondary) | Kiln Cream | `#EDE4D6` | A half-shade darker, for alternating bento cells |
| Text (primary) | Fired Earth | `#3B2F2A` | Deep brown-black, like charcoal-stained clay -- warm but never truly black |
| Text (secondary) | Weathered Umber | `#7A6A5E` | Muted brown for secondary text and captions |
| Accent (primary) | Raw Terracotta | `#C4714E` | The signature color: unglazed terracotta, warm and slightly dusty |
| Accent (secondary) | Oxidized Copper | `#7B9E87` | A muted sage green, like copper patina on a garden gate -- the single cool tone |
| Accent (tertiary) | Kiln Smoke | `#B8A08A` | A warm taupe for borders, dividers, subtle UI elements |
| Highlight | Glaze Gold | `#D4A857` | Sparingly used: the amber of a honey glaze, for hover states and active elements |

**Color Usage Rules:**
- The background alternates between `#F5EDE3` and `#EDE4D6` for adjacent bento cells, creating depth without contrast violence.
- `#C4714E` (Raw Terracotta) is used ONLY for interactive elements, links, and the single most important element per viewport. It must never be used for large fills -- only for lines, text accents, and borders.
- `#7B9E87` (Oxidized Copper) appears in exactly one bento cell per tier as a quiet counterpoint to the terracotta warmth. It can fill a small cell background or tint an image overlay.
- `#D4A857` (Glaze Gold) is reserved for hover states and `border-animate` effects. It should feel like a surprise when it appears -- a flash of kiln-fire.

## Imagery and Motifs

**Isometric Icon System:**
All visual elements are rendered as **isometric icons** -- simplified 3D objects drawn in isometric perspective (30-degree projection, no vanishing point) using only the palette colors. The isometric style transforms everyday pastoral objects into miniature architectural studies: a ceramic bowl becomes a geometric vessel with visible thickness and shadow; a potted plant becomes a tiny isometric garden; a stack of books becomes a stepped pyramid.

**Icon Subject Vocabulary:**
- Ceramic vessels: bowls, tea cups, vases, plates -- all rendered with visible wall thickness and subtle glaze color variation
- Craft tools: brushes, wooden paddles, linen cloths, kilns rendered as isometric cubes
- Botanical elements: small potted plants, dried flower arrangements, herb bundles -- geometric but organic
- Stationery: notebooks, folded letters, wax seals, ink bottles
- Architectural fragments: windowsills, doorframes, stone steps, garden walls -- all suggesting age and weather
- Food/kitchen: bread loaves, honey jars, olive oil bottles, wooden cutting boards

**Icon Rendering Style:**
Each icon uses a maximum of 4 colors from the palette. Surfaces facing "up" use the lightest shade, surfaces facing "right" use the mid-tone, surfaces facing "left" use the darkest tone. This creates a consistent lighting model across all icons. Outlines are `1.5px` in `#3B2F2A` (Fired Earth) with slightly rounded line-joins. Icons are drawn as inline SVGs, never as raster images, ensuring crisp rendering at any size.

**Vintage Motifs (Differentiated):**
The "vintage" quality here is NOT sepia filters, NOT old-timey fonts, NOT distressed textures applied as Photoshop overlays. The vintage quality emerges organically from the subject matter and craft sensibility: the imperfect geometry of hand-drawn isometric lines (intentionally 0.5-1 degree off-axis to avoid CAD precision), the use of natural material colors instead of digital primaries, the generous whitespace that recalls letterpress printing where ink never fills edge-to-edge. Vintage is a byproduct of the craft philosophy, not a stylistic veneer.

**Texture Layer:**
A subtle linen-paper texture is applied as a fixed background pattern using CSS: a repeating `4px x 4px` tile at `opacity: 0.04` over the base background color. This creates a barely-perceptible tactile quality -- the screen feels less like glass and more like paper. The texture is a simple crosshatch of `1px` lines in `#B8A08A` (Kiln Smoke).

**Decorative Borders (border-animate):**
Bento cell borders are not static. On scroll-into-view, each cell's border draws itself in a clockwise animation: starting from the top-left corner, a `1px` terracotta line (`#C4714E`) traces the perimeter of the cell over 800ms with an `ease-out` timing function. The animation uses `stroke-dasharray` and `stroke-dashoffset` on an SVG rect overlay, not CSS `border`. This creates a moment of gentle revelation as each compartment announces itself -- like watching a calligrapher draw a frame around a finished piece.

## Prompts for Implementation

**Full-Screen Pastoral Narrative Experience:**
The site opens to a full-viewport composition: a single large bento cell occupying 80% of the screen containing a hero isometric illustration (a ceramic workshop scene -- kiln, shelves, tools, all in isometric projection using palette colors) with the site name "munju.im" set in Nunito 800 at 3.5rem, positioned in the lower-left quadrant with generous breathing room. A smaller bento cell in the top-right corner (20% of viewport) contains a single line of Josefin Sans 300 metadata text: a date, a season, a haiku-length description. The border-animate effect traces both cells on page load after a 300ms delay.

**Scroll-Driven Bento Revelation:**
As the user scrolls, each new tier of bento cells enters the viewport and triggers its border-animate sequence. Content within cells fades in with a 200ms stagger: first the border draws, then the content fades from `opacity: 0` to `opacity: 1`. This creates a meditative scroll rhythm: draw, reveal, pause, draw, reveal, pause. The stagger timing uses `transition-delay` calculated as `cellIndex * 150ms` within each tier.

**Border Animation Technical Spec:**
Each bento cell is wrapped in an SVG overlay containing a `<rect>` element matching the cell dimensions. The rect has:
- `fill: none`
- `stroke: #C4714E` (Raw Terracotta)
- `stroke-width: 1`
- `stroke-dasharray: [perimeter]` (calculated via JS on resize)
- `stroke-dashoffset: [perimeter]` (initially hidden)
- On intersection (IntersectionObserver, threshold 0.3), animate `stroke-dashoffset` to `0` over 800ms
- On the highlight cell (one per tier), the stroke color transitions to `#D4A857` (Glaze Gold) at the 600ms mark

**Interaction Micro-Details:**
- Links use the terracotta color `#C4714E` and on hover, a `border-bottom: 1px solid #D4A857` draws from left to right using `background-size` animation (the underline-as-background technique). Duration: 400ms ease-out.
- Isometric icons within bento cells have a subtle `transform: translateY(0)` to `translateY(-4px)` hover effect with `transition: 300ms ease`. This tiny lift suggests the icon is a physical object being picked up.
- Bento cells with the `#7B9E87` (Oxidized Copper) accent have a `box-shadow: inset 0 0 0 0 #7B9E87` that expands to `inset 0 0 0 3px #7B9E87` on hover over 500ms -- a subtle inward glow, like copper warming.

**Storytelling Structure:**
Content is organized as a personal narrative: the site tells a story through its bento cells, each one a vignette. There are NO call-to-action buttons, NO pricing grids, NO testimonial carousels, NO stat counters. Each cell contains either: (a) a short text passage in Quicksand 400, (b) an isometric icon or illustration, (c) a photograph treated with a warm overlay (`mix-blend-mode: multiply` using `#EDE4D6` at 40% opacity), or (d) a decorative cell containing only the linen texture and a single Josefin Sans label.

**AVOID:**
- CTA-heavy layouts, pricing blocks, stat-grids
- Parallax scrolling (overused at 76%)
- Scroll-triggered animation libraries (overused at 97%) -- use only native IntersectionObserver
- Centered layouts (overused at 99%) -- the bento grid is inherently off-center and asymmetric
- Mono typography (overused at 99%) -- no monospace fonts as primary faces
- Generic "friendly" tone -- the pastoral-romantic tone is specific: tender, unhurried, craft-aware

**CSS Custom Properties:**
```css
:root {
  --bg-primary: #F5EDE3;
  --bg-secondary: #EDE4D6;
  --text-primary: #3B2F2A;
  --text-secondary: #7A6A5E;
  --accent-terracotta: #C4714E;
  --accent-copper: #7B9E87;
  --accent-smoke: #B8A08A;
  --accent-gold: #D4A857;
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --font-label: 'Josefin Sans', sans-serif;
  --border-width: 1px;
  --cell-padding: 24px;
  --cell-gap: 12px;
  --animate-border: 800ms;
  --animate-fade: 200ms;
  --animate-stagger: 150ms;
}
```

## Uniqueness Notes

**Differentiators from other designs:**

1. **Isometric Pastoral Craft:** No other design in the portfolio combines isometric icon rendering (1% frequency) with wabi-sabi aesthetics (3% frequency) and pastoral subject matter. Isometric designs in the collection tend toward tech dashboards and documentation sites. This design repurposes the isometric projection -- typically cold and technical -- to render warm, handmade objects (ceramics, bread, herbs, letters), creating a visual contradiction that is itself a form of munju (contradiction/paradox).

2. **Border-Animate as Primary Animation Language:** While most designs rely on scroll-triggered animations (97%), parallax (76%), or stagger effects (61%), this design's signature motion is the **border-drawing animation** (2% frequency). Every bento cell announces itself by having its border traced in real-time. This is not a supplementary effect -- it IS the animation system. The entire scroll experience is structured around the rhythm of borders drawing and content revealing.

3. **Bento Composition Without Japanese Minimalism:** Bento-box layouts (3% frequency) are typically paired with Japanese-minimal or zen aesthetics. This design pairs bento with European pastoral warmth -- terracotta, linen, copper patina, Provencal/Tuscan/Korean countryside craft traditions. The structural discipline of the bento grid contains and organizes what would otherwise be an overwhelming abundance of warmth and texture. The contrast between the grid's precision and the content's handmade imperfection is the core tension.

4. **Terracotta-Warm Palette With Oxidized Copper Counterpoint:** The terracotta-warm palette (1% frequency) avoids the trap of monochromatic warmth by introducing a single cool-toned accent (`#7B9E87`, oxidized copper sage) that appears sparingly but strategically. This creates a temperature contrast that other warm palettes lack -- like finding a cool stone wall in a sun-baked garden.

5. **Rounded-Sans Typography in a Non-Playful Context:** Rounded sans-serif faces (1% frequency) are almost always used in playful, bubbly, or children's contexts. This design uses Nunito and Quicksand -- both rounded -- in a serious, contemplative, pastoral-romantic context. The roundedness reads not as cute but as *soft*, *worn*, *handled* -- like the smoothed edges of a river stone or the rounded rim of a well-used ceramic bowl.

**Chosen Seed:** `aesthetic: wabi-sabi, layout: bento-box, typography: rounded-sans, palette: terracotta-warm, patterns: border-animate, imagery: isometric-icons, motifs: vintage, tone: pastoral-romantic`

**Frequency-Informed Avoidances:**
- AVOIDED playful aesthetic (95%) in favor of wabi-sabi (3%)
- AVOIDED centered layout (99%) in favor of bento-box (3%)
- AVOIDED mono typography (99%) in favor of rounded-sans (1%)
- AVOIDED warm/gradient palette generics (100%/90%) in favor of specific terracotta-warm (1%)
- AVOIDED scroll-triggered/parallax patterns (97%/76%) in favor of border-animate (2%)
- AVOIDED minimal imagery (94%) in favor of isometric-icons (1%)
- AVOIDED friendly tone (98%) in favor of pastoral-romantic (2%)
- ACKNOWLEDGED vintage motifs (84%) but differentiated by making vintage a byproduct of craft philosophy rather than an applied stylistic filter
<!-- DESIGN STAMP
  timestamp: 2026-03-10T16:20:12
  seed: seed:
  aesthetic: munju.im -- a domain that phonetically echoes "munju" (문주, a Korean word suggest...
  content_hash: 0d52624d3d09
-->