# Design Language for senggack.com ## Aesthetics and Tone senggack.com channels a bauhaus aesthetic — the geometric precision and functional beauty of the Bauhaus school applied to a 생각 (thinking) platform. The site constructs — primary shapes carrying conceptual weight, systematic color as thought-classification, and the rigorous formal logic of a design school where thinking itself is the curriculum. Inspiration draws from the pedagogical experiments of Johannes Itten's color theory, the typographic clarity of Herbert Bayer, the spatial compositions of Piet Mondrian's neoplasticism, and the total-design workshops of the Bauhaus Dessau. The tone is luxurious — rich, indulgent language that treats the act of thinking with the premium reverence of a high-end intellectual salon. ## Layout Motifs and Structure The layout uses a **hero-dominant** architecture — content organized around a commanding hero section that creates the thesis-statement quality of a single powerful thought dominating the intellectual landscape. **Hero Dominant Architecture:** - Hero section: 80vh minimum with centered thought-statement - Secondary content: max-width: 860px below hero - Supporting sections: compact, deferential to hero's dominance - Feature callouts: 640px width for focused thinking moments - Container: full-width hero with 860px body content - The hero dominance creates the monumental quality of a single thought given room to breathe and command attention **Section Sequence:** 1. **Thesis:** Hero with rounded-sans title on complementary bauhaus gradient, glassmorphic-cards frosted thought panels, vintage nostalgic thinking-room motifs 2. **Arguments:** Thought frameworks in structured sections — typewriter-effect interactive thought-typing reveals with glassmorphic-cards layered thinking 3. **Insight:** Featured thought in focused 640px with vintage intellectual-heritage markers and glassmorphic-cards immersive frosted depth 4. **Reflections:** Supporting thoughts in compact flow with vintage simplified markers 5. **Silence:** Footer as post-thought quiet — luxurious farewell with vintage settled heritage and refined closing ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.4rem-3.2rem, weight 700. Its soft geometric forms create the approachable quality of deep thinking made accessible through warm, inviting letterforms. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Nunito" at 1.1rem, weight 600 for thought highlights and conceptual emphasis. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Thought White:** #f4f0ec — warm thinking-room white for backgrounds - **Canvas Surface:** #e8e0d4 — warm canvas for panels - **Bauhaus Blue:** #2858b8 — primary blue for primary accent (logic) - **Bauhaus Orange:** #e87830 — complementary orange for secondary accent (intuition) - **Bauhaus Yellow:** #f0c020 — primary yellow for tertiary accent (insight) - **Deep Thought:** #181418 — deep dark for text - **Faded Canvas:** #887868 — warm faded for secondary text - **Border Bauhaus:** rgba(40,88,184,0.1) — blue tint border ## Imagery and Motifs **Glassmorphic-Cards Frosted Thinking:** Thought panels feature frosted glass effect — background: rgba(232,224,212,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(40,88,184,0.06). The glassmorphic treatment creates the layered quality of thoughts existing on transparent planes where deeper ideas are visible beneath surface conclusions. **Typewriter-Effect Thought Typing:** Key thoughts reveal character by character — each character at 50ms intervals with blinking cursor (500ms) in Bauhaus Orange. The typewriter creates the real-time quality of thoughts being formed and articulated as you watch, the visible process of thinking. **Vintage Thinking-Room Motifs:** Decorative elements evoking intellectual tradition — small geometric shapes (circles 8px, squares 6px, triangles 8px) in Bauhaus primary colors at 0.06-0.1 opacity. Thin double-rule dividers (2 lines, 1px, 4px gap). The vintage elements create the intellectual-salon quality of thinking practiced in spaces rich with tradition. **Complementary Bauhaus Atmosphere:** Background uses blue-orange complementary tension — radial-gradient(at 40% 30%, rgba(40,88,184,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(232,120,48,0.015), transparent 30%). The complementary creates the productive-tension quality of logical and intuitive thinking held in dynamic balance. **Primary Shape Markers:** Section indicators using Bauhaus primary shapes — blue circles (logic), orange squares (method), yellow triangles (insight). Each 10px with flat fill at 0.12 opacity. The shapes create the Bauhaus quality of complex concepts classified through essential geometric forms. ## Prompts for Implementation Build the page as a bauhaus thinking platform. Hero dominant: .thought-hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; } .thought-section { max-width: 860px; margin: 0 auto; padding: 80px 24px; } .thought-focus { max-width: 640px; margin: 0 auto; } Typewriter: .thought-type { overflow: hidden; white-space: nowrap; border-right: 2px solid #e87830; animation: type-thought 3s steps(40) forwards, blink-cursor 500ms step-end infinite; } @keyframes type-thought { from { width: 0; } to { width: 100%; } } @keyframes blink-cursor { 50% { border-color: transparent; } } Glassmorphic: .frosted-thought { background: rgba(232,224,212,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(40,88,184,0.06); border-radius: 12px; padding: 32px; } Shape markers: .logic-marker { width: 10px; height: 10px; border-radius: 50%; background: rgba(40,88,184,0.12); } .method-marker { width: 10px; height: 10px; background: rgba(232,120,48,0.12); } .insight-marker { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid rgba(240,192,32,0.12); } AVOID: Corporate thinking tools, standard brainstorming platforms, and minimal note-taking apps. Let Bauhaus geometric rigor and luxurious intellectual indulgence create a thinking platform where 생각 is constructed from primary shapes and primary colors, each thought a Bauhaus composition of essential intellectual form. ## Uniqueness Notes 1. **Bauhaus for thinking platform:** Geometric precision makes the act of thinking feel like constructing with essential forms in a prestigious design workshop. 2. **Hero-dominant as thesis statement:** Commanding hero creates the monumental quality of a single thought given full intellectual stage. 3. **Typewriter-effect as visible thinking:** Character-by-character reveals create the real-time quality of thoughts being formed before the viewer. 4. **Primary shapes as thought classification:** Circles, squares, triangles as markers create the Bauhaus quality of complex concepts reduced to essential geometric notation. 5. **Complementary tension as productive thinking:** Blue-orange opposition creates the dynamic quality of logic and intuition held in creative balance. **Seed/Style:** aesthetic: bauhaus, layout: hero-dominant, typography: rounded-sans, palette: complementary, patterns: typewriter-effect, imagery: glassmorphic-cards, motifs: vintage, tone: luxurious **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 bauhaus aesthetic, hero-dominant layout, complementary palette, glassmorphic-cards imagery, and luxurious tone.