# Design Language for hwakryul.com ## Aesthetics and Tone `hwakryul.com` is **a probability manifold you can touch** — a tactile interface built from the premise that certainty is never absolute and that every decision exists inside a gradient of possible futures. The aesthetic is **grainy-textured optimism**: not the bleached-sugar-pink of wellness brands or the aggressive dopamine of growth-hacker landing pages, but a warmer, more inhabited brightness — the brightness of a well-worn printout pinned to a corkboard, sun-bleached at the edges, each ink dot still sharp enough to read. The grain is structural, not decorative. It comes from a 120×120 SVG noise tile (fractal Brownian turbulence, baseFrequency 0.65, four octaves, stitchTiles enabled) that sits at 18% opacity over every panel surface, creating the sensation that the UI exists as physical matter — cardboard, matte paper, linen — rather than pixels. When you are in bright sections the grain reads as warm cream; in shadow transitions it reads as grit. The grain never disappears. It is the membrane of the page. The **bento-box layout** is not a grid of cards — it is a taxonomy of certainty. Each bento cell represents one slice of the probability space: high-likelihood outcomes share space in the dominant cell (largest, top-left), low-probability curiosities are filed into the smallest corner cells. The cells do not have rounded corners in the standard SaaS sense; their corners are **sharp 2px bevels** — geometry that implies precision, measurement, a ruler on a desk. Cells are separated by 2px single-line gutters in a color three stops darker than the surface behind them, creating micro-shadows that give the grid physical depth without drop shadows. **Tone:** Optimistic without being naive. The voice of the site is that of a person who has done the math and is telling you the answer is better than you feared. Sharp, bright, clear — but not cold. A probability engine that likes you. ## Layout Motifs and Structure The core layout is an **asymmetric bento grid** that subdivides a single full-viewport panel into named probability zones. The grid uses CSS Grid with six named column tracks (`[full-start] 1fr 1fr 1fr [focus-start] 2fr 1fr [focus-end] [full-end]`) and five row tracks (`[banner] auto [main-start] 2fr 1fr 1fr [main-end] [tag-start] auto [tag-end]`). No cell has the same proportions as any other. **Named zones (the cells of the manifold):** - **Focal** — spans columns 4–5, rows 2–3 — the largest cell, roughly 40% of viewport. This is where the dominant message lives. Because it is the highest-probability zone, it is also the brightest: background is the warmest point in the analogous palette, with 100% opacity grain layer. - **Counter** — spans column 1–3, row 2 — the wide shallow cell to the left. Houses secondary context in smaller type. Background is one palette step cooler than Focal. - **Digest** — column 6, rows 2–3 — narrow vertical cell on the right edge. Houses quantified stats or ranked items. Background is two steps cooler from Focal, feels almost like a margin note. - **Tag Row** — spans full width, row 5 — a single-line horizontal band of pill-shaped tags. Tags are keyboard-sized: 28px height, 1px border, no fill — outline-only until hover. - **Three lower cells** — columns 1–2, 3–4, and 5–6 in row 4 — smaller bento boxes housing iconographic evidence. Each one is independently fade-revealed on scroll. The **sharp-angles motif** is enforced by: (1) all cell corners are 0px radius, (2) all icon containers are angular polygons (hexagons with flat tops clipped via CSS `clip-path: polygon()`), (3) decorative divider lines between major sections are diagonal at exactly 7 degrees — a ruled slash, not an organic curve. Transitions between viewport sections (the site is a single continuous scroll) are handled by **fade-reveal**: each bento row enters from opacity 0 at `transform: translateY(12px)` to opacity 1 at `transform: translateY(0)`, triggered by IntersectionObserver with a 120ms stagger between cells in the same row. The fade is pure opacity plus subtle vertical lift — no scale, no blur, no elastic overshoot. **Diagonal accent lines** (1px, color `#E8C94A` at 60% opacity) run at 7° across the full page as a fixed background element, spaced 220px apart. They are the "ruled paper" of the manifold — lines of probability crossing the entire field. ## Typography and Palette **Typography (Google Fonts only, all verified):** - **Display & primary headings — [Plus Jakarta Sans](https://fonts.google.com/specimen/Plus+Jakarta+Sans)**, weight 700–800, letter-spacing -0.03em. This is the Frutiger-clean workhorse: geometric humanist, warm-aperture terminals, zero decorative artifacts. H1 at 64px/1.0 lh for the focal cell headline. The weight 800 setting at large size creates the "probability confident" voice — not aggressive, but sure. - **Secondary headings & labels — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, weight 500–600, letter-spacing +0.01em. The rational counterpart to Plus Jakarta Sans. Smaller cells use DM Sans at 13–15px for category labels and cell captions. Its geometric regularity pairs cleanly with Plus Jakarta Sans without competing. - **Body & narrative copy — [Inter](https://fonts.google.com/specimen/Inter)**, weight 400, size 16px, line-height 1.65. Used exclusively in the Focal cell's supporting paragraph and the Tag Row caption line. Inter's neutral neutrality lets the palette and layout carry the personality. - **Data & numeric emphasis — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400–500, size 14–28px. Used for any numerical value (percentages, counts, probabilities). Set at a slight size premium over surrounding body text to make numbers feel like measurements on an instrument, not decorative content. **Palette (analogous — yellow-green-teal arc, warm grain over all):** The analogous arc runs from sharp amber through chartreuse-green into clear teal, with a single dark anchor and a near-white surface. Every hue is approximately 30–40° apart on the wheel, creating visual cohesion while retaining contrast between cells. - `#F5C518` — **Signal Amber** — Primary accent; used for the Focal cell border highlight, data-number color in JetBrains Mono, and diagonal accent lines. - `#8BBF7A` — **Probability Green** — Secondary fill for the Counter cell background at full opacity. - `#4BAF8C` — **Manifold Teal** — Digest cell background, icon container stroke color, hover state for outline tags. - `#F7F4ED` — **Grain Cream** — Page base color, Focal cell background before the noise overlay. Warm off-white, not pure #FFFFFF. - `#1C2026` — **Deep Slate** — Primary text color, cell gutter lines, all typographic content. Reads as near-black but pulls slightly blue-cool. - `#E8C94A` — **Diagonal Gold** — Used exclusively for the 7° ruled background lines. Slightly more orange than Signal Amber. - `#C5E8D0` — **Soft Sage** — Lower three bento cells' backgrounds. Lightest green in the arc. **Color behavior:** - Focal cell: `#F7F4ED` background with grain overlay, `#F5C518` top-left border accent (3px) - Counter cell: `#8BBF7A` at 25% opacity over `#F7F4ED` - Digest cell: `#4BAF8C` at 30% opacity over `#F7F4ED` - Lower cells: `#C5E8D0` solid - Tag band: `#F7F4ED` with `#1C2026` outlines on pills ## Imagery and Motifs **No photography. No stock images. No decorative illustration.** The imagery vocabulary is exclusively **icon-heavy** — flat, geometric, line-weight-consistent SVG icons built to a strict 24×24 grid at 1.5px stroke, with square line caps and sharp miter joins (matching the sharp-angles motif). **Icon families in use:** 1. **Probability icons** — custom angular SVG icons representing core concepts: a die face (octagonal, not rounded), a branching decision tree (right-angle branches only, no curves), a Venn diagram (two overlapping squares, not circles), a percentage symbol built from sharp slashes. Each icon is housed in a hexagonal clip container (48×48px outer, flat-top orientation) with a 1px `#1C2026` border. 2. **Signal icons** — small (16px) inline icons used as tag prefixes: upward-slanting diagonal arrow (matches the 7° motif angle), a hash symbol, a plus in a square frame, a sharp-cornered triangle flag. These appear before every tag pill in the Tag Row. 3. **Data-glyph icons** — larger (64–80px) single-element icons used as hero imagery within the three lower cells. Examples: a large outlined percentage symbol in `#F5C518`, a outlined bar-chart with angular tops, an outlined branching-path glyph. These are the page's "illustrations" — they communicate concept without narrative. **Grain texture overlay:** A single 200×200px inline SVG `` using `feTurbulence` (baseFrequency 0.65 0.65, type fractalNoise, numOctaves 4, stitchTiles stitch) fed into `feColorMatrix` to produce monochromatic noise, composited with `feBlend mode="overlay"` at 18% opacity. Applied globally via `filter: url(#grain)` on the `` wrapper. This is the defining texture of the aesthetic. **Diagonal rule motifs:** The entire page has a fixed-position SVG behind all content containing parallel lines at 7° rotation, spaced 220px, each 1px wide in `#E8C94A` at 55% opacity. These lines do not move on scroll — they are landmarks on the probability field, not decorations. **Sharp-angle clip containers:** Every icon and every decorative data-glyph is clipped by a hexagonal CSS `clip-path` with flat-top orientation: `polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)`. This makes every "illustration" feel like a facet on a cut stone — precise, geometric, non-organic. ## Prompts for Implementation Build `hwakryul.com` as **a single-page probability manifold** — not a product pitch, not a feature list, not a hero-and-sections template. The page is a reading instrument. You sit down at it and it tells you the state of something important, calibrated with care. Here is the story: **Macro structure — one scrollable viewport height plus one overflow:** The page is primarily **one bento-grid viewport** (100vh, no scroll required to see the whole first panel). Below the fold, a second abbreviated panel shows the three lower cells and the tag band, revealed by fade-scroll. The total page is approximately 1.6× viewport height. No pagination, no sidebar, no hamburger menu. **Implementation vows:** **Vow 1 — The grain is not cosmetic.** Apply the SVG noise filter as an `` at exactly 18% opacity. Test it: at 18%, text remains fully readable and the grain reads as paper texture, not visual noise. If it reads as static, lower to 14%. Never use a PNG texture — the grain must be inline SVG so it scales to any resolution. **Vow 2 — The diagonal lines are geography.** The fixed-position diagonal SVG lines at 7° are not design decoration; they are the "ruled field" that the bento cells are placed on top of. They must be behind all content (`z-index: 0`), all content at `z-index: 1` minimum. The lines should be just visible enough that a user notices them only when they stop looking at the content — peripheral structure. **Vow 3 — The fade-reveal is measured.** Each bento cell enters with a single transition: `opacity: 0 → 1` and `transform: translateY(12px) → translateY(0)` over `350ms cubic-bezier(0.22, 1, 0.36, 1)`. The stagger between cells in the same bento row is exactly 80ms per cell index. Do not add scale, blur, rotation, or elastic bounce. The reveal is the sensation of a document coming into focus, not a magic trick. **Vow 4 — Sharp-angle enforcement.** Every `border-radius` in the stylesheet is either `0` or `2px` (only for the smallest inline elements to prevent sub-pixel jaggedness). Clip-path hexagons must use the exact polygon values given in Imagery. No circles, no pills, no cards with rounded corners — the tag pills are the single permitted curve exception at `border-radius: 2px`. **Vow 5 — Color is calibrated, not decorative.** The cell backgrounds are not chosen for variety — they represent the probability gradient. Focal (warmest, `#F7F4ED`) = highest confidence. Counter (cooler green) = supporting evidence. Digest (teal) = peripheral data. Lower cells (soft sage) = context, lowest emphasis. Implement this as a deliberate informational hierarchy. **HTML structure:** ```html
``` **JavaScript:** Only IntersectionObserver for fade-reveal. No libraries. No scroll frameworks. No animations beyond the specified fade-reveal sequence. The page is static in behavior — the data is the animation. **AVOID:** - CTA buttons with rounded corners or gradient fills - Any pricing or stats-comparison block - Hero-image backgrounds or parallax - Navigation bars or headers consuming vertical space - Animations triggered by hover that change content (hover may change border color only) ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **grainy-textured**, layout = **bento-box**, typography = **frutiger-clean**, palette = **analogous**, patterns = **fade-reveal**, imagery = **icon-heavy**, motifs = **sharp-angles**, tone = **optimistic-bright**. **Differentiators from the existing corpus (verified against frequency analysis):** 1. **The grain is structural, not aesthetic.** At 2% frequency, `grainy-textured` already appears rare — but every prior use applies grain as a visual mood layer (warmth, nostalgia). hwakryul.com uses grain as a physical-material metaphor: the page is a **printed probability manifold**, and the grain is the paper it was printed on. The grain has informational meaning (certainty → warmth → cream → more grain visible; lower probability zones → cooler → less grain legible). No other design in the corpus uses texture as an information-encoding mechanism. 2. **The bento-box layout is organized by probability gradient, not product categories.** At 6% frequency, bento layouts exist in the corpus — but every instance uses bento as a feature-showcase grid (feature A, feature B, feature C). hwakryul.com uses the spatial hierarchy of the bento grid (large-to-small cell size) as a **visual probability axis**: largest cell = highest confidence, smallest corner = lowest certainty. The layout is a reading instrument, not a content container. 3. **The analogous palette runs yellow → green → teal at 2% frequency — and is treated as a calibration scale.** No corpus design uses analogous colors as an **informational encoding** — they are used decoratively. hwakryul.com assigns each hue position on the analogous arc to a certainty level, creating a palette that doubles as a key/legend for the information architecture. 4. **Icon-heavy with zero illustration.** At 3% corpus frequency, icon-heavy imagery is rare — and every existing case uses icons as UI affordances (nav icons, feature bullet icons). hwakryul.com uses large-scale data-glyph icons (64–80px) as primary "illustration" — the icons ARE the imagery. This is closer to data-visualization than iconography, and it has no precedent in the current corpus. 5. **The 7-degree diagonal motif is a geographic reference, not decoration.** The diagonal ruled lines at 7° are present at all times as fixed-position background geography — not as a header graphic or a divider element, but as the actual "field" on which the probability manifold is laid out. Sharp-angles at 2% corpus frequency, but no existing design uses angular geometry as spatial coordinate system.