# Design Language for saram.quest ## Aesthetics and Tone saram.quest is a **graffiti-illuminated archive of the human record** — a scholarly website that treats street-art typography as the vernacular of serious thought, not juvenile provocation. The word *saram* (사람) means "person" in Korean; the site is a meditation on what it means to exist as a person navigating the churn of the modern world, written in the register of an academic monograph but marked up in the visual grammar of a wall in Hongdae, 2019, before the rain. The aesthetic is **graffiti meets dissertation** — aggressively lettered display type that has been academically annotated, underlines drawn in ink that spread and contract as you read, and a warm amber-cream ground that reads as aged paper under streetlight. The mood is nocturnal and intellectually urgent. There is no lightness here in the sense of play; there is lightness in the sense of a lone researcher at 2 AM who has just understood something important, and the desk lamp is the only light in the building. The background is a genuine bokeh photograph — warm city lights smeared into glowing discs of amber, rust, and pale gold — that shows through the page as a luminous ground, as if the page itself is held up against a lit window. The scholar's text is pressed against that warmth. Tone is **scholarly-intellectual with graffiti urgency**: the cadence of a Berlin Wall inscription cross-referenced with a Walter Benjamin footnote. The site refuses cheerful marketing posture. Every sentence earns its place. ## Layout Motifs and Structure The layout is **asymmetric and deliberately off-balance** — the structural logic of graffiti applied to a scholarly page. No centered headers. No balanced columns. Everything leans. **Core structural device — the Lean Grid:** - A dominant body column occupies 58% of viewport width, pinned 9vw from the left edge. It is not centered. - A narrow annotation rail runs from 70% to 88% viewport width — this is the marginalia lane: small-size scholarly footnotes, pulled quotes in graffiti-lettered display type, and underline-draw decorations. - At the top of each major section, the section number is set in the annotation rail at `120px / 900wt`, serving as a structural graffiti tag that bleeds outside its container by 2–3%. - A recurring asymmetric accent: a single thick horizontal rule that runs from the left edge to 65vw — never full-width, never centered — appears between sections like a paint roller stroke. **Scroll behavior:** - The page scrolls as a single continuous vertical document — no horizontal navigation, no stacked horizontal slides. - As the user scrolls into each new section, the annotation rail section number slides in from the right by `40px` using `slide-reveal` with a measured ease-out (600ms, `cubic-bezier(0.16, 1, 0.3, 1)`). - Body paragraphs stagger-fade in from a 12px downward offset over 400ms — subtle, never theatrical. **Asymmetric decorative signatures:** - Underlines beneath key terms are drawn via SVG path animation: a ragged, slightly curved stroke that starts from the left terminus of the word and extends rightward over 0.4s, as if drawn by hand at speed. The stroke has 1.5px weight, `#C8602A` (rust-amber), and a subtle 2px undulation to simulate a spray-can horizontal line. - Section separators are not horizontal rules but **angular shear lines**: a thin `1px` diagonal that runs from (left-edge, 0) to (65vw, 18px), set in `#B35A20` at 30% opacity. ## Typography and Palette **Typography — humanist throughout, all from Google Fonts.** The type system uses humanist letterforms as a scholarly counterpoint to the graffiti energy of the display layer. Humanist sans for body reading; graffiti-inflected expressive serif for display. Three faces only. - **Display / Graffiti Headers:** *Playfair Display* — weight 900, used at 64–96px for section titles. The high-contrast thick-thin strokes read as expressive and slightly illegible at large sizes, echoing the calligraphic spontaneity of marker lettering without abandoning legibility. Set in uppercase with 0.04em letter-spacing to simulate a hand's natural spacing irregularities. Color: `#1A1007` (near-black ink). - **Body Text:** *Lato* — weight 400 for body paragraphs, weight 700 for inline emphasis. 18px / 1.7 line-height. The humanist openness of Lato gives the text warmth and scholarly readability while its optical corrections keep the page from feeling heavy. Color: `#1F150A` (dark brown-black). - **Annotation Rail / Marginalia:** *Lato Italic* — weight 400, 13px / 1.5 line-height. Set in `#7A4A2A` (warm mahogany) to distinguish from body text. Pull-quotes in the annotation rail use *Playfair Display* at 22px, weight 700, italic. **Palette — warm amber and ink:** | Role | Name | Hex | |------|------|-----| | Ground / page base | parchment-light | `#F5ECD7` | | Body text | dark-ink | `#1F150A` | | Accent / underline-draw stroke | rust-amber | `#C8602A` | | Section number tags | deep-rust | `#8B3A18` | | Annotation text | warm-mahogany | `#7A4A2A` | | Bokeh overlay tint (warm city bokeh) | amber-glow | `#E8B86D` at 18% opacity | | Section shear line | burnt-sienna | `#B35A20` | | Hover highlight | gold-warm | `#D4922B` at 25% opacity | The bokeh background photo sits at the very bottom of the stacking context, at `z-index: 0`, blurred to `radius: 0` (it is already a bokeh — do not re-blur). The page's `#F5ECD7` parchment ground is layered above it at `z-index: 1` at `88% opacity`, so the warm bokeh discs bleed through as a ghostly glow behind the text. This preserves the amber warmth while keeping body text fully legible. On dark sections, the parchment opacity drops to `72%` to let more bokeh light through. ## Imagery and Motifs **Imagery: bokeh-background as foundational warmth.** A single full-viewport bokeh photograph serves as the permanent background of the entire page — city lights at night, photographed at `f/1.4`, showing warm amber, rust-gold, and pale white discs of light on a near-black ground. The photograph is fixed (`background-attachment: fixed`) so it does not scroll, creating a parallax-free layered depth. The bokeh is purely atmospheric; it contains no recognizable objects or text, only light. **Graffiti motifs as scholarly marginalia:** - **Spray-tag section numerals** (rendered as SVG with irregular stroke edges, not clean digital type): each section break shows the section number in a `3–4 px` variable-width SVG stroke that mimics spray-can deposition — thicker where the path turns, thinner on fast straight stretches. - **Underline-draw signatures:** Every first mention of a key term gets a hand-drawn SVG underline — a GSAP or CSS-clip-path stroke animation that extends rightward from a 0px width to full word width over 420ms when the element enters the viewport via IntersectionObserver. The stroke is not a straight line: it has a `dy` oscillation of ±1.2px along its length to simulate the tremor of a spray can held horizontal. - **Angular graffiti brackets:** Section pull-quotes in the annotation rail are bracketed by open-angle marks (`⟨`, `⟩`) set in *Playfair Display* at 36px, `#8B3A18`, serving as the visual equivalent of a chalk box drawn around important text on a blackboard. - **Futuristic motif: gradient-masked scanning line.** Once per section scroll, a thin `1px` horizontal line sweeps downward across the full body column, from top to bottom, over 1.2s — like a lidar scan or a photocopier sweep. It is set in `linear-gradient(to right, transparent, #C8602A 40%, #C8602A 60%, transparent)` at 20% opacity, then disappears. This is the single futuristic gesture that intrudes on the otherwise analog aesthetic: a machine reading the handwriting. - **No photographs of people, places, or objects.** Only the bokeh background. All other imagery is typographic or mark-based. ## Prompts for Implementation Build saram.quest as a **single continuous scholarly essay** scrolled from top to bottom, with no page navigation, no section-jump links, and no CTA buttons. The visitor reads it the way they would read a long-form essay in a journal — left-to-right body text, occasional glance at the margin rail, and the warm bokeh ground always visible behind the page. **Macro structure (top to bottom):** 1. **Header Panel (`100svh`).** The title `saram.quest` is set in *Playfair Display* 900wt at `clamp(72px, 10vw, 128px)`, positioned at 9vw from left, 18vh from top — not centered. Below it, a two-line subtitle in *Lato* 400 at 20px. To the right (annotation rail position), the word `사람` (saram in Hangul) appears at 140px in *Noto Sans KR* weight 900, at `#8B3A18` 25% opacity — a ghost reference to the Korean origin. The bokeh background is maximally visible here (parchment overlay at 72% opacity). No hero CTA. No nav bar. A single underline-draw stroke animates beneath `saram.quest` after a 600ms delay. 2. **Essay Body (five sections).** Each section opens with the spray-tag section numeral in the annotation rail (animates in via `slide-reveal` from right, 600ms). Body paragraphs occupy the 58%-width body column in *Lato* 18px. Key terms receive underline-draw SVG animations on viewport entry. The scanning-line futuristic sweep occurs once at the midpoint of each section. 3. **Pull-Quote Breaks (two per section).** A pull-quote from the body text is isolated in the annotation rail at 22px *Playfair Display* italic, bounded by angular graffiti brackets. No background card, no box shadow. The text floats against the parchment-bokeh. 4. **Section Separators.** The asymmetric shear line (`1px` diagonal from left-edge to 65vw, 18px drop) separates sections. Below each shear line, the thick horizontal accent rule (paint-roller stroke) runs from 0 to 65vw in `#8B3A18` at 60% opacity, height `3px`. 5. **Footer (`80vh`).** A single centered line in *Lato* 14px: the domain `saram.quest`. No links. No social icons. No copyright notice. The bokeh bleeds through at maximum warmth (parchment at 60% opacity). **Animation principles:** - `underline-draw`: SVG stroke-dashoffset animation from 100% to 0, triggered by IntersectionObserver at 20% threshold, 420ms, `ease-out`. - `slide-reveal`: CSS `transform: translateX(40px) → translateX(0)` + `opacity: 0 → 1`, 600ms, `cubic-bezier(0.16, 1, 0.3, 1)`. Used for annotation-rail section numbers only. - `scanning-line`: a `div` with `position: absolute; height: 1px` sweeps top-to-bottom via `@keyframes` `transform: translateY`, once per section, triggered on section entry. Never repeats in same section. - All other enters: `opacity: 0 → 1` + `translateY(12px) → translateY(0)`, staggered 80ms between paragraphs. **DO NOT INCLUDE:** - Navigation bar with page links - Pricing, stats, or metric grids - CTA buttons or sign-up forms - Testimonial sections - Footer nav menus or social icon rows - Any centered layout — everything leans left ## Uniqueness Notes 1. **Graffiti aesthetic applied to scholarly content at 0% prior usage in this category.** The frequency report shows `graffiti` at 0% of 456 designs. saram.quest is the only site in the corpus that takes spray-can lettering conventions — variable stroke weight, asymmetric letterform pressure, tag-numeral section marks — and applies them as the academic annotation layer of a long-form essay. The contrast between graffiti urgency and intellectual tone is not ironic decoration; it is the thesis of the site. 2. **Bokeh background as a permanent scholarly ground, not a hero image.** The frequency report shows `bokeh-background` is rare. On saram.quest the bokeh is not confined to the hero panel — it spans the entire page behind a translucent parchment layer and shifts in apparent brightness as the parchment opacity changes section by section. The bokeh is the constant emotional register; the academic text floats against it. 3. **Scanning-line as the single futuristic intrusion into an analog page.** The `motifs: futuristic` seed is expressed not through a generalized sci-fi aesthetic but through one precisely placed gesture: a lidar-style horizontal scan line that sweeps the body column once per section entry. Everything else is analog (ink, parchment, graffiti). The scan line reads as a machine cataloguing handwriting — a specifically intellectual tension between the analog record and the digital archive. 4. **Asymmetric Lean Grid with fixed annotation rail rather than conventional columns.** The corpus shows asymmetric layouts at 42% but nearly all implement it as a visual treatment. saram.quest uses asymmetry as a structural constraint: the body column is pinned at 9vw from left, not centered; section numbers live in a fixed annotation rail that is not a traditional sidebar. The layout leans as a matter of principle, not effect. 5. **Avoided overused patterns:** parallax (75% in corpus — not used), centered layout (84% — explicitly forbidden), full-bleed hero sections (63% — all sections use translucent parchment over bokeh instead). Chosen seed: `aesthetic: graffiti, layout: asymmetric, typography: humanist, palette: warm, patterns: underline-draw, imagery: bokeh-background, motifs: futuristic, tone: scholarly-intellectual`