# Design Language for gunsul.quest ## Aesthetics and Tone A construction-simulation game interface where building is the quest -- gunsul.quest (건설, construction) renders as a city-builder game UI: isometric grid views, resource panels, construction progress bars, and the satisfying visual language of things being built piece by piece. The construction-game aesthetic makes every element feel like a building block: cards stack, sections construct themselves, and progress is visible. The tone is builder-motivated: "Place the foundation. Stack the floors. Build something that lasts." ## Layout Motifs and Structure **Construction System:** An isometric-feeling grid layout where sections appear to stack upward as you scroll. **Section Flow:** 1. **The Blueprint:** Hero with wireframe building outlines and the domain name. 2. **The Foundation:** Base-level content cards establishing fundamentals. 3. **The Floors:** Progressively building content with visual "height" increasing (stacked cards with slight vertical offset). 4. **The Skyline:** Closing vista showing the "completed" structure. ## Typography and Palette - **Headlines:** "Noto Sans KR" at 2.5rem-4rem, weight 700. - **Body:** "Noto Sans KR" at 0.95rem, weight 400, line-height 1.7. - **UI:** "Space Mono" at 0.75rem for resource indicators. **Palette:** Blueprint Blue (#1a2a4a), Steel (#4a5a6a), Concrete (#c0c0b8), Safety Orange (#f08020), Progress Green (#30a050), Crane Yellow (#e0c020), Sky (#e0f0ff). ## Imagery and Motifs **Blueprint Background:** Dark blue with faint white grid lines creating a blueprint-paper effect. **Progress Bars:** Horizontal bars showing construction progress, filling with green. **Stacking Cards:** Content cards that appear to stack with slight translateY offsets (-4px per card), creating visual height. **Crane Element:** A simple CSS-drawn crane silhouette (lines and angles) in Crane Yellow at the hero section top. ## Prompts for Implementation Build as a construction game. Blueprint background establishes the planning context. Content cards appear from bottom (translateY: 20px to 0) as if being placed. Progress bars fill on scroll entry. The stacking effect creates a sense of building upward through the content. The closing skyline section uses lighter colors (sky background) contrasting with the blueprint blue, suggesting completion. Korean typography via Noto Sans KR. Everything communicates construction, progress, and achievement. ## Uniqueness Notes 1. **Construction-game as content architecture:** Building-up visual metaphor applied to content presentation is distinctive. 2. **Blueprint-paper background:** Dark blue with white grid lines creates authentic construction-planning atmosphere. 3. **Stacking card offset:** The slight vertical offset per card creates a tangible sense of accumulating structure. 4. **Progress-bar as universal indicator:** Using construction progress bars for content sections creates thematic consistency. Document chosen seed/style: aesthetic: construction-game, layout: stacking-grid, typography: korean-clean, palette: blueprint-construction, patterns: progress-bars, imagery: blueprint-grid, motifs: crane-silhouette, tone: builder-motivated