# Design Language for hwagryul.com ## Aesthetics and Tone hwagryul.com is a **probability salon** — an imagined cabinet of curiosity where classical Korean numerology, Viennese art-deco draftsmanship, and the mathematical elegance of chance converge. The site presents *hwagryul* (화률, probability) not as dry statistics but as a **living discipline**: the architecture of fate, rendered in gilded geometry and warm ivory marble. The aesthetic is **art-deco classicism shot through with optimism** — not the cold chrome of Deco skyscrapers, but the warm, gilded Deco of 1920s Parisian hotel lobbies, where every column was hand-gilded and every floor was inlaid marquetry. The mood is **dawn light through tall windows**, the feeling of a day that has not yet decided how it will unfold. Probability as possibility. Numbers as poetry. Inspiration references: the interior of the Palais de Chaillot reading rooms; early 20th-century Korean silk brocade patterns (saekdong, oblique bands of colour on ivory ground); Vienna Secession poster typography blended with Garamond roman; and the mathematical diagrams of Laplace — hand-inked probability trees on yellowing vellum. The site does not sell. It **illuminates**. There are no pricing tiers, no CTA buttons screaming for clicks, no stat-grids. Instead, the page reads like a beautifully designed probability primer — a single long scroll through five philosophical propositions, each one a sunlit chamber opening into the next. Tone: warmly authoritative, intellectually playful, morning-bright. Every line of copy leans into *this could go wonderfully*. The visitor should leave feeling that uncertainty is a gift, not a threat. ## Layout Motifs and Structure The layout follows a **strict f-pattern reading spine**, but the f-pattern here is treated as deliberate architecture rather than an afterthought. The human eye naturally sweeps horizontally across the top, then drops and sweeps a shorter horizontal, then scrolls vertically — the site honours this by placing its most kinaesthetic content at those natural landing points. **Five chambers, read as a single scroll:** 1. **Apertura** — Full-viewport header. A wide horizontal sweep: the wordmark HWAGRYUL set in Cormorant Garamond Display at 14 vw, left-aligned, baseline resting at the golden-ratio horizontal of the viewport. To the right, a floating probability tree diagram hand-inked in `#C9A060` gold on ivory. The f-pattern horizontal scan lands first here. 2. **The First Proposition** — Two-column text section. Left column (55%) is body prose. Right column (45%) is a large marble-textured numeral — the number being discussed. The second horizontal sweep of the f-pattern lands on the numeral. Typography: Cormorant Garamond body, EB Garamond for numerals. 3. **The Visual Interlude** — Full-bleed grain-overlay image panel: a single marble surface with inlaid gold-leaf probability notation. No caption except a thin ruled `#C9A060` line beneath. Anchors the vertical scan leg of the f-pattern. 4. **The Three Theorems** — Three narrow columns, each a short theorem with a decorative deco cartouche header. Columns read left-to-right like a triptych altarpiece. The art-deco frieze motif runs above as a single continuous band. 5. **Clausura** — Single centered column, the closing passage. A large decorative initial letter (Cormorant Garamond Swash) begins the final paragraph. Below, a thin deco rule, and the site signature in small-caps. **Grid system:** 12-column CSS grid, gutters 2 vw, max-width 1440 px. All text measures capped at 68 characters per line for prose, 42 characters for display. Desktop: asymmetric 55/45 columns. Mobile: single column with left-aligned headers. **Spatial philosophy:** generous leading (1.7 for body, 1.1 for display), wide margins (8 vw each side on desktop), and deliberate negative space between chambers — a 10 vh pause between each section so the eye breathes before the next proposition. ## Typography and Palette **Primary display — Cormorant Garamond:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weights 300 (Light), 400 (Regular), 700 (Bold), Italic and Swash variants. Used for all headings, large numerals, decorative initials. Set at 10–14 vw for display; 2.4 rem for section titles; 1.1 rem for sub-labels. Tracked at `−0.012em` for display, `+0.04em` for small-caps labels. **Body — EB Garamond:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 400 Regular and 500 Medium, Italic for emphasis. Used for all running prose at 1.05 rem / 1.7 line-height. Numerals use old-style figure feature (`font-variant-numeric: oldstyle-nums`). Slightly larger than base Garamond, warmer and more generous on screen. **Accent / Labels — Josefin Sans:** [Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans), weight 300 Light and 600 SemiBold. Used ONLY for small-caps labels, section numerals (I, II, III), deco cartouche text, and the wordmark subtitle line. Tracked aggressively at `+0.18em` in uppercase. Never used for body prose. **Palette — Creamy Pastel Deco:** | Token | Hex | Role | |-------|-----|------| | `--ivory` | `#F5F0E8` | Primary background — warm vellum white | | `--cream-light` | `#FAF7F2` | Secondary background — parchment highlight | | `--gold-deco` | `#C9A060` | Primary accent — art-deco gilding | | `--gold-pale` | `#E8D4A8` | Secondary accent — pale gold for large fills | | `--terracotta-blush` | `#D9A08A` | Warm blush — used sparingly for pulse highlights | | `--sage-mist` | `#B8C4B0` | Muted sage — decorative borders, dividers | | `--ink-brown` | `#3A2E24` | Primary text — deep warm brown, not pure black | | `--marble-grey` | `#D4CFC8` | Marble tone — grain overlay backgrounds | The palette is **sun-warmed parchment** meeting art-deco gold. No pure whites (`#FFFFFF`), no cool greys, no saturated primaries. The entire site breathes within a 10–15% saturation range except for the gold accent, which is the sole chromatic statement. ## Imagery and Motifs **Grain-overlay as primary texture:** Every background plane carries a subtle film-grain texture (SVG `feTurbulence` filter, baseFrequency 0.65, 4 octaves, blended at `multiply` 12% opacity). This transforms the flat ivory into something closer to handmade paper or aged vellum. The grain is visible but never distracting — it whispers, it does not shout. **Marble-classical surfaces:** Two dedicated marble panels appear in the design. Both use the `--marble-grey` and `--ivory` tones with a soft SVG noise filter to suggest genuine Carrara marble veining. The veins are rendered in CSS (`background-image: radial-gradient` chains with fine linear overlays) rather than photography, keeping the file lean. Over the marble surface, gold-leaf probability notation (`P(A|B) = ...`) is inlaid as SVG text, styled to look hand-lettered. **Art-deco ornamental system:** A consistent set of deco decorative elements appears throughout: - **The frieze band:** A continuous horizontal deco frieze (chevron-fan motif, drawn as inline SVG, `#C9A060` stroke on `--ivory`) runs between sections II and IV. - **Cartouche headers:** Each of the three theorems in section IV has a slim rectangular cartouche — stepped-corner border, SVG, gold on ivory — containing the theorem label. - **Deco rule:** A triple-rule divider (thin–thick–thin, `#C9A060`) separates the Clausura from the body. - **Probability tree diagram:** The apertura features a branching probability tree — SVG, hand-drawn aesthetic via `stroke-linecap: round` and slight random path variance — inked in gold, nodes marked with small ivory circles. **Pulse-attention animation on numerals:** The large marble numerals in section II use a `pulse-attention` behaviour: on viewport entry, the numeral scales from 0.94 → 1.0 with a 600 ms ease-out, followed by a very subtle glow pulse on the `--gold-deco` colour every 8 seconds — a slow, warm heartbeat that draws the eye without demanding it. Implemented via CSS `@keyframes` and Intersection Observer. **No photography.** No stock images. No hero photographs. The site is entirely constructed from typography, SVG illustration, grain texture, and marble CSS gradients. ## Prompts for Implementation Treat hwagryul.com as a **probability primer in five illuminated chambers**, each chamber a lit space the visitor enters by scrolling. The visual reference is: *if the Vienna Secession had published a 1924 treatise on Bayesian probability, and the cover designer was Korean and working in Parisian gold-leaf tradition.* **Section architecture (single vertical scroll, zero horizontal navigation):** `
` — 100 vh, ivory background with grain overlay. Wordmark in Cormorant Garamond Display, 14 vw, left-aligned at 8 vw left. Subtitle "Probability as Philosophy" in Josefin Sans Light 300, tracked +0.18em, 1.2 rem, directly below. The probability tree SVG floats right, 36 vw wide, `--gold-deco` strokes, animate branches via `stroke-dasharray` + `stroke-dashoffset` on scroll entry, 1.4 s. Bottom of section: the first theorem label in Josefin Sans SemiBold, fading up on scroll. `
` — Asymmetric 55/45 columns. Left: prose in EB Garamond 1.05 rem / 1.7 lh, `--ink-brown`. The opening word is a decorative drop cap (Cormorant Garamond Swash, 4 lines tall, `--gold-deco`). Right: the numeral "1" in Cormorant Garamond Bold, 28 vw, `--gold-pale`, grain-overlay texture applied via CSS mask. On viewport entry, the numeral triggers `pulse-attention` — scale 0.94→1.0, 600 ms ease-out cubic-bezier(0.34, 1.56, 0.64, 1). `
` — Full-bleed marble panel (CSS gradient simulation of Carrara veining). Height 60 vh. The probability equation `P(A∩B) = P(A)·P(B|A)` is inlaid as SVG text at 4 vw, Cormorant Garamond Italic, `--gold-deco`. Gold line beneath the panel, 1 px, full width. Grain overlay on the marble at 15% opacity. No animation — this is a still chamber, a pause. `
` — Three equal columns (32% each, 2% gutters). Above: the continuous deco frieze SVG spanning full width, `--gold-deco`, 32 px height. Each column: cartouche header (SVG, stepped-corner border, 3 px stroke, `--gold-deco`), Josefin Sans SemiBold label inside, then body prose in EB Garamond. Columns animate in sequentially on scroll: left 0 ms delay, center 120 ms, right 240 ms — fade + translate-y 20px → 0, 500 ms ease-out. `
` — Single centered column, max-width 680 px. Decorative initial letter (Cormorant Garamond Swash, 5 rem, `--gold-deco`, float left). Closing prose in EB Garamond. Triple-rule divider below (CSS border + pseudo-elements, `--gold-deco`). Site signature: `hwagryul.com` in Josefin Sans Light 300, tracked +0.18em, centered, 0.85 rem, `--ink-brown` at 60% opacity. **Animation inventory (all CSS + Intersection Observer, no JS animation libraries):** - Probability tree branch draw: `stroke-dashoffset` animation, 1.4 s, triggered by IntersectionObserver threshold 0.2. - Numeral pulse: `@keyframes pulse-numeral` — scale + soft glow, loops every 8 s with 6 s pause. - Section entry: `@keyframes fade-lift` — opacity 0→1, translateY 20px→0, 500 ms ease-out, staggered per column. - Frieze reveal: SVG `clipPath` animated width 0→100%, 800 ms ease-in-out, triggered on section entry. **CSS custom properties (full set):** ```css :root { --ivory: #F5F0E8; --cream-light: #FAF7F2; --gold-deco: #C9A060; --gold-pale: #E8D4A8; --terracotta-blush: #D9A08A; --sage-mist: #B8C4B0; --ink-brown: #3A2E24; --marble-grey: #D4CFC8; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'EB Garamond', Georgia, serif; --font-accent: 'Josefin Sans', Helvetica, sans-serif; --measure-prose: 68ch; --measure-display: 42ch; --grain-opacity: 0.12; } ``` **Do NOT implement:** sticky navigation bars, modal overlays, hamburger menus, pricing sections, testimonial carousels, social media icons, cookie banners, loading screens, scroll-jacking, horizontal scroll sections, video backgrounds, or any third-party widget. The page is a single uninterrupted vertical essay with five chambers. **Do emphasise:** long deliberate whitespace pauses between sections (10 vh minimum), the grain texture on every ivory background plane, the gold as a single chromatic statement amid warm neutrals, and the Cormorant Garamond swash letterforms at display scale — they carry the entire expressive weight of the site. ## Uniqueness Notes Seed: aesthetic: art-deco, layout: f-pattern, typography: garamond-classic, palette: creamy-pastel, patterns: pulse-attention, imagery: grain-overlay, motifs: marble-classical, tone: optimistic-bright Three deliberate differentiators from the 172-design corpus, grounded in frequency data: 1. **Optimistic-bright tone combined with art-deco classicism — an untested pairing at 1% frequency each.** The corpus shows `optimistic-bright` tone at 1% and `art-deco` aesthetic at ~5%, but they have never been paired together in the registry. Art-deco is conventionally mapped to luxury, opulence, or nostalgia (the dominant associations in the 47 editorial and 24 corporate designs). hwagryul.com uses deco formal vocabulary — stepped borders, fan cartouches, probability trees in gilded geometry — but strips the heaviness out entirely, replacing it with a morning-light palette of ivory and blush-gold. The effect is a deco that feels *hopeful rather than grand*, which no other design in the corpus has attempted. 2. **Pulse-attention pattern at 1% frequency applied to mathematical numerals rather than UI affordances.** In the two existing designs that use `pulse-attention`, the pattern is applied to buttons or call-to-action elements. hwagryul.com applies it to the large marble-textured Garamond numerals — the heartbeat of the number itself, not a UI prompt. This reframes the pattern as conceptually resonant (a probability *pulsing* with possibility) rather than commercially functional. 3. **Grain-overlay + marble-classical + creamy-pastel — a three-way texture/palette combination at near-zero overlap in the corpus.** `grain-overlay` appears in 2% of designs, `marble-classical` in 2%, and `creamy-pastel` in 5%. The combination of all three — hand-inked on vellum, marble column, gold inlay — exists nowhere else in the registry. Most grain-overlay designs pair it with dark-mode or high-contrast palettes (the conventional association with film/analogue aesthetics). Applying grain to a creamy-pastel ivory ground creates a completely different register: warm scholarly parchment, not gritty urban photography.