# Design Language for munju.wiki ## Aesthetics and Tone munju.wiki (Munju — 먼저, Korean for "first" or "before") channels a victorian-ornate aesthetic — the elaborate decorative richness and craftsmanship of Victorian-era design applied to an encyclopedia platform documenting the history and philosophy of priority, precedence, and first-mover concepts. The site is a digital Victorian library — ornamental borders, serif typography dripping with authority, and the decorative excess of an era that believed more ornamentation meant more importance. Inspiration draws from William Morris's Kelmscott Press typography, Victorian botanical illustration encyclopedias, the ornate interfaces of illuminated manuscripts, and the decorative richness of Art Nouveau print design. The tone is pastoral-romantic — lyrical, nature-infused language that treats knowledge as a garden to be cultivated. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content blocks of varying heights packed efficiently, creating the dense, information-rich feel of a Victorian reference library. **Masonry Architecture:** - CSS columns: column-count: 3 (desktop), 2 (tablet), 1 (mobile) - Column-gap: 20px - Each block: break-inside: avoid, margin-bottom: 20px - Feature blocks span full width between masonry sections - Container: max-width: 1100px centered **Section Sequence:** 1. **Primacy:** Hero with frutiger-clean title on dark-neon gradient, watercolor botanical illustration accents, tropical-fish decorative swimming through ornamental borders 2. **Encyclopedia:** Wiki entries in masonry layout — hover-lift interactive cards with watercolor illustrations and Victorian ornamental borders 3. **Taxonomy:** Category tree in masonry-compatible blocks with watercolor botanical category icons and tropical-fish accent decorations 4. **Bibliography:** Reference materials in dense masonry format with Victorian-style citation ornaments 5. **Endnote:** Footer as encyclopedic colophon — pastoral closing with ornamental border frame and watercolor floral accent ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — clean Frutiger-inspired sans at 2rem-3rem, weight 700. Its Swiss precision creates deliberate contrast with Victorian decorative elements. - **Body Text:** "Crimson Text" (Google Fonts) — literary serif at 0.95rem, weight 400, line height 1.8 for encyclopedic reading. - **Captions:** "Crimson Text" at 0.8rem, weight 400, italic for illustration captions. - **Labels:** "Albert Sans" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Neon Dark:** #080810 — deep near-black for dark sections - **Neon Mid:** #101018 — slightly lighter for panels - **Neon Gold:** #d0a830 — neon gold for primary accent - **Neon Rose:** #c05070 — neon rose for secondary accent - **Neon Teal:** #30a898 — neon teal for tertiary accent - **Parchment:** #f4ece0 — warm parchment for light sections - **Text Warm:** #d0c8b8 — warm cream text on dark - **Border Ornate:** #302820 — warm ornate border ## Imagery and Motifs **Watercolor Botanical Illustrations:** Encyclopedia entries illustrated with watercolor-style botanical art — SVG illustrations with soft gradient fills simulating watercolor wash (stops with varying opacity 0.2-0.6) in Neon Rose and Neon Teal on dark, muted versions on light. Each illustration captures a different plant, creating a botanical encyclopedia within the priority encyclopedia. **Hover-Lift Encyclopedia Cards:** Wiki entry cards lift on hover — transform: translateY(-3px) with box-shadow expanding from 0 2px 6px rgba(0,0,0,0.05) to 0 6px 16px rgba(0,0,0,0.1). Border-top: 2px transitions from transparent to Neon Gold over 200ms. The lift creates the sensation of pulling a card from a reference cabinet. **Tropical-Fish Ornamental Swimmers:** Small tropical fish (SVG, 20-32px) in Neon Teal and Neon Rose at 0.08 opacity swim through ornamental borders and between masonry blocks. Positioned at slight angles (5-15deg), they add Victorian natural-history-cabinet whimsy to the encyclopedic content. **Dark-Neon Victorian Atmosphere:** Dark sections use deep backgrounds with neon accent highlights — linear-gradient(180deg, #080810, #101018) with radial glows in Neon Gold (rgba(208,168,48,0.04)) and Neon Rose (rgba(192,80,112,0.03)). The neon-on-dark creates an electrified Victorian library atmosphere. **Victorian Ornamental Borders:** Content frames feature Victorian-inspired ornamental borders — CSS border-image using repeating linear gradients creating decorative edge patterns, or SVG corner ornaments (scrollwork flourishes, 20-30px) in Neon Gold at 0.12 opacity. The ornaments anchor the digital platform in Victorian craft tradition. ## Prompts for Implementation Build the page as a Victorian neon encyclopedia. Masonry: column-count: 3, column-gap: 20px. Cards: break-inside: avoid, margin-bottom: 20px, padding: 24px, background: #f4ece0 (light) or #101018 (dark). Hover-lift: .wiki-card { transition: transform 200ms ease, box-shadow 200ms ease; border-top: 2px solid transparent; } .wiki-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); border-top-color: #d0a830; } Watercolor: SVG elements with gradient fills. Tropical fish: .fish { position: absolute; opacity: 0.08; transform: rotate(var(--angle, 8deg)); } Victorian borders: .ornate-frame { border: 1px solid #302820; position: relative; } .ornate-frame::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 1px solid rgba(208,168,48,0.12); pointer-events: none; } AVOID: Clean Wikipedia-style layouts, sterile reference platforms, and modern encyclopedia design. Let Victorian ornamental richness and pastoral-romantic language create an encyclopedia where knowledge feels as cultivated as a Victorian garden. ## Uniqueness Notes 1. **Victorian-ornate for encyclopedia platform:** Elaborate decorative design treats knowledge with the reverence and craftsmanship of Victorian printing. 2. **Masonry as dense reference library:** Packed variable-height blocks create the information density of a well-stocked Victorian reading room. 3. **Watercolor botanicals as knowledge illustrations:** Plant illustrations create a natural-history dimension within the priority encyclopedia. 4. **Dark-neon as electrified Victorian:** Neon accents on deep backgrounds create the atmosphere of a Victorian library with modern illumination. 5. **Pastoral-romantic for knowledge cultivation:** Nature-infused language treats encyclopedic knowledge as a garden to be tended with care. **Seed/Style:** aesthetic: victorian-ornate, layout: masonry, typography: frutiger-clean, palette: dark-neon, patterns: hover-lift, imagery: watercolor, motifs: tropical-fish, tone: pastoral-romantic **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 victorian-ornate aesthetic, masonry layout, dark-neon palette, watercolor imagery, and pastoral-romantic tone.