# Design Language for hwaglyul.com

## Aesthetics and Tone

**Hwaglyul** (화률) fuses two Korean syllables — *hwa* (화, flower/transformation/fire) and *lyul* (률, ratio/probability/law). The name lands as **the mathematics of blooming**: a flower's probability, a petal's golden ratio, the statistical inevitability of a bud opening in spring. This is a site that feels like a botanist's field ledger crossed with a Joseon-dynasty astronomer's calculation table — the sensibility of light-academia applied not to Oxford libraries but to the quiet precision of East Asian scholarly tradition.

The aesthetic is **light-academia grounded in earthy luxury**: cream vellum as the page ground, deep charcoal ink for type, botanical diagrams rendered in precise linework, and accents of oxidized gold — the color of dried chrysanthemum pressed into a notebook margin. There are no gradients that glow or throb. Gold here is the color of turmeric on old paper, of brass clasps on a cabinet of curiosities, of the gilded spine of a Korean royal almanac.

Mood references: a university herbarium in Seoul's Changdeokgung Palace gardens. A morning spent cataloging dried specimens against a window that lets in flat northern light. A calligrapher's desk where ink-stick, ruler, and pressed flora coexist in silence. The page never shouts. It waits for the reader to lean in.

Tone: **grounded, unhurried, earthy**. Every element sits with the weight of a physical object — a specimen card, a stamped ledger column, a hand-ruled grid on cream stock. No floating cards that hover on hover. Things have shadows that behave like afternoon light through a paper screen (shoji diffuse, not spotlight drama).


## Layout Motifs and Structure

The macro structure is a **scholarly dashboard** — not a SaaS control panel, but the layout of a 18th-century naturalist's working table: a persistent left column (the index spine), a wide central field (the working surface), and a narrow right margin (annotations and cross-references). The three-column grid is 2:7:3 at desktop, collapses to single-column on mobile with the index spine becoming a collapsible top-drawer.

**Grid specification:**
- Base unit: `1rem` (16px)
- Column gap: `2.5rem`
- Left spine: `18rem` fixed, position sticky, top-to-bottom with the full height of the viewport
- Central field: fluid, `minmax(0, 1fr)`
- Right margin: `14rem` fixed
- Outer gutters: `clamp(1rem, 4vw, 4rem)`

**Macro structure (top to bottom, the "working table"):**
1. **Index Spine (left, persistent):** Domain wordmark at top in display type. Below it, a ruled vertical list of section glyphs — each a single pressed-flower icon drawn in SVG, labeled in small-caps. The spine does not use conventional nav words; it uses botanical classification fragments (`§ Radix`, `§ Caulis`, `§ Folium`, `§ Flos`, `§ Semen`). A gold thread hairline (`#B8942A`, 1px) runs the full height of the spine's right edge, separating it from the field.
2. **Field Header:** Full-width strip across top of the central field — the domain name set in large display type with a fine underline that draws in from left on page load (2.4 s, `stroke-dashoffset` SVG animation). Date and classification code in right margin.
3. **Specimen Section 1 — Radix (Root):** Left-aligned 3-column grid of botanical icon cards. Each card is a single cream tile with a SVG line-art icon of a root system, a Korean label below in medium weight, a Roman transliteration in small italic, and a one-line probability notation (`p = 0.94`, rendered as a formula in monospace). Cards have no shadow on idle — a shallow `2px 2px 0 #B8942A` box-shadow appears only on focus/hover, giving the effect of a file being lifted from a flat surface.
4. **Specimen Section 2 — Caulis (Stem):** A full-width ruled table — the only table on the page. Cream ground, charcoal hairline rows at `1px solid #3A3228`, gold column headers. Columns: Korean term, Hanja character, Probability value, Visual glyph. The table's top border is `3px solid #B8942A`. It reads like a field classification record.
5. **Specimen Section 3 — Folium (Leaf):** Two-column layout (7:5 split). Left: long-form text about the mathematics of leaf venation (golden angle, Fibonacci spirals). Right: a large single SVG illustration of a leaf with precisely annotated measurement lines — the kind used in botanical taxonomy plates, with arrows and dimension callouts in a 9px sans.
6. **Specimen Section 4 — Flos (Flower):** Full-bleed within the central field — a dark `#1A1510` strip containing the primary visual statement: a large botanical icon of a flower head, drawn in `#B8942A` gold line art on dark ground, with probability notations orbiting it like a celestial annotation diagram. Contrasts with the cream field above and below.
7. **Specimen Section 5 — Semen (Seed):** The closing section. Icon grid of six seed forms, each labeled with a probability and a short phrase. Right margin annotation: a stacked list of source references in `8px` type, the way a scholarly footnote column is set.

**Rhythm and spacing:** All vertical spacing is based on a `6rem` baseline modular scale. Section transitions use a `1px solid #C8B99A` full-width hairline rule rather than padding alone.


## Typography and Palette

### Typefaces (Google Fonts only)

