# Design Language for gabs.quest ## Aesthetics and Tone gabs.quest is a cracked tea bowl held up to autumn light -- a wabi-sabi meditation on the imperfect, incomplete, and impermanent nature of value (gabs = price in Korean). The wabi-sabi aesthetic embraces deliberate imperfection: textures are rough, edges are uneven, compositions are asymmetric in the way a windswept garden path is asymmetric -- not chaotically, but with the natural irregularity of things shaped by time rather than machine. Every element carries the patina of age and the beauty of wear. The tone is zen-contemplative -- each thought is presented as a stone in a garden arrangement, placed with care but not with anxiety. The site does not argue or persuade; it presents. Text is brief. Silences (whitespace) are long. The concept of "quest" merges with the Japanese quest for finding beauty in imperfection: the user's scroll through the site is itself the quest, and what they discover are small, imperfect truths about worth. Visual inspiration: the repaired cracks of kintsugi pottery (but without the literal gold -- the metaphorical principle of finding beauty in broken things); the sand patterns of Daisen-in temple's rock garden; the hand-drawn botanical field notebooks of Minakata Kumagusu; the honeyed light of a late-October afternoon in Kyoto. ## Layout Motifs and Structure The layout is **asymmetric** -- elements are deliberately off-center, positioned with the careful imbalance of ikebana flower arrangement. Nothing is centered. Nothing is gridded. Every element has a unique position that creates visual tension resolved by the overall composition. **Asymmetric Placement System:** - Content elements use absolute or relative positioning with percentage-based offsets - Text blocks vary in width (40%-70% of viewport) and horizontal position - Vertical spacing is irregular: 80px between some sections, 200px between others - The asymmetry follows a consistent visual logic: heavier elements (more text, darker color) sit lower and more to the left; lighter elements float higher and rightward **Section Flow:** 1. **The Gate (Hero):** Not 100vh -- only 70vh, because wabi-sabi rejects the grandiosity of full-viewport heroes. "gabs.quest" in geometric-sans, positioned at 30% from left, 40% from top -- deliberately off-center. Below and to the right, a single phrase in a lighter weight. 2. **The Garden:** A series of text blocks scattered asymmetrically down the page. Each block is a "stone" in the arrangement -- a self-contained thought about value and questing. Between blocks, leaf-organic SVG motifs (individual leaves, not arrangements) float in the whitespace. 3. **The Clearing:** A wide section with minimal content -- just a hand-drawn SVG of a single leaf, centered (the only centered element), and a one-sentence statement below it. 4. **The Path:** Three text blocks arranged as stepping stones -- each positioned progressively further right and lower, creating a diagonal path toward the site's conclusion. 5. **The Return:** The domain name, small, positioned at 70% from left, near the bottom. A leaf motif above it. Empty space below. ## Typography and Palette **Typography:** - **Display / Headlines:** "Urbanist" (Google Fonts) -- a geometric sans-serif with round, friendly proportions and clean modernity. Used at 3rem-5rem for the hero and section anchors. Weight: 600. Letter-spacing: 0.01em. The geometric-sans precision provides a contemporary frame for the wabi-sabi content, creating tension between digital exactness and organic imperfection. - **Body / Content:** "Noto Serif" (Google Fonts) -- a serif with extensive language support and quiet elegance. Used at 17px/1.8 for body text. Weight: 400 for body, 500 for emphasis. The extra-generous line-height (1.8) creates ma (negative space) between lines, making each sentence a meditation. - **Accent / Metadata:** "Urbanist" at weight 300, 11px, letter-spacing: 0.15em for minimal metadata. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Warm Ground | Honeyed cream | #f5eed8 | Page background, the "ground" of the garden | | Paper Warm | Slightly darker honey | #e8dcc4 | Text block backgrounds (very subtle tint) | | Stone Dark | Warm charcoal | #3a3028 | Primary text, the "ink" on honey | | Stone Mid | Warm grey | #7a6e5e | Secondary text, the softer voice | | Leaf Sage | Muted olive | #8a9a70 | Leaf-organic SVG motifs, botanical accents | | Leaf Autumn | Faded amber | #b08a50 | Autumn-toned leaf accents, rare warm highlight | | Shadow Warm | Transparent brown | rgba(58, 48, 40, 0.08) | Subtle shadows under text blocks | The palette is honeyed-neutral -- a world of warm, muted, autumnal tones that feel like looking at the world through amber-colored glass. There are no cool tones, no saturated colors. Every color is warm, desaturated, and gentle. The restraint is the point: wabi-sabi finds beauty in the nearly-monochrome. ## Imagery and Motifs **Hand-Drawn Leaf Studies:** The primary imagery is hand-drawn -- specifically, individual leaf SVGs drawn with organic, imperfect paths: - Single leaves (maple, ginkgo, oak) rendered as SVG outlines in leaf sage (#8a9a70) or leaf autumn (#b08a50) - Stroke-width: 1.5px with rounded linecaps - Paths are deliberately imperfect: slight wobbles in the curves, asymmetric veining - Each leaf is unique; no leaf SVG is reused. Five to seven individual leaf illustrations across the site - Leaves are positioned in the whitespace between text blocks, as if they fell there naturally **Leaf-Organic Motifs:** The leaf-organic motif is the site's punctuation system: - A small leaf (20px) appears before the first word of each text block, replacing the traditional paragraph indent - A falling-leaf animation (CSS @keyframes: gentle rotation + translateY drift) plays once on scroll for one leaf per section - The leaves never form arrangements or patterns -- they are always individual, always imperfect, always alone. This is the wabi-sabi principle: beauty in solitude. **Magnetic Hover Effect:** Text blocks respond to cursor proximity with a subtle magnetic attraction: - As the cursor approaches a text block (within 100px), the block shifts 2-4px toward the cursor via CSS transform - As the cursor enters the block, the shift increases to 6px - The movement uses a spring easing curve (cubic-bezier(0.25, 0.8, 0.25, 1)) over 300ms - This subtle interactivity creates the sensation that the content is alive and responsive, like plants turning toward light ## Prompts for Implementation **Full-Screen Narrative Experience:** The asymmetric layout means the eye must search for each content block, creating an active rather than passive reading experience. The generous whitespace between blocks produces silence between thoughts. The honeyed palette creates a perpetual golden-hour atmosphere. The overall experience is contemplative: the user is on a quest through a textual garden. **Asymmetric Positioning:** Content blocks use a combination of margin-left percentages and max-width values: - Block 1: margin-left: 15%, max-width: 55% - Block 2: margin-left: 30%, max-width: 45% - Block 3: margin-left: 8%, max-width: 60% - Block 4: margin-left: 40%, max-width: 40% Each block's position creates a different relationship with the viewport edges and with the preceding/following blocks. **Magnetic Hover Implementation:** Use JavaScript mousemove event on the document. For each text block, calculate distance from cursor. If within threshold (100px), apply transform: translate(dx, dy) where dx/dy are proportional to cursor proximity, capped at 6px. Use requestAnimationFrame for smooth updates. Reset transform when cursor moves away. **Responsive Behavior:** On mobile (below 640px), asymmetric positioning reduces to smaller margin-left values (5-15%). The magnetic hover effect is disabled (touch devices). Leaf SVGs scale down to 60%. Spacing between blocks reduces proportionally. **AVOID:** CTA buttons, gamification elements (despite "quest" in the name), progress bars, achievement systems, corporate photography, bright colors, geometric precision, anything that suggests urgency or competition. ## Uniqueness Notes **Differentiators from other designs:** 1. **Wabi-sabi aesthetic (1% frequency):** One of the rarest aesthetics in the collection, and the only design that fully commits to deliberate imperfection as a design principle -- imperfect SVG paths, irregular spacing, asymmetric placement. 2. **Hand-drawn individual leaf studies (never reused):** Each leaf SVG is unique, drawn once, used once. This commitment to non-repetition is a direct expression of the wabi-sabi principle and is unprecedented in the collection. 3. **Honeyed-neutral palette with zero cool tones:** While warm palettes are common (100%), the specific honeyed-neutral range (amber, olive, cream) with absolutely no blue, grey-blue, or cool neutral creates a unique autumnal warmth. 4. **Magnetic hover effect (3% frequency):** The magnetic pattern is extremely rare, and using it for subtle content-block attraction (rather than cursor effects or button interactions) creates a unique biological-feeling interactivity. 5. **Asymmetric layout as ikebana composition:** While asymmetric layouts appear at 94%, they are typically broken-grid or offset-column designs. This design's asymmetry is philosophically motivated by ikebana principles of deliberate imbalance. **Documented Seed/Style:** aesthetic: wabi-sabi, layout: asymmetric, typography: geometric-sans, palette: honeyed-neutral, patterns: magnetic, imagery: hand-drawn, motifs: leaf-organic, tone: zen-contemplative **Avoided Overused Patterns:** - corporate aesthetic (62%) -- wabi-sabi (1%) instead - centered layout (87%) -- asymmetric with ikebana philosophy - warm palette (100%) -- honeyed-neutral (unique specificity) - parallax patterns (98%) -- magnetic (3%) instead - mono typography (98%) -- geometric-sans (3%) instead - tech motifs (96%) -- leaf-organic (1%) instead - friendly tone (64%) -- zen-contemplative (3%) instead - minimal imagery (94%) -- hand-drawn instead