# Design Language for senggack.org ## Aesthetics and Tone senggack.org channels a light-academia aesthetic — the bright, optimistic intellectual visual language of sunlit study halls and open notebooks applied to a 생각 (thinking) organizational platform. The site illuminates — warm natural light flooding through tall windows onto open books, the cheerful intellectualism of a morning study session with fresh coffee, and the democratic accessibility of thinking as a joyful daily practice. Inspiration draws from the sunlit reading rooms of Nordic public libraries, the warm minimalism of Japanese stationery design, the optimistic scholarship of Montessori learning environments, and the bright editorial design of Monocle magazine. The tone is nostalgic-retro — warmly reminiscent language that treats organized thinking with the fond familiarity of returning to a beloved study spot. ## Layout Motifs and Structure The layout uses an **immersive-scroll** architecture — content revealed through continuous scrolling that creates the notebook quality of thinking organized page by page in a personal intellectual journal. **Immersive Scroll Architecture:** - Full-viewport sections scrolling like journal pages - Content: max-width: 700px centered within viewport sections - Feature sections: 100vh with vertically centered content - Gentle scroll-snap (proximity) for natural page-feel - Container: full-width sections with centered inner content - The immersive scroll creates the journal quality of organized thinking unfolding page by page **Section Sequence:** 1. **Morning:** Hero with commissioner-versatile title on forest-green light-academia gradient, line-illustration delicate thinking diagrams, floating-elements suspended thought-objects 2. **Study:** Thinking frameworks in immersive scroll — shake-error interactive thought-correction feedback with line-illustration educational diagrams 3. **Library:** Featured thinking method in full-viewport with floating-elements suspended visual elements and line-illustration detailed illustrations 4. **Notes:** Supporting methods in compact scroll sections with floating-elements reduced suspension 5. **Evening:** Footer as study day's end — nostalgic-retro farewell with floating-elements settled objects and fond closing ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile variable sans at 2.2rem-3rem, weight 700. Its adaptable forms create the study-planner quality of organized typography that adjusts its emphasis to match the importance of each thinking section. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Commissioner" at 1rem, weight 500 for thinking-method labels and organizational annotations. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Linen White:** #f6f4ee — warm linen for backgrounds - **Forest Surface:** #e4e8dc — soft forest-tinted for panels - **Forest Green:** #488858 — living forest green for primary accent - **Warm Terracotta:** #c87858 — warm terracotta for secondary accent - **Honey Gold:** #c8a848 — warm honey for tertiary accent - **Study Dark:** #1c1c18 — warm dark for text - **Forest Shadow:** #787868 — forest shadow for secondary text - **Border Forest:** rgba(72,136,88,0.1) — green tint border ## Imagery and Motifs **Line-Illustration Thinking Diagrams:** Thinking methods illustrated with delicate line art — thin-stroke diagrams (1.5px) in Forest Green and Warm Terracotta showing thought-flow, mind-map structures, and conceptual relationships. Clean, educational illustration style. The line art creates the notebook quality of thinking methods drawn by hand in a personal study journal. **Shake-Error Thought Correction:** Incorrect thinking patterns trigger gentle shake feedback — translateX: 0 to -4px to 4px to -2px to 2px to 0 over 300ms with border-color flash to Warm Terracotta. The shake creates the supportive quality of a thinking coach gently redirecting flawed reasoning. **Floating-Elements Suspended Thoughts:** Small decorative elements (circles 6px, squares 5px, dots 3px) floating with gentle vertical oscillation — animation: float 5s ease-in-out infinite with varied delays. Elements in Forest Green and Honey Gold at 0.06-0.1 opacity. The floating creates the daydream quality of thoughts suspended in the bright air of a sunlit study room. **Forest-Green Light-Academia Atmosphere:** Background uses warm, naturally-lit tones with forest accents — radial-gradient(at 50% 30%, rgba(72,136,88,0.02), transparent 40%), radial-gradient(at 40% 70%, rgba(200,120,88,0.015), transparent 35%). The green warmth creates the study-hall quality of spaces designed for sustained intellectual comfort. **Notebook Rule Lines:** Subtle horizontal rules as background texture — repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(72,136,88,0.03) 31px, rgba(72,136,88,0.03) 32px). The rules create the lined-notebook quality of thinking organized on ruled paper. ## Prompts for Implementation Build the page as a light-academia thinking journal. Immersive scroll: .think-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .think-content { max-width: 700px; padding: 60px 24px; } html { scroll-snap-type: y proximity; } Shake error: .thought-error { animation: correct-shake 300ms ease-out; border-color: #c87858; } @keyframes correct-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } Floating: .float-thought { animation: gentle-float var(--duration, 5s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } Study panel: .academy-card { background: #e4e8dc; border: 1px solid rgba(72,136,88,0.1); border-radius: 6px; padding: 28px; } AVOID: Corporate thinking tools, standard organizational platforms, and minimal productivity apps. Let light-academia intellectual warmth and nostalgic-retro fondness create a thinking organization where 생각 is practiced in sunlit study spaces, each thinking method a page in a beloved personal intellectual journal. ## Uniqueness Notes 1. **Light-academia for thinking organization:** Bright scholarly atmosphere makes organized thinking feel like a joyful daily practice in a sunlit study hall. 2. **Immersive-scroll as journal pages:** Full-viewport sections create the notebook quality of thinking organized page by page. 3. **Shake-error as gentle coaching:** Correction feedback creates the supportive quality of a thinking coach redirecting flawed reasoning kindly. 4. **Floating-elements as suspended thoughts:** Drifting objects create the daydream quality of ideas floating in bright intellectual air. 5. **Notebook rules as organizational texture:** Lined-paper background creates the personal quality of thinking practiced on familiar ruled notebook pages. **Seed/Style:** aesthetic: light-academia, layout: immersive-scroll, typography: commissioner-versatile, palette: forest-green, patterns: shake-error, imagery: line-illustration, motifs: floating-elements, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses light-academia aesthetic, immersive-scroll layout, forest-green palette, line-illustration imagery, and nostalgic-retro tone.