# Design Language for hanun.ai ## Aesthetics and Tone hanun.ai is imagined as a **hand-bound journal recovered from a quiet archive** — the kind of publication a solitary intellectual compiles over many seasons, then leaves behind without a foreword. The name *hanun* carries a breath of invocation, something whispered before an act begins. The site exists in the register of **flat-design rendered in aged paper**: no shadows competing for status, no gradients climbing toward the light, no depth except the depth that comes from layering translucent planes of parchment over one another like transparencies in a botanical atlas. The aesthetic is **flat-design** executed with the discipline of Japanese muji restraint but the warmth of a Venetian printing-house. Every element sits flush to its surface. Ornaments are pressed, not embossed. Color feels sun-faded, ink absorbed rather than applied. There is no chrome, no glass, no three-dimensional pretense. The site is a **sheet**, and the sheet has been out in the light for a long time. **Tone: minimal.** The page does not try to convince. It presents. It waits. Its silence is editorial. Negative space is the primary content; text and imagery are intrusions into white that the reader must earn by scrolling. There is no announcement, no call to action, no urgency. The site behaves like a work of reference that has been placed on a reading stand and left open. The mood draws from: pre-war ephemera (timetables, botanical index cards, notarial seals), the quiet physicality of Penguin Classics paperback covers from the 1960s, and the tone of a private institution that publishes nothing intended for the general public. ## Layout Motifs and Structure The structural concept is the **unbound folio** — a series of full-viewport pages that the user navigates not by scrolling but by **discrete vertical snaps**, as though lifting one leaf and placing it behind. Each "leaf" is a distinct rectangle of the same fixed proportion (aspect ratio locked at 1:1.4142, the ISO A-series ratio). This gives every panel the proportion of a physical sheet of paper. **Navigation architecture:** - A single vertical strip on the left edge — 48px wide, full-height, color `#C8B89A` (aged linen) — acts as the only persistent chrome. Within it, five tiny rectangles stacked vertically mark the five leaves; the active leaf rectangle fills with `#4A3728` (dark walnut ink). No labels. No hamburger. Hovering the strip reveals whisper-fine type along the left margin, rotated 90 degrees, reading the leaf title in 10px Cormorant Garamond light italic. This is the entire navigation system. - **No header.** No footer. No sticky bar. The navigation strip IS the site's skeleton. - Each leaf is a flat rectangle containing at most three text elements and one image. Elements are distributed on a **9-column silent grid** (6 content, 3 margin). The margin column bleeds to the right edge of the leaf. - On leaf transitions, the incoming leaf slides up from behind the current leaf — a **layered-depth paper-stack metaphor**: the old leaf does not exit; it sinks, and the new leaf rises above it. CSS `z-index` steps up by one per leaf as the user advances; going backward is a reversal of the stack. No easing curves borrowed from UI libraries — the animation uses `cubic-bezier(0.16, 1, 0.3, 1)` (the "spring from below paper" curve). - The **right margin column** (3/9 of width) is the only region that persists across all leaves: a column of tiny dated marginalia, each entry 10px, tracking the intellectual lineage of the idea on the current leaf. This column refreshes with a **stagger-fade** on each leaf change (200ms between entries, opacity 0→1). - On mobile (below 768px): the 9-column grid collapses to a single column. The left navigation strip narrows to 24px. The persistent marginalia column disappears. **Spatial logic:** Each leaf is divided horizontally into two bands — upper 38.2% (golden-ratio complement) and lower 61.8%. The display headline always occupies the upper band, aligned to the baseline of the 38.2% line. The body or image occupies the lower band. This is consistent across all five leaves; the proportion is the hidden rhythm that makes the design feel like a tuned instrument even when the content changes radically between leaves. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display / Headlines:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — Italic 300 (Light Italic) for primary headlines; Regular 400 for secondary headings. Size: 8–11vw at viewport width ≥1200px. Letter-spacing: `−0.02em`. This is a revival of the 16th-century Claude Garamond cut, and its italic has an engraved-steel quality that reads as aged ink on paper without any applied texture. - **Body / Captions:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — Regular 400 for body, 400 Italic for captions and marginalia. Size: 17px / 1.72 line height for body; 10px / 1.6 for marginalia. EB Garamond is the Egenolff-Berner specimen cut; its lowercase 'g' and the long-descending 'y' are distinctly Garamond-lineage without the sharpness of Cormorant. Together, Cormorant (display) and EB Garamond (text) form a matched but distinguishable Garamond family pairing — rare in the corpus. - **Accent / System labels:** [Spectral](https://fonts.google.com/specimen/Spectral) — Light 300, uppercase, 9px, letter-spacing `0.18em`. Used only for the rotated leaf titles in the navigation strip and the marginal dates. Its slight optical compression at small sizes echoes the appearance of a typewritten notation. **Palette — sepia-nostalgic:** | Role | Hex | Description | |------|-----|-------------| | Page ground | `#F5EDD8` | Old wove paper — warm cream with amber undertone | | Primary ink | `#2E1E0F` | Walnut-gall ink — the darkest tone, used for body text | | Secondary ink | `#4A3728` | Faded umber — headlines, navigation fill | | Accent | `#8B6C42` | Burnt sienna aged — decorative rules, active states | | Linen | `#C8B89A` | Navigation strip background, image plate border | | Ghost | `#EAE0CC` | Marginalia column background, leaf-edge tone | | Mist | `#B5A48E` | De-emphasized labels, disabled states | No black. No white. Every value is tinted toward amber or umber. The palette is restricted to seven values and they are not extended under any circumstance. ## Imagery and Motifs **Imagery: paper-aged.** All images are treated as if scanned from physical archival sources — botanical specimen prints, astronomical chart fragments, manuscript marginalia. The treatment is consistent: sepia duotone (`#F5EDD8` highlights, `#2E1E0F` shadows) with a 3% grain overlay (`filter: url(#grain)` referencing an inline SVG `feTurbulence` filter). No photographs of people. No product photography. No stock-art hands on laptops. **The image plate:** Each leaf may contain at most one image. The image is never full-bleed; it always has a `12px solid` border in `#C8B89A` (linen) and a 2px inner inset rule in `#8B6C42` (accent). The plate is positioned in the lower-right quadrant of the lower 61.8% band. It is never centered. It is always slightly irregular — rotated between `−1deg` and `+1.5deg` via a small CSS transform — as though placed by hand on a reading table and not quite squared. **Decorative motifs — layered-depth:** - **The pressing mark:** A thin botanical illustration in pure SVG (line-art only, 1px stroke, `#8B6C42`) appears in the upper-right corner of leaf 1 — a sprig of dried lavender pressed flat, built from `` elements with no fill. This is the only decorative illustration. It is 140px tall, top-right of the viewport, `position: fixed`, and persists across all leaves at 30% opacity. - **Horizontal rules:** Two hairline rules (`1px solid #C8B89A`) divide each leaf: one at the 38.2% line, one at the bottom of the marginalia column. These are the only structural ornaments. - **The leaf-number glyph:** In the upper-left of each leaf, a large numeral (01–05) set in Cormorant Garamond 300 Italic at `28vw`, `color: #EAE0CC` (ghost), acts as a watermark behind all other content. It is not interactive and does not animate. It changes on each leaf with a 600ms opacity cross-fade. - **Pulse attention — the marginalia dates:** On first arrival at each leaf (intersection observer), the marginal dates pulse once: `opacity: 0.3 → 1 → 0.7` over 800ms with a `ease-in-out` curve, drawing the eye to the persistent right-margin column without any movement. This is the single animation that uses the pulse-attention pattern. It fires exactly once per leaf per session; it does not loop. **What is explicitly absent:** No icons. No emoji. No social logos. No abstract shapes. No particle systems. No video. No cursor trails. No loading spinners. No modal overlays. No cookie banners styled into the visual layer. ## Prompts for Implementation Build hanun.ai as a **five-leaf folio** — a single HTML file with five full-viewport sections snapped into place by the `scroll-snap-type: y mandatory` property applied to the outermost scroll container. Each section is `scroll-snap-align: start` with `height: 100svh`. The snap behavior creates the "lifting a leaf" sensation without JavaScript-controlled scroll sequencing, which means the experience degrades gracefully when JS is absent. **Structure:** - One `