# Design Language for ipjosim.com ## Aesthetics and Tone ipjosim.com (입조심 — Korean for "watch your mouth/be careful with words") adopts a retro aesthetic — the warm nostalgia of analog media, vintage signage, and pre-digital communication systems applied to the timeless wisdom of careful speech. The site evokes the atmosphere of a 1970s public service announcement crossed with a vintage Korean etiquette manual. Inspiration draws from retro Korean movie posters, vintage Japanese warning signs (注意), and the warm patina of aged printed materials. The tone is grounded-earthy — practical wisdom delivered without pretension, like advice from a trusted elder. The hero-dominant layout places the central message front and center with commanding visual weight, while isometric icon elements add playful dimensional quality to the otherwise flat retro surfaces. ## Layout Motifs and Structure The layout employs a **hero-dominant** structure where the opening section commands 75% of the viewport, delivering the core "입조심" message with maximum visual impact. **Hero-Dominant Architecture:** - Hero zone: 75vh, centered composition with the domain concept as a large typographic poster - Below hero: Content organized in a centered 900px column with generous 48px margins between sections - Card grid: 2-column layout (440px each, 20px gap) for speech etiquette tips, each card styled as a vintage notice - Pull quotes: Full-width bands with large text on colored backgrounds, breaking the column flow **Section Sequence:** 1. **Main Notice:** Hero poster with large "입조심" typography and vintage illustration framing 2. **Wisdom Cards:** Grid of speech etiquette principles styled as vintage public notices 3. **Historical Context:** Single-column narrative about the cultural significance of careful speech 4. **Modern Application:** Contemporary examples in card format with retro styling 5. **Footer Notice:** Styled as a vintage publication colophon with date and edition information ## Typography and Palette **Typography:** - **Headlines:** "Nanum Myeongjo" (Google Fonts) — Korean serif with traditional elegance at 2.5rem-4.5rem, weight 700. Evokes vintage Korean print media. - **Body Text:** "Noto Serif KR" (Google Fonts) — clean Korean serif at 1rem, weight 400, line height 1.8. Comfortable reading pace for wisdom content. - **Latin/English:** "Playfair Display" (Google Fonts) — refined transitional serif complementing the Korean typography at matching scales. - **Labels/Meta:** "IBM Plex Sans KR" (Google Fonts) — clean sans for dates, categories, and small UI text at 0.8rem, weight 400. **Color Palette:** - **Aged Cream:** #f2e8d5 — warm vintage paper background - **Deep Ink:** #2c1810 — rich dark brown for primary text, warmer than black - **Vermillion Red:** #c4432b — traditional Korean red (朱) for emphasis and warnings - **Jade Green:** #2a7a5a — muted green for secondary accents and decorative elements - **Gold Ochre:** #c4982a — warm gold for borders, rules, and ornamental details - **Faded Blue:** #5a7a9a — dusty blue for tertiary accents and subtle backgrounds - **Parchment Light:** #faf5ec — lighter cream for card surfaces - **Classical Black:** #1a1412 — warm near-black for highest contrast elements ## Imagery and Motifs **Isometric Icon Elements:** Key concepts illustrated with isometric-perspective icons — a tilted speech bubble, an angled book, a dimensional mouth/lip symbol. These use flat colors from the palette with subtle 1px outlines, giving vintage flat art a spatial quality. **Vintage Frame Ornaments:** Content cards framed with decorative borders using CSS border-image or repeating background patterns — corner flourishes, rule lines with diamond endpoints, and traditional Korean geometric patterns (기하학 무늬). **Marble-Classical Texture:** The hero section background uses a subtle marble-like texture overlay (CSS radial-gradient layers creating veined patterns) suggesting classical authority and permanence. **Aged Paper Effects:** Cards have a subtle aging effect — slightly yellowed backgrounds, faint foxing spots (tiny dots at 0.03 opacity), and a very soft box-shadow suggesting physical paper depth. **Card-Flip Proverbs:** Speech etiquette cards can be flipped (CSS 3D transform) to reveal the original Korean proverb on the back, alongside its classical Chinese character form. ## Prompts for Implementation Build the page as a vintage public notice board. The hero section uses a large centered typographic composition with "입조심" as the dominant visual element, surrounded by decorative rule lines and ornamental borders. Use CSS border and pseudo-elements to create the vintage frame without images. The vintage paper texture: apply a subtle radial-gradient overlay with warm spots (rgba(194, 152, 42, 0.03)) at random positions to simulate aged paper. The marble texture in the hero uses multiple overlapping radial-gradients with elongated shapes in muted palette colors at 0.02-0.05 opacity. Card-flip interaction: each wisdom card has front (modern explanation) and back (classical proverb) faces. Container uses transform-style: preserve-3d, child faces use backface-visibility: hidden. Hover triggers rotateY(180deg) over 600ms. Isometric icons are CSS-created: rectangles and shapes with transform: rotateX(45deg) rotateZ(45deg) or similar isometric projections, filled with flat palette colors and 1px borders. The aged foxing spots are tiny pseudo-element circles (2-4px) scattered via absolute positioning at predefined coordinates with very low opacity. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the vintage notice aesthetic and cultural wisdom content create a contemplative, educational atmosphere. ## Uniqueness Notes 1. **Vintage Korean public notice aesthetic:** Styling speech etiquette wisdom as retro PSA posters creates a culturally specific and visually distinctive experience. 2. **Isometric icons in retro context:** Adding dimensional perspective to otherwise flat vintage design creates a subtle visual surprise. 3. **Card-flip revealing classical proverbs:** The physical interaction of flipping cards to discover original Korean/Chinese proverbs adds a discovery mechanic to cultural content. 4. **Marble-classical hero texture:** The marble surface treatment suggests classical authority appropriate for timeless wisdom about careful speech. 5. **Bilingual Korean-classical Chinese typography system:** Pairing modern Korean fonts with classical content creates a visual bridge between contemporary and traditional communication. **Seed/Style:** aesthetic: retro, layout: hero-dominant, typography: condensed, palette: ethereal-blue, patterns: card-flip, imagery: isometric-icons, motifs: marble-classical, tone: grounded-earthy **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 retro aesthetic, hero-dominant layout, condensed typography, isometric-icons imagery, and grounded-earthy tone.