# Design Language for muhan.dev ## Aesthetics and Tone muhan.dev (Muhan — Korean for infinite, limitless) channels an editorial aesthetic — the refined pacing, considered typography, and narrative structure of premium publications applied to a developer portfolio and engineering blog. The site reads like a thoughtfully designed tech magazine — each project a feature article, each code example a carefully typeset specimen, every section paced for engaging reading. Inspiration draws from The New York Times' digital longform, Monocle magazine's clean editorial design, A List Apart's web design writing, and the considered typography of Kinfolk magazine. The tone is raw-authentic — honest, unpolished writing that shares the real experience of development including struggles, failures, and messy middle stages. ## Layout Motifs and Structure The layout uses a **hexagonal-honeycomb** architecture — content organized in hexagonal grid patterns that create visual density and interconnection, reflecting the infinite connections in software architecture. **Hexagonal Honeycomb Architecture:** - Hexagonal grid using CSS clip-path for hex shapes - Content cards clipped to hexagons: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) - Grid: display: grid with offset rows (every other row shifted 50% of hex width) - Hex cell size: 280-320px wide - Feature content breaks out of hex grid into full-width editorial columns (max-width: 720px) - Gap: 8px between hexagons **Section Sequence:** 1. **Origin:** Hero with serif-classic title on earth-tones gradient, organic-blobs flowing background shapes, city-urban skyline silhouette accents 2. **Projects:** Developer projects in hexagonal honeycomb grid — slide-reveal animated entry, organic-blobs connecting project relationships 3. **Writing:** Blog articles in editorial full-width layout breaking from the hex grid, with city-urban photographic accents and raw-authentic narrative tone 4. **Stack:** Technology stack displayed in hex-grid format with slide-reveal cascade and organic-blob connecting shapes 5. **Signal:** Footer as honest closing — raw-authentic sign-off with city-urban skyline fading into earth-tones gradient ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) — classic serif at 2.5rem-3rem, weight 700. Its editorial authority creates the magazine-quality presentation that elevates developer content. - **Body Text:** "Source Sans 3" (Google Fonts) — clean humanist sans at 0.95rem, weight 400, line height 1.75. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.85rem with ligatures for code blocks. - **Pull Quotes:** "Libre Baskerville" at 1.3rem, weight 400, italic for featured quotations and key insights. **Color Palette:** - **Earth Dark:** #1a1610 — warm dark earth for primary backgrounds - **Soil Mid:** #2a2418 — warm medium soil for secondary backgrounds - **Clay Orange:** #b07030 — warm clay orange for primary accents - **Moss Green:** #607840 — earthy moss for secondary accents - **Stone Gray:** #a09880 — warm stone for tertiary accents - **Parchment:** #f4ece0 — warm parchment for light sections - **Text Earth:** #1a1810 — warm dark for body text on light - **Border Natural:** #c8bca4 — natural warm border ## Imagery and Motifs **Organic-Blobs Connecting Shapes:** Amorphous blob shapes (SVG, 100-200px) in Clay Orange and Moss Green at 0.06-0.1 opacity flow between content sections, connecting related hexagonal cells. Border-radius: 40% 60% 50% 50% / 60% 40% 55% 45% with subtle animation (border-radius values shifting over 8s, creating slow organic breathing). Represents the fluid, interconnected nature of software architecture. **Slide-Reveal Hexagonal Entry:** Hexagonal content cells enter with a slide-reveal animation — translating from off-screen (translateX(-30px) or translateX(30px) based on position) with opacity: 0 to final position over 400ms ease-out. Cells in each row stagger by 100ms, creating a honeycomb assembly effect as users scroll. **City-Urban Atmospheric Accents:** Urban skyline silhouettes (SVG, simplified geometric building outlines) in Stone Gray at 0.06 opacity appear along section bottoms, creating a subtle cityscape horizon. The urban imagery grounds the developer portfolio in the physical world of cities where code is written and deployed. **Earth-Tones Depth Gradients:** Background sections use warm earth-tone gradients — linear-gradient(180deg, #1a1610, #2a2418) on dark, linear-gradient(180deg, #f4ece0, #ece4d4) on light. Subtle radial highlights in Clay Orange (rgba(176,112,48,0.03)) create warm depth pools. The natural earth palette communicates the organic, grown quality of well-developed code. **Editorial Typography Hierarchy:** Within blog/writing sections, strong typographic hierarchy — drop caps (first-letter at 3.5em, float: left, line-height: 0.8, color: Clay Orange), pull quotes (border-left: 3px solid Clay Orange, padding-left: 20px, font-style: italic), and section numbers in large Stone Gray numerals. The editorial treatment elevates dev writing to magazine quality. ## Prompts for Implementation Build the page as an editorial developer portfolio with hex grid. Hex grid: display: grid, grid-template-columns: repeat(auto-fill, 300px). Offset rows via :nth-child targeting. Hex clip: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Slide reveal: .hex-cell { opacity: 0; transform: translateX(-30px); transition: all 400ms ease-out; } .hex-cell.visible { opacity: 1; transform: translateX(0); } .hex-cell:nth-child(even) { transform: translateX(30px); } Organic blobs: .blob { border-radius: 40% 60% 50% 50% / 60% 40% 55% 45%; animation: blobBreath 8s ease-in-out infinite; } @keyframes blobBreath { 0%, 100% { border-radius: 40% 60% 50% 50% / 60% 40% 55% 45%; } 50% { border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; } } Editorial typography: .article p:first-of-type::first-letter { font-size: 3.5em; float: left; line-height: 0.8; color: #b07030; font-family: 'Libre Baskerville', serif; margin-right: 8px; } City silhouette: SVG with simple rect and polygon shapes, fill: rgba(160,152,128,0.06), positioned at section bottom. AVOID: Generic developer portfolio templates, minimal personal sites, and sterile code-focused layouts. Let the editorial craft and raw-authentic honesty create a developer portfolio that reads like a compelling tech magazine. ## Uniqueness Notes 1. **Editorial aesthetic for developer portfolio:** Magazine-quality design elevates engineering work to feature-worthy content deserving considered presentation. 2. **Hexagonal-honeycomb as interconnected architecture:** Hex grid pattern visualizes the dense, interconnected nature of software systems and developer knowledge. 3. **Organic-blobs as software fluidity:** Amorphous shapes between hex cells represent the fluid, evolving nature of code and architecture. 4. **City-urban as development context:** Skyline silhouettes ground the digital portfolio in the physical cities where code comes to life. 5. **Raw-authentic tone for dev writing:** Honest, unpolished narrative shares the real experience of development — including the messy parts. **Seed/Style:** aesthetic: editorial, layout: hexagonal-honeycomb, typography: serif-classic, palette: earth-tones, patterns: slide-reveal, imagery: organic-blobs, motifs: city-urban, tone: raw-authentic **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 editorial aesthetic, hexagonal-honeycomb layout, earth-tones palette, organic-blobs imagery, and raw-authentic tone.