# Design Language for namu.quest ## Aesthetics and Tone namu.quest (namu meaning "tree" in Korean) rejects the polished, harmonious conventions of modern web design and instead occupies the visual territory of an underground zine about arboriculture -- photocopied, misregistered, stapled together by hand, and sold from a cardboard box at a radical bookshop. The aesthetic is **anti-design**: deliberately confrontational composition, clashing scale relationships, visible grid violations, and a refusal of decorative polish. But beneath the surface chaos lives a deep respect for trees, for roots, for the slow patience of growth rings. The tone is **grounded-earthy** -- not polished corporate green, but the actual dirt-under-fingernails groundedness of someone who plants trees and reads dense ecological monographs. The mood evokes an eccentric dendrologist's personal archive: field notebooks with coffee stains, xeroxed pages from obscure botany journals, hand-corrected proofs, pressed leaves taped over typeset columns. There is an intellectual seriousness here -- this is not whimsy, not playfulness. It is the stubbornness of someone who believes that how a tree grows is the most important question in the world, and who has no patience for making that belief look "nice." The visual language takes cues from 1970s radical publishing (Whole Earth Catalog, CoEvolution Quarterly), punk zine culture, and the typographic experiments of David Carson and Emigre magazine -- but filtered through a nature-obsessed, research-heavy lens. Every element feels like it was placed by someone who cares more about the content than the container. ## Layout Motifs and Structure The layout is **asymmetric** but not in the tidy, golden-ratio asymmetry common to editorial sites. This is a deliberately destabilized composition where elements appear to have been placed by collage rather than grid -- overlapping text blocks, images that bleed past their containers, captions that drift away from their referenced figures. The underlying structure uses a 12-column CSS grid, but elements are placed to intentionally violate its regularity: a text block might span columns 2-7 while an image crashes across columns 5-11, creating controlled overlaps. **Section Architecture:** The page is organized as a vertical sequence of "spreads" that reference the double-page layout of a physical book, each viewport-height section functioning as an opening to a new chapter. - **Spread 1 (Landing):** The domain "namu.quest" is set enormous -- 12vw minimum -- in Josefin Sans at the top-left, cropped by the viewport edge so only 70% of the text is visible. A glitch-processed photograph of a tree canopy fills the right 60% of the screen, its right edge hard-cropped, its left edge dissolving into RGB channel separation. No subtitle, no explanation. A small block of text in the bottom-left corner, rotated -3deg, reads like a field note. - **Spread 2 (Thesis):** A dense paragraph of body text occupies a narrow column (max-width: 38ch) positioned at approximately 25% from the left edge. To its right, a large pull-quote set in Josefin Sans Bold at 4rem breaks across two lines with aggressive negative letter-spacing (-0.04em), overlapping the body text column by roughly 15%. The pull-quote is rendered in the sunset coral color (#E8613A) against the dark background. - **Spread 3 (Evidence):** A scattered arrangement of 3-4 "index cards" -- rectangles with visible borders, slight rotation (between -2deg and +3deg), containing short text fragments with footnote-style numbering. Cards overlap each other. One card has a glitch-art image as background. The arrangement suggests a researcher's desk rather than a designed layout. - **Spread 4 (Archive):** A book-like two-column text layout, but with deliberate misalignment -- the left column starts 2rem higher than the right. Running headers in small caps Josefin Sans sit at different vertical positions. Marginalia appears in the gutter between columns, set in a contrasting size (0.7rem) and rotated 90deg. - **Spread 5 (Terminus):** The domain name again, this time set in outline-only Josefin Sans at 15vw, positioned so it overlaps the bottom viewport edge. A single sentence of body text floats above it. No footer, no navigation, no social links. **Navigation:** There is no visible navigation. The page is a single continuous scroll. If orientation is needed, tiny section numbers appear in the left margin, styled as footnote references. ## Typography and Palette **Typography:** - **Display / Headlines:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with a distinctly architectural, Futura-derived skeleton. Weight 700 for headlines, weight 300 for large-scale ambient text. The geometric perfection of Josefin Sans creates productive tension with the anti-design layout: clean letters in chaotic arrangements. Used at sizes from 3rem to 15vw. Letter-spacing varies deliberately: tight (-0.03em) for large display sizes to create dense, confrontational blocks of text; wide (+0.15em) for small navigational elements and section markers. Line-height: 0.92 for display (letters nearly touching vertically), 1.1 for subheadings. - **Body Text:** "Source Serif 4" (Google Fonts) -- a workhorse serif designed for extended reading. Weight 400 for body, weight 600 for emphasis. Used at 1.05rem with a line-height of 1.72 and a maximum measure of 38ch. The serif body text against the geometric sans headlines creates the book-scholarly tension central to this design: the scholarly seriousness of traditional publishing set inside anti-design containers. Paragraphs use a first-line indent of 1.5em rather than paragraph spacing, reinforcing the book reference. - **Marginalia / Captions:** "IBM Plex Mono" (Google Fonts) -- weight 400, size 0.72rem. Used for footnote references, figure captions, metadata, section numbers, and any text that functions as annotation rather than primary content. All-caps with letter-spacing: 0.08em. This monospaced voice suggests the typewriter-annotated margins of a working manuscript. **Palette:** The palette is **sunset-warm** but pushed toward bruised, overripe tones rather than the typical cheerful sunset gradient. These are the colors of the sky thirty minutes after sunset, when warmth turns heavy and the light goes amber-to-rust. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Deep Bark | #1E1712 | Near-black warm brown, like the dark interior bark of an old oak | | Background (alternate) | Charred Earth | #2B2119 | Slightly lighter, the color of soil after a controlled burn | | Text (primary) | Bleached Parchment | #E8DFD0 | Warm off-white with yellow undertone, like aged paper | | Text (secondary) | Dried Sage | #A89B85 | Muted warm grey-green for secondary text and marginalia | | Accent (primary) | Sunset Coral | #E8613A | Intense warm orange-red, the last sliver of sun on the horizon | | Accent (secondary) | Burnt Amber | #C4882B | Rich golden-brown, honey held up to firelight | | Accent (tertiary) | Twilight Violet | #6B3A5E | Deep warm purple, the sky's bruise after the sun drops | | Border / Rule | Ash Line | #4A3D30 | Dark warm brown for hairline rules and card borders | Color usage rules: - Sunset Coral (#E8613A) is used sparingly -- only for pull-quotes, the first letter of key paragraphs, and hover states. It must always feel like a controlled burn, not a decoration. - The Twilight Violet (#6B3A5E) appears only in glitch-art channel separations and as an accent on the index card borders. - Body text is always Bleached Parchment (#E8DFD0) on Deep Bark (#1E1712). Never reverse this. - Burnt Amber (#C4882B) is for underline-draw animations and for the outline stroke of display text. ## Imagery and Motifs **Glitch-Art Tree Photography:** The primary imagery mode is **glitch-art**: photographs of trees -- canopies, bark textures, root systems, cross-sections of trunks -- that have been deliberately corrupted through RGB channel displacement, scanline interference, and datamoshing techniques. The glitch processing is not random chaos; it follows a specific visual grammar: 1. **Channel Separation:** Each photograph is decomposed into R, G, B channels, then reassembled with 3-8px horizontal offsets between channels. The red channel always shifts left, the blue channel always shifts right, creating a consistent "chromatic aberration on steroids" look. CSS `mix-blend-mode: screen` on layered elements achieves this in-browser. 2. **Scanline Overlay:** Horizontal lines at 2px intervals, alternating between fully transparent and 8% opacity black, are overlaid on all photographs via a repeating CSS gradient. This produces the appearance of a CRT monitor or old television displaying the image. 3. **Datamosh Regions:** Within each photograph, rectangular sections (typically 15-25% of the image area) are replaced with a smeared, stretched version of adjacent pixels, as if the JPEG decoding failed partway through. These are pre-processed in the image files, not generated via CSS. 4. **Vignette Decay:** All images fade to the background color (#1E1712) at their edges via a CSS radial gradient overlay, never using a hard crop. Images dissolve into the page rather than sitting on it. **Book-Scholarly Motifs:** - **Footnote Numbers:** Small superscript numbers appear throughout the text, styled in IBM Plex Mono at 0.6rem, colored Burnt Amber (#C4882B). They reference nothing -- there is no footnote section. They function as visual rhythm, suggesting a density of citation that reinforces the scholarly tone without requiring actual scholarly apparatus. - **Marginal Annotations:** Short text fragments in IBM Plex Mono appear in the margins of text columns, rotated 90deg (reading bottom-to-top), styled in Dried Sage (#A89B85). These mimic the handwritten marginalia of a reader engaging with a difficult text. - **Index Cards:** Rectangular elements with a 1px solid border in Ash Line (#4A3D30), slight rotation (-2deg to +3deg via CSS transform), and a subtle drop-shadow (2px 3px 0 rgba(0,0,0,0.3)) that suggests physical cards stacked on a desk. Interior padding is generous (2rem). Cards may overlap each other by 10-20%. - **Bookplate Stamp:** A decorative element appearing once on the page -- a circular or rectangular frame containing the text "EX LIBRIS" and "namu.quest" in Josefin Sans weight 300, styled as a line-art bookplate or library stamp. Rendered in Burnt Amber (#C4882B) with 60% opacity, positioned as if stamped onto the page at a slight angle. - **Pull-Quote Brackets:** Large pull-quotes are flanked by oversized square brackets rendered as SVG paths, 120px tall, stroked in Sunset Coral (#E8613A) at 2px weight. The brackets are slightly rotated (-1deg left bracket, +1deg right bracket) to maintain the anti-design instability. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single, uninterrupted vertical scroll through what feels like a corrupted digital edition of a rare dendrological text. There is no navigation, no menu, no header bar, no footer. The experience begins the moment the page loads and ends when the scroll runs out. **Opening Sequence (Spread 1):** On load, the background is solid Deep Bark (#1E1712). After a 300ms delay, the glitch-art tree photograph fades in over 1.5 seconds using `opacity` transition, but the RGB channels animate in separately: red channel first (at 300ms), green channel (at 600ms), blue channel (at 900ms), creating a building-up-from-static effect. The domain name "namu.quest" types itself character by character using a typewriter effect at 80ms per character in Josefin Sans Bold, but with intentional "typos" -- two characters appear, one is deleted (backspace visual), then the correct character appears -- making the type feel human and imperfect. Total animation duration: 4 seconds. **Scroll Behavior:** As the user scrolls, elements in each spread activate via a **hover-lift** interaction model rather than the overused scroll-triggered paradigm. Elements begin in their final positions (no fly-in, no fade-in). Instead, interactivity lives in hover states: - Text blocks lift 4px on hover with `transform: translateY(-4px)` and `box-shadow: 0 6px 20px rgba(0,0,0,0.4)`, as if the index card is being picked up. - Images intensify their glitch effect on hover: the RGB channel offset doubles from 4px to 8px, creating a "signal degradation" effect. - Footnote numbers expand on hover to reveal a short tooltip-style annotation in IBM Plex Mono, appearing as a small card that materializes below the number with a spring animation (slight overshoot on scale). - Pull-quotes rotate an additional -0.5deg on hover and their bracket SVGs animate a draw-on stroke effect via `stroke-dashoffset`. **Underline-Draw Animation:** Key phrases in the body text have animated underlines that draw themselves on when the element enters the viewport (the one scroll-triggered concession). The underline is a 2px line in Burnt Amber (#C4882B) that animates from left to right over 600ms with an ease-out curve. This is implemented via `background-image: linear-gradient()` with `background-size` animation, not a pseudo-element, to ensure the underline wraps across line breaks. **Anti-Design Glitch Moments:** At random intervals during scroll (implemented via IntersectionObserver on specific trigger elements), the entire page briefly (150ms) shifts its CSS `filter` to `hue-rotate(180deg) contrast(1.5)`, then snaps back. This happens exactly 3 times during the full scroll, at pre-determined positions (not random). The effect is jarring and intentional -- a reminder that this is a digital artifact, not a physical book, and that the medium itself is unstable. **AVOID:** - CTA buttons, pricing blocks, stat-grids, testimonial carousels, team photo grids - Smooth, polished animations (everything should feel slightly rough, slightly off) - Centered hero sections with subtitle + button pattern - Hamburger menus, sticky headers, cookie banners - Any element that says "Sign Up," "Learn More," or "Get Started" - Parallax scrolling (overused at 77% frequency) - Spring/elastic animations (overused) **PREFER:** - Static compositions that activate on hover rather than scroll - Overlapping elements with visible z-index layering - Rotation transforms that break the horizontal/vertical grid - Moments of deliberate visual discomfort (the hue-rotate glitch flashes) - Text-heavy layouts where typography IS the visual design - Physical metaphors (cards, stamps, marginalia) over digital metaphors (modals, toasts, dropdowns) ## Uniqueness Notes **Differentiators from other designs:** 1. **Anti-Design Aesthetic at 0% Frequency:** No other design in the portfolio uses the anti-design vocabulary. While brutalist (8%) and neubrutalism (1%) exist, anti-design is categorically different: it does not simply strip away decoration (brutalism) but actively works against design conventions through misalignment, overlap, cropping, and visual instability. The deliberate "wrongness" of the layout -- text cut by viewport edges, elements colliding without resolution, captions divorced from their images -- creates a visual experience that is fundamentally unlike any other site in the collection. 2. **Glitch-Art + Book-Scholarly Motif Collision:** The combination of digital corruption imagery (glitch-art at 4%) with scholarly book motifs (book-scholarly at 5%) has never been attempted in this portfolio. These are opposing vocabularies -- glitch represents digital entropy and signal decay, while book-scholarly represents analog permanence and accumulated knowledge. Their collision creates a specific narrative tension: the ancient knowledge of trees, encoded in the fragile medium of digital display, visibly degrading even as you read it. This is not decoration; it is argument. 3. **Sunset-Warm Palette at 1% Frequency Pushed to Bruised Extremes:** The sunset-warm palette appears in only 1% of existing designs, and those instances use conventional sunset gradients (orange-to-pink). namu.quest pushes the palette into overripe, post-sunset territory -- charred browns, burnt ambers, twilight violets -- creating a warmth that is heavy and autumnal rather than cheerful. The dominant background is near-black warm brown (#1E1712) rather than the warm whites and creams that dominate 100% of existing warm palettes. 4. **Hover-Lift as Primary Interaction Model:** At 3% frequency, hover-lift is deeply underused. More importantly, namu.quest uses hover-lift as the *primary* interaction pattern rather than a secondary accent, rejecting the scroll-triggered paradigm that appears in 96% of designs. Elements are present from the start; interaction is opt-in, tactile, and localized rather than cinematic and passive. 5. **Futura-Geometric Typography via Josefin Sans:** The futura-geometric typography category sits at 3% frequency. Josefin Sans was chosen specifically for its geometric purity (circular O, triangular A) which creates maximum tension against the chaotic anti-design layout. Clean letterforms in dirty compositions -- the letters refuse to be degraded even as everything around them shifts and overlaps. **Documented Seed/Style:** ``` aesthetic: anti-design, layout: asymmetric, typography: futura-geometric, palette: sunset-warm, patterns: hover-lift, imagery: glitch-art, motifs: book-scholarly, tone: grounded-earthy ``` **Avoided Overused Patterns:** - playful aesthetic (94%) -- replaced with grounded-earthy tone - centered layout (99%) -- all elements are deliberately off-center - warm palette generic (100%) -- pushed to dark, bruised sunset territory - scroll-triggered patterns (96%) -- replaced with hover-lift as primary - parallax (77%) -- no parallax anywhere in the design - friendly tone (98%) -- tone is intellectual and slightly confrontational - mono typography (98%) -- no monospace for primary text (only marginalia) - minimal imagery (94%) -- rich glitch-art imagery throughout - vintage motifs (85%) -- book-scholarly motifs instead - stagger animation (61%) -- no staggered reveal sequences