# Design Language for yesang.org ## Aesthetics and Tone **yesang.org** — the word 예상 (yesang) in Korean means "expectation" or "prediction." This is a site that sits in the space between what you anticipate and what arrives. The aesthetic is **botanical-geometric**: not pressed flowers or watercolor leaves, but the *mathematics of botanical growth* — Fibonacci spirals expressed as interlocking grid squares, phyllotaxis angles rendered as precise geometric constructions, Voronoi seed-pod tessellations drawn in fine grid-lines. Plants are never shown. Their logic is everywhere. The visual mood is **friendly-precise**: warm without being saccharine, playful without abandoning structure. Think of a biologist who also does typographic design — someone who measures petals and then designs posters about the measurements. Every rounded corner has a reason. Every grid cell is proportioned by the golden ratio (1.618). Color relationships are strictly complementary: the page breathes like a living thing. The tone is approachable and direct. No grandeur, no whispered luxury, no dark drama. This is a portfolio of predictions: here is what I expected, here is what happened, here is the gap between them. The experience: when you hover or interact, elements shake with a brief, crisp correction — as if the page is recalculating its prediction. Every form-field error triggers the shake. Every successful submission blooms a tiny radial pulse from the affected element. Inspiration: Anni Albers's textile geometry, Agnes Denes's Wheatfield, Giorgia Lupi's data-drawing practice. --- ## Layout Motifs and Structure The layout is a **portfolio-grid** built on a strict **12-column × golden-ratio-row** system. Columns are 72px wide on desktop (1440px breakpoint) with 16px gutters. Row height is derived from the column width: 72 × 1.618 = ~116px per unit. All elements snap to this grid without exception. **Grid Architecture:** - **Hero zone (rows 1–3, columns 1–12):** Full-width name + tagline. The name "yesang" is set in a single weight, enormous, spanning the full 12 columns, with a subtle grid-line overlay that makes the letterforms feel drawn on graph paper. A fine 0.5px line grid at 72px intervals persists behind all content as a low-opacity (#c4d4a8 at 18%) texture. - **Work grid (rows 4–16):** Portfolio pieces arranged in a **variable-span grid**: some items span 4 columns × 2 rows, others span 8 columns × 3 rows. No two adjacent items share the same span configuration. The rhythm is deliberately asymmetric within a symmetric system — like sunflower seeds arranged by phyllotaxis, each following the rule but never repeating. - **Bio aside (rows 17–19, columns 1–4):** Short personal statement in small text, left-aligned, anchored to the bottom-left of its column cluster. - **Contact band (rows 20–21, columns 1–12):** Minimal, text-only, centered contact line. No icons, no social grid. **Grid-line motif:** A persistent fine grid (0.5px, #c4d4a8, 14% opacity) covers the entire page surface. It does not scroll — it is fixed to the viewport. Portfolio cards slide over it as the user scrolls, creating a sense of the grid as an underlying coordinate system that the work inhabits. **Spatial rhythm:** Generous padding inside each portfolio card (32px all sides). Cards have a 2px solid border in the accent color, slightly rounded at 6px radius — just enough to soften, not enough to feel bubbly. --- ## Typography and Palette **Display / Hero Font: `Nunito`** (Google Fonts, weight 800) - Used for the main name "yesang" at 15–22vw, letter-spacing −0.04em. The rounded terminals of Nunito give it a handcrafted geometric quality — it reads as friendly without being childish. Set in `#2d4a1e` (deep botanical green) on the off-white background. - Section headers at 2.4rem, weight 700, same family. **Body / UI Font: `DM Sans`** (Google Fonts, weight 400 / 500) - All paragraph text, labels, captions. Set at 16–18px, line-height 1.65. The geometric construction of DM Sans harmonizes perfectly with Nunito while providing a cleaner, slightly cooler reading experience at body scale. - Used for all portfolio card titles at 1.1rem weight 500. **Accent / Label Font: `DM Mono`** (Google Fonts, weight 400) - Project categories, year markers, small technical labels. Set at 11–12px, letter-spacing 0.08em, uppercase. Provides a crisp, data-adjacent feel that reinforces the prediction/measurement concept. **Palette — Strict Complementary:** | Role | Name | Hex | |------|------|-----| | Background | Parchment White | `#f5f2ec` | | Primary text | Deep Forest | `#1e2e15` | | Botanical accent | Fern Green | `#4a7c2f` | | Complementary | Terracotta Rose | `#c2553a` | | Complementary light | Warm Blush | `#e8a090` | | Grid lines | Sage Ghost | `#c4d4a8` | | Card border | Moss Border | `#7aab5c` | | Inactive / muted | Stone | `#9ea89a` | The complementary axis is **green ↔ red-orange**: botanically grounded green family (fern, moss, sage) paired with warm terracotta tones. This is the complementary pair wheel: green (#4a7c2f) sits opposite red-orange (#c2553a). The parchment background keeps it from feeling harsh — it reads as a scientific illustration palette rather than a sports team's colors. --- ## Imagery and Motifs **Geometric-abstract primary visual language:** All decorative elements are geometric abstractions of botanical growth patterns — never literal plants, always their underlying mathematics: 1. **Phyllotaxis grid insert**: A decorative element in the hero zone — an SVG rendering of a sunflower head's seed arrangement as a Fibonacci spiral of small dots (radius 2px, color `#4a7c2f`), approximately 200×200px, positioned at the far right of the hero, rotating very slowly (1 rotation per 40 seconds via CSS). This is the site's visual signature. 2. **Voronoi cell dividers**: Between portfolio sections, a full-width SVG divider consisting of Voronoi cells (seed-pod geometry), stroked at 0.8px in `#7aab5c`. Cells are approximately 60–120px across, generated programmatically and unique per section break. 3. **Growth-ratio card thumbnails**: Portfolio card thumbnails that lack images use a procedurally-generated placeholder: a golden-ratio spiral drawn in SVG (3–4 visible arc segments, stroke weight 1.5px, color `#4a7c2f`), centered on `#eef2e8` background. This is never "no image" — it is a designed absence. 4. **Grid-line underlay**: The persistent 72px grid described above. The grid is the motif — the site's coordinate system made visible. 5. **Shake-error interaction**: All form fields (contact, filter) use a horizontal shake animation (3 rapid oscillations, ±8px, 300ms total, cubic-bezier spring curve) when validation fails. The error field border transitions from `#7aab5c` → `#c2553a` → back to `#7aab5c` over 600ms. **No photography. No stock imagery.** Portfolio work shown through cropped, high-quality screenshots or geometric stand-ins. --- ## Prompts for Implementation Build yesang.org as a **single continuous scroll** — one long page, no sub-pages. Navigation is an absolutely-positioned thin list at the top-right: "work / about / contact" in DM Mono 11px, with a `border-animate` underline draw on hover. **Grid foundation:** ```css :root { --col: 72px; --gutter: 16px; --phi: 1.618; --row: calc(var(--col) * var(--phi)); /* ~116px */ --grid-color: #c4d4a8; --fern: #4a7c2f; --terra: #c2553a; --page-bg: #f5f2ec; --ink: #1e2e15; } ``` **Fixed grid overlay:** Implement as a `::before` pseudo-element on `body` or a dedicated `
` — `position: fixed`, `inset: 0`, `pointer-events: none`, `z-index: 0`. Use a `background-image: repeating-linear-gradient` for both axes at 72px spacing, 0.5px lines, `rgba(196, 212, 168, 0.14)`. **Portfolio grid stagger entrance:** Portfolio cards enter with a `stagger` animation: each card fades in and translates up 24px, 0.4s ease-out, with a 60ms delay per card in reading order. Triggered by IntersectionObserver at 20% threshold. Do NOT re-trigger on upscroll. **Phyllotaxis SVG:** Generate the spiral using the golden angle (137.5°) — place n seeds where each seed position is `r = sqrt(n) * scale`, `theta = n * 137.5°`. 200 seeds, radius scale 8px per sqrt unit, dots at 2px radius. Render once into an inline SVG, animate rotation with `transform-origin: center` via CSS `animation: spin 40s linear infinite`. **Voronoi dividers:** Use a lightweight Voronoi library (d3-delaunay is acceptable) or hand-code simple approximate cells using clip-path polygons. Generate 15–20 seed points pseudo-randomly (seeded by section index so they're deterministic), compute Voronoi, render as an SVG with `fill: none`, `stroke: #7aab5c`, `stroke-width: 0.8`. Height 80px per divider. **Shake-error animation:** ```css @keyframes shake-error { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } } .field-error { animation: shake-error 0.35s ease-in-out; border-color: var(--terra) !important; } ``` Apply class `field-error` via JS on validation failure; remove after 600ms. Also trigger a brief radial pulse (`box-shadow: 0 0 0 0 rgba(194,85,58,0.4)` → `0 0 0 12px rgba(194,85,58,0)`, 0.5s ease-out) on the field to draw attention. **Hover interactions:** Portfolio cards: `transform: translateY(-3px)` + `box-shadow: 0 8px 24px rgba(30,46,21,0.12)` on hover, 200ms ease. Border color stays `#7aab5c` — no color change on hover. **Typography loading:** Load from Google Fonts: `Nunito:wght@800`, `DM+Sans:wght@400;500`, `DM+Mono:wght@400`. Use `font-display: swap`. **Do NOT implement:** hero CTAs, pricing tables, stat counters, testimonials, social proof sections, sticky headers, modal popups, cookie banners, newsletter sign-up forms. The site is work + contact. Nothing else. --- ## Uniqueness Notes **Chosen seed:** aesthetic: botanical, layout: portfolio-grid, typography: playful-rounded, palette: complementary, patterns: shake-error, imagery: geometric-abstract, motifs: grid-lines, tone: friendly **Differentiators from other designs in the registry:** 1. **Botanical aesthetic expressed as mathematical geometry, not illustration.** Botanical appears in 29% of designs — universally as illustrations, watercolors, or organic curves. yesang.org inverts this: the botanic element is pure Fibonacci/Voronoi mathematics, never a drawn leaf. The complementary palette (only 4% frequency) grounds the geometric language in the plant world through color alone, not imagery. No other design in the registry uses botanical + geometric-abstract + grid-lines as a unified concept. 2. **Shake-error as a primary signature interaction, not a fallback.** Shake-error appears in 4% of designs and in every case is a minor error-handling detail. Here, the shake is the *personality* of the site — it enacts the prediction theme ("yesang" = expectation) by simulating correction. Every interaction involves prediction and resolution. The shake is not a bug indicator; it is a philosophical gesture. 3. **Fixed viewport grid-line underlay as persistent coordinate system.** Grid-lines appear in 2% of designs, always as background texture. Here the grid does not scroll — it is fixed to the viewport, making the page content appear to float over a coordinate plane. The fixed grid reinforces the measurement/data theme while creating a visual depth layer distinct from parallax (which is at 74% frequency and deliberately avoided here). 4. **DM Sans + Nunito + DM Mono triple-family system.** Playful-rounded typography (5% frequency) is typically implemented with a single bubbly font throughout. Here it is contained to the display role only (Nunito 800), while body and label text use the crisper, more data-adjacent DM family. This tonal contrast — playful at scale, precise at small size — is unique in the registry. **Avoided patterns from frequency analysis:** - Parallax (74% — most overused pattern) — not used - Centered layout (83%) — used only for contact band, not for hero or portfolio - Full-bleed sections (63%) — not used; all content is grid-contained - Botanical illustration imagery (4% but conceptually overcrowded) — referenced only through geometry