# Design Language for namu.quest ## Aesthetics and Tone `namu.quest` is a **tech-tutorial site that reads like a handwritten letter found tucked inside a 1960s darkroom manual** — part instruction, part artifact. The word *namu* (나무) means "tree" in Korean, invoking something rooted, patient, and structural. The site honors that: every tutorial is a branch in a growing knowledge tree, and the visual system makes that branching architecture visible without being cute about it. The palette is **sepia-nostalgic** — not the Instagram filter kind, but the honest kind: aged photographic paper, developer-chemical brown, matte ivory, and deep shadow-ink. Against this warm ground, a single cool accent — a faded indigo-steel (#4A5568 with opacity) — marks interactive elements and code blocks, creating the sensation of annotations written in a different hand on a document found later. The tone is **tech-tutorial** but filtered through patience and craft. There is no urgency here. Tutorials are not listicles. Each one is a **documentary photograph of a process** — you see the hands, the tools, the mistakes. The prose is first-person and unhurried. The typography enforces this: wide line-height, generous paragraph spacing, no aggressive heading hierarchies. Inspiration: the grain of a Leica contact sheet; the margin notes in a well-loved O'Reilly book; the unhurried texture of Winogrand's contact prints; a Japanese craftsman's instruction pamphlet from 1978. ## Layout Motifs and Structure The layout is a **broken-grid** — but disciplined, not chaotic. The grid breaks along photographic principles: the rule of thirds, the deliberate off-center placement that creates visual tension without disorder. **Primary structure:** - A 12-column grid with a dominant 7-column reading column offset to the left (columns 2–8) - A persistent 4-column "annotation margin" on the right (columns 9–12) that carries running commentary, code callouts, and cross-references — like margin pencil notes - The left edge of the page (column 1) is a thin rule line, a single 1px stroke in `#8B7355`, that runs the full page height — a binding spine **Progressive disclosure pattern:** - Tutorial steps begin collapsed to their heading + a single evocative sentence - On hover, the step expands into its full body — no button click required, just presence - Code blocks appear from behind the annotation margin, sliding leftward into the reading column on focus, creating a brief depth effect - Section transitions use a horizontal scan-line wipe, like advancing film in a projector **Broken-grid moments:** - Pull-quotes break out of the reading column to span from column 2 to column 11, at a -1.5° tilt, as if typed on a card and pinned - Hero section: the title sits in column 2 baseline-aligned to the bottom third of the viewport; an oversized duotone photograph bleeds to the right edge, starting at column 6 - Tutorial "callout boxes" anchor to the annotation margin but let their left border intrude into the reading column by 24px — the intrusion is marked with a short horizontal rule in sepia **Grid lines as motif:** - The grid is subtly visible: a ghosted 1px column rule at 4% opacity (`rgba(139, 115, 85, 0.04)`) runs the full height, visible only against the ivory background — not decorative, structural evidence ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & H1 — `Playfair Display`** (wght 400, 700; italic variant): Set at 72px for hero, 48px for major section breaks. Used in italic for pull-quotes and tutorial titles. The high contrast between thick and thin strokes creates a photographic negative quality against the sepia background. Letter-spacing: -0.02em at display sizes. - **Body text — `Lora`** (wght 400, 500; regular and italic): 18px / 1.85 line-height. A workhorse serif that reads long-form without fatigue. Code-adjacent text set at 16px. Lora's slight warmth and moderate x-height pairs naturally with Playfair without competing. - **Code & annotation labels — `JetBrains Mono`** (wght 400, 500): 14px / 1.7 line-height. Code blocks use this. Annotation margin labels (step numbers, cross-reference tags) also use JetBrains Mono at 11px uppercase with 0.12em letter-spacing — the typewriter annotation look. - **UI micro-labels — `Inter`** (wght 400, 500): 12px. Navigation, breadcrumbs, timestamps. Used sparingly to prevent a fourth visual tier from competing. **Palette — sepia-nostalgic:** | Role | Hex | Description | |------|-----|-------------| | Page ground | `#F5EFE0` | Aged photographic paper, warm ivory | | Deep shadow | `#2C2416` | Near-black with warm undertone, body text | | Sepia mid | `#8B7355` | Developer-chemical brown, rules and borders | | Sepia light | `#C4A882` | Faded print, secondary text, step numbers | | Annotation ink | `#4A5C72` | Cool indigo-steel, code blocks and interactive states | | Highlight wash | `#E8D5A3` | Sun-faded yellow, selection highlight and hover state | | Code ground | `#1E1A14` | Deep warm dark, code block background | | Code text | `#D4C5A0` | Aged terminal amber, default code text | | Pull-quote rule | `#B89A6C` | Tarnished gold rule line for pull-quotes | ## Imagery and Motifs **Duotone photography** is the core visual element — but treated as primary document rather than decoration. Photos appear once per tutorial (in the hero zone) processed in a two-tone ramp: `#2C2416` (shadow) to `#C4A882` (highlight), with the midpoint tinted toward sepia rather than gray. This is not Instagram duotone — it is the look of a photograph printed in a 1970s technical manual. **Grid-line motif:** - The subtly-visible column guides described in the layout section are part of the motif system — the grid IS the decoration - At the intersection of column rules and section breaks, small `×` marks appear (8px, `#8B7355` at 20% opacity) — like registration marks on a printing plate - The annotation margin carries a continuous dotted vertical rule (`2px dotted #C4A882` at 30% opacity) separating it from the reading column **Decorative elements:** - **Film-strip edge**: A 24px band along the left spine of the page carries alternating light/dark rectangles (6×8px) at 40px intervals — the perforations of a 35mm film strip, rendered in `#C4A882` at 15% opacity. This reinforces the photographic lab metaphor. - **Step markers**: Tutorial steps are numbered with large Playfair Display numerals (120px, `#F5EFE0` — same as background, so they appear as embossed ghost numerals) behind the step heading. The numeral bleeds into the annotation margin. - **Twig/branch SVG motif**: At the very top of the page (and optionally at the footer), a single SVG line drawing of a bare tree branch — minimal, 2px stroke, `#C4A882` at 25% opacity — spans the full page width as a horizontal rule replacement. This is the only organic shape in an otherwise geometric layout. **Code block treatment:** - Background: `#1E1A14` (deep warm dark) - A 3px left border in `#4A5C72` (annotation ink) - Filename label in JetBrains Mono 11px, `#B89A6C`, above the block on the annotation-margin side - Subtle noise texture overlay (CSS `filter: url(#grain)`) at 4% opacity gives code blocks a printed-page feel ## Prompts for Implementation **Build this as a long-scrolling documentary about a craft being learned.** The reading experience is the product. Every implementation decision must ask: does this feel like reading a well-made book, or like using an app? **Interaction vow: reveal on presence, not on click.** Tutorial steps expand on hover. Code blocks shift forward on focus. Pull-quotes tilt subtly on scroll entry. The page is alive but not performative — it notices your attention quietly. **Specific implementation guidance:** 1. **The broken-grid hero**: Use CSS Grid with `grid-template-columns: repeat(12, 1fr)` and a named area `photo` spanning columns 6–13 (bleeding past the 12-column boundary using a negative right margin of `-5vw`). The hero title sits at `grid-column: 2 / 8`, `align-self: end`, with `padding-bottom: 10vh`. The duotone photo covers the right 55% of the viewport at full height using `object-fit: cover` with a CSS duotone filter: `filter: sepia(1) hue-rotate(-20deg) saturate(0.8) contrast(1.1)`. 2. **Progressive disclosure for tutorial steps**: Each `
` starts with `max-height: 4.5rem; overflow: hidden` and a CSS `transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)`. On hover, JavaScript measures the full `scrollHeight` and sets that as `max-height`. This mimics developing a photograph — the image resolves slowly from the developer bath. 3. **Film-strip spine**: A `position: fixed; left: 0; top: 0; width: 24px; height: 100vh` element with an SVG pattern background of alternating rectangles. The strip scrolls at 0.3× the page speed using a scroll event listener that sets `transform: translateY(scrollY * -0.7)` — a subtle parallax that reinforces depth. 4. **Annotation margin behavior**: The margin column (`position: sticky; top: 2rem`) holds step metadata. On mobile (< 768px), the annotation margin collapses above the step content as a small metadata row. The transition between desktop and mobile layouts uses a smooth GSAP layout animation if available, otherwise a CSS grid reflow. 5. **Scan-line section transition**: Between major sections, a horizontal `
` enters from the left at `width: 0` and expands to `100vw` over 400ms using a cubic-bezier ease, then contracts to the right, revealing the next section. Color: `#8B7355` at 60% opacity. Triggered by IntersectionObserver. 6. **Pull-quote tilt**: Pull-quotes use `transform: rotate(-1.5deg)` as their resting state. On scroll entry (IntersectionObserver), they transition from `rotate(-1.5deg) translateX(-20px) opacity(0)` to `rotate(-1.5deg) translateX(0) opacity(1)` over 500ms. The tilt is permanent — they always appear as pinned cards. 7. **Code block slide-in**: When a code block enters focus (`:focus-within`), it transitions `transform: translateX(0)` from `translateX(24px)` over 300ms — appearing to slide out of the annotation margin. This requires `overflow: hidden` on the reading column with a deliberate `clip-path` reveal. 8. **Ghost step numerals**: Large Playfair Display numerals are `position: absolute; right: -0.2em; z-index: 0; color: #F5EFE0; font-size: 120px; line-height: 1; user-select: none; pointer-events: none`. They must be exactly the same color as the page background — visible only due to the type's textured ink-on-paper rendering via text-shadow: `0 1px 2px rgba(0,0,0,0.08)`. **AVOID in this implementation:** - CTA buttons, pricing blocks, or conversion-focused UI - Dark mode toggles or theme switchers - Sidebar navigation that competes with the reading column - Animated hero text that types or scrambles - Any gradient that goes from one vivid color to another — gradients here are always tonal (light sepia to dark sepia) ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: minimalist, layout: broken-grid, typography: playfair-elegant, palette: sepia-nostalgic, patterns: progressive-disclosure, imagery: duotone-photo, motifs: grid-lines, tone: tech-tutorial **Differentiators from every other design in the registry:** 1. **The annotation margin as a first-class UI zone.** Most designs use full-bleed columns or centered layouts. `namu.quest` treats the right 4 columns as a distinct structural zone — not a sidebar, not a widget area, but a margin for handwritten-style annotation. This is a direct reference to how technical readers actually use books. 2. **Progressive disclosure via hover-expansion, not accordion clicks.** The step-reveal interaction models film development: content resolves slowly from a latent state. This is functionally identical to a traditional accordion but experientially completely different — it rewards presence (hovering) rather than decisiveness (clicking), which matches a contemplative tech-tutorial tone. 3. **The film-strip spine as structural parallax.** The 24px left band is not a decorative flourish — it is a navigational device. As the user scrolls, the film-strip advances at 0.3× speed, making the strip's frame count a proxy for reading progress without requiring a progress bar. No other design in the registry uses this technique. 4. **Duotone photography as page-count constraint.** Each tutorial page gets exactly one duotone photograph, full-bleed on the right half of the viewport. This is not a gallery or an illustration system — it is a cover image that anchors the entire page. The constraint is intentional: limiting photography to one image per page prevents the 89% registry average of photography-heavy layouts. 5. **Grid lines as literal decoration.** Rather than hiding the underlying column grid (as most layouts do), `namu.quest` makes it a faint but real visual element — the grid lines are the decoration. This avoids the registry's over-reliance on blobs, gradients, and patterns by using the structural system itself as ornament. **Patterns deliberately avoided (from frequency analysis):** - Photography-heavy layouts (89% registry rate) — constrained to one image per page - Minimal/gradient-mesh imagery — replaced with duotone photography and grid-line motifs - Eclectic-hybrid and playful-rounded typography — replaced with disciplined Playfair + Lora pairing - Full-bleed hero animations and typing effects — replaced with static broken-grid hero with duotone photo