# Design Language for munju.im ## Aesthetics and Tone munju.im (Munju — 먼저, Korean for "first" or "before") channels a cottagecore aesthetic — the romanticized rural simplicity of handmade crafts, garden life, and the gentle pace of countryside living applied to an instant messaging and communication platform. The site wraps digital communication in the warmth of a country cottage — messages feel like handwritten letters, contacts feel like neighbors, and every interaction carries the care of slow, intentional connection. Inspiration draws from William Morris's Arts and Crafts movement, the pastoral photography of Kinfolk magazine, the hand-drawn charm of Rifle Paper Co., and the cozy interiors of Scandinavian cabin design. The tone is professional — competent, reliable language that maintains standards while embracing the warmth of cottagecore visual design. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — content organized in compartmentalized containers of varying sizes, like preserves arranged on cottage kitchen shelves. **Bento Box Architecture:** - Grid: display: grid with named template areas - Desktop: mix of 1x1, 2x1, 1x2 cells creating varied compartments - Gap: 16px between cells - Each cell: border-radius: 8px, warm backgrounds - Container: max-width: 1000px centered - Cells feel like labeled jars or framed samplers **Section Sequence:** 1. **Hearth:** Hero as oversized bento cell with garamond-classic title on creamy-pastel gradient, vector-art cottage illustration, retro-patterns cross-stitch border accents 2. **Messages:** Messaging features in bento grid — blur-focus interactive previews with vector-art envelope and letter illustrations 3. **Garden:** Community features styled as garden patches in bento cells with retro-patterns botanical borders 4. **Pantry:** Settings and tools in organized bento compartments with cottagecore label styling 5. **Evening:** Footer as cottage sunset — professional closing with retro-pattern border and warm pastoral sign-off ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.5rem-3rem, weight 700. Its warm scholarly quality creates the letter-writing gravitas of cottage correspondence. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.75. Soft forms match cottagecore warmth. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. - **Accent:** "EB Garamond" at 1.1rem, weight 400, italic for featured messages. **Color Palette:** - **Cream Cottage:** #faf4e8 — warm cottage cream for primary backgrounds - **Blush Rose:** #f0dcd8 — soft blush for secondary backgrounds - **Sage Garden:** #a0b898 — garden sage for primary accents - **Berry Warm:** #b07068 — warm berry for secondary accents - **Honey Gold:** #c8a850 — honey gold for tertiary accents - **Bark Text:** #2a2018 — warm bark brown for body text - **Linen:** #ece4d4 — warm linen for card backgrounds - **Border Bramble:** #c8b8a0 — bramble-colored border ## Imagery and Motifs **Vector-Art Cottage Illustrations:** Communication concepts illustrated as cottagecore vector art — simple SVG line drawings (1.5px stroke) of envelopes, feather quills, carrier pigeons, garden gates, and cottage windows in Sage Garden and Berry Warm. Each illustration hand-drawn in quality (slight path irregularities) but clean in execution. **Blur-Focus Message Previews:** Message feature previews start softly blurred (filter: blur(4px)) transitioning to sharp (blur(0)) on hover over 300ms, like eyes adjusting when opening a letter. Creates the intimate, personal quality of reading private correspondence. **Retro-Patterns Cross-Stitch Borders:** Section dividers and card borders use cross-stitch-inspired patterns — repeating SVG X shapes (8px) in Sage Garden at 0.1 opacity creating the handcraft quality of embroidered samplers. Different stitch patterns (cross, running, chain) per section. **Creamy-Pastel Cottage Warmth:** Backgrounds use soft creamy pastels — alternating Cream Cottage and Blush Rose sections with subtle radial warmth (rgba(200,168,80,0.03)) at centers. The pastel warmth creates the sun-dappled quality of cottage interiors bathed in afternoon light. **Cottage Label Styling:** Bento cells feature label-style headers — small text (0.7rem, uppercase, Bark Text at 0.6 opacity) centered above each compartment, framed by thin horizontal lines (1px, Border Bramble at 0.2 opacity). The labels create the organized charm of a cottage pantry. ## Prompts for Implementation Build the page as a cottagecore messaging bento. Grid: display: grid, grid-template-columns: repeat(3, 1fr), gap: 16px. Cells: border-radius: 8px, background: #ece4d4, border: 1px solid #c8b8a0, padding: 24px. Blur-focus: .message-preview { filter: blur(4px); transition: filter 300ms ease; } .message-preview:hover { filter: blur(0); } Cross-stitch: .stitch-border { background-image: repeating-linear-gradient(90deg, transparent 0, transparent 6px, rgba(160,184,152,0.1) 6px, transparent 8px), repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(160,184,152,0.1) 6px, transparent 8px); background-size: 8px 8px; } Cottage labels: .cell-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(42,32,24,0.6); text-align: center; margin-bottom: 12px; } .cell-label::before, .cell-label::after { content: ''; display: inline-block; width: 20px; height: 1px; background: rgba(200,184,160,0.2); vertical-align: middle; margin: 0 8px; } Vector illustrations: SVG with stroke: #a0b898 or #b07068, stroke-width: 1.5, fill: none. Slightly irregular paths for handmade quality. AVOID: Modern messaging app aesthetics, sleek communication platforms, and tech-forward chat interfaces. Let cottagecore handcraft warmth and professional reliability create a messaging platform where digital communication feels as personal as handwritten letters. ## Uniqueness Notes 1. **Cottagecore for messaging platform:** Rural craft aesthetic transforms digital communication into personal, intentional connection. 2. **Bento-box as pantry organization:** Compartmentalized layout creates the organized charm of a well-stocked cottage kitchen. 3. **Cross-stitch borders as handcraft heritage:** Embroidery-inspired patterns bring physical craft tradition to digital interface borders. 4. **Blur-focus as letter opening:** The reveal interaction recreates the intimate moment of opening private correspondence. 5. **Professional tone within cottagecore design:** Competent, reliable language maintains standards while the visual design embraces warmth. **Seed/Style:** aesthetic: cottagecore, layout: bento-box, typography: garamond-classic, palette: creamy-pastel, patterns: blur-focus, imagery: vector-art, motifs: retro-patterns, tone: professional **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses cottagecore aesthetic, bento-box layout, creamy-pastel palette, vector-art imagery, and professional tone.