# Design Language for yesang.xyz ## Aesthetics and Tone yesang.xyz channels the atmosphere of a **sunlit Renaissance scriptorium** -- a place where scholars translate celestial charts, annotate marginalia with trembling quill strokes, and consult leather-bound tomes of prognostication by tall arched windows. The Korean word "yesang" (예상, meaning prediction or foresight) becomes the conceptual spine: the site is a luminous repository of anticipated knowledge, an illuminated manuscript brought to life in the browser, where every scroll gesture turns a vellum page toward the next foretold chapter. The mood is **warm, scholarly, and quietly opulent** -- not the brooding darkness of a gothic library, but the honeyed midday light streaming across a Florentine reading room. Think Botticelli's workshop in spring: ivory plaster walls stained gold by afternoon sun, the faint smell of linseed oil and old paper, hand-lettered astronomical charts pinned to easels. The tone is luxurious without being ostentatious, intellectual without being austere. Every surface whispers of careful human labor -- hand-drawn flourishes, imperfect ink lines, the gentle imprecision of a calligrapher's hand. The site should feel like discovering a forgotten scholar's private study: intimate, warm, suffused with the quiet confidence of someone who has read the stars and knows what is coming. ## Layout Motifs and Structure The layout is built around the **hero-dominant** paradigm: a towering opening composition that commands the full viewport, establishing the site's identity with unapologetic grandeur before yielding to more intimate sections below. **The Illuminated Hero (first 100vh):** The hero occupies the entire viewport as a single dramatic tableau: a hand-drawn celestial chart rendered in SVG occupies the center, surrounded by particle-effect "stars" that drift lazily. The domain name is inscribed in a large serif display treatment, positioned slightly above center. Below it, a single line of Korean text (예상 -- foresight) in a lighter weight, offset to the right like a marginal annotation. The hero background is a warm parchment tone (#F5EDE0) with a subtle hand-drawn border frame -- an irregular, slightly wavering ink rectangle inset 3vw from viewport edges, drawn via SVG path animation on load. **The Codex Descent:** Below the hero, content is arranged as a vertical sequence of "folios" -- self-contained sections that each span 80-90vh. Each folio is separated not by whitespace alone but by a decorative hand-drawn divider: a thin ink line with a small ornamental flourish at its center (a star, a leaf, a compass rose), each different. The folios alternate between two compositions: - **Recto layout:** Content hugs the right 55% of the viewport. The left 45% is a vast margin populated only by a single hand-drawn illustration or marginal annotation, like a medieval manuscript's marginalia. Text is set flush-left with generous 1.8em line-height. - **Verso layout:** Mirror of recto. Content on the left 55%, margin illustrations on the right. This alternation creates a rhythmic page-turning cadence as the user scrolls. **No traditional navigation bar.** Instead, a small hand-drawn compass icon is fixed to the top-right corner. Clicking it reveals a parchment-toned overlay with folio titles arranged vertically, each preceded by a Roman numeral rendered in the handwritten font. The overlay slides in from the right edge with a soft parallax offset. There are no card grids, no pricing tables, no CTA buttons, no stat counters. The entire page is a continuous narrative descent. ## Typography and Palette **Display Heading Font:** "Playfair Display" (Google Fonts, weights 400, 700, 900) -- a transitional serif with sharp, high-contrast strokes and elegant hairlines that evoke 18th-century title pages. Used for the domain name in the hero and all folio titles. Set at `clamp(2.8rem, 6vw, 5rem)` with `letter-spacing: 0.04em`. Color: #3B2F20 (burnt walnut). `font-feature-settings: "liga" 1, "onum" 1` for oldstyle numerals. The 900 weight is reserved exclusively for the hero domain name. **Body Text Font:** "Cormorant Garamond" (Google Fonts, weights 300, 400, 500, 600) -- a display Garamond with exaggerated contrast and delicate serifs that maintain readability at body sizes while preserving the hand-crafted feel. Used for all body text and secondary headings. Set at `clamp(1.05rem, 1.4vw, 1.25rem)` with `line-height: 1.85` and `letter-spacing: 0.01em`. Color: #5C4A3A (warm umber). Weight 600 is used for pull-quotes and folio subtitles. **Annotation/Handwritten Font:** "Caveat" (Google Fonts, weights 400, 700) -- a natural handwriting font with slightly uneven baselines and organic letterforms. Used exclusively for marginal annotations, decorative labels, compass-nav labels, and the Korean text (예상). Set at `clamp(1rem, 1.6vw, 1.4rem)`. Color: #8B6F4E (aged ink). Applied with a slight `rotate(-1deg)` to `rotate(2deg)` transform per element for organic scatter. **Color Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Background primary | #F5EDE0 | Vellum cream | Page background, hero | | Background secondary | #EDE3D2 | Aged parchment | Alternate folio backgrounds | | Ink primary | #3B2F20 | Burnt walnut | Headings, borders, SVG strokes | | Ink secondary | #5C4A3A | Warm umber | Body text, secondary elements | | Annotation ink | #8B6F4E | Aged ink | Handwritten elements, marginalia | | Accent gold | #C4973B | Manuscript gold | Flourishes, particle glow, hover states | | Accent deep | #7A3B2E | Kiln red | Occasional emphasis, drop caps, star accents | | Whisper | #D6C8B4 | Dust mote | Divider lines, ghost text, disabled states | No gradients. No neon. The palette is entirely drawn from the materials of a Renaissance studio: vellum, iron gall ink, gold leaf, kiln-fired red pigment. ## Imagery and Motifs **Hand-Drawn SVG Illustrations:** Every visual element is rendered as hand-drawn SVG line art with slightly irregular strokes (achieved via SVG `stroke-dasharray` animation and subtle `feTurbulence` displacement filters). The illustration vocabulary includes: - **Celestial charts:** A large central astrolabe-like circular diagram in the hero, composed of concentric rings with zodiac-like symbols (abstract, non-specific). Drawn with 1.5px strokes in #3B2F20, with occasional gold (#C4973B) accents on key nodes. - **Marginalia creatures:** Small whimsical illustrations in the manuscript margins -- a fox reading a book, a bird perched on a compass, an hourglass growing vines. Each is unique to its folio and drawn in the annotation ink color at roughly 120x120px. - **Botanical flourishes:** Vine-like decorative elements that grow along folio dividers, rendered as SVG path-draw animations that trace themselves as the user scrolls into view. - **Compass rose:** A hand-drawn compass used as the navigation trigger, rendered in gold with walnut outlines. It rotates slowly (one full rotation per 60 seconds) via CSS animation. **Particle Effects -- Dust Motes and Gilded Sparks:** A subtle canvas-based particle system overlays the entire page with `pointer-events: none`. Particles simulate golden dust motes drifting in sunlight: - 40-60 particles on screen at any time, each 2-4px diameter - Color: #C4973B at 15-30% opacity - Movement: gentle Brownian drift with slight downward gravity (0.02px/frame) - Near the hero's celestial chart, particle density doubles and particles are slightly larger (4-6px), creating a concentrated glow around the illustration - On cursor movement, particles within 120px radius are gently repelled, creating a "parting the light" interaction - Particles fade in and out over 3-4 second lifecycles, preventing visual clutter **Ink Texture Overlay:** A fine-grain noise texture (SVG `feTurbulence` with `baseFrequency="0.65"`) is applied at 3% opacity over all background surfaces via a fixed `::before` pseudo-element. The noise is warm-tinted (#8B6F4E) and simulates the tactile irregularity of handmade paper. It is invisible at a glance but prevents the backgrounds from feeling digitally flat. **No photography.** The entire site is illustrated, textured, and typographic. This is a world of ink, paper, and light. ## Prompts for Implementation Build yesang.xyz as a **single continuous scroll through an illuminated manuscript** -- a vertical codex of five to six folios, each revealing a facet of the domain's identity. The experience should feel like turning pages in a scholar's private notebook, with every scroll gesture rewarded by a new hand-drawn illustration slowly tracing itself into existence. **Hero Sequence (first 100vh):** The page loads to the vellum cream background (#F5EDE0). After a 300ms pause, the hand-drawn border frame begins drawing itself from the top-left corner, tracing clockwise over 2 seconds (SVG `stroke-dashoffset` animation). Once the frame completes, the celestial chart in the center begins drawing its concentric rings from the outermost inward, each ring taking 600ms with 200ms stagger. Simultaneously, the particle system ignites -- golden dust motes fade in from 0% to their resting opacity over 1.5 seconds. The domain name "yesang.xyz" fades in (`opacity: 0 to 1` over 800ms, with a 6px upward `translateY`) positioned above the chart's center. The Korean annotation "예상" appears last, handwritten-style, offset to the lower-right of the title with a slight rotation. **Parallax Behavior:** As the user scrolls past the hero, implement a multi-layer parallax where: - The celestial chart scrolls at 0.3x speed (stays visible longer, creating depth) - The border frame scrolls at 0.5x speed - The particle layer scrolls at 0.7x speed - Text scrolls at normal 1.0x speed This creates a layered parchment depth effect, as if the illustrations are printed deeper into the paper than the text. **Folio Transitions:** Each folio section triggers its hand-drawn illustration to begin its path-draw animation when the section enters the viewport (IntersectionObserver at 0.2 threshold). The illustration draws itself over 1.5-2.5 seconds. The folio's text content staggers in with subtle fade-up animations (20px translateY, 600ms duration, 100ms stagger between paragraphs). Folio dividers -- the ornamental ink lines between sections -- animate as a center-out draw: the line extends from the center point outward to both edges simultaneously, then the central flourish draws itself. **Marginal Annotations:** In the recto/verso margin areas, small handwritten annotations appear as scroll-triggered reveals. These are styled in "Caveat" at a slightly smaller size, rotated 1-3 degrees, and fade in with a 400ms duration. They serve as ambient flavor text -- short phrases like "cf. Ptolemy," "see folio III," "nota bene" -- that reinforce the manuscript metaphor without conveying critical information. **Compass Navigation:** The fixed compass rose in the top-right corner pulses its gold color subtly on hover (scale 1.0 to 1.08, 300ms ease). Clicking it opens the navigation overlay: a full-viewport parchment sheet (#EDE3D2) that slides in from the right with a 400ms cubic-bezier ease. Folio titles are listed with Roman numerals in "Caveat" and brief descriptions in "Cormorant Garamond." Each title has a subtle underline-draw animation on hover. Clicking a title smooth-scrolls to that folio and closes the overlay. **Responsive Adaptation:** On viewports below 768px, the recto/verso alternating layout collapses to a single centered column. Marginal illustrations move above their respective folio text blocks. The compass navigation remains fixed. Particle count reduces to 20-30 for performance. The celestial chart in the hero scales down but maintains its drawing animation. **AVOID:** CTA buttons, pricing grids, testimonial carousels, stat counters, cookie banners, hamburger menus, stock photography, gradient backgrounds, neon accents, card-based layouts, footer link columns. **Technical notes:** - All SVG illustrations should use `stroke-dasharray` / `stroke-dashoffset` for draw animations, not SMIL - Particle system via a single `` element with `requestAnimationFrame`, not DOM nodes - Parallax via `transform: translate3d()` for GPU acceleration, not `background-attachment: fixed` - All animations respect `prefers-reduced-motion` -- degrade to instant-reveal with no particle effects ## Uniqueness Notes 1. **Illuminated manuscript as structural metaphor:** No other design in this collection uses the structure of a medieval codex -- with recto/verso page alternation, marginal annotations, and hand-drawn folio dividers -- as both the visual theme and the layout system. The alternating content placement (left-55% / right-55%) creates a page-turning rhythm unique to this site. 2. **Particle system as environmental storytelling:** While particle effects appear at 3% frequency in the collection, this design uses them not as generic decoration but as a specific environmental element -- golden dust motes in sunlit air -- that reinforces the scriptorium setting. The cursor-repulsion interaction (parting the light) adds a tactile dimension absent from standard particle implementations. 3. **Zero photography / pure hand-drawn SVG illustration:** In a collection where 99% of designs use photography and 48% use minimal imagery, yesang.xyz relies entirely on hand-drawn SVG line illustrations with path-draw animations. Every visual is bespoke: celestial charts, marginalia creatures, botanical flourishes. This creates a cohesive handmade world that cannot be replicated with stock assets. 4. **Korean-English bilingual manuscript annotations:** The integration of Korean text (예상) as a marginal annotation -- styled in handwriting font with slight rotation, functioning as a scholarly gloss on the English content -- is a unique cross-cultural design decision that reflects the domain's Korean linguistic origin while maintaining the Western manuscript aesthetic. 5. **Compass rose as sole navigation element:** Rejecting traditional navigation bars, hamburger menus, and sticky headers entirely in favor of a single slowly-rotating hand-drawn compass icon is a bold navigational choice not seen elsewhere in the collection. It reinforces the cartographic/scholarly theme while maintaining full accessibility. Chosen seed/style: light-academia, hero-dominant, serif-classic, warm, parallax, hand-drawn, particle-effects, luxurious Avoided overused patterns: corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), centered layout (58%), mono typography (76%), nature motifs (48%), friendly tone (45%), gradient palette (66%), stagger animation (42%) Preferred underused patterns: light-academia (1%), hero-dominant (3%), serif-classic (2%), particle-effects (3%), book-scholarly motifs (4%), candle-atmospheric (3%), marble-classical (2%), opulent-grand tone (4%)