# Design Language for eesugi.com ## Aesthetics and Tone eesugi.com draws its visual identity from the Japanese cedar tree (sugi, 杉) -- specifically the ancient cryptomeria groves of Togakushi and Yakushima, where thousand-year-old trunks rise in silent columns through persistent mist. The aesthetic is pure Muji philosophy rendered as a digital environment: an absolute conviction that beauty emerges from the removal of the unnecessary, that function IS decoration when executed with sufficient care, and that the space between objects carries more meaning than the objects themselves. This is not "minimalism" in the Western tech-startup sense -- no vast white voids punctuated by a single sans-serif headline and a gradient button. This is the minimalism of a hinoki wood bathhouse: warm, tactile, specific in its material choices, and deeply sensory despite its apparent simplicity. Every surface communicates through texture rather than ornament. The grain of wood. The weave of linen. The soft irregularity of handmade paper. These textures are not decorative; they are structural -- they tell you what kind of surface you are touching before your eyes fully register the content. The mood is zen-contemplative: the experience of sitting in a tatami room at dawn, watching the shadow of a cedar branch slowly cross the shoji screen. Time moves differently here. There is no urgency, no persuasion, no notification anxiety. The site breathes. It invites the visitor to slow their scrolling to match its rhythm -- and it rewards that slowness with moments of quiet visual discovery: a photograph that sharpens into focus just as you pause, a line of text that seems to have been waiting for you. The tone channels the philosophy of Naoto Fukasawa and Kenya Hara -- designers who believe that the highest form of design is one that disappears into use, that becomes so natural the user forgets it was designed at all. eesugi.com should feel inevitable, as though this is the only way a site about cedar trees could possibly look. ## Layout Motifs and Structure The layout employs a persistent **sidebar** architecture -- not the utilitarian sidebar of a documentation site or dashboard, but a contemplative vertical column that functions as a tokonoma (decorative alcove) running the full height of the page. The sidebar occupies the left 28% of the viewport on desktop, separated from the main content area by a hairline vertical rule rendered in #C4B8A3 at 0.5px width -- barely visible, more felt than seen, like the joint between two pieces of perfectly fitted wood. **Sidebar Behavior:** The sidebar is fixed in position. It contains the site identity (the word "eesugi" set vertically in Cormorant Garamond at 1.1rem, letter-spacing 0.35em, reading top-to-bottom), a single small square photograph of cedar bark texture (96px x 96px, softly rounded at 4px), and a minimal navigation of 3-4 single-word links stacked vertically with 2.5rem spacing between them. The sidebar background is #F7F3ED (warm rice paper), one shade lighter than the main content area background of #F0EBE3 (aged linen). This subtle difference in warmth creates a depth effect without shadows -- the sidebar feels like it sits on a slightly different plane, the way a shoji screen sits in front of a wall. **Main Content Area:** The remaining 72% is a single scrolling column of content, with generous horizontal padding (clamp(2rem, 8vw, 6rem)) that ensures text lines never exceed 62 characters in length -- the ideal reading measure for sustained, contemplative reading. Content blocks are separated by 8rem of vertical whitespace, a deliberate excess that creates the ma (negative space) central to the design philosophy. Each content block is self-contained: a photograph, a text passage, or a combination -- never more than two elements per block. **Vertical Rhythm:** All spacing derives from a base unit of 0.5rem (8px), scaled in multiples of the golden ratio: 0.5rem, 0.809rem, 1.309rem, 2.118rem, 3.427rem, 5.545rem, 8.972rem. This irrational scaling creates spacing that feels organic rather than mechanical -- the eye cannot quite predict the next interval, which produces a gentle sense of unfolding discovery. **Mobile Adaptation:** Below 768px, the sidebar collapses into a horizontal header bar (height: 56px) containing only the vertical identity mark rotated to horizontal and a hamburger icon rendered as three cedar-needle lines (slightly tapered, not uniform rectangles). The main content expands to full width with reduced padding (clamp(1.25rem, 5vw, 3rem)). **Grid Substructure:** Within the main content area, a hidden 6-column grid (column-gap: 1.5rem) provides alignment structure. Photographs span 4-6 columns. Text blocks span 4-5 columns, always left-aligned to column 1, never centered. Pull quotes or accent text occasionally span only 3 columns and are pushed to columns 3-5, creating asymmetric compositions that feel like a carefully considered ikebana arrangement rather than a rigid grid. ## Typography and Palette **Typography:** - **Primary Serif / Headlines:** "Cormorant Garamond" (Google Fonts) -- weight 300 (Light) and 500 (Medium). Cormorant Garamond's high contrast between thick and thin strokes evokes the precision of calligraphic brushwork while remaining fully readable at body sizes. Its slightly elongated proportions mirror the vertical thrust of cedar trunks. Used for all headlines at 2.25rem to 4rem, line-height 1.15, letter-spacing 0.01em. The Light weight (300) is used for large display text where the delicacy of the hairlines creates a sense of fragility and impermanence. Medium (500) is used for smaller headings where structural clarity matters more. Headlines are always set in sentence case -- never uppercase, which would feel like shouting in a temple. - **Body / Reading Text:** "Source Serif 4" (Google Fonts) -- weight 300 (Light) for body text, 400 (Regular) for emphasis. A humanist serif with a warm, slightly wide set that reads beautifully at 1.05rem / line-height 1.78 -- unusually generous leading that gives each line room to breathe, as though the text were written on paper with wide ruling. The humanist proportions (varying stroke widths, open apertures, gentle axis tilt) create a reading experience that feels handcrafted rather than typeset. Source Serif 4's optical sizing ensures beautiful rendering at both body and caption sizes. - **Accent / Navigation / Captions:** "Inter" (Google Fonts) -- weight 300 (Light) only. Used sparingly for navigation labels, image captions, and metadata. Set at 0.8rem, letter-spacing 0.08em, always in lowercase. Inter's neutrality at small sizes provides contrast against the serif warmth of Cormorant Garamond and Source Serif 4 without introducing visual noise. Its open letterforms maintain legibility at caption sizes. Inter is the only sans-serif on the page, and its restraint makes the serifs feel more intentional. **Palette:** The palette is derived from the natural coloring of Japanese cedar wood, forest moss, and the warm light that filters through cryptomeria canopy at golden hour. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (main) | Aged Linen | #F0EBE3 | The warmth of unbleached cotton paper, never stark white | | Background (sidebar) | Rice Paper | #F7F3ED | One degree lighter, like paper held up to diffused light | | Primary Text | Cedar Heartwood | #3A2E24 | Deep brown-black, never pure black -- pure black is artificial | | Secondary Text | Dried Bark | #7D6E5E | Warm gray-brown for captions, dates, metadata | | Accent | Moss Gold | #A89062 | The color of sunlight hitting wet moss on cedar bark | | Accent Warm | Amber Resin | #C49B5A | A richer gold for hover states and active links | | Divider / Rule | Weathered Silver | #C4B8A3 | The pale gray of cedar wood that has silvered in rain | | Shadow / Depth | Forest Floor | #1F1A14 | Used only in very low-opacity overlays (0.04-0.08) | **Color Usage Rules:** - Never use more than 3 colors on any single screen at any moment. The palette provides options for the designer; restraint in application is what creates the Muji feeling. - Accent colors (#A89062 and #C49B5A) appear only in interactive states and single-point emphasis -- never as background fills, never as large blocks. They are spices, not ingredients. - All text-on-background combinations exceed WCAG AA contrast ratios by design: #3A2E24 on #F0EBE3 = 10.2:1, #7D6E5E on #F0EBE3 = 4.9:1. ## Imagery and Motifs **Photography as Primary Imagery:** All imagery is photographic, drawn from a specific visual vocabulary: close-up and medium shots of Japanese cedar forests, bark textures, moss-covered stone, morning mist through tree canopies, rain on wooden surfaces, the cross-grain of freshly cut sugi timber, and the interior light of traditional wooden architecture. No people, no products, no diagrams, no icons. The photography functions as material texture rather than illustration -- each image is chosen for its tactile quality, its ability to make the viewer feel the roughness of bark or the dampness of moss through the screen. **Photography Treatment:** - All photographs are rendered with a subtle warm tone shift: shadows pushed toward #3A2E24, highlights toward #F0EBE3, creating a cohesive tonal envelope that makes every image feel like it belongs to the same forest, the same hour of light. - Images are displayed at reduced saturation (CSS filter: saturate(0.7) contrast(1.05)), which pulls the color palette of the photographs closer to the site's muted warm tones and prevents any single image from visually "shouting." - No image borders, no drop shadows, no rounded corners beyond 2px. Images sit flat against the background, separated only by whitespace. The edge of the image IS the frame. **Nature Motifs:** The primary decorative motif is the cedar needle pattern (sugi-mon, 杉紋) -- a traditional Japanese family crest motif consisting of three stylized cedar branches arranged in a circular formation. This motif appears: 1. As a very faint watermark in the sidebar background, rendered in #E8E3DA at 240px, opacity 0.15 -- visible only if you look for it, like a maker's mark pressed into paper. 2. As a subtle favicon and social sharing icon, simplified to a single three-pronged cedar sprig. 3. As a section divider between major content blocks: three tiny cedar needle marks (each 12px tall) arranged horizontally with 1rem spacing, rendered in #C4B8A3. **Texture Overlays:** A barely perceptible paper grain texture (CSS noise filter or SVG feTurbulence, frequency 0.65, amplitude 0.03) overlays the entire page at opacity 0.025, giving the flat background colors the micro-texture of handmade washi paper. This is felt rather than seen -- it prevents the digital flatness that would betray the organic intention. **No Icons:** The site uses no icons whatsoever. Navigation is text-only. Actions are described in words. Where other sites would use a hamburger icon, eesugi.com uses three thin tapered lines that reference cedar needles. Where other sites would use an arrow, eesugi.com uses the word "continue" in Inter Light. This absence of iconography is itself a design statement: in a world of universal symbols, choosing words is an act of specificity and care. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport composition: the sidebar visible on the left, the main content area showing only a single large photograph (spanning 5 of 6 grid columns) of cedar trunks disappearing into mist, shot from below looking upward. The photograph is initially slightly out of focus (CSS filter: blur(2px)) and at reduced opacity (0.7). As the page loads, over 1.8 seconds, the image sharpens to full clarity and brightens to full opacity -- a fade-reveal that mimics the experience of your eyes adjusting to the dim light of a forest interior. Below the image, a single line of text in Cormorant Garamond Light at 2rem reads in a subdued sentence, set in #7D6E5E. No other elements are visible. The visitor must scroll to discover more. **Fade-Reveal Animation System:** All content enters the viewport through a signature **fade-reveal** animation -- and ONLY fade-reveal. No slides, no bounces, no parallax displacement, no scale transforms. The animation vocabulary is deliberately limited to a single gesture: elements transition from invisible (opacity: 0, filter: blur(3px)) to visible (opacity: 1, filter: blur(0)) over 1200ms with an ease-out-cubic timing function. This limitation is not laziness; it is discipline. The fade-reveal mimics the way objects materialize out of morning mist -- first a suggestion of form, then gradual clarity. The blur component (3px, never more) adds a softness that pure opacity transitions lack. **Stagger Timing:** When multiple elements within a content block enter simultaneously, they stagger by 200ms intervals (first element at 0ms, second at 200ms, third at 400ms). The stagger creates a gentle cascade, like watching tree trunks emerge one by one as mist lifts. Maximum stagger depth is 4 elements -- beyond that, all remaining elements animate together to prevent the sequence from feeling mechanical. **Scroll-Trigger Behavior:** Elements begin their fade-reveal when they cross the 75% viewport threshold (i.e., when they are 25% visible from the bottom). This means elements begin materializing before the user has scrolled to them directly, creating a sense that the content is rising to meet the visitor's gaze. Intersection Observer with threshold 0.25, rootMargin "0px 0px -25% 0px". **Sidebar Interactions:** Navigation links in the sidebar respond to hover with a slow (600ms) color transition from #7D6E5E to #A89062 -- a warming, as though the text is being lit by a passing shaft of sunlight. No underlines appear; no background highlights. The active page link is permanently set to #A89062. On click, the sidebar link triggers a smooth-scroll to the corresponding content section, with the content blocks along the way briefly dimming (opacity dropping to 0.4 over 400ms, then returning to 1.0 over 800ms) to create a sense of passing through space. **Photography Hover Behavior:** When the cursor hovers over a photograph, a subtle warm vignette deepens at the edges (box-shadow: inset 0 0 80px rgba(31, 26, 20, 0.15), transition: 600ms). This mimics the way a physical print darkens at its edges when viewed at an angle. No zoom, no overlay, no caption reveal. Just a deepening of atmosphere. **Performance Notes:** - All animations use only `opacity` and `filter` properties, both of which can be GPU-composited without triggering layout recalculation. - The paper grain texture is applied via a single full-viewport SVG filter, not per-element. - Photographs should be served in WebP format with quality 80, lazy-loaded via `loading="lazy"` and `decoding="async"`. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, floating action buttons, notification badges, progress bars, countdown timers, popup modals, cookie banners with elaborate UI, newsletter signup forms that interrupt reading, social media share buttons, "back to top" buttons, breadcrumb navigation, tag clouds, hamburger menus that fly in from the side with elaborate transitions, hero sections with auto-playing video, gradient backgrounds, anything that blinks or pulses. ## Uniqueness Notes **Differentiators from other designs:** 1. **Single-Animation Vocabulary (Fade-Reveal Only):** While 98% of portfolio designs use scroll-triggered animations and 79% incorporate parallax effects, eesugi.com restricts itself to exactly one animation type: the blur-to-clear fade-reveal. No parallax. No slide-ins. No scale transforms. No elastic bounces. This radical self-limitation creates a meditative consistency that no other design in the portfolio achieves. Every visual transition speaks in the same quiet voice, and that uniformity itself becomes the design signature -- the way a traditional Japanese garden uses only stone, water, moss, and gravel, refusing the temptation of variety. 2. **Persistent Sidebar as Tokonoma:** Only 29% of designs use sidebar layouts, and those that do treat the sidebar as functional navigation or dashboard chrome. eesugi.com reimagines the sidebar as a contemplative vertical space -- a digital tokonoma that contains the site's identity and a single bark-texture photograph as its "scroll hanging." The sidebar is not navigational infrastructure; it is an aesthetic statement about the value of a dedicated space for stillness alongside the scrolling content. 3. **Zero Iconography Policy:** No other design in the portfolio completely eliminates icons. Every other site uses at least a hamburger menu icon, social media icons, or decorative icons. eesugi.com uses only text and photography. Navigation is word-based. The hamburger "icon" is three cedar-needle lines. This is a meaningful absence -- it forces every interactive element to be described in human language rather than abstracted into universal symbols, which aligns with the Muji philosophy that objects should explain themselves through their form. 4. **Cedar Needle Section Dividers (Sugi-Mon):** The three-pronged cedar needle divider motif is a site-specific cultural reference that no other design uses. It is drawn from the historical sugi-mon family crest tradition and functions as both section divider and identity mark. This is not a generic decorative element; it is a motif that could only belong to a site called "eesugi." 5. **Inverted Reading Rhythm:** Most portfolio sites present content in dense, information-rich blocks separated by minimal spacing. eesugi.com inverts this: sparse content blocks separated by extreme vertical whitespace (8rem between sections). The content-to-void ratio is approximately 1:3, meaning the page is mostly empty space. This makes reading feel like walking through a forest with widely spaced trees rather than navigating a dense urban block. **Documented Seed/Style:** ``` aesthetic: muji, layout: sidebar, typography: humanist, palette: warm, patterns: fade-reveal, imagery: photography, motifs: nature, tone: zen-contemplative ``` **Avoided Patterns from Frequency Analysis:** - Avoided `parallax` (79% frequency -- heavily overused) - Avoided `scroll-triggered` as a complex multi-gesture system (98% frequency) -- used only as simple Intersection Observer triggers for the single fade-reveal animation - Avoided `stagger` as a primary animation pattern (58% frequency) -- used only as secondary timing within fade-reveal sequences - Avoided `playful` tone (97% frequency) and `friendly` tone (97% frequency) -- replaced with zen-contemplative (4% frequency) - Avoided `centered` layout (99% frequency) -- used sidebar-anchored left-alignment instead - Avoided `mono` typography (99% frequency) -- no monospace fonts appear anywhere on the site - Avoided `vintage` motifs (73% frequency) -- used nature motifs instead, specifically cedar-forest imagery that is contemporary and specific rather than generically nostalgic