# Design Language for gur.al ## Aesthetics and Tone gur.al channels the visual philosophy of a stone garden at the precise moment dawn light touches wet gravel -- the aesthetic is **zen stillness rendered in pure achromatic space**. The domain name itself reads like a half-whispered syllable, a fragment of a longer word that chose silence over completion. The design draws from three specific inspirations: (1) the ink wash paintings of Sesshuu Touyou, where entire mountain ranges emerge from a single brushstroke dissolving into fog; (2) the interior stillness of Tadao Ando's Church of the Light, where concrete becomes sacred through the precise absence of everything unnecessary; (3) the typographic restraint of Kenya Hara's RE-DESIGN exhibition catalogue, where whiteness is not emptiness but a vessel for attention. The mood is **contemplative withdrawal** -- a digital space that asks the visitor to slow their breathing before scrolling. There is no urgency here, no call to action, no persuasion. The site exists as a threshold between noise and silence. Every element that appears has earned its presence by surviving a brutal process of subtraction. The visual experience should feel like watching ink diffuse through water in slow motion: inevitable, unhurried, complete in its incompleteness. The tone is **minimal** in the deepest sense -- not the hollow minimalism of a startup landing page with too much whitespace, but the loaded minimalism of a tea ceremony where every millimeter of placement carries centuries of intention. Sound should feel implied in the visual rhythm: the drip of water onto stone, the scratch of a reed pen on handmade paper, the near-silence of snow accumulating on a bamboo fence. ## Layout Motifs and Structure The layout follows a **centered vertical descent** -- a single, narrow column of content suspended in vast monochromatic space, like a hanging scroll unrolling downward. The content column never exceeds 540px in width on desktop, creating enormous lateral margins that function as meditative breathing room. On mobile, the column fills to approximately 85vw but maintains generous vertical spacing between elements. **Structural Architecture:** - **Section 0 (Threshold):** Full viewport height. Completely empty except for the domain name "gur.al" set dead-center, both horizontally and vertically. The text fades in over 3.5 seconds from complete transparency -- not a quick reveal but a slow materialization, like text appearing on fogged glass as breath evaporates. Below the name, 60vh of pure emptiness before any other content appears. This emptiness is intentional: it is the site's first statement. - **Section 1 (First Stone):** A single horizontal line, 1px in height, drawn in #3a3a3a, centered, spanning exactly 120px. It fades in when the user scrolls to it. Below the line, a single sentence in condensed type, centered. This is the site's purpose statement -- terse, unpunctuated, lowercase. Below this sentence, another 40vh of emptiness. - **Section 2 (Garden):** The core content area. Content blocks are separated by at minimum 30vh of empty space. Each block consists of a short heading (never more than four words) and a body of one to three sentences. No block exceeds 200 words. Between certain blocks, a single nature-derived SVG element appears: a circle (representing a stone), a gentle curve (representing water), or three short parallel lines at varying angles (representing fallen leaves). These motifs are rendered in #2a2a2a on the #fafafa background, barely there, requiring focused attention to perceive. - **Section 3 (Departure):** The final viewport. The 1px horizontal line reappears. Below it, a single word or short phrase serving as a closing meditation. The page ends with 50vh of emptiness -- the visitor scrolls into nothingness, the digital equivalent of the garden path trailing off into bamboo forest. **Spatial Principles:** - Vertical rhythm is measured in viewport-height units, not pixels or rems -- the site breathes with the screen - No horizontal rules, borders, or containers beyond the single 1px line motif - Content alignment is always centered -- no left-aligned blocks, no right-floating elements - Zero navigation elements: no menu, no header bar, no footer links, no back-to-top button - The scroll itself is the only navigation; the journey is linear and irreversible in intent ## Typography and Palette **Typography:** - **Headings / Display:** "Barlow Condensed" (Google Fonts) -- a pure condensed neo-grotesque with clean vertical strokes and narrow proportions that evoke the compressed energy of a haiku: maximum meaning in minimum horizontal space. Used at 1.8rem-3.2rem for section headings. Weight: 300 (Light). All headings are set in lowercase with `letter-spacing: 0.12em` and `line-height: 1.15`. The wide letter-spacing counterbalances the condensed letterforms, creating a paradox of compression and openness that mirrors the zen tension between form and void. Headings are never bold -- they are present but do not shout. - **Body / Reading:** "Barlow Condensed" (Google Fonts) -- the same family as headings, maintaining absolute typographic unity. Used at 1rem-1.15rem for body text. Weight: 300 (Light). Line-height: 1.85 for generous vertical breathing between lines. Letter-spacing: 0.04em. Body text is set in sentence case. The light weight renders text as almost graphite-thin strokes on white, approaching the threshold of legibility in a way that demands focused attention -- the reader must lean in, must choose to read, creating an intimate contract between page and person. - **Domain / Wordmark:** "Barlow Condensed" at 2.4rem, Weight: 200 (Thin). Letter-spacing: 0.25em. The domain name rendered at this extreme thinness becomes almost calligraphic -- the letters are architectural wire-frames of themselves, more structure than substance. - **Accent / Metadata:** "Space Mono" (Google Fonts) at 0.7rem. Weight: 400. Letter-spacing: 0.08em. Used sparingly for timestamps, micro-labels, or section markers that appear as whispered annotations at the margins of content. Color: #999999 -- deliberately low contrast to function as near-invisible metadata. **Palette:** The palette is strictly **monochrome** -- no hue enters the composition at any point. The entire emotional range is expressed through the gray spectrum between absolute white and near-black, with most values clustered in the extremes: | Role | Hex | Description | |------|-----|-------------| | Background | #fafafa | Not pure white but the barely-warm white of handmade washi paper -- 98% brightness that avoids the clinical sterility of #ffffff | | Primary Text | #1a1a1a | Near-black with enough warmth to feel like sumi ink rather than digital black -- the darkest value used anywhere on the site | | Secondary Text | #555555 | Mid-gray for body text that should recede slightly from headings, creating a whispered tonal hierarchy | | Tertiary / Metadata | #999999 | Light gray for timestamps, section numbers, and annotations that exist at the periphery of attention | | Motif Strokes | #2a2a2a | SVG nature elements rendered in this dense dark gray, slightly lighter than text to register as visual texture rather than readable content | | Divider Line | #3a3a3a | The single 1px horizontal line motif, dark enough to be visible but thin enough to function as a breath mark rather than a border | | Hover / Focus State | #000000 | True black used only for interactive states -- the momentary deepening of ink when a brush touches paper | | Subtle Ground | #f0f0f0 | A barely-perceptible gray used for the faintest background variations -- visible only when directly adjacent to #fafafa, creating depth through near-identical values | ## Imagery and Motifs **No Photographic Imagery.** The site uses zero photographs, zero illustrations in the traditional sense, zero icons from any icon library. The visual vocabulary is limited to: **SVG Nature Abstractions:** Hand-crafted SVG elements inspired by Japanese brush painting (sumi-e), each rendered as a single `` with `stroke` only (no fill), `stroke-width: 1`, and `stroke-linecap: round`. These are not decorative ornaments but structural punctuation marks between content blocks: 1. **Stone (ensou variation):** An imperfect circle, approximately 40px diameter, drawn as a single open path that does not quite close -- a reference to the ensou (circle) in Zen calligraphy, where the gap represents openness to growth. The stroke varies subtly in width using SVG `stroke-dasharray` to simulate brush pressure variation. 2. **Water (single curve):** A gentle S-curve, approximately 80px wide and 20px tall, suggesting the surface of still water disturbed by a single droplet. Rendered with a slight opacity fade at the endpoints using a linear gradient mask, so the line appears to dissolve into the page. 3. **Fallen Leaves (three lines):** Three short straight lines (20-30px each) at angles of approximately 15deg, -8deg, and 22deg, grouped loosely, suggesting leaves that have settled on a stone path. Their apparent randomness is carefully composed. 4. **Mist (horizontal fade):** A single horizontal line, 200px wide, that fades from #2a2a2a at its center to complete transparency at both endpoints, achieved via SVG linear gradient on the stroke. This appears between major sections as a visual representation of fog obscuring the garden path. **CSS Texture:** The #fafafa background carries a barely-visible CSS noise texture achieved through a tiny repeating SVG pattern (2x2px) with random pixels at 1-2% opacity difference from the background. This micro-texture prevents the background from feeling digitally flat, adding the organic grain of real paper without any visible pattern. **Cursor:** The default cursor is replaced with a minimal custom cursor -- a small circle (8px diameter, 1px stroke, no fill, #1a1a1a) that reinforces the ensou motif at the interaction level. On hover over text, the circle fills to become a small solid dot. ## Prompts for Implementation **Full-Screen Narrative Experience:** The entire site must feel like unrolling a hanging scroll in a silent room. There is no navigation. There is no header. There is no footer. There is no hamburger menu. The page is a single, continuous vertical document that begins in emptiness, passes through sparse content, and returns to emptiness. The scroll is the only user action; the journey is the purpose. **Fade-Reveal Animation System:** Every element on the page enters through the same animation: a slow opacity transition from 0 to 1 over 2-3 seconds, triggered by IntersectionObserver when the element reaches 30% visibility in the viewport. No transform. No translation. No scale. No blur-to-focus. Pure opacity change. This constraint is absolute -- nothing moves on this page except the scroll itself and the opacity of appearing elements. The fade is not a decorative flourish; it is the visual equivalent of objects emerging from fog as you walk through a garden. Use `transition-timing-function: cubic-bezier(0.25, 0, 0.15, 1)` for a slow-entry, slower-exit curve that feels organic. **Scroll Pacing:** Use CSS `scroll-behavior: smooth` on the root element. The vast vertical spacing (30-60vh between content blocks) naturally forces a meditative scroll pace. No scroll-jacking, no snap points, no parallax layering -- the native scroll with generous spacing creates all the pacing needed. **Implementation Details:** - HTML should be semantically spare: `
` containing a series of `
` elements, each with minimal child elements - CSS custom properties for the entire monochrome palette, allowing the theoretical possibility of a dark-mode inversion (background becomes #1a1a1a, text becomes #fafafa) without any structural changes - No CSS framework, no utility classes, no preprocessor -- raw CSS with custom properties - No JavaScript libraries -- vanilla JS for IntersectionObserver only - Total page weight target: under 50KB including all assets - Font loading: Use `font-display: swap` with a system font stack fallback of `-apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif` **AVOID:** - CTA buttons, pricing blocks, feature grids, testimonial carousels, stat counters - Any color outside the monochrome palette - Drop shadows, box shadows, gradient backgrounds - Border-radius on any element (sharp geometry only, except the ensou SVG circle) - Bold font weights (nothing above 400 anywhere) - Text larger than 3.2rem (restraint, not spectacle) - Hover animations beyond the cursor change and the single opacity deepening to #000000 - Loading spinners, progress bars, or any UI chrome that breaks the contemplative mood - Any third-party embeds, analytics badges, or cookie banners within the visual field ## Uniqueness Notes **Differentiators from other designs:** 1. **Absolute Chromatic Restraint:** While 9% of designs in the portfolio use monochrome palettes, gur.al pushes monochrome to its philosophical limit -- not merely "grayscale as aesthetic choice" but grayscale as a statement about the sufficiency of light and its absence. The palette contains eight distinct gray values, each with a defined role, proving that a single hue-axis can carry a complete emotional range. No other design in the collection operates within such a narrow chromatic band with this level of intentional value differentiation. 2. **Radical Spatial Emptiness:** The site uses 30-60vh gaps between content blocks -- far more empty space than any other design. Most "minimal" designs in the portfolio still fill their viewports with content; gur.al treats emptiness as the primary content. The visitor will scroll through more void than substance, and this is the point. The layout inverts the typical information-density assumption: here, density approaches zero, and meaning concentrates in the few elements that survive the subtraction. 3. **Single Animation Primitive:** While 96% of designs use scroll-triggered animations and 80% use parallax, gur.al restricts its entire motion vocabulary to a single primitive: opacity fade from 0 to 1. No transforms, no translations, no scale, no parallax depth. This constraint is unique in the portfolio and creates a distinctly calm, fog-like experience where elements materialize rather than move. The fade-reveal pattern (used by only 9% of designs) becomes not just a technique but the site's defining interaction philosophy. 4. **Sumi-e SVG System:** The hand-crafted SVG nature motifs (ensou circle, water curve, fallen leaves, mist line) form a cohesive pictographic language drawn from Japanese brush painting tradition. Unlike the 31% of designs using nature motifs through photography or illustration, gur.al's nature references are abstract, calligraphic, and rendered as single-stroke SVG paths -- closer to written characters than images. 5. **Zero Photography / Zero Icons:** In a portfolio where 95% of designs use minimal imagery and 69% use photography, gur.al eliminates representational imagery entirely. The only visual elements are the SVG brush-stroke motifs and the CSS paper texture. This positions the site in a category of pure typographic-spatial design that is unoccupied by other entries. **Chosen seed/style:** aesthetic: zen, layout: centered, typography: condensed, palette: monochrome, patterns: fade-reveal, imagery: minimal, motifs: nature, tone: minimal **Avoided patterns from frequency analysis:** - Avoided "playful" aesthetic (97% overused) -- chose zen (7%) - Avoided "warm" palette (100% overused) -- chose monochrome (9%) - Avoided "scroll-triggered" as primary pattern (96% overused) -- chose fade-reveal (9%) as the defining interaction - Avoided "parallax" layering (80% overused) -- no parallax of any kind - Avoided "friendly" tone (97% overused) -- chose minimal tone - Avoided "vintage" motifs (78% overused) -- chose nature motifs expressed through abstract SVG - Avoided "humanist" typography (36% overused) and "handwritten" (20%) -- chose condensed (15%) for its underrepresented narrowness - Avoided "gradient" palette treatment (91% overused) -- pure flat monochrome with no gradients in the color system