# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz is **a 1930s municipal treasury ledger that has been pressed under glass in a brass-railed reading room and lit by a single low lamp** — "yesan" (예산) is the Korean word for *budget*, and this site treats a budget the way an art-deco civic architect treated a power station: as something monumental, gilded, geometrically rigorous, and quietly proud of its own arithmetic. The mood is **art-deco ornate luxury** (6% in the corpus, and almost none of those treat money as the subject) crossed with the cold precision of **double-entry bookkeeping**: think the lobby of the Chrysler Building rendered as a balance sheet, or a hand-engraved bearer bond that knows exactly how much it is worth and is not ashamed to say so in stepped, fan-rayed capitals. Tone is **opulent-grand** (4% in the corpus — deliberately rare; the codebase is flooded with pastoral-romantic and warm-inviting) but never gaudy: the luxury is in the *exactitude*. Hairlines are 0.5px and dead straight. Numerals align to a sub-pixel decimal column. Gold is used like a treasury watermark — sparingly, with intent, never as a wash. The site does not sell budgeting software; it **narrates the ceremony of a single budget being drafted, balanced, sealed, and filed** — five movements, like a financial liturgy. Nothing blinks. Nothing nags. The page behaves like a notary: it shows you the figures, lets the ink dry, and stamps the corner. ## Layout Motifs and Structure The page is a **single descending shaft of five "ledger plates"** — full-bleed horizontal bands, each the height of the viewport, stacked vertically and joined by thin **rule-lines that draw themselves like a ruling pen crossing a fresh page**. This is `stacked-sections` (3% in the corpus) over `full-bleed`, with **no card grid, no bento box, no dashboard, no asymmetric scatter** — a ledger has *rows*, not tiles, and this site is religious about that. Each plate is internally divided by the **art-deco "stepped ziggurat" column rule**: a left margin column (24% width) holding the plate's roman-numeral title and a stepped brass bracket, and a right field (76%) holding the plate's content set on a strict 12-line accounting grid where every baseline is a multiple of the 28px body leading. **The Five Ledger Plates (top to bottom):** 1. **Plate I — The Empty Folio.** A full-bleed cream field with a single fan-rayed deco sunburst engraved faintly behind the wordmark "yesan" set in stepped capitals; below it, one line of hairline-ruled "subtotal: 0.00" that the eye reads as a promise. A vertical brass plumb-line on the left edge descends past the fold to invite the scroll. 2. **Plate II — The Reckoning.** Three horizontal ledger rows slide in from the left margin like pages being laid down; each row is a "line item" — a deco label, a leader-dot rule, and a right-aligned figure in the tabular numeral face. As the plate enters, a running total in the right field counts up the rows' sum with a mechanical, non-easing tick. 3. **Plate III — The Balance.** The centerpiece: a large **double-pan deco balance** drawn entirely in SVG hairlines and brass fills — left pan "outlays," right pan "revenues" — that tips, settles, and locks level as the plate centers in the viewport, the beam clicking to horizontal with a tiny brass glint at the fulcrum. 4. **Plate IV — The Seal.** The budget is "approved": a stepped art-deco cartouche assembles itself stroke by stroke around a wax-seal monogram, the seal pressing down (a 1.04→1.0 scale settle) and a thin embossed ring radiating once. 5. **Plate V — The Archive.** The plate folds shut: the whole page's accumulated rule-lines retract toward a single horizontal "filed" line, a deco drawer-pull glyph slides closed, and the wordmark reappears small in the bottom-left corner with the final balanced figure beside it. No footer links, no newsletter, no "back to top" — the drawer simply closes. There is **no top navigation, no hamburger, no logo cluster**. Navigation is the **brass plumb-line on the left edge**, which carries five tiny incised notches (one per plate); the active notch fills brass and a hairline roman numeral (I / II / III / IV / V) ghosts in 10px to its right. That rail is the only chrome on the page. ## Typography and Palette **Fonts (Google Fonts only — three voices, set like engraved plates):** - **Display & wordmark — `Poiret One` (400).** A geometric art-deco display face with circular bowls, hairline strokes, and the elongated, stepped feel of 1930s elevator-panel lettering. Used for "yesan", the five plate roman numerals, and the deco cartouche text. Tracked wide: `0.18em` on the wordmark, `0.32em` on roman numerals, always uppercase or small-caps-styled. - **Ledger labels & running text — `Cormorant Garamond` (300, 400, 500, italic).** A high-contrast serif revival that reads like fine treasury copperplate when set small with `0.02em` tracking; carries all line-item labels, plate prose, and the seal's legal phrasing. Italic 400 is reserved for marginalia ("as ruled," "carried forward"). - **Figures & tabular numerals — `IBM Plex Mono` (400, 500), `font-variant-numeric: tabular-nums`.** Every monetary figure, subtotal, running total, and the decimal-aligned columns are set in this. Mono is 93% in the corpus — here it is *quarantined to numbers only*, never to UI text, so it reads as accounting-machine output rather than dev-terminal default. **Palette (eight values — a treasury document under lamplight):** - `#F4EEDF` — **folio cream**, the dominant page field (warm parchment, not white). - `#E7DCC2` — **aged ledger**, secondary band fill and the back of the "balance" pans. - `#1C1A14` — **iron-gall ink**, near-black for all primary text and hairlines. - `#B89243` — **treasury brass**, the rail, the balance beam, deco brackets — the *only* metallic, used at < 12% of any plate's area. - `#7A6018` — **deep gilt**, brass in shadow / pressed-seal recesses. - `#5C3A2E` — **sealing-wax umber**, the wax monogram and Plate IV cartouche accents. - `#3B4A3E` — **counting-table baize**, a muted bottle-green used only for the leader-dot rules and the "balanced" confirmation tint (the green-eyeshade nod). - `#FBF7EC` — **highlight vellum**, the faint sunburst rays and the lifted edge of each ledger plate. No gradients as decoration (gradient is 92% in the corpus — this site uses *flat engraved fills and hairlines* instead). No glassmorphism. No drop-shadow soup — only a single 0.5px hairline shadow under each lifted plate edge. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No emoji. No icon font.** Every visual is (a) typeset, (b) a hand-built SVG in art-deco geometry, or (c) a procedural hairline rule. Imagery is `geometric-abstract` + `vector-art`, both low-frequency, with zero `photography` (which sits at 97%). **The deco vocabulary (a small set, repeated as ritual):** - **The fan-rayed sunburst** — a half-rosette of 21 hairline rays stepping from short to long, the canonical deco motif; appears full behind Plate I's wordmark at 9% opacity, and as a tiny 16px fulcrum-glint on Plate III's balance. - **The stepped ziggurat bracket** — a three-tier brass right-angle that frames each plate's roman numeral in the left margin; the same form, scaled up, becomes Plate IV's cartouche. - **Leader-dot rules** — the row of evenly-spaced dots between a ledger label and its figure, drawn in baize-green; these *animate as path-draws*, dot by dot, left to right, when a line item enters. - **The double-pan balance** — pure SVG hairline + brass fill, with a beam, a triangular fulcrum, two suspension lines, and two shallow pans; the only "illustration" on the site, and it is mechanical, not pictorial. - **The wax seal monogram** — a circular umber stamp with a stepped-Y deco glyph (for 예/yesan) embossed via a 0.5px inner highlight and a 0.5px outer shadow ring; it *presses* once on Plate IV. - **The plumb-line rail** — a single 1px brass vertical on the left edge with five incised notches; doubles as a scroll-progress indicator without ever showing a percentage. - **Decimal-column alignment** — every figure on the page shares one invisible vertical decimal axis; this *is* a motif here, treated with the same reverence other sites give to a hero image. ## Prompts for Implementation Build yesan.xyz as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a roughly 80-second descent through five ledger plates. There is **no CTA, no pricing table, no stat-grid, no testimonials, no email capture, no FAQ, no logo wall, no contact form, no chatbot, no cookie banner, no "trusted by" strip** — a treasury ledger does not upsell. **Story arc (five plates, vertical scroll, mechanical/precise easing — NOT springy):** 1. **Plate I — Empty Folio.** Cream field. Faint fan-rayed sunburst SVG fades in behind the `Poiret One` wordmark "yesan" over ~900ms. Below: `subtotal — 0.00` in `IBM Plex Mono`, hairline-ruled. The brass plumb-line draws downward from the top edge (SVG `stroke-dashoffset` path-draw) to a notch just past the fold, signalling "scroll." A `Cormorant Garamond` italic line: *"a budget, drafted in five movements."* 2. **Plate II — The Reckoning.** As the plate scrolls into view, three "line item" rows lay down one at a time (each: translateX from the left margin, 280ms, `cubic-bezier(.2,.7,.3,1)` — firm, no overshoot). Each row: deco label (Cormorant), baize leader-dots that path-draw dot-by-dot, right-aligned figure (Plex Mono, tabular-nums) on the shared decimal axis. A running total in the right field uses `requestAnimationFrame` to tick up the sum with a *linear* count (no ease) — it should feel like an adding machine, ending on a crisp figure. 3. **Plate III — The Balance.** Centerpiece SVG: a double-pan deco balance. On scroll-enter, the beam starts tilted (~-9°), oscillates twice with decaying amplitude, and locks to 0° (`transform: rotate`, controlled by a JS damped-oscillation function, ~1200ms total). At lock, a 16px fan-glint at the fulcrum flares opacity 0→1→0.4 over 300ms, and the caption resolves: *"outlays meet revenues — the folio is level."* Optional `prefers-reduced-motion`: skip oscillation, render level immediately. 4. **Plate IV — The Seal.** A stepped art-deco cartouche (the ziggurat bracket, scaled) assembles via SVG path-draw, stroke by stroke, ~1000ms. Then the wax-seal monogram scales 1.04→1.00 over 220ms (a "press") and a single embossed ring (a stroked circle) scales 1→1.6 while fading 0.5→0, once. Caption in Poiret One tracked wide: *"APPROVED · CARRIED FORWARD."* 5. **Plate V — The Archive.** All accumulated horizontal rule-lines on the page animate their `transform-origin` toward center and collapse to a single line over ~700ms (stagger 40ms each, top-down). A deco "drawer-pull" glyph (a small stepped lozenge on a hairline) slides 24px and stops with a hard ease-out. The wordmark reappears bottom-left at 0.7rem beside the final balanced figure. Then: stillness. The page ends; the drawer is shut. **Interaction details:** The left plumb-line rail updates its active notch via `IntersectionObserver` on the five plates; the ghosted roman numeral fades in/out at `0.4` opacity, never more. No cursor-follow blob, no magnetic buttons, no parallax layers, no tilt-3d cards — those four sit at 89%/76%/87%/32% in the corpus and this site categorically refuses them. The only "hover" affordance: line-item rows in Plate II lift their leader-dot rule by 1px and brighten the figure to deep-gilt — a clerk's fingertip resting on a line. All motion uses *firm* curves (no `spring`, no `elastic`, no `bounce`); the metaphor is engraving and mechanics, not rubber. Respect `prefers-reduced-motion` by replacing every entrance with a 1-frame opacity fade and rendering the balance pre-leveled. **Texture:** a single full-page procedural grain at ~3% opacity (CSS `radial-gradient` dot-noise or a tiled inline SVG `feTurbulence`) to give the cream the tooth of treasury bond paper. No paper-curl images, no torn edges. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Money treated as monument, not dashboard.** The corpus's finance-adjacent sites lean into `dashboard` (36%), `data-viz`, `fintech trust blue`, gauges and charts. yesan.xyz has *zero charts, zero dashboards, zero KPI tiles* — a budget is staged as a five-act ceremony of engraved ledger plates with one mechanical SVG balance. It is art-deco civic grandeur applied to a balance sheet, a combination essentially absent from the 694 files. 2. **Mono quarantined to numerals only.** `mono` typography is 93% corpus-wide and almost always carries UI text and headings. Here `IBM Plex Mono` is forbidden everywhere *except* monetary figures and the decimal-aligned columns, where it reads as adding-machine output — turning the most overused token into a deliberate, narrow instrument. 3. **Stacked rows, never tiles.** `card-grid` (93%) and `bento-box` (18%) are refused outright in favor of `stacked-sections` (3%): the page is structured like an actual ledger — full-bleed horizontal bands and self-drawing rule-lines — because rows are what a ledger *is*. 4. **Firm/mechanical motion in a spring-saturated corpus.** `spring` (83%), `magnetic` (76%), `cursor-follow` (89%), `parallax` (87%), `tilt-3d` (32%), `elastic` (22%) are all explicitly banned. Every animation uses firm cubic-beziers, linear counters, and a damped-oscillation balance — the feel of engraving tools and counting machines, not rubber bands. 5. **Gold as watermark, not wash.** Against a corpus where `gradient` is 92% and `glassmorphism` 86%, this site uses *flat engraved fills and 0.5px hairlines only*, with `treasury brass` capped at under 12% of any plate's area — luxury expressed through restraint and exactitude rather than shine. **Chosen seed/style:** `art-deco ornate luxury` — instantiated as *aesthetic: art-deco, layout: stacked-sections, typography: art-deco-display, palette: gold-black-luxury, patterns: path-draw-svg, imagery: geometric-abstract, motifs: sharp-angles, tone: opulent-grand*. Six of those eight tokens are deliberately low-frequency in the corpus (art-deco 6%, stacked-sections 3%, art-deco-display 3%, gold-black-luxury 2%, geometric-abstract 4%, opulent-grand 4%); `path-draw-svg` (50%) and `sharp-angles` (7%) are re-purposed away from their usual playful/tech contexts into engraving and deco geometry. **Avoided patterns from frequency analysis:** hand-drawn (94%), glassmorphism (86%), photography (97%), card-grid (93%), warm-as-only-direction / gradient (92%/98%), cursor-follow (89%), parallax (87%), spring (83%), magnetic (76%), stagger-as-default (67%), tilt-3d (32%), dashboard (36%), bento-box (18%), pastoral-romantic (30%), and mono-for-everything (93%).