# Design Language for hwakryul.com ## Aesthetics and Tone hwakryul.com inhabits the visual language of a precision-engineered miniature world -- the kind of thing you might discover inside a luxury architect's scale model, where every building is a perfect geometric solid, every shadow falls at exactly 30 degrees, and the entire universe operates on a strict isometric grid where nothing is ever quite at eye level. The aesthetic is **isometric diorama**: a world viewed from the god-angle, where three-dimensional space is projected onto two dimensions without perspective convergence, creating an uncanny sense of order that is simultaneously mathematical and deeply tactile. The tone is **professional** in the way that a master watchmaker is professional -- not the cold professionalism of corporate slide decks, but the quiet authority of someone who has spent decades perfecting something most people never notice. There is no showmanship here, no exclamation marks, no "hey there!" casualness. Every element exists because it serves the spatial logic of the isometric world. The site communicates competence through the density of its craft, not through claims about that craft. The mood draws from the intersection of Korean precision engineering (hwakryul -- "probability" in Korean -- carries the implication of calculated certainty), architectural axonometric drawings from the Bauhaus era, and the contemporary 3D-rendered isometric illustrations found in premium fintech and developer tool products. But where those products use isometric as decoration, hwakryul.com uses it as the fundamental organizing principle of every pixel on screen. Color warmth comes not from the typical amber-and-cream web palette but from the specific warmth of rendered materials: terracotta clay, brushed copper, warm concrete, and the golden-hour light that falls across geometric solids at 5:47 PM. This is architectural warmth, not cozy warmth. ## Layout Motifs and Structure The layout follows a **bento-box** grid system -- a matrix of rectangular cells of varying proportions that tile together without gaps, like the compartments of a Japanese bento or the facade of a Metabolist apartment building. The bento grid is not the equal-cell grid of a dashboard; cells vary dramatically in aspect ratio (from 1:1 squares to 3:1 wide panoramic strips to 1:4 tall narrow columns), creating a composition that feels like a curated arrangement of display cases in a design museum. **Grid Specifications:** - The primary bento grid operates on a 12-column, 8-row matrix at max-width 1280px - Cells snap to a 4px baseline grid, with 12px gutters between cells - The minimum cell size is 2 columns x 2 rows; the maximum is 8 columns x 6 rows - Each cell has a 2px solid border in #3D3530 (warm graphite), giving the entire layout the appearance of a technical blueprint or circuit diagram - Cell corners are radiused at exactly 6px -- not rounded enough to feel soft, but enough to avoid the clinical sharpness of pure rectangles **Spatial Logic:** The bento grid is not flat. Each cell exists at a slightly different isometric depth, achieved through subtle box-shadows that simulate the cells being physical objects stacked on a surface. The shadow direction is consistent: offset 4px right, 4px down, with a 0px blur and color #2A2420 at 40% opacity. This hard-edged shadow reinforces the isometric illusion (soft shadows would break the geometric precision). **Scroll Behavior:** The page is divided into 3-4 bento "trays" that stack vertically, each occupying 90-110vh. As the user scrolls between trays, a **tilt-3d** transition rotates the entire outgoing tray on the X-axis by 8 degrees while the incoming tray rotates in from -8 degrees, creating the sensation of flipping through physical display cases. Each tray has its own bento configuration -- no two trays share the same cell arrangement. **No Navigation Bar:** There is no persistent navigation element. The domain name "hwakryul.com" appears once, rendered as an isometric logotype in the top-left cell of the first bento tray. Wayfinding is handled through the spatial hierarchy of the bento cells themselves -- larger cells contain primary content, smaller cells contain supporting details, and the arrangement guides the eye in a Z-pattern within each tray. ## Typography and Palette **Typography:** - **Display / Headlines:** "Outfit" (Google Fonts) -- weights 600 and 700. Outfit is a geometric sans-serif with perfectly circular bowls, mathematically consistent stroke widths, and an engineering-drawing quality that aligns with the isometric precision of the visual system. Used at 2.8rem-5rem for bento cell headlines. Letter-spacing is set to -0.02em (slightly tightened) for a dense, architectural feel. Line-height is 1.05 for display sizes, creating compact text blocks that fit tightly within bento cells like labels on a schematic. - **Body / Secondary Text:** "DM Sans" (Google Fonts) -- weight 400 for body, 500 for emphasis. DM Sans shares the geometric DNA of Outfit but with slightly more open apertures and a touch more humanist warmth in its curves, making it legible at smaller sizes without losing the geometric-sans family resemblance. Used at 0.9rem-1.1rem for body text within bento cells. Line-height is 1.55 for comfortable reading in the confined spaces of smaller cells. - **Data / Labels / Metadata:** "Space Mono" (Google Fonts) -- weight 400. Used exclusively for numerical data, labels, coordinates, and metadata that appears within the isometric illustrations. Set at 0.72rem-0.85rem with letter-spacing 0.06em. Space Mono's fixed-width characters align naturally with the grid system and reinforce the technical precision of the isometric world. - **Typographic Rules:** All headlines are set in sentence case. No italics anywhere on the site -- italics introduce a diagonal stress that conflicts with the strict vertical/horizontal/30-degree geometry of the isometric system. Bold is used sparingly and only for Outfit at weight 700. Text never breaks out of its bento cell boundary; overflow is handled by reducing font size, never by allowing bleed. **Palette:** The palette is warm but architectural -- the warmth of built materials under controlled lighting, not the warmth of sunsets or autumn leaves. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Warm Concrete | `#F0EBE3` | The color of polished concrete under warm tungsten light. Used for the page background and the "floor" of the isometric world. | | Background (cell) | Parchment Clay | `#E8E0D4` | Slightly darker warm tone for bento cell backgrounds, creating depth against the primary background. | | Primary Accent | Fired Terracotta | `#C2704E` | The burnt orange-red of kiln-fired terracotta. Used for primary interactive elements, active states, and the most important isometric objects. | | Secondary Accent | Brushed Copper | `#B8936A` | Warm metallic gold-brown. Used for secondary highlights, borders on active cells, and the rendered material of isometric connectors and pipes. | | Text Primary | Warm Graphite | `#3D3530` | Near-black with a warm brown undertone. All primary text. Never pure #000000. | | Text Secondary | Clay Dust | `#7A6E63` | Muted warm brown for secondary text, labels, and metadata. | | Surface Dark | Charred Oak | `#2A2420` | Deep warm brown-black for the darkest isometric surfaces (shadow faces of 3D objects). | | Highlight | Kiln Glow | `#E89B5E` | Warm amber for hover states, active borders, and the "lit" faces of isometric objects that face the light source. | **Color Application Rules:** - The isometric illustrations use a strict three-tone shading system: each geometric solid has a top face (Kiln Glow #E89B5E or Parchment Clay #E8E0D4), a left face (Brushed Copper #B8936A or Clay Dust #7A6E63), and a right face (Charred Oak #2A2420 or Warm Graphite #3D3530). This three-face rule is never violated -- it is what makes the isometric objects read as three-dimensional. - Fired Terracotta (#C2704E) is reserved for the single most important element in each bento tray. It functions like a red pin on a map -- it draws the eye to the focal point. - No gradients. The isometric system depends on flat-shaded faces. Gradients would introduce implied curvature that contradicts the geometric precision. ## Imagery and Motifs **3D-Rendered Isometric Illustrations:** The primary imagery mode is **3D-render** in a strict isometric projection. Every visual element on the site -- icons, diagrams, decorative elements, hero illustrations -- is rendered as an isometric object or scene. These are not the playful, rounded isometric illustrations common in SaaS marketing; they are precise, architectural, and slightly austere, closer to the isometric technical drawings in a mechanical engineering textbook than to the friendly isometric cities of app landing pages. **Specific Isometric Elements:** 1. **Geometric Solids as Data Containers:** Each bento cell that contains a concept or data point features an isometric geometric solid -- cubes, hexagonal prisms, triangular prisms, cylinders -- rendered in the three-tone shading system. The solid "contains" the information: text appears to float above or beside the solid, and the solid's size correlates with the importance of the content. A primary concept gets a large cube occupying 60% of its cell; a supporting detail gets a small hexagonal prism tucked into a corner. 2. **Isometric Connectors:** Between bento cells, thin lines (1.5px, color #B8936A) trace isometric paths -- lines that travel only along the three isometric axes (horizontal, 30-degree-up-right, 30-degree-up-left). These connectors link related concepts across cells, creating a visual network diagram that overlays the bento grid. Connectors have small diamond-shaped nodes at their endpoints (4px x 4px, rotated 45 degrees, filled with #C2704E). 3. **Exploded-View Diagrams:** At key narrative moments, an isometric object "explodes" -- its component parts separate along the isometric axes, revealing internal structure. This is achieved through CSS transforms: each component is a separate div with a transition that increases its translate3d offset on scroll. The explosion is controlled by scroll position (via IntersectionObserver), so the user can "scrub" through the explosion by scrolling slowly. 4. **Isometric Grid Floor:** The background of each bento tray features a subtle isometric grid -- thin lines (#3D3530 at 8% opacity) running at 30-degree angles, creating a diamond-pattern floor that all objects appear to sit on. This grid is generated via CSS using repeating-linear-gradient at 30deg and 150deg angles with 48px spacing. **Geometric Shape Motifs:** Geometric shapes are used as a systematic visual vocabulary throughout the site: - **Cubes** = core concepts / primary content - **Hexagonal prisms** = supporting details / metadata - **Triangular prisms** = directional elements / calls to action (the triangle points in the direction of the next content) - **Cylinders** = data points / numerical values - **Spheres** = (deliberately absent -- spheres have no flat faces and violate the faceted geometric language) **CSS-Only Isometric Objects:** All isometric shapes are built with pure CSS using transform: rotateX(54.7deg) rotateZ(45deg) applied to nested divs, with each face as a separate element using skew and translate transforms. No external 3D libraries or WebGL -- the constraint of CSS-only construction reinforces the precision and forces every object to be reducible to flat, colored planes. ## Prompts for Implementation **Full-Screen Narrative Architecture:** The site is experienced as a descent through a stack of bento display trays, each revealing a different facet of the isometric world. There is no traditional page structure -- no hero section, no feature grid, no testimonials, no footer. The entire experience is a curated exhibition of geometric precision, where each bento tray tells a chapter of a spatial story. **The Opening Tray (Tray 0):** On page load, the viewport displays a single large bento tray with a 3x3 arrangement of cells. The center cell is the largest (6 columns x 4 rows) and contains only the domain name "hwakryul.com" rendered in Outfit 700 at 4.5rem, positioned in the lower-third of the cell, with an isometric cube (CSS-rendered, 120px per edge) sitting above the text like a monument on a pedestal. The cube rotates slowly (one full Y-axis rotation every 40 seconds) using a CSS animation with `transform-style: preserve-3d`. The surrounding eight cells are smaller and contain isometric geometric shapes in various configurations, each subtly animating (translating 2-3px along an isometric axis over 6-8 second loops) to create a sense of quiet mechanical life. **Tray Transitions:** As the user scrolls past each bento tray, the **tilt-3d** effect activates: the current tray tilts backward (rotateX: 8deg, opacity fading from 1 to 0.3 over 200px of scroll) while the next tray tilts forward into view (rotateX: -8deg to 0deg, opacity 0.3 to 1). The rotation pivot point is the bottom edge of each tray (transform-origin: center bottom), creating the sensation of trays flipping like pages in a ring binder. The tilt is driven by scroll position via a lightweight scroll listener (no heavy animation libraries -- use requestAnimationFrame and CSS custom properties for performance). **Bento Cell Interactions:** Each bento cell responds to hover with a **tilt-3d** micro-interaction: the cell tilts toward the cursor position (maximum 4 degrees on any axis), implemented via a mousemove listener that calculates the cursor's position relative to the cell center and applies a rotateX/rotateY transform. The tilt is smoothed with `transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)`. On hover, the cell's box-shadow deepens (from 4px offset to 8px offset) and the border color transitions from #3D3530 to #B8936A over 0.25s. **Isometric Object Assembly Animation:** In the second bento tray, the geometric solids in each cell start in a "flat" state (all faces collapsed to a single plane) and assemble into their three-dimensional forms as the tray scrolls into view. This assembly animation uses CSS keyframes: each face of the isometric object transitions from `rotateX(0) rotateY(0) translateZ(0)` to its final isometric position over 800ms with a staggered delay (face 1 at 0ms, face 2 at 150ms, face 3 at 300ms). The easing is `cubic-bezier(0.34, 1.56, 0.64, 1)` -- a spring curve that gives each face a slight overshoot before settling. **Connector Drawing Animation:** The isometric connector lines between cells are drawn progressively using `stroke-dasharray` and `stroke-dashoffset` on SVG path elements. As the user scrolls through a tray, the connectors draw themselves from source cell to destination cell over 600ms, with the diamond-shaped endpoint nodes scaling from 0 to 1 at the moment the line reaches them. The drawing direction follows the reading order (top-left to bottom-right within each tray). **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Rounded, friendly, SaaS-style isometric illustrations (maintain architectural austerity) - Any perspective projection -- all 3D must be strict isometric (no vanishing points) - Parallax scrolling (replaced entirely by tilt-3d transitions) - Hamburger menus or sticky navigation - Gradient backgrounds or gradient fills on any element - Photography or photographic textures - Soft shadows (all shadows are hard-edged to match isometric precision) ## Uniqueness Notes **Differentiators from other designs:** 1. **CSS-Only Isometric Construction System:** No other design in the portfolio builds its entire visual language from CSS-constructed isometric solids. While isometric appears at 5% frequency in the aesthetic category, those instances use isometric as a decorative accent. hwakryul.com makes isometric projection the foundational structural principle -- every layout decision, every animation, every color application follows the rules of isometric geometry. The three-tone face shading system (top/left/right) creates a consistent material language that has no precedent in the existing designs. 2. **Bento-Box Grid as Architectural Diorama:** Bento-box layout appears at only 2% frequency and has never been combined with isometric aesthetics. The bento grid here is not a UI convenience for organizing cards -- it is the floor plan of an isometric world, where each cell is a physical compartment containing geometric objects. The variable cell proportions (from 1:1 to 3:1) create visual rhythm without relying on the broken-grid or asymmetric approaches that dominate at 7% and 52% frequency respectively. 3. **Tilt-3D as Primary Navigation Metaphor:** Tilt-3d patterns appear at only 3% frequency and are typically limited to hover micro-interactions on cards. hwakryul.com elevates tilt-3d to a structural role: it governs transitions between entire bento trays (the ring-binder flip effect), hover states on individual cells, and the relationship between scroll position and spatial orientation. The tilt is never decorative -- it always communicates spatial information about depth and position within the isometric system. 4. **No-Gradient Flat Shading Discipline:** In a portfolio where gradient palettes appear at 90% frequency, hwakryul.com uses zero gradients. Every color is a flat, solid fill. This is not an oversight -- it is a deliberate commitment to the faceted geometry of isometric rendering, where surfaces are flat planes that catch light uniformly. The visual richness comes from the juxtaposition of warm material colors (terracotta, copper, clay, oak) rather than from color transitions. 5. **Geometric Shape Vocabulary (No Curves):** While organic-blobs (5%), flowing-curves (1%), and rounded elements dominate many designs, hwakryul.com eliminates all curves except the 6px border-radius on bento cells. Spheres are explicitly excluded from the isometric vocabulary. Every shape is faceted, every edge is straight, every angle is either 30, 60, 90, 120, or 150 degrees. This constraint creates a visual purity that immediately distinguishes the site from the softer, more organic approaches in the portfolio. **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:** - playful aesthetic (95%) -- replaced with architectural austerity - centered layout (99%) -- replaced with bento-box tiling - minimal imagery (95%) -- replaced with dense isometric illustrations - scroll-triggered patterns (96%) -- replaced with tilt-3d transitions - parallax patterns (81%) -- eliminated entirely in favor of tilt-based spatial movement - friendly tone (97%) -- replaced with quiet professional authority - mono typography (99%) -- replaced with geometric-sans (Outfit + DM Sans) - vintage motifs (78%) -- replaced with geometric-shapes vocabulary - gradient palette (90%) -- eliminated; flat shading only