# Design Language for 가능성.com ## Aesthetics and Tone 가능성.com (Korean for "possibility") is a retro-styled meditation on potential -- a site that explores what might be through the lens of what once was. The visual identity channels the warm analog optimism of 1960s-70s educational filmstrips and public television graphics: split-screen compositions, Garamond typography, and a forest-green palette that evokes chalkboards, ivy-covered lecture halls, and the enduring green of possibility itself. The split-screen layout presents dualities -- what is / what could be, past / future, question / answer -- always side by side, never resolving into a single truth. Vector-art illustrations (clean, geometric, scalable) replace photography with a timeless graphic quality. Book-scholarly motifs (marginalia, footnotes, chapter markers) frame the content as an ongoing intellectual inquiry. The tone is pastoral-romantic -- gentle, contemplative, finding beauty in ideas and potential rather than achievement. Inspiration from Saul Bass title sequences, the Whole Earth Catalog design language, and Korean minjok textbook illustrations of the 1970s. ## Layout Motifs and Structure A **split-screen** layout where the viewport is persistently divided into two complementary halves, each presenting a different facet of the same concept -- possibility viewed from two angles simultaneously. **Primary structure:** - **Title split (100vh):** Left half (#1a3020 deep forest background): the Korean word "가능성" in large Garamond-classic serif, vertical orientation, with a thin slide-reveal animation (characters appear one at a time from top, 300ms stagger). Right half (#f0ead0 warm parchment): the English translation "POSSIBILITY" in the same typeface, horizontal, with a mirrored slide-reveal from the right. - **Duality sections (3-4 sections, each 80vh):** Each section presents a concept pair across the split (e.g., "Question / Answer", "Seed / Tree", "Now / Tomorrow"). Left side shows the first concept with a vector-art illustration; right side shows its complement. The dividing line between halves contains a thin animated border (slide-reveal: a line that draws itself top-to-bottom on scroll-enter). - **Reading room:** A single full-width section (split abandoned temporarily) presenting a longer reflective text passage, styled as a book page with wide margins containing scholarly footnotes (small text, numbered references). - **Horizon footer:** The split returns: left shows contact information on forest green; right shows a final possibility prompt ("What will you make possible?") on parchment. **Spatial relationships:** The split is 50/50 with a 2px dividing line. Within each half, content is inset 60px from the center line and 40px from the outer edge. Content max-width per half: 420px. Generous vertical spacing (80-100px between text blocks) within each half. ## Typography and Palette **Fonts:** - **Display/Headings:** "Cormorant Garamond" (Google Fonts) -- a display Garamond with high contrast and elegant proportions, used at clamp(36px, 6vw, 72px). Weight 600. The classical authority of Garamond carries the weight of philosophical inquiry about possibility. Supports both Latin and Korean text contexts. - **Body text:** "Cormorant Garamond" (Google Fonts) -- same family at 18px/1.8 line-height, weight 400. Italic (weight 400 italic) used for the "reading room" section for a meditative, literary quality. - **Footnotes/Marginalia:** "Source Sans 3" (Google Fonts) -- a clean sans-serif at 11px, weight 400, for footnotes and metadata. The sans-serif contrast against Garamond body text clearly distinguishes scholarly apparatus from primary content. **Color Palette (forest-green):** - **Deep forest:** #1a3020 (primary dark green, left-panel background) - **Forest mid:** #2a4a38 (slightly lighter green for hover states) - **Canopy green:** #4a7a58 (medium green for accents, vector art fills) - **Parchment:** #f0ead0 (warm cream, right-panel background) - **Aged paper:** #e0d4b8 (darker parchment for card surfaces) - **Ink brown:** #3a2a18 (deep brown-black for text on parchment) - **Gold accent:** #b89840 (muted gold for footnote markers, line decorations) ## Imagery and Motifs **Core visual motifs:** - **Vector-art illustrations:** Clean, geometric vector illustrations of conceptual objects -- a seed splitting open, a compass rose, an open doorway, a branching path. Rendered as SVG with single-weight strokes (2px) in canopy green (#4a7a58) on parchment, or in gold (#b89840) on forest backgrounds. No gradients, no fills -- pure line work for timeless clarity. - **Book-scholarly footnotes:** Throughout the split-screen text, superscript numbers in gold link to footnotes in the margins. The footnotes contain brief tangential thoughts, alternative perspectives, or Korean proverbs related to possibility -- transforming the site into an annotated manuscript. - **Slide-reveal animations:** Content appears via horizontal slide reveals: left-half content slides in from the left, right-half content slides in from the right, meeting at the center divider. Duration: 600ms, ease-out. Triggered by IntersectionObserver (threshold: 0.3). - **Center divider as living line:** The 2px line dividing left and right halves is not static -- on section transitions, it briefly thickens to 4px and pulses with gold (#b89840) before returning to its default state, drawing attention to the boundary between dualities. ## Prompts for Implementation **Full-screen duality experience:** The site should feel like reading a bilingual manuscript where each page spread presents two perspectives simultaneously. The split is not a layout trick but a philosophical statement about duality and possibility. **Split-screen implementation:** - Use CSS grid: grid-template-columns: 1fr 1fr on each section container. - Left half: background #1a3020, text #f0ead0. - Right half: background #f0ead0, text #3a2a18. - Center divider: pseudo-element (::after) on the grid container, position: absolute, left: 50%, width: 2px, background: #b89840 at 0.4 opacity. **Slide-reveal animation:** - Left content: initial state transform: translateX(-60px), opacity: 0. Revealed: translateX(0), opacity: 1. - Right content: initial state transform: translateX(60px), opacity: 0. Revealed: translateX(0), opacity: 1. - Transition: 600ms ease-out. Triggered by IntersectionObserver with threshold: 0.3. - Stagger child elements with animation-delay: calc(var(--index) * 150ms). **Korean text handling:** - Use lang="ko" attribute on Korean text sections. - Ensure Cormorant Garamond falls back gracefully; add "Noto Serif KR" (Google Fonts) as fallback specifically for Korean characters. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, neon/cyberpunk aesthetics. This is quiet, green, and thoughtful. ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-screen as philosophical structure:** No other design uses the split layout as a deliberate duality metaphor (question/answer, past/future) -- the layout IS the concept, not merely a container for it. 2. **Forest-green Korean/English bilingual manuscript:** The combination of deep forest-green palette with Korean Hangul and English presented as parallel texts creates a unique bilingual-scholarly aesthetic found in no other design. 3. **Vector-art conceptual illustrations (line-only, no fills):** While other designs use vector art, the strict limitation to single-weight line drawings without fills or gradients creates a distinctive visual language that evokes textbook diagrams and philosophical diagramming. **Chosen seed/style:** aesthetic: retro, layout: split-screen, typography: garamond-classic, palette: forest-green, patterns: slide-reveal, imagery: vector-art, motifs: book-scholarly, tone: pastoral-romantic **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).