# Design Language for sunhan.church ## Aesthetics and Tone sunhan.church is a quiet, warm-hearted digital sanctuary that feels like sitting in a wood-paneled fellowship hall at golden hour while a slide projector clicks through old congregation photos. The aesthetic is **Scandinavian** restraint pulled toward a **nostalgic-retro** Korean church-bulletin warmth: pale unbleached parchments, hand-set humanist type, a single fireside-orange accent, and the soft, dust-flecked bokeh of late-afternoon sun pouring through a sanctuary window. Imagine a 1978 hymnal photographed for a 2026 design annual — calm, devotional, never showy, never trying to convert the visitor with shouty CTAs. The **tone** is reverent but unguarded — like a pastor's shared notebook, not a marketing brochure. Words breathe. Whitespace does liturgical work. Where most church sites lean either glossy-megachurch or amateur-clip-art, this design occupies the rare seam between **Scandinavian visual literacy** and **Korean han-warmth (한)** — the wistful, quiet ache of belonging. Visitors should feel they have stumbled into a private archive someone has lovingly maintained for forty years. ## Layout Motifs and Structure **Persistent left sidebar** that reads like the spine of a leather hymnal — fixed at 280px on desktop, full-width drawer on mobile, never collapsing on tablet. The sidebar contains: a small letterpressed wordmark "선한교회 / sunhan.church", a numbered table-of-contents (I. Welcome, II. This Week's Worship, III. Sermon Archive, IV. Community Notes, V. Visit), a single date line in IBM Plex Mono ("주후 二〇二六년 五월 九일"), and a tiny bokeh thumbnail that subtly pulses with each scroll-triggered section change. The right canvas is a **single deep scroll-track** built from generous **scroll-triggered chapters** — each chapter is a full-viewport "leaf" with `min-height: 95vh` and a `padding: clamp(8vh, 14vh, 16vh) clamp(2rem, 6vw, 6rem)`. Section transitions are not hard cuts: as one chapter scrolls out, its bokeh background slowly cross-fades to the next chapter's bokeh layer over `400ms`, while a thin horizontal hairline (`#c8a070` at 20% opacity, 1px) sweeps left-to-right with a `cubic-bezier(.2,.7,.2,1)` curve — a page-turn cue, not a banner. Within each chapter, the **content column is narrow on purpose** — `max-width: 58ch` for prose, left-aligned (not centered, never centered), with a 16-column underlying baseline grid showing only as faint vertical guides on hover near the edges. Margins are asymmetric: more breathing room on the right than the left, because the eye returns to the sidebar. Pull-quotes from sermons sit in the right margin in a 3-line cap, set in a 0.9rem italic with a `border-left: 2px solid #d97a3a; padding-left: 0.75rem`. There is no hero banner. There is no carousel. There is no "Plan Your Visit" CTA strip. The first thing a visitor sees is a single sentence in 1.6rem humanist roman, set against bokeh, with three lines of breathing room above it. ## Typography and Palette **Fonts (all Google Fonts):** - **Display & Headings:** "Fraunces" — a contemporary humanist serif with optical sizes and a soft, warm-bodied feel. Used at weights 300 and 500, with `font-optical-sizing: auto`, `font-variation-settings: "SOFT" 50, "WONK" 0`. Section titles at `clamp(2.4rem, 5vw, 3.6rem)`, leading `1.15`, tracking `-0.01em`. The optical "soft" axis gives Fraunces a hymnal-warm presence rare on the web. - **Body:** "Source Serif 4" — a humanist text serif with a generous x-height and quiet authority. Weight 400 / italic 400 at `1.0625rem` with `line-height: 1.78` and `letter-spacing: 0.005em`. For body Korean, paired with **"Noto Serif KR"** weight 400 at the same size — the fallback stack is `"Source Serif 4", "Noto Serif KR", Georgia, serif`. - **Sidebar nav & meta:** "Inter" weight 500 at `0.78rem`, `letter-spacing: 0.14em`, `text-transform: uppercase`. A single sans for chrome, never for content. - **Date stamp & numerals:** "IBM Plex Mono" weight 400 at `0.78rem`, used only for the running date and section roman numerals — a tiny bibliographic detail that signals "this is an archive, not a brochure". **Palette — Sunset-Warm Sanctuary:** - `#f4ead8` — **Vellum** (primary background). Unbleached parchment, slightly warmer than off-white, never `#fff`. - `#ecddbf` — **Hymnal Margin**. The sidebar background, half a tone deeper than vellum, like the inner margin of a much-handled book. - `#2d2118` — **Ink Brown** (primary text). Not black — a warm sepia-black that reads like 1970s offset ink on uncoated paper. - `#5b4633` — **Pew Walnut** (secondary text, captions, small print). - `#d97a3a` — **Sanctuary Ember** (single accent — rules, link underlines, pull-quote bars, pulsing bokeh thumb). The color of the sun behind a stained-glass cross at 5:47 PM. - `#c8a070` — **Brass Lectern** (hairlines, sidebar borders, hover states). A tarnished, humble brass — never gold, never shiny. - `#7a3d20` — **Vesper Bronze** (deepest accent, used only for visited links and the sidebar wordmark). - `#fbf3df` — **Highlight Vellum** (used only behind the active sidebar item, with `mix-blend-mode: multiply` over the bokeh). The palette is **strictly seven swatches** — no greys, no blues, no greens. The discipline is the point. ## Imagery and Motifs **Bokeh-background as the spiritual substrate.** Every chapter has a full-bleed bokeh layer rendered as a stack of 18–24 SVG `` elements with `filter: blur(40px) blur(80px)`, positioned with golden-ratio jitter, opacity ramped `0.18` to `0.42`, colors sampled exclusively from the sunset-warm palette (vellum, sanctuary ember, brass lectern, vesper bronze). The bokeh **does not move on parallax** — it breathes: a 14-second `ease-in-out` opacity oscillation between `0.85` and `1.0`, like sun moving behind a slow-passing cloud. Each chapter has its own bokeh seed (deterministic from the chapter index) so visitors who scroll back recognize "ah, this is the sermon archive light". **Tech motif, but as quiet liturgy:** the only tech-coded elements are (1) a small monospace `>` prompt that appears before each chapter's first heading, blinking once on scroll-in then resting; (2) a thin scroll-progress meter rendered as a vertical Brass Lectern hairline along the sidebar's right edge, ticked every `12.5%` like a tape measure; (3) a single hidden-but-discoverable keyboard shortcut (`g` then a roman numeral) that scroll-jumps to chapters — surfaced only via a 0.7rem footer note. No icons, no logos cloud, no tech-stack badges, no GitHub octocat. **Hand-letterpress wordmark:** the sidebar wordmark "선한교회" is rendered as a slightly-imperfect inline SVG with subtle `filter: url(#paper-bleed)` — a `feTurbulence` + `feDisplacementMap` filter at very low intensity (`scale=0.6`) that mimics ink bleeding into uncoated paper. Hangul beside the Latin wordmark, never above, never below — they share a baseline. **Numbered roman-numeral section markers** appear as a 5rem display-weight Fraunces in the top-left of each chapter, set in Brass Lectern at 18% opacity — large enough to be a wayfinding device, faint enough to read as a watermark. **Photography rule:** if photographs appear at all (community pages only), they are duotoned with `feColorMatrix` to Vellum highlights and Vesper Bronze shadows, then placed inside a 4px Hymnal Margin border with a 12px Vellum mat — the matted-gallery framing of a 1970s church bulletin board. ## Prompts for Implementation Build sunhan.church as a **slow-scroll devotional archive**, not a website with sections. Prefer narrative continuity over modular blocks. Every interaction should feel like a page turn, not a click. **Concrete implementation moves:** - HTML uses `
` for each chapter, `