# Design Language for haru.club ## Aesthetics and Tone haru.club embodies the feeling of a precision-engineered architectural model displayed in a white-walled gallery where every object casts a perfect 30-degree shadow. The aesthetic is **isometric realism** -- the world as seen from the omniscient, slightly elevated vantage point of an axonometric projection, where depth is conveyed through geometry rather than perspective vanishing points, and where every surface has the tactile clarity of a 3D-printed prototype fresh off the build plate. "Haru" means spring in Japanese, and the site channels the specific moment when structured urban geometry -- building facades, park benches, crosswalk grids -- is interrupted by the soft intrusion of cherry blossoms and new growth. This is not whimsical nature; it is nature as geometric event, rendered in clean polygonal forms with warm, sunlit surfaces. The tone is **professional** in the truest sense: confident expertise expressed through restraint, the kind of authority that comes from showing rather than telling. Think of the presentation slides of a world-class architecture firm -- every element placed with intention, nothing decorative for its own sake, yet the cumulative effect is deeply beautiful. The mood sits at the intersection of Kengo Kuma's material warmth and the clean isometric worlds of Monument Valley, with the professional gravitas of a Bloomberg terminal redesigned by Dieter Rams. ## Layout Motifs and Structure The layout follows a **bento-box** grid system -- a modular, rectangular grid inspired by the compartmentalized structure of a Japanese bento, where each cell contains a self-sufficient unit of content at a distinct size and proportion, yet all cells share a cohesive visual grammar. The grid is built on a base unit of 80px, with cells occupying 1x1, 2x1, 1x2, 2x2, and occasionally 3x2 proportions. Gutters are 12px -- tight enough to create the sense of a unified tray, wide enough to delineate compartments. **Grid Architecture:** - **Primary Bento (Hero):** The opening viewport presents a 3-column by 2-row bento arrangement. The largest cell (2x2, top-left) contains the hero isometric scene -- a 3D-rendered cityscape fragment where geometric cherry blossom trees grow between low-poly buildings. The remaining four cells (1x1 each) contain: the site name in geometric sans type, a rotating isometric cube with spring-themed textures on each face, an ambient weather data readout (temperature, humidity, UV index rendered as isometric bar charts), and a minimal navigation glyph set (four isometric arrow icons pointing to site sections). - **Content Bento Rows:** As the user scrolls, successive bento rows slide into view, each a self-contained 3-column or 4-column arrangement. No two consecutive rows share the same cell proportions -- the rhythm alternates between 2x1 + 1x1 + 1x1, then 1x1 + 1x1 + 2x1, then a full 3x1 panoramic cell, creating visual syncopation within the rigid grid. Each cell is an isometric vignette: a rendered object, a typographic statement, a data visualization, or a pattern tile. - **Depth Stacking:** Within individual bento cells, content layers at three isometric planes -- background (the cell's base color), mid-ground (the primary content object rendered with a subtle drop shadow at 30 degrees), and foreground (a thin border or accent element that appears to float 4px above the surface via `box-shadow: 4px 4px 0px`). This creates a tangible sense of physical compartments with objects resting inside them. - **No Centered Axis:** The bento grid is never centered in the viewport. It sits with a 5vw left margin and a 2vw right margin on desktop, creating an off-center gravitational pull that prevents the rigid grid from feeling static. On mobile, the bento collapses to a 2-column grid with the same asymmetric margin bias (3vw left, 1vw right). - **Navigation:** There is no traditional navigation bar. Instead, a persistent small bento cell (48px x 48px) floats in the bottom-right corner, containing an isometric cube icon. Clicking it expands into a 2x2 bento overlay showing four section links as isometric tiles. The cube rotates on hover using CSS `transform: rotateX(-15deg) rotateY(15deg)`. ## Typography and Palette **Typography:** - **Display / Headlines:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with a perfectly round 'o', a high x-height, and elegant, almost architectural letter proportions. Its geometric construction mirrors the isometric grid system -- letters feel like they were drawn with a T-square and compass. Used at 2.8rem-5rem for section titles, weight 700, with `letter-spacing: 0.04em` and `text-transform: uppercase`. The uppercase treatment is deliberate here: geometric sans at large scale in uppercase creates the effect of architectural lettering on a blueprint. - **Body / Reading Text:** "DM Sans" (Google Fonts) -- a low-contrast, optically balanced geometric sans-serif that maintains excellent readability at 1rem-1.125rem. Weight 400 for body, 500 for emphasis. Line-height: 1.65. The geometric proportions of DM Sans harmonize with Josefin Sans without being identical, creating typographic hierarchy through subtle proportional differences rather than dramatic contrast. - **Data / Labels:** "Space Mono" (Google Fonts) -- used exclusively for numerical data, chart labels, timestamps, and technical annotations within bento cells. Weight 400, size 0.75rem-0.875rem. The monospace rhythm of Space Mono provides a technical counterpoint to the geometric sans pairing and visually codes any text set in it as "data" rather than "narrative." - **Typographic Rules:** Headlines are always aligned to the top-left corner of their bento cell, never centered. Body text uses a maximum line length of 42ch (intentionally short -- bento cells are not wide reading columns). Paragraphs are separated by 1.5em, never by indentation. No italics anywhere -- emphasis is conveyed by weight change (400 to 600) or color shift. **Palette:** The palette is warm but architectural -- the warmth of sunlit concrete and cedar, not the warmth of candlelight or autumn leaves. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Base Surface | Warm Concrete | `#F2EDE8` | The bento tray background -- a warm off-white with a faint yellowish undertone, like freshly poured light concrete | | Cell Background | Soft Linen | `#E8E0D4` | Individual bento cell fill -- slightly warmer than the base, creating subtle compartment definition | | Primary Text | Charcoal Warm | `#2C2824` | Near-black with warm brown undertone, used for all headlines and body text | | Accent Primary | Terracotta Fire | `#C4583A` | A burnt terracotta-orange -- the hero accent color, used for interactive elements, hover states, and key data points | | Accent Secondary | Spring Moss | `#6B8F5E` | A muted sage-green evoking spring foliage, used for secondary data, success states, and decorative geometric elements | | Shadow / Depth | Warm Shadow | `#B8AFA5` | The isometric shadow color -- not a transparent black, but a solid warm gray that reinforces the 3D paper-model aesthetic | | Highlight | Sakura Blush | `#E8B4A2` | A soft peach-pink inspired by cherry blossom petals, used sparingly for hover-state cell backgrounds and featured content indicators | | Dark Cell | Cedar Dark | `#3D322A` | A warm dark brown for occasional inverted bento cells (light text on dark), providing rhythm breaks in the grid | **Color Application Rules:** - No gradients anywhere. All surfaces are flat solid colors. The depth illusion comes entirely from geometric shadow placement, not from color blending. - The terracotta accent `#C4583A` is never used for backgrounds -- only for text accents, borders, and small geometric indicator shapes. - Dark cells (`#3D322A`) appear at most once per bento row, preventing the grid from becoming too heavy. ## Imagery and Motifs **3D-Rendered Isometric Objects:** The primary imagery consists of low-poly 3D renders presented in strict isometric projection (no perspective distortion). Every rendered object sits at a consistent 30-degree isometric angle, with shadows cast uniformly to the bottom-right at 45 degrees. The rendering style is deliberately un-photorealistic -- surfaces are flat-shaded with subtle ambient occlusion at edges, colors pulled directly from the site palette. Objects look like painted wooden architectural models or high-quality 3D-printed prototypes. Specific object categories: 1. **Architectural Fragments:** Miniature isometric buildings, facades, staircases, bridges, and urban furniture (benches, lampposts, crosswalks). Each fragment is a 1-3 story structure, detailed enough to read as architecture but abstracted enough to feel like a toy. Windows are simple geometric cutouts. Rooftops are flat or single-pitch. 2. **Botanical Geometry:** Cherry blossom trees rendered as geometric forms -- trunks are hexagonal prisms, canopies are clusters of low-poly spheres in sakura blush (#E8B4A2) and spring moss (#6B8F5E). Individual blossoms are tiny icosahedrons. These botanical objects grow in, around, and on top of the architectural fragments, creating scenes where nature and structure intertwine geometrically. 3. **Data Totems:** Abstract isometric sculptures that encode information -- stacked cubes representing data hierarchies, extruded bar charts that look like miniature cityscapes, pie-chart cylinders with colored segments. These function as both decoration and information display, blurring the line between ornament and data visualization. 4. **Spring Artifacts:** Isometric renderings of seasonal objects: a bento box (self-referential), a ceramic tea cup with geometric steam rising as stacked translucent hexagons, a folded paper crane, a wooden geta sandal, a hanami picnic blanket with geometric food items. Each object is a standalone vignette occupying a single bento cell. **Geometric Shape Motifs:** - **Isometric Cubes:** The fundamental motif. Small isometric cubes (16px-24px) appear as bullet points, list markers, and section dividers. They use three faces in three shades of the warm palette to reinforce depth. - **Hexagonal Grid Underlays:** Certain bento cells feature a faint hexagonal grid pattern (#E8E0D4 on #F2EDE8) as a background texture, suggesting the isometric construction grid beneath the surface. - **Triangular Corner Accents:** Each bento cell has a small isometric triangle (8px) in the top-right corner, colored in terracotta (#C4583A), functioning as a visual anchor and consistent cell identifier. These triangles are pure CSS (borders). - **Shadow Shapes:** Every major element casts a geometric shadow rendered as a separate shape (not a CSS blur shadow) -- a parallelogram in #B8AFA5 offset to the bottom-right. This hard-edged shadow treatment is the defining visual signature of the site. ## Prompts for Implementation **Full-Screen Isometric World Entry:** The site opens to a full-viewport bento grid. There is no hero banner, no tagline fading in, no scroll prompt. The bento grid is simply *there*, fully populated, like opening a box and finding every compartment filled. The hero bento cell (2x2) contains a CSS/SVG isometric scene that is already in motion: geometric cherry blossom petals (tiny CSS triangles in #E8B4A2) drift slowly downward using CSS `@keyframes` with randomized delays, falling past the isometric buildings and settling on surfaces. This ambient motion is the only animation on load -- no entrance transitions, no fade-ins. The scene exists; the user arrives into it. **Tilt-3D Interaction Pattern:** Every bento cell responds to cursor proximity with a **tilt-3d** transform. As the mouse moves across a cell, the entire cell tilts on its X and Y axes (maximum 8 degrees) using `transform: perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))`, creating the illusion that each bento compartment is a physical card that can be tilted to catch light from different angles. The shadow parallelogram beneath each cell shifts in the opposite direction of the tilt, reinforcing the physicality. This is implemented via a lightweight JavaScript mousemove handler that calculates tilt angles based on cursor position relative to cell center. On mobile, this effect is driven by device gyroscope data via the DeviceOrientationEvent API, so tilting the phone tilts the bento cells. **Bento Cell Entrance Choreography:** As bento rows scroll into view (detected via IntersectionObserver at 0.15 threshold), cells within each row do NOT fade in or slide in. Instead, they perform a **lift** animation: each cell starts at `translateY(12px)` with `opacity: 0.7` and animates to `translateY(0)` with `opacity: 1` over 400ms with `ease-out` timing. Cells within a row are staggered by 80ms each (leftmost first), creating a domino-like lift sequence that suggests physical objects being placed into the bento tray one at a time. The geometric shadows animate in sync, growing from zero offset to their full parallelogram shape. **Isometric Data Visualizations:** Data within bento cells is visualized as isometric 3D charts. Bar charts are rendered as extruded isometric rectangles (three visible faces, three shades). Pie charts become isometric cylinders with colored segments. Line charts are rendered as isometric terrain -- a flat plane with extruded peaks, viewed from the standard 30-degree angle. All chart rendering is done in SVG with hand-calculated isometric coordinates (no 3D library). Hover over a data totem triggers a subtle tilt-3d on the containing cell, plus a tooltip rendered as a small isometric speech bubble (a cube with a triangular pointer). **Scroll Behavior:** Scrolling is vertical, continuous, and unsnapped. No scroll-hijacking, no parallax layers, no horizontal diversions. The bento rows simply flow upward as the user scrolls, with each row triggering its staggered lift animation on entry. The consistent vertical rhythm and modular grid create a meditative, catalog-like browsing experience -- like scrolling through a curated collection of isometric dioramas. **Micro-Interactions:** - **Cell Hover:** Beyond the tilt-3d, hovering a cell shifts its background from #E8E0D4 to #E8B4A2 (sakura blush) over 200ms, creating a warm glow effect. - **Link Hover:** Text links are underlined with a 2px solid line in #C4583A. On hover, the underline animates to a geometric zigzag pattern (CSS `border-image` with an SVG zigzag). - **Cube Bullet Animation:** When isometric cube bullet points scroll into view, they perform a single 90-degree rotation around their vertical axis over 300ms, revealing a different colored face, then settle. - **Navigation Cube:** The persistent bottom-right navigation cube performs a slow, continuous rotation (`@keyframes` 20s infinite) around all three axes when idle. On hover, it snaps to a flat face-on orientation showing four section icons. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Gradient backgrounds, glassmorphism, blur effects - Centered single-column layouts - Parallax scroll effects - Full-bleed photographic hero images - Generic tech-startup visual language - Rounded corners on bento cells (all corners are sharp 0px radius, reinforcing the architectural precision) ## Uniqueness Notes **Differentiators from other designs:** 1. **Isometric Bento Fusion:** No other design in the portfolio combines an isometric visual language with a bento-box layout system. The isometric aesthetic appears at only 5% frequency and is typically paired with technical documentation layouts. The bento-box layout appears at only 2% frequency. Their combination -- geometric 3D objects arranged in modular compartments -- creates a visual metaphor unique to this site: the bento tray as display cabinet for miniature isometric worlds. 2. **Hard-Edged Geometric Shadows:** While many designs use soft CSS box-shadows or no shadows at all, haru.club employs solid parallelogram shadows rendered as separate geometric shapes. This technique (each shadow is a dedicated element with background-color #B8AFA5, skewed via CSS transform) has zero precedent in the existing portfolio and gives the site its signature paper-model / architectural-maquette quality. 3. **Tilt-3D as Primary Interaction:** The tilt-3d pattern appears at only 3% frequency in the portfolio and is never the primary interaction pattern. Here, every bento cell responds to cursor/gyroscope input with perspective-aware tilting, making the entire page feel like a physical surface the user can manipulate. This is the dominant interaction, not a garnish. 4. **3D Renders as Geometric Spring Scenes:** The 3d-render imagery category is virtually unused in the portfolio. Most sites use minimal imagery or photography. haru.club's commitment to fully isometric, low-poly 3D scenes depicting springtime urban-botanical vignettes is wholly original. The deliberate un-photorealism (flat-shaded, palette-constrained) keeps the renders feeling designed rather than generated. 5. **No Gradients, No Blur, No Rounded Corners:** In a portfolio where gradient palettes appear at 90% frequency, haru.club uses exclusively flat solid colors. In a world of `border-radius: 12px` and `backdrop-filter: blur()`, this site has sharp corners and crisp edges throughout. This anti-soft aesthetic is rare and immediately distinctive. **Documented Seed/Style:** `aesthetic: isometric, layout: bento-box, typography: geometric-sans, palette: warm, patterns: tilt-3d, imagery: 3d-render, motifs: geometric-shapes, tone: professional` **Avoided Overused Patterns (from frequency analysis):** - playful aesthetic (97%) -- replaced with professional isometric precision - centered layout (99%) -- replaced with asymmetric bento-box grid - mono typography (99%) -- Space Mono used only for data labels, not primary type - scroll-triggered as primary pattern (96%) -- tilt-3d is primary, scroll-triggered is secondary - minimal imagery (95%) -- replaced with detailed 3d-render isometric scenes - vintage motifs (80%) -- replaced with geometric-shapes motifs - friendly tone (97%) -- replaced with professional tone - gradient palette (90%) -- explicitly avoided; all surfaces are flat solid colors - parallax patterns (80%) -- explicitly avoided; no parallax layering