# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz draws from the visual language of 1970s science fiction film set design -- specifically the cerebral, slow-burn futurism of films like Stalker (1979), Solaris (1972), and THX 1138 (1971) -- merged with the atmospheric density of rain-soaked East Asian megacities at 3 AM. The aesthetic is not the flashy chrome-and-neon cyberpunk of popular imagination, but a quieter, more weathered sci-fi: a future that has already aged, where advanced technology sits behind cracked tile and water-stained concrete. Think of a university library that was designed by a Soviet space program architect -- monumental in scale, intimate in texture, scholarly in purpose. The tone is scholarly-intellectual: the site speaks with the measured authority of a research monograph, the visual confidence of an index page from a speculative encyclopedia. Every element suggests accumulated knowledge rather than ephemeral content. There is weight and seriousness, but also a subdued warmth -- the amber glow of a desk lamp in a reading room that overlooks a city skyline at dusk. The mood evokes the feeling of discovering an annotated manuscript in an archive that shouldn't exist yet. The sci-fi register manifests not through overt futuristic chrome, but through subtle wrongness in the geometry -- angles that don't quite resolve, type that seems to breathe at the edges of perception, shadows that fall in directions the light source cannot explain. The city-urban motif grounds this in the tangible: wet asphalt reflections, the silhouettes of transmission towers against an amber sky, the gridded repetition of apartment windows seen from a distance. ## Layout Motifs and Structure The layout employs an asymmetric composition system built on a 12-column grid where content deliberately avoids the center. The primary reading column occupies columns 2-7 on desktop, leaving a wide right margin (columns 8-12) that functions as a "scholarly apparatus" zone -- annotations, cross-references, small geometric diagrams, and ambient visual elements drift in this space like marginalia in a medieval manuscript. **Primary Structure:** - The page opens with a full-viewport hero that is NOT a traditional centered splash. Instead, the hero text anchors to the lower-left quadrant (columns 1-6, bottom 40% of viewport), while the upper-right quadrant contains an animated geometric-abstract composition -- interlocking polygons that slowly morph between configurations, drawn with thin stroked lines (#8B7D6B on the muted parchment background). This asymmetry establishes the off-kilter scholarly tone immediately. **Section Architecture (vertical scroll, 5-7 narrative sections):** 1. **The Threshold (Hero):** Full-viewport. Title in the lower-left, geometric morph animation upper-right. A thin horizontal rule (#6B5B4F) extends from the title rightward and pulses subtly, like a cursor or a heartbeat monitor in a control room. Below the fold line, a single sentence of body text in Libre Baskerville, set at 1.25rem with generous line-height (1.8), establishes the scholarly register. 2. **The Archive:** Content shifts to columns 3-8. A large section number ("02") rendered in Playfair Display at 12vw, positioned as a background watermark element at 6% opacity in muted olive (#6B7B5A). The main text block presents as an academic passage. In the right margin (columns 9-11), small geometric-abstract SVG diagrams appear -- wireframe polyhedra that rotate slowly on a 30-second CSS animation cycle. 3. **The Cartography:** An asymmetric two-panel section. The left panel (columns 1-5) contains a full-height city-urban silhouette composition -- layered SVG skyline elements in three depth planes (#4A4036 foreground, #6B5B4F mid, #8B7D6B back) with a parallax-free subtle vertical offset on scroll. The right panel (columns 6-11) contains body text formatted as field notes or research observations, with inline timestamps rendered in Courier Prime at 0.75rem. 4. **The Frequency:** A data-visualization-inflected section. Thin horizontal bars of varying length, colored in the muted palette, represent abstract "readings" -- they morph in width using CSS transitions triggered by scroll position. These bars occupy columns 2-10 and function as both decoration and information architecture, with text labels in the scholarly voice. 5. **The Index (Footer):** The page concludes with a dense, library-catalog-style footer. Three asymmetric columns of varying width contain categorized links, references, and colophon text. The background shifts to the darkest palette value (#2C2520), and text renders in the lightest (#D4C8B8), creating a tonal inversion that signals closure. A single geometric-abstract element -- a slowly rotating icosahedron wireframe -- occupies the far right margin as a visual period. **Navigation:** Minimal. A thin fixed bar at the top (height: 48px) contains only the domain name "yesan.xyz" set in Playfair Display at 0.875rem, small-caps, letter-spacing 0.15em, anchored left. No hamburger menu, no navigation links visible -- sections are reached by scrolling. The bar's background is transparent until scroll exceeds 100vh, then fades to #2C2520 at 85% opacity with `backdrop-filter: blur(8px)`. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with high stroke contrast and elegant ball terminals that evokes 18th-century intellectual publishing and astronomical charts. Used at 3rem-8rem for hero titles and section numbers. Weights: 400 for watermark numerals, 700 for headlines. Letter-spacing: -0.02em for tight, monumental display. Line-height: 0.95 for stacked multi-line headlines where ascenders and descenders nearly touch. - **Body / Scholarly Text:** "Libre Baskerville" (Google Fonts) -- a web-optimized revival of the Baskerville typeface, the quintessential serif of scholarly publishing. Its generous x-height and careful spacing make it supremely legible at body sizes (1rem-1.25rem) while maintaining the authority of classical typography. Weight: 400 for body, 700 for inline emphasis. Line-height: 1.8 for generous, breathable paragraphs that feel like printed pages. - **Annotations / Marginalia:** "Courier Prime" (Google Fonts) -- a refined monospace that reads as "research terminal" rather than "code editor." Used exclusively in the right-margin apparatus zone and for timestamps, coordinates, and reference codes at 0.75rem-0.875rem. Weight: 400. Letter-spacing: 0.05em. Styled with muted opacity (0.65) to distinguish from primary text. **Palette (Muted Vintage):** | Role | Color | Hex | |------|-------|-----| | Deep Ground | Charred Walnut | #2C2520 | | Primary Text | Warm Graphite | #4A4036 | | Secondary Text / Rules | Umber Shadow | #6B5B4F | | Tertiary / Marginalia | Weathered Stone | #8B7D6B | | Background / Parchment | Aged Linen | #E8E0D4 | | Light Accent | Faded Ivory | #D4C8B8 | | Highlight / Living Element | Muted Olive | #6B7B5A | | Alert / Focal Point | Tarnished Copper | #9B6B4A | The palette is deliberately de-saturated and warm-cool ambiguous -- the greens lean brown, the browns lean grey, the ivory has a greenish undertone. This creates the "muted-vintage" effect of a photograph that has been stored in a library for decades, where the colors have shifted toward a unified tonal envelope. No pure whites, no pure blacks. The brightest value (#E8E0D4) is a warm off-white; the darkest (#2C2520) retains brown warmth. **Gradient usage:** Avoided. The palette operates through flat, layered opacity rather than gradients. Depth is created by overlapping elements at different opacity levels of the same hue family. ## Imagery and Motifs **Geometric-Abstract SVG Compositions:** The primary visual motif is hand-coded SVG wireframe geometry -- polyhedra (icosahedra, dodecahedra, truncated octahedra) rendered as thin stroked paths with no fill. These wireframes rotate slowly on CSS `@keyframes` animations (20-40 second cycles) and are colored in Weathered Stone (#8B7D6B) or Muted Olive (#6B7B5A) at 40-60% opacity. They function as scholarly diagrams that have drifted loose from their original context -- mathematical objects floating in the margins of a speculative text. **City-Urban Skyline Silhouettes:** Layered SVG silhouettes of an abstracted city skyline -- not any specific city, but an archetypal megacity rendered as geometric blocks, antenna arrays, and transmission tower outlines. These silhouettes exist in three depth layers: - **Foreground:** Sharp, dark (#4A4036), individual building shapes with visible window-grid patterns (tiny CSS grid squares) - **Midground:** Softer (#6B5B4F), broader shapes, less detail - **Background:** Faintest (#8B7D6B at 40% opacity), suggesting mountains or distant mega-structures The skyline appears in the "Cartography" section and subtly in the hero background, establishing the city-urban motif without resorting to photography. **Morph Animations:** Key geometric elements use SVG `` or CSS `clip-path` morphing to transition between shapes. The hero's geometric composition morphs between 4-5 polyhedra configurations on a 60-second loop. This is the primary "morph" pattern implementation -- shapes that breathe and evolve, suggesting living diagrams or organisms rendered in technical drawing style. **Typographic Ornaments:** Section dividers are not horizontal rules but typographic devices: a sequence of three small geometric shapes (triangle, circle, square) centered on a thin rule, rendered in Weathered Stone. These evoke the section markers found in academic publishing and early printed books. **Marginalia System:** The right-margin zone contains small, semi-transparent annotations -- coordinates like "47.3769N, 8.5417E", dates like "2087.11.03", classification codes like "REF::ARCH-7741" -- all in Courier Prime at 0.75rem. These are purely decorative but create the impression of an annotated research document. They fade in as the user scrolls past them using the morph animation pattern (opacity transition over 1.2 seconds with a slight translateY of 8px). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single continuous scroll through a speculative research archive. The hero occupies 100vh with the asymmetric text-lower-left / geometry-upper-right composition. Background color is Aged Linen (#E8E0D4) throughout, shifting to Charred Walnut (#2C2520) only in the final footer section. This tonal shift should be implemented with a CSS `background-color` transition triggered when the footer enters the viewport (use `IntersectionObserver`). **Morph Animation Implementation:** The hero geometric composition consists of 4-5 SVG polyhedra wireframes, each defined as a `` element. Use CSS `@keyframes` to morph between path definitions by animating the `d` attribute (via CSS `d: path()` property in modern browsers) or by cross-fading opacity between overlapping path elements on staggered 15-second intervals. The total cycle is 60 seconds. Movement should be imperceptible at any given moment but noticeable over time -- like watching a clock's minute hand. **Scroll-Linked Marginalia Reveals:** As the user scrolls, marginalia elements in the right column fade in using `IntersectionObserver` with a `threshold` of 0.3. Each element transitions from `opacity: 0; transform: translateY(8px)` to `opacity: 0.65; transform: translateY(0)` over 1200ms with an `ease-out` curve. Elements stagger their appearance with a 200ms delay between consecutive items. This creates the impression of annotations materializing as the reader's attention passes over them. **Geometric Wireframe Rotation:** All SVG polyhedra rotate using CSS `transform: rotateY()` and `rotateX()` keyframe animations. Rotation speed varies: hero elements at 0.5deg/second (720 seconds per full revolution), margin elements at 1deg/second. Use `transform-style: preserve-3d` and `perspective: 1000px` on parent containers. The wireframes should feel like slowly tumbling objects in zero gravity. **City Skyline Parallax-Lite:** The three-layer skyline in the Cartography section uses a subtle vertical offset on scroll -- NOT traditional parallax with translateZ, but simple `transform: translateY(calc(var(--scroll-offset) * -0.03))` for the background layer and `* -0.01` for the midground, with the foreground static. This creates gentle depth without the performance cost of full parallax. Implement with a single `scroll` event listener that updates a CSS custom property. **Typography Breathing:** Section headlines in Playfair Display have a subtle `letter-spacing` animation on scroll entry: from `0.05em` to `-0.02em` over 800ms with `ease-in-out`. This creates the impression that the type "settles" into its final position as it enters view, reinforcing the scholarly weight. **Footer Inversion Transition:** When the footer section's top edge crosses 80% of the viewport height, the entire page background transitions from #E8E0D4 to #2C2520 over 1.5 seconds. Text color simultaneously shifts from #4A4036 to #D4C8B8. Implement by toggling a class on `` that triggers CSS transitions on `background-color` and `color` with `transition-duration: 1.5s`. **AVOID:** - CTA buttons, pricing tables, feature comparison grids, testimonial carousels - Stock photography or raster images of any kind -- all imagery is SVG/CSS - Centered hero text layouts -- maintain the asymmetric scholarly composition throughout - Navigation menus, hamburger icons, or multi-page architecture - Bright saturated colors, neon accents, or high-contrast palette moments - Playful or casual tone in any text content **EMPHASIZE:** - The reading experience -- long-form text should feel like a pleasure to read - Atmospheric density -- every pixel should contribute to the "aged research archive" mood - Geometric precision in SVG elements contrasted with the organic warmth of the vintage palette - The tension between futuristic geometry and historical typography ## Uniqueness Notes **Differentiators from other designs:** 1. **Scholarly marginalia as interaction pattern:** No other design in the portfolio uses a dedicated right-margin annotation zone with scroll-triggered reveals. This directly references the tradition of scholarly marginalia in printed books and medieval manuscripts, creating an interaction paradigm that is both intellectually grounded and visually distinctive. While other designs use scroll-triggered animations on main content, the marginalia system operates on peripheral content that rewards attentive reading. 2. **Muted-vintage palette with sci-fi geometry:** The combination of a de-saturated, sepia-adjacent color palette (muted-vintage at 1% frequency) with geometric-abstract wireframe imagery (2% frequency) creates a deliberate temporal collision -- the visual warmth of aged documents paired with the mathematical precision of speculative design. No other design in the portfolio combines these two underused vocabulary elements. 3. **Serif-revival typography as primary voice:** At 1% frequency, serif-revival is one of the least-used typography approaches in the portfolio. Using Playfair Display and Libre Baskerville as the dominant typefaces (with Courier Prime only for marginalia) creates a reading experience that feels fundamentally different from the mono-dominated (99%) and humanist-heavy (38%) designs elsewhere. The serif-revival approach positions the site as a digital artifact of print culture rather than a digital-native product. 4. **City-urban motif rendered as abstract SVG silhouette:** At 1% frequency, city-urban is among the least-used motifs. Rather than using photographic cityscapes, the implementation renders the urban motif as layered geometric SVG silhouettes -- a technique that aligns with the geometric-abstract imagery approach while maintaining the muted-vintage palette integrity. This abstraction prevents the city motif from feeling like a stock-photo backdrop. 5. **Morph as contemplative rather than dynamic pattern:** While morph animations (9% frequency) typically serve as attention-grabbing transitions, this design uses them at glacial speed (60-second cycles) to create a contemplative, almost meditative quality. The morphing geometry suggests living mathematical objects rather than UI transitions, reinforcing the scholarly-intellectual tone. **Documented Seed/Style:** - aesthetic: sci-fi - layout: asymmetric - typography: serif-revival - palette: muted-vintage - patterns: morph - imagery: geometric-abstract - motifs: city-urban - tone: scholarly-intellectual **Avoided overused patterns:** - playful aesthetic (96%) -- replaced with sci-fi (8%) - centered layout (99%) -- replaced with asymmetric - mono typography (99%) -- replaced with serif-revival (1%) - warm palette (100%) -- replaced with muted-vintage (1%) - scroll-triggered as primary pattern (96%) -- morph is the primary pattern; scroll is used only for marginalia reveals - minimal imagery (95%) -- replaced with geometric-abstract (2%) - friendly tone (99%) -- replaced with scholarly-intellectual (3%) - vintage motifs (89%) -- replaced with city-urban (1%)