# Design Language for martiallaw.wiki ## Aesthetics and Tone martiallaw.wiki channels a botanical aesthetic — organic growth patterns, natural textures, and the patient beauty of living systems applied as a metaphor for civic knowledge growing from grassroots understanding. The site frames martial law documentation as a living, growing knowledge base — an encyclopedia that sprouts, branches, and evolves like a garden tended by many hands. The botanical metaphor reframes difficult political history as something that grows from understanding, where knowledge is the soil and civic awareness is the bloom. Inspiration draws from Victorian botanical illustration plates, Korean traditional garden design (정원), herbarium specimen sheets, and the branching diagrams of evolutionary biology. The tone is minimal — letting the facts grow without rhetorical embellishment, trusting the content to speak with natural clarity. The asymmetric layout creates dynamic visual tension that keeps encyclopedic content from feeling rigid. ## Layout Motifs and Structure The layout uses an **asymmetric** architecture — content blocks placed off-center and at varying widths, creating dynamic composition that prevents the wiki from feeling like a uniform wall of text. **Asymmetric Architecture:** - Content does not center-align — blocks alternate between left-aligned (margin-left: 8%) and right-aligned (margin-right: 8%) within a 1100px container - Widths vary: narrow text blocks (400-520px), wide blocks (600-780px), and full-width feature panels - Vertical spacing varies (60-120px) creating organic rhythm - Organic blob backgrounds float behind blocks at opposite alignment **Section Sequence:** 1. **Root System:** Hero with large retro-display title, organic blob background shapes, and city-urban silhouette base 2. **Branching Index:** Wiki category navigation as a branching tree diagram — asymmetrically positioned links with path-draw-svg connecting lines 3. **Growth Rings:** Main wiki content in asymmetric blocks — each article a specimen with complementary-colored borders 4. **Urban Canopy:** City-urban section showing how martial law affects urban civic life, with organic blob overlays 5. **Seed Bank:** Footer with contribution links and knowledge-sharing calls, styled as seed packet catalog ## Typography and Palette **Typography:** - **Headlines:** "Abril Fatface" (Google Fonts) — bold retro display serif at 2.5rem-4rem, weight 400. Its dramatic thick-thin contrast creates botanical illustration plate headings. - **Body Text:** "Source Sans 3" (Google Fonts) — clean humanist sans at 0.95rem, weight 400, line height 1.75. Efficient reading for encyclopedia content. - **Korean:** "Noto Serif KR" (Google Fonts) — Korean serif for Korean-language terms and quotations. - **References:** "Source Code Pro" (Google Fonts) — monospace at 0.8rem for legal citations and article numbers. **Color Palette:** - **Complement Teal:** #2a6a6a — deep teal-green for primary accents and headings - **Complement Coral:** #c06040 — warm coral-red as complementary accent - **Parchment Warm:** #f4efe4 — warm cream for page background - **Leaf Dark:** #2a3a28 — deep green for primary text - **Moss Light:** #a8c4a0 — soft sage for secondary backgrounds - **Bark Brown:** #5a4030 — medium brown for borders and secondary text - **Bloom White:** #faf8f0 — light cream for card backgrounds - **Root Amber:** #c4a060 — warm amber for decorative elements ## Imagery and Motifs **Organic-Blob Background Shapes:** Large (200-400px) irregularly-shaped organic forms (CSS border-radius: 40% 60% 50% 45% / 55% 40% 60% 50%) in Moss Light at 0.08 opacity, positioned behind asymmetric content blocks. They slowly animate (transform: scale and slight position shift over 30s, infinite, alternate), representing the organic, living nature of growing knowledge. **City-Urban Silhouette Accents:** SVG city skyline silhouettes (simple rectangular building shapes with varying heights) in Leaf Dark at 0.06 opacity, positioned at section bases. These ground the botanical abstraction in urban civic reality — where martial law actually impacts daily life. **Path-Draw-SVG Knowledge Branches:** Wiki category connections rendered as botanical branch diagrams — SVG paths that draw themselves on scroll entry. Main trunk in Complement Teal (2px) with smaller branches (1px) reaching toward individual wiki entries. stroke-dasharray animation over 600ms per branch segment. **Botanical Specimen Card Format:** Each wiki article displayed as a botanical specimen card — content area with a thin (1px) Bark Brown border, a small pressed-leaf icon (SVG, 24px, Complement Teal) in the corner, and metadata (date, category, author) arranged like specimen data fields (italic, aligned right). **Complementary Color Coding:** Teal marks factual/neutral content. Coral marks actionable/critical content. This systematic color-meaning assignment helps readers quickly identify content urgency and type. ## Prompts for Implementation Build the page with asymmetric botanical layout. Container: max-width: 1100px. Blocks alternate: odd { margin-left: 8%; width: 520px; } even { margin-left: auto; margin-right: 8%; width: 480px; }. Feature blocks: width: 100%. Organic blobs: position: absolute divs, border-radius with 8 values (e.g., 40% 60% 50% 45% / 55% 40% 60% 50%), background: Moss Light at 0.08 opacity. Animation: @keyframes morph { 0% { border-radius: 40% 60% 50% 45% / 55% 40% 60% 50%; transform: scale(1); } 100% { border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; transform: scale(1.05); } } 30s alternate infinite. Path-draw branches: SVG paths with stroke-dasharray: [length]; stroke-dashoffset: [length]. On .visible: stroke-dashoffset: 0, transition: 600ms ease-out. Stagger child branches with transition-delay. City silhouettes: SVG, viewBox full-width, simple rect elements of varying heights (40-120px) creating building shapes. Fill: Leaf Dark at 0.06 opacity. Specimen cards: border: 1px solid rgba(90,64,48,0.2), padding: 28px, position: relative. Corner icon: position: absolute, top: 12px, right: 12px. Metadata: display: flex, justify-content: flex-end, font-style: italic. AVOID: Dense, uniform wiki formatting, aggressive call-to-action patterns, and visual trivialization of serious content. Let the botanical growth metaphor and minimal tone create a contemplative encyclopedia experience. ## Uniqueness Notes 1. **Botanical aesthetic for martial law wiki:** Framing civic knowledge as a living, growing organism makes difficult content feel like something to nurture rather than confront. 2. **Asymmetric layout for dynamic wiki content:** Off-center positioning prevents encyclopedic content from feeling like an impenetrable wall of text. 3. **Path-draw-svg as knowledge branching:** Self-drawing branch diagrams visualize the interconnected, growing nature of civic understanding. 4. **City-urban grounding for botanical abstraction:** Urban silhouettes anchor the organic metaphor in the concrete reality of civic life. 5. **Complementary color coding for content urgency:** Systematic teal/coral assignments help readers quickly identify factual vs. actionable content. **Seed/Style:** aesthetic: botanical, layout: asymmetric, typography: retro-display, palette: complementary, patterns: path-draw-svg, imagery: organic-blobs, motifs: city-urban, tone: minimal **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses botanical aesthetic, asymmetric layout, complementary palette, organic-blobs imagery, and minimal tone.