# Design Language for hangul.day ## Aesthetics and Tone hangul.day is **a Foundry Almanac for the Korean Alphabet** — a dim, oil-lit observation room where the twenty-four letters of 한글 are treated not as cultural ornament but as **engineered components**, machined parts with tolerances and serial numbers. The aesthetic is **dark-mode (14% in the corpus)** rendered as a *workshop after closing*: the overhead fluorescents are off, only the work-light over the lathe is still humming, and the only colors in the room are the sodium-orange glow of that single bulb, the warm umber of varnished pine, and the cooled rust of iron filings on the bench. This is **not** the dark-mode of crypto dashboards or terminal IDEs (which together account for most of the existing 14%); this is the dark-mode of a **letterpress shop at midnight**, of a *hwalja-jang* (활자장, type-foundry master) inspecting a freshly cast brass sort under a desk-magnifier. The tone is **grounded-earthy (2% in corpus, near-virgin territory)**. The site never raises its voice. It does not declare 한글 to be glorious, scientific, or the world's most logical alphabet — these claims are made constantly elsewhere and have lost their purchase. Instead the page acts like a **technical caretaker** who has spent forty years working with these letters and respects them too much to flatter them. Captions are written in the register of a foundry inventory log: serial numbers, casting dates, recommended operating temperatures, known failure modes. Where other 한글-themed pages reach for fireworks, royal blue, and Sejong-the-Great heroism, this one reaches for **a worn leather apron, a brass caliper, and the smell of linseed oil**. The mood is *grave but not solemn*, *technical but not cold*, *Korean but not folkloric*. The visitor should leave feeling they have been admitted to a closed workshop after hours and shown how the letters are actually made — not the legend, but the **machining**. ## Layout Motifs and Structure The composition is **diagonal-sections (4% in corpus, deliberately under-represented territory)**, executed as **a forge floor plan tilted 14 degrees clockwise** so that the full-screen page reads as the bird's-eye view of a workshop bench whose long edge runs from the lower-left to the upper-right. The 14° angle is not arbitrary — it is the **off-square rotation of the standard 한글 syllable block** when viewed as a *machined die* sitting slightly askew on a steel surface plate. Every horizontal rule, every section divider, every text baseline at the section-boundary level rotates with the floor; **only the body type itself stays orthogonal**, because reading rotated body type is cruelty and this is a workshop, not a circus. The page is **a single full-bleed dark canvas** divided into seven diagonal stations by 1px hairlines in oxidised-brass (#7d6543). Each station is a self-contained *bench* with its own work in progress. The seven stations, in scroll order: 1. **Station I — The Cold Bench** (introduction): the empty bench at 04:30 before work begins, only a single hanging bulb and the 24-letter inventory drawer along the diagonal. 2. **Station II — The Cast** (consonants ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ ㅈ ㅊ ㅋ ㅌ ㅍ ㅎ): each consonant rendered as a brass sort, photographed-style but vector-drawn, with stamped serial number, date of original casting (1443.10.09 for the originals), and operating notes. 3. **Station III — The Vowels' Surface Plate** (ㅏ ㅑ ㅓ ㅕ ㅗ ㅛ ㅜ ㅠ ㅡ ㅣ): the ten vowels laid out as **gauge blocks** on a reference plate, their relationships expressed as machinist's tolerances ("ㅏ : ㅓ — mirror across vertical axis, tolerance ±0.0"). 4. **Station IV — The Assembly Jig** (syllable composition): the *cho-jung-jong* (초·중·종, initial-medial-final) stack-rule shown as a literal **assembly jig** — three nesting frames into which letters drop, snap, and lock. Live demonstration: the visitor types into a textbox, the jig assembles the syllable in real time with mechanical click-feedback. 5. **Station V — The Foundry Day** (hangul.day, *the namesake station*): the page's date marker. Today is 2026-05-10. The station shows **a foundry log entry** for today, dated, with a thermometer reading, a humidity reading, and a one-line note about which letters were inspected. 6. **Station VI — The Counter** (live counter-animate): the **counter-animate** pattern (12% in corpus) used not as a vanity stat-grid but as a **production tally**. Three rotating-digit counters tick: *letters cast since 1443.10.09*, *seconds since the last syllable was assembled*, *parts-per-million tolerance variance for ㄱ this morning*. The counters never stop; they breathe. 7. **Station VII — The Sign-out Sheet** (footer): a single line, hand-stamped, "*caretaker on duty: 한글*", the foundry stamp, and the date the page was last inspected. The diagonal sections **do not snap-scroll**. Scroll is continuous and slightly damped (a tactile spring-resistance), as if the visitor is dragging a heavy bench-jack along an oiled rail. There is **no traditional navigation bar**. There is no menu icon. There is one and only one site-wide control: a small brass toggle in the lower-right that switches the bulb between *bench-light* (default warm umber) and *inspection-light* (a momentary cooler tone for examining details). Toggling does not change the data; it changes the **temperature of the light** falling on the bench, exactly as a real toolmaker would. The diagonal hairlines are not just visual; they are **structurally load-bearing**: each section's content is laid out along the 14°-rotated baseline using CSS Grid with `transform: rotate(14deg)` on the section, then `transform: rotate(-14deg)` on the inner content block, leaving only the section-frame and divider rotated. This produces the rare effect that the **room is tilted but the work on the bench is square** — exactly the perceptual register of looking at a real bench from above. ## Typography and Palette **Typography — kinetic-animated (4% in corpus, intentionally underused territory)**, executed in a manner the corpus has not seen: not bouncing-CTA kinetic, not hero-headline kinetic, but **machinist's-tally kinetic** — the type animates only where a real foundry log would animate: digit rolls on counters, the punch-stamp recoil when a letter is "cast" on screen, the slow drift of the date-stamp ink as it dries. Every other letter on the page sits as still as type-metal because **type-metal does not move**. Three Google Fonts only: - **`Noto Serif KR`** (Google Fonts, weights 400/600/900, Korean + Latin coverage) — the **primary voice for all Korean letters and bilingual headlines**. Noto Serif KR is the most carefully drawn free Korean serif and has the right *brushed-into-metal* feel for the foundry register. Used at 14/22 for Korean body, 32–48px for the consonant/vowel station headers, 96px weight 900 for the hangul.day wordmark in Station I. - **`JetBrains Mono`** (Google Fonts, weights 400/500/700, italic optional) — the **machinist's log voice**. All serial numbers, tolerance specs, foundry notes, counter digits, and timestamps are JetBrains Mono. JetBrains Mono is chosen over the corpus-saturated Space Mono / IBM Plex Mono / Geist Mono because its 0/O distinction and its punchy zero-width tabular figures are correct for *digit-roll counters*, and because it is at 9% in tech-mono territory — meaningfully less common than the Inter/Space defaults. Used at 12/18 for log lines, 14/22 for tolerance specs, 22–28px for the kinetic counter digits. - **`Cormorant Garamond`** (Google Fonts, italic 500/600 only, Latin only) — the **caretaker's marginalia voice**. Used *only* for hand-written-feeling captions in the lower-margin field of each station, in italic, at 13/19, 64% opacity, as if the foundry master had penciled a note in the margin of his own log decades ago. Italic-only by intent; the upright Cormorant is forbidden on this page. No fourth font. No display geometric sans. No Inter. No Space Grotesk. **Palette — warm-earthy (3% in corpus), executed as a *workshop-after-dark* register the corpus has not produced.** Eight ramped values, all with documented role: - `#0e0a07` — **bench-shadow black** (the deepest dark, used for background-base behind the diagonal sections; warm-tinted, never neutral or cool). - `#1a130d` — **iron-filing dust** (the secondary background, used inside section frames as the bench surface). - `#2b1f14` — **walnut-oil dark** (panel fills behind text blocks; reads as varnished wood under low light). - `#7d6543` — **oxidised brass** (all hairlines, dividers, frame edges, and the rotated baseline indicators; this is the diagonal-section structural color). - `#a8835a` — **honeyed neutral** (Korean body text on dark; this is the primary readable warm value). - `#c89b6a` — **warm sodium glow** (the bulb-light, used as the radial gradient halo behind Station I and as the inspection-light state). - `#d9a574` — **brass-polish gleam** (Korean headline accents, the hangul.day wordmark fill, the counter digits at peak). - `#e6c8a0` — **paper-cream** (used sparingly, for the foundry-stamp imprint and the caretaker italic marginalia, at the *highest* warmth — never pure white, never pure cream). A single accent — `#a83a1f` (**rust-iron oxide**) — appears in exactly three places on the entire page: the brass toggle's "inspection-light" state, the foundry-stamp circular border, and the punch-stamp recoil flash when a letter is cast. It never appears as a CTA color, never as a link color, never as a hover state. It is a **maker's mark**, used like blood on a knuckle: rare, tactile, never decorative. The palette deliberately *refuses* the Korean-themed defaults — there is no royal blue (Joseon), no cinnabar red (Korean flag), no celadon green (pottery), no five-color *obangsaek*. The page treats 한글 not as a national symbol but as a **manufactured part**, and parts are colored by their material, not their nationality. ## Imagery and Motifs **Imagery — noise-texture (5% in corpus)** as the page's *atmospheric medium*. A single fixed-position SVG `` filter at `baseFrequency="0.78"`, `numOctaves="2"`, blended at 4% opacity over the entire viewport in `mix-blend-mode: overlay`, gives every dark surface the granular feel of *iron filings caught in machine oil*. The noise is **monochrome warm** (sampled from `#a8835a` at low alpha), never RGB-split, never blue-green, never neutral grey. A second, larger-scale noise layer at `baseFrequency="0.04"`, 8% opacity, screen-blend, lives only inside the brass-bordered sort-frames in Station II and produces the *spotted brass patina* on each cast consonant. **No raster images. No photography (the corpus runs at 99% photography — this design refuses it). No 3D render. No AI-image. No stock vector.** **Motifs — tech (15% in corpus), but rendered as *foundry-tech*, not silicon-tech.** The page contains no chips, no circuit boards, no neon-lit servers, no abstract data streams — these are what *tech* means at 15% saturation in the corpus. Instead, *tech* here means: - **Vernier-caliper rules**, drawn in 1px brass strokes as the unit indicators on the vowel surface-plate. - **Tolerance-spec brackets** like `[ ±0.02 mm ]` flanking each letter in the consonant station. - **Punch-stamp circles** with serial-number arcs (e.g., `1443·10·09 — H.001 — ㄱ`). - **A single freehand technical schematic**, hand-drawn-feeling in SVG, of the ㄱ consonant with arrows showing the *tongue-and-velum* articulation it depicts. (This is the one and only nod to 한글's famous *iconic-articulatory* design principle, and it is shown as a **machine-drawing**, not a science-textbook diagram.) - **A foundry stamp** in the footer: a circular brass mark, 80px diameter, with the text `HANGUL FOUNDRY · EST. 1443 · CARETAKER ON DUTY` arcing around the rim, and a single ㅎ at the centre. Every illustrative element is **hand-drawn in SVG, never rendered, never traced from photo**. The line weight is consistent across the page at 1px brass for structural lines and 0.5px brass at 60% opacity for secondary detail. There are exactly **fourteen letterforms drawn as brass-cast sorts** (the fourteen original consonants of *Hunminjeongeum*) and **ten letterforms drawn as gauge blocks** (the ten vowels). They are the only "imagery" the page contains. A *grounded-earthy* motif rule: **no element on this page floats**. Nothing has a drop shadow that pretends it is hovering. Every letter, every counter, every panel sits *on* the bench, with a single 1px-tall hard-edge contact shadow on its lower edge in `#0e0a07`. The page rejects *floating-elements* (7%), *organic-blobs* (10%), *flowing-curves* (5%), *aurora-lights* (3%) — anything that would suggest weightlessness. The bench is heavy. Brass is heavy. 한글 is heavy because it is *made*. ## Prompts for Implementation Build hangul.day as **one HTML document, one CSS file, one ES module, and one SVG sprite sheet (the 14 consonant-sorts and 10 vowel-blocks)**. No framework, no bundler, no raster images, no photography, no video, no WebGL, no canvas, no client-side router, no analytics, no cookies. Korean and Latin glyphs only. The page is a **single long diagonally-stationed scroll** of seven stations totaling roughly seven viewport-heights, designed to be read in approximately five to seven minutes from top to bottom. **Storytelling spine.** The visitor enters the cold bench at Station I before any letters appear; the bulb fades up over 2.4 seconds; the 24-letter inventory drawer slides in along the diagonal from the lower-left, one letter every 80ms (this is the only large staggered entrance on the page). The visitor then scrolls station by station as the foundry comes to life: at Station II the consonant sorts illuminate one at a time as they cross the 50% viewport line, with a soft punch-stamp recoil (a 4px downward translate that springs back over 280ms with `cubic-bezier(.18, 1.4, .42, 1)`); at Station III the vowels lay themselves on the surface plate with a brass-on-stone *settle* (a 1.6px downward drop that does not bounce — gauge blocks do not bounce); at Station IV the assembly jig is **interactive** — the visitor types Korean text into a single text input and the page assembles each syllable in real time with a 60ms cho-jung-jong stack animation; at Station V the foundry-day log entry types itself one character at a time (typewriter at 22 chars/sec, no cursor blink — log entries are written, not chatted); at Station VI the three counters begin counting and never stop while the page is open. **Counter-animate as the page's heartbeat (12% in corpus).** Counter-animate is normally a vanity-metric pattern ("10,000+ users"). Here, the three counters are the **only** numerical content on the entire page and they each express a *foundry condition*: the *letters cast since 1443.10.09* counter ticks at the average historical rate (one letter every 28.5 days, roughly), shown to 6-digit precision; the *seconds since last syllable* counter resets every time a visitor types into the Station IV jig; the *tolerance-variance* counter fluctuates ±0.03 around a baseline, like a needle on a hand-calibrated dial. The counter digit-rolls are CSS-only (a vertical strip of 0–9 inside a clipping mask, animated with `translateY` over 320ms `cubic-bezier(.32, .9, .25, 1.05)`). No JS dependency for the digit roll itself; only a 1Hz `setInterval` driver. **Diagonal-sections technique.** Each `
` has `transform: rotate(14deg)` and `transform-origin: 50% 50%`, with a wider negative margin and a `clip-path` that hides the rotation-overflow at the page edges. Inside each section, a `
` has the inverse `transform: rotate(-14deg)` so body content remains orthogonal to the reader. The 1px brass hairlines that divide stations are drawn by a single full-page SVG overlay (fixed, behind content via `z-index: 1`) so the diagonal lines appear unbroken as the visitor scrolls — the hairlines belong to the *room*, not to the sections. Browser handling: at viewport widths below 720px the rotation is reduced to 6° and the diagonal hairlines become slightly thicker (1.5px) to remain visible — a small foundry's smaller workshop. **Animation rules — kinetic-animated discipline.** Animations are reserved for places where a real foundry would have motion: digit rolls (counters), punch-stamps (consonant casting), ink-dry drift (date stamp on Station V), bulb-warm-up (page entry), and toggle-recoil (the brass toggle itself). **No hover-glow on every link.** **No cursor-follow halo.** **No magnetic buttons.** **No parallax on scroll.** The page rejects the corpus's most saturated patterns (parallax 95%, cursor-follow 86%, magnetic 79%) by simply not using them. The only cursor effect is that **the cursor itself becomes a small brass crosshair** when over Station IV's assembly jig — a working tool, not an ornament. **Sound — explicitly absent.** A foundry is loud. This site is silent. The visitor's mind supplies the click of the punch and the hum of the bulb, exactly as real reading supplies real sound. There is no audio toggle because there is no audio. **Lighting model.** The entire page is lit by a single virtual light source at the upper-right (the bulb over Station I), which produces a very faint warm radial gradient on the body background: ```css body { background: radial-gradient(1200px 800px at 78% 8%, #2b1f14 0%, transparent 65%), #0e0a07; } ``` When the brass toggle is set to *inspection-light*, the gradient's color shifts from `#2b1f14` to `#7d6543` and its size grows by 8%, simulating the moment a toolmaker pulls the bench-light closer to inspect a part. The transition is a 1.4-second `cubic-bezier(.4, 0, .2, 1)` and **only the lighting changes** — no content rearranges, no contrast inverts. This is the *only* state the page has. **Density and pacing.** Body text never exceeds 62 characters per line. Stations are separated by exactly **160px of bench-air** between hairlines so the diagonal cuts feel architectural, not crowded. There is a deliberate **negative-space station** between Stations IV and V — 60% empty bench, the only thing on it the small foundry-stamp circle, half-pressed, ink not yet fully transferred — to give the page a breath before the namesake station. **What the page is NOT.** It is not a CTA-heavy landing page. It has no pricing block, no stat grid in the trade-marketing sense (the counters are foundry instruments, not vanity metrics), no testimonial carousel, no FAQ accordion, no email-signup field, no social-icon row. It is also not a tutorial: it does not explain how 한글 works to someone who has never met it. It is written for a reader who already loves the alphabet and wants to stand in the workshop where it is made. ## Uniqueness Notes This design's deliberate departures from the existing corpus, all verifiable against the registry: 1. **Dark-mode (14%) executed as foundry-after-dark, not crypto-dashboard or terminal-IDE.** The existing 14% of dark-mode designs in the corpus are dominated by neon-on-black tech and terminal-on-black dev aesthetics. hangul.day is the first dark-mode design treating the dark surface as **bench-shadow with a single warm bulb**, with no neon, no green-on-black, no electric blue, no glowing accents, no cursor highlights — only sodium-warm, brass, walnut, and a single rust-iron maker's-mark color used three times. 2. **Diagonal-sections (4%, deliberately under-used) used as a tilted floor plan, not as marketing-page swooshes.** The existing diagonal-section designs in the corpus use the diagonal as a hero-slash divider or a ribbon. This design uses **a 14° rotation as the entire page's coordinate system**, with the deliberate trick of counter-rotating body content so that *the room is tilted but the work is square* — a perceptual register the corpus has not used. 3. **Warm-earthy (3%) palette in workshop register, with Korean cultural defaults explicitly refused.** The corpus contains warm-earthy designs but they tend toward terracotta-ceramics, autumn-leaves, or coffee-cafe registers. This design's eight values are all named for **foundry materials** (bench-shadow, iron-filing dust, walnut-oil, oxidised brass, honeyed neutral, sodium glow, brass-polish, paper-cream) and explicitly reject every Korean-culture-default color (royal blue, cinnabar red, celadon green, *obangsaek*) — a refusal the corpus's other 한글-themed pages have not made. 4. **Counter-animate (12%) reframed as foundry instrumentation, not vanity stats.** The corpus uses counter-animate as "10,000+ happy customers" rotating-digit theatre. This design uses the same pattern as **three live foundry instruments** (letters-cast-since-1443, seconds-since-last-syllable, tolerance-variance), where the counters are the page's *only* numerical content and serve as its heartbeat — not its proof. 5. **Tech motif (15%) realised as foundry-tech, not silicon-tech.** Existing tech-motif designs in the corpus reach for chips, circuits, neon servers, data streams. This design's tech vocabulary is **vernier calipers, tolerance brackets, punch-stamp serial arcs, and a single articulatory-machine-drawing of ㄱ** — pre-electrical engineering, pre-digital, pre-1900. It is *tech* the way a 1920s machinist's catalog is tech. 6. **Grounded-earthy tone (2%, near-virgin) executed as a 40-year-caretaker register.** Most corpus tones lean toward warm-inviting, energetic, friendly, or playful (these dominate). hangul.day commits to a **tone the corpus has barely tried**: a low-volume, technically-respectful, slightly weary register — the voice of a foundry caretaker who has lived with these letters longer than the visitor has been alive. The page never declares 한글 to be glorious; it inspects it. 7. **Kinetic-animated (4%) restricted to foundry-physical motion only.** Existing kinetic-animated designs in the corpus reach for hero-headline morph, scroll-tied stretching, magnetic-CTA bounce. This design's kinetic vocabulary is restricted to four physical events: **digit rolls, punch-stamp recoils, ink-dry drift, and bulb warm-up**. Every other letter on the page is as still as type-metal. 8. **Noise-texture (5%) in monochrome-warm with a structural role.** Most corpus uses of noise-texture are decorative grain overlays at uniform opacity. This design uses **two distinct noise layers** (a 4% page-wide overlay sampled from the honeyed-neutral, and an 8% screen-blend brass patina that lives only inside the consonant-sort frames) — the noise is *materially specific*, mimicking iron-filings-in-oil at the page level and brass patina at the sort level. 9. **No photography, no 3D, no raster, no AI-image, no Korean cultural iconography.** The corpus runs at 99% photography. This design refuses photography entirely and also refuses every visual trope the 한글-themed page reaches for (Sejong's portrait, *taeguk*, hanbok, palace tile, calligraphy brush). The visual vocabulary is exclusively **24 hand-drawn-in-SVG letterforms, vernier-caliper rules, brass hairlines, a foundry stamp, and a single articulatory schematic of ㄱ**. 10. **No CTAs, no pricing, no stat-grid, no email signup, no FAQ, no testimonials, no social row.** The page is one continuous narrative experience whose only interactive element is the Station IV typing jig and the bench-light brass toggle. It is anti-marketing in the literal sense: there is nothing to convert. **Chosen seed:** `aesthetic: dark-mode, layout: diagonal-sections, typography: kinetic-animated, palette: warm-earthy, patterns: counter-animate, imagery: noise-texture, motifs: tech, tone: grounded-earthy`. Of the eight seed dimensions, six land in actively underused corpus territory (dark-mode 14%, diagonal-sections 4%, kinetic-animated 4%, warm-earthy 3%, noise-texture 5%, grounded-earthy 2%); counter-animate sits at moderate frequency (12%) but is reframed away from vanity stats into foundry instrumentation; tech is corpus-saturated (15%) but is reframed away from silicon into pre-electrical foundry-tech. **Avoided patterns from frequency analysis:** hand-drawn aesthetic (96%, refused — every illustration is a hard-edged technical drawing, never sketchy), photography (99%, refused entirely), full-bleed layout in the conventional sense (94%, refused in favor of full-bleed-but-rotated diagonal stations), card-grid (85%, refused — there are no cards anywhere), centered layout (82%, refused — content rides the diagonal), parallax (95%, refused), cursor-follow (86%, refused — only a tool-crosshair cursor over the typing jig), spring (85%, used only inside the punch-stamp recoil), magnetic (79%, refused), stagger (79%, used only at page-entry for the letter-drawer slide-in), gradient palette (97%, refused except for the single bench-bulb radial gradient), warm palette (97%, intersected with earthy to land at warm-earthy 3% — the warm value is preserved but the gradient-hero treatment is refused). The page is built as a **deliberate counter-program** to the corpus's saturation defaults.