- **Display / Wordmark:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 600, italic. Used for the domain wordmark, section headers at `clamp(2.8rem, 5.2vw, 5.6rem)`, and the large chapter labels. Tracking: `-0.022em`. The variable font axis `wght` is animated on the field header from 300→600 over 1.8 s on load — the letters thicken into focus like ink being absorbed into vellum.
- **Body / Running text:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 400 for body (17px / 1.75 leading), weight 500 for subheads. EB Garamond is the same historical cut with an optical-size optimized lowercase; it pairs with Cormorant without doubling up on identical lettershapes. The small-cap OpenType feature (`font-variant-small-caps: all-small-caps`) is used for section taxonomy labels in the spine.
- **Data / Notation / Monospace:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400 only. Used exclusively for probability values (`p = 0.94`), measurement callouts, the date/classification code in the field header, and the footnote reference column. Tracked at `+0.04em`. This sharp geometric mono against the Garamond humanist serif creates the botanist-calculator contrast that defines the site's voice.

**Variable fluid sizing:** All display sizes use `clamp()` with three stops. Body copy is `clamp(1rem, 1.2vw + 0.6rem, 1.125rem)` — it does not grow aggressively but does compress gracefully at narrow viewports.

### Palette

| Role | Hex | Name |
|---|---|---|
| Page ground | `#F5F0E8` | Vellum |
| Primary ink | `#1F1B14` | Carbon ink |
| Secondary ink | `#3A3228` | Warm charcoal |
| Gold accent | `#B8942A` | Oxidized brass |
| Gold light | `#D4AE50` | Dried chrysanthemum |
| Muted gold | `#8C6E1E` | Turmeric shadow |
| Dark field | `#1A1510` | Lacquer night |
| Rule line | `#C8B99A` | Pressed vellum |
| Hover lift | `#EDE7D6` | Morning cream |

**Color philosophy:** No pure black (`#000000`). No pure white (`#ffffff`). Every surface is warmed — the page ground is vellum, not paper-white; the ink is carbon, not pixel-black. Gold is never bright yellow — it oxidizes, it ages, it is always the `#B8942A` of a tarnished clasp, not the `#FFD700` of clip-art. The dark field section uses `#1A1510` (lacquer night) so that the gold line art glows against it without any drop-shadow tricks.


## Imagery and Motifs

### Icon System (primary visual language)

The site is **icon-heavy** in a very specific register: all icons are **SVG botanical line drawings** executed in the style of 19th-century natural history classification plates. Not emoji. Not Heroicons. Not Lucide. Custom-drawn (or sourced/refined) SVG paths with:

- Stroke weight: `1.5px` at standard size, scaling down to `1px` at small size
- Fill: none (pure stroke illustration)
- Stroke color: `#3A3228` on cream grounds; `#B8942A` on dark grounds
- Stroke-linecap: `round`; stroke-linejoin: `round`
- Every icon has a companion `<title>` with Korean botanical term and a `<desc>` with the probability value

**Icon subjects — nature motifs from the site's taxonomy:**
1. Root bundle (radix) — tangled, mathematically precise root architecture
2. Cross-sectioned stem (caulis) — circular cross-section showing vascular bundles, like a microscopy diagram
3. Compound leaf with venation (folium) — golden-angle venation, Fibonacci spirals visible at the secondary veins
4. Composite flower head (flos) — phyllotaxis spiral visible in the seed disk
5. Seed pod split (semen) — two halves revealing internal structure, with measurement tick marks
6. Full plant silhouette — a tall herbaceous specimen with all parts labeled

### Decorative patterns

- **Underline-draw animation** (`underline-draw`): Every section heading in the central field gets an SVG underline that draws left-to-right using `stroke-dashoffset` on scroll entry. Duration: `0.9 s`, easing: `cubic-bezier(0.16, 1, 0.3, 1)`. The underline is `2px`, color `#B8942A`. This is the *only* animation that runs on scroll — no parallax, no stagger cascades.
- **Gold thread hairline** on the spine's right edge and the dark-field section's top border — always `1px` or `3px solid #B8942A`.
- **Measurement annotation lines** in the Folium section: SVG `<line>` elements with arrowheads and `Space Mono` callout labels, styled like a technical drawing overlay.
- **Probability notation badges**: `p = 0.94` rendered in `Space Mono` inside a `1px solid #C8B99A` rectangular frame with `2px` padding — looks like a classified specimen tag attached with a pin.
- **Paper texture overlay**: a very subtle `2%` opacity noise SVG pattern tiled across the vellum ground, giving it the tactile suggestion of laid paper without obscuring any content. No heavy grain.


## Prompts for Implementation

Build hwaglyul.com as a **single-page botanical probability ledger** — the kind of document a Joseon court astronomer might have maintained if they had also been a herbalist and a statistician. Every implementation decision should serve the feeling of a hand-ruled field table being examined under good flat light.

**Layout implementation:**
- The three-column dashboard is a CSS Grid with `grid-template-columns: 18rem 1fr 14rem` at `>= 1280px`, collapsing to `1fr` at `< 900px` with the spine becoming a `details`/`summary` drawer at the top
- The left spine is `position: sticky; top: 0; height: 100vh; overflow-y: auto`
- Smooth scroll (`scroll-behavior: smooth`) applies only to in-page spine navigation
- The right annotation column uses `position: sticky; top: 2rem; align-self: start` per-section

**Typography implementation:**
- Load Cormorant Garamond (400, 400i, 600, 600i) and EB Garamond (400, 400sc, 500) via Google Fonts `display=swap`
- Load Space Mono (400) separately
- Use `font-optical-sizing: auto` on all display elements
- The variable-weight animation on the field header: `@keyframes weight-in { from { font-variation-settings: 'wght' 300 } to { font-variation-settings: 'wght' 600 } }` — `animation: weight-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards`
- Small-caps for spine labels: `font-variant: all-small-caps; letter-spacing: 0.08em`

**Underline-draw animation implementation:**
```
.section-heading::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #B8942A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-heading.in-view::after {
  transform: scaleX(1);
}
```
Use IntersectionObserver with `threshold: 0.3` to add `.in-view`. Do not use scroll listeners.

**Icon implementation:**
- Inline SVG for icons used in the Flos dark section (so stroke color can be set via CSS `currentColor`)
- `<img>` with `loading="lazy"` for all repeated specimen icons in grid sections
- All icons ship in a single SVG sprite sheet (`icons.svg`), referenced via `<use href="icons.svg#icon-radix">`

**Do NOT implement:**
- Parallax scroll effects (overused at 90%)
- Stagger entry animations on card grids (overused at 62%)
- Full-bleed photography (overused at 90%)
- Modal overlays, tooltips on click, dropdown menus
- CTA buttons, pricing blocks, stat-number grids
- Dark-mode toggle
- Sticky header with navigation (the sticky spine handles navigation)
- Any animation triggered by hover on mobile (use `@media (hover: hover)`)

**Storytelling arc:** The reader descends from Root (foundational probability concepts) through Stem (structural data table) through Leaf (the mathematics of natural pattern) through Flower (the full visual statement of the site's identity) to Seed (the closing, the invitation to return). The site does not explain what it is. It demonstrates it, leaf by leaf, the way a botanical monograph assumes you came to study.


## Uniqueness Notes

1. **Dashboard layout at 24% frequency applied to an East Asian botanical scholarly register, not a SaaS product.** Every other dashboard-layout site in the registry uses it for data/app metaphors. hwaglyul.com uses the same three-column structure to evoke a Joseon court naturalist's working table — spine as taxonomic index, field as specimen plate, margin as annotation column. This semantic recontextualization of a common layout is unique in the registry.

2. **Underline-draw at 4% frequency as the site's *sole* animation pattern.** Most sites pair underline-draw with 3–5 other animation patterns (stagger, parallax, morph). hwaglyul.com uses underline-draw in isolation — it is the *only* moving element outside the initial weight-in animation on the wordmark. This restraint makes each underline draw feel like a single brushstroke being placed, which fits the calligraphic register of the domain.

3. **Icon-heavy imagery implemented as custom SVG botanical line drawings instead of UI icons.** The frequency report shows icon-heavy is not a dominant pattern; where it appears it typically means Heroicons/Lucide/Phosphor UI icon sets. hwaglyul.com's icons are 19th-century natural history classification plate illustrations in SVG — a completely different register. The icons are the content, not chrome.

4. **Variable font animation used for semantic meaning (letters thicken as they "absorb into" the page) rather than decorative weight cycling.** The `font-variation-settings: 'wght' 300→600` animation is motivated by the vellum-absorption metaphor — ink being absorbed into paper has a physical analogue to font-weight increasing. This is not the conventional "hover makes it bolder" pattern.

5. **Palette of oxidized gold (`#B8942A`) against vellum (`#F5F0E8`) avoids both the high-contrast luxury-black approach (gold on jet black) and the pastel light-academia approach (dusty mauves on cream).** The gold-black-luxury seed is executed with warm carbon (`#1F1B14`) rather than pure black, and the gold is aged, not bright — placing hwaglyul.com in a register no other design occupies: luxury through patina, not through contrast.

Chosen seed: aesthetic: light-academia, layout: dashboard, typography: variable-fluid, palette: gold-black-luxury, patterns: underline-draw, imagery: icon-heavy, motifs: nature, tone: grounded-earthy

Avoided patterns from frequency analysis: photography (90% — using SVG line-art icons instead), parallax (90% — no scroll parallax), stagger (62% — no cascade entry animations), centered layout (90% — using three-column dashboard grid), full-bleed layout (76% — full-bleed used only in the single dark Flos section).
<!-- DESIGN STAMP
  timestamp: 2026-05-08T01:18:39
  domain: hwaglyul.com
  seed: is executed with warm carbon
  aesthetic: Hwaglyul** (화률) fuses two Korean syllables — *hwa* (화, flower/transformation/fir...
  content_hash: 651267ba6a73
-->