# Design Language for eesugi.com ## Aesthetics and Tone eesugi.com adopts a bauhaus aesthetic -- the rigorous, geometric, form-follows-function design philosophy of the Weimar Republic's most influential school. The domain name comes from Japanese "良すぎ" (eesugi, meaning "too good") -- an exclamation of overwhelming quality. Imagine a Bauhaus workshop where Japanese aesthetic sensibility meets German geometric precision: primary-colored geometric shapes arranged on white surfaces with mathematical exactness, each composition expressing that something is so well-made it transcends expectation. The visual language draws from Herbert Bayer's universal alphabet, Laszlo Moholy-Nagy's photographic experiments, and the color theory of Josef Albers, filtered through the Japanese concept of "yosugi" (excess of quality). Earth tones replace the traditional Bauhaus primary palette, grounding the geometric precision in organic warmth. The horizontal-scroll layout references the Japanese emaki scroll tradition. The tone is tech-tutorial -- educational, precise, instructive. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** composition -- content extends sideways like a scroll or filmstrip, each panel a precisely composed Bauhaus exercise. **Primary structure:** - **Title panel (100vw x 100vh):** A clean white background with "eesugi" rendered in geometric sans type at the center. Below, "良すぎ" in matching scale. A large geometric composition -- a circle, square, and triangle in earth tones -- sits to the right of the text. The three shapes represent the Bauhaus foundation. - **Concept panels (6 panels, each 100vw x 100vh):** Each panel is a Bauhaus-inspired composition exploring what makes something "too good." Panels use the horizontal-scroll container (flex-direction: row, overflow-x: scroll, scroll-snap-type: x mandatory). Each panel has a distinct geometric layout: one uses circles exclusively, another uses only right angles, another combines curves and lines. - **Collage panel (100vw x 100vh):** A horizontal-scrolling panel featuring a collage of overlapping geometric shapes (circles, rectangles, triangles) in earth tones at varying opacities, creating a layered Bauhaus poster composition. - **City-urban geometry panel (100vw x 100vh):** Bauhaus principles applied to city visualization -- building silhouettes as geometric rectangles, streets as lines, parks as circles. All in earth-tone palette on white. - **Final assessment panel (100vw x 100vh):** A concluding panel where "良すぎ" is rendered at maximum size with a blur-focus effect (sharp at center, blurred at edges). A horizontal scroll progress bar at bottom shows completion. **Spacing philosophy:** Each panel is a self-contained composition with strict geometric spacing. Elements are positioned on an invisible 12-column grid. Margins are precisely 8vw on all sides. The horizontal scroll provides rhythm through panel transitions. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with Bauhaus-era character. Weight 700. Size clamp(36px, 6vw, 80px). Letter-spacing: 0.02em. - **Body text:** "DM Sans" (Google Fonts) -- clean geometric body text. Weight 400. Size clamp(15px, 1.1vw, 17px). Line-height: 1.75. - **Japanese text:** "Noto Sans JP" (Google Fonts) -- for Japanese characters. Weight 700 for display, 400 for body. **Palette:** - **Canvas White** `#FAFAFA` -- primary background - **Ink Dark** `#1A1A2A` -- primary text - **Earth Terracotta** `#B86840` -- primary shape color (replacing Bauhaus red) - **Earth Ochre** `#C8A040` -- secondary shape color (replacing Bauhaus yellow) - **Earth Sage** `#4A7B5A` -- tertiary shape color (replacing Bauhaus blue) - **Warm Grey** `#8B8B80` -- structural lines and secondary elements ## Imagery and Motifs **Core visual motifs:** - **Bauhaus geometric compositions:** Each panel contains a carefully balanced arrangement of circles (border-radius: 50%), squares, and triangles (clip-path: polygon()) in earth-tone fills. These compositions follow Bauhaus principles: asymmetric balance, geometric purity, functional beauty. - **Collage layering:** Overlapping semi-transparent shapes (opacity 0.3-0.8) creating Bauhaus-poster-style layered compositions. The overlap zones produce new colors through blending. - **City-urban geometric silhouettes:** Simplified building forms as CSS rectangles of varying heights and widths, arranged in skyline formations. Streets as thin horizontal lines. Parks as circles. All in earth-tone palette. - **Blur-focus typography:** The final panel's "良すぎ" uses CSS filter: blur() applied via a gradient mask -- sharp at center, progressively blurred toward edges. This creates a focus-pull effect that draws the eye to the kanji. - **Horizontal scroll progress indicator:** A thin bar (2px, Earth Terracotta) at the bottom of the viewport that fills proportionally to horizontal scroll position. Simple, Bauhaus-functional. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like scrolling through a Bauhaus portfolio that celebrates Japanese aesthetic excellence. Each panel is a composition exercise. The horizontal movement creates a gallery-walk experience. **Opening animation sequence:** - Frame 0-300ms: Canvas White background. - Frame 300-900ms: The three Bauhaus shapes (circle, square, triangle) scale in from 0 to full size, staggered 200ms apart, each in a different earth tone. - Frame 900-1400ms: "eesugi" types in geometric sans (character reveal). - Frame 1400-1800ms: "良すぎ" fades in below. - Frame 1800-2400ms: The scroll progress bar appears at bottom. A small arrow indicator at right edge bounces horizontally (spring physics) to suggest horizontal scrolling. **Scroll behavior:** Horizontal scroll-snap ensures clean panel-to-panel transitions. The progress bar fills proportionally. Geometric shapes in each panel enter with scale animations (0 to 1) when their panel becomes active. The collage panel's overlapping shapes fade in sequentially (stagger 100ms). **Interaction details:** - Geometric shapes rotate slightly on hover (15deg, 200ms transition). - Panels respond to horizontal scroll with subtle parallax (background elements at 0.8x speed). - The "良すぎ" blur-focus effect intensifies on hover (blur radius increases at edges). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus-Japanese aesthetic fusion:** Combining German geometric design principles with Japanese aesthetic concepts ("too good") creates a cross-cultural design language that is both precise and emotionally resonant. 2. **Earth-tone Bauhaus palette:** Replacing the traditional primary-color Bauhaus palette with earth tones (terracotta, ochre, sage) creates a warmer, more organic version of geometric modernism unique to this design. 3. **Horizontal scroll as gallery walk:** The horizontal-scrolling panels create a physical gallery experience where each Bauhaus composition is encountered one at a time, like walking through an exhibition. 4. **City geometry as Bauhaus exercise:** Rendering urban silhouettes as strict geometric rectangles on a grid applies Bauhaus principles to urban visualization, creating a unique intersection of design philosophy and city planning. **Chosen seed/style:** aesthetic: bauhaus, layout: horizontal-scroll, typography: geometric-sans, palette: earth-tones, patterns: blur-focus, imagery: collage, motifs: city-urban, tone: tech-tutorial **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used horizontal-scroll (5%) layout, earth-tones (1%) palette, and city-urban (1%) motifs -- all heavily underused.