# Design Language for ggaji.com
## Aesthetics and Tone
ggaji.com channels the spirit of a Korean seaside sketchbook -- the kind of dog-eared Moleskine a traveling illustrator fills with loose ink drawings of tidal pools, fishing boats, and village rooftops while sitting on a breakwater in Tongyeong. The aesthetic is **hand-drawn coastal naturalism**: every visual element feels as though it was sketched with a slightly damp brush pen on rough watercolor paper, then scanned at high resolution with the paper grain intact. Lines are imperfect -- they breathe, they wobble, they occasionally overshoot their endpoints. Nothing is machine-precise. The digital surface remembers the analog hand that made it.
The tone is **friendly** in the truest sense: not the saccharine friendliness of corporate "we're here for you" messaging, but the easy warmth of a neighbor who waves you over to share freshly caught fish. There is humor in the wobble of the illustrations, comfort in the soft coastal colors, and a sense of unhurried generosity in the spacious, flowing layout. The site feels like it was made by a person, not a system -- someone who cares more about the feel of a line than the precision of a pixel grid.
The mood draws from the visual culture of Korean coastal villages (haenyeo diving communities, Jeju stone walls, painted fishing boats), filtered through the lens of contemporary illustration zines and indie web culture. Think Studio Ghibli backgrounds crossed with Noh Boo-young's seaside paintings crossed with the hand-lettered signage of a neighborhood bungeo-ppang stall.
## Layout Motifs and Structure
The layout follows an **organic-flow** paradigm -- content does not snap to a rigid grid but instead drifts and pools across the viewport like water finding its level. Sections are not rectangular blocks stacked vertically; they are amorphous regions defined by illustrated borders (hand-drawn coastline edges, cloud shapes, undulating wave lines) that create natural visual containers without hard geometric boundaries.
**Flow Architecture:**
- **Opening Tide (Hero):** Full-viewport canvas where the entire background is a large hand-drawn coastal illustration that extends edge-to-edge. Text elements are positioned as if handwritten directly onto the illustration -- they sit at slightly off-angle baselines, nestled into the negative spaces of the drawing (tucked into a cloud shape, resting on a drawn hillside, floating in a patch of open sky). No navigation bar; the illustration itself contains subtle drawn arrows or path indicators that invite scrolling.
- **Drifting Sections:** Below the hero, content flows in an organic serpentine path. Each section occupies roughly 80-90vh and has an irregular shape defined by SVG clip-paths that follow hand-drawn outlines. Section 1 might be a wide blob shape that hugs the left side; Section 2 could be a cloud-form that drifts right; Section 3 pools at center. The visual rhythm mimics a coastline viewed from above -- bays, peninsulas, inlets. Content (text and illustrations) is positioned within these organic shapes using CSS Grid with `grid-template-areas` that change per section.
- **Tidal Pools (Content Islands):** Smaller content units appear as circular or blob-shaped "tidal pool" containers scattered within the flow. These pools contain secondary information, quotes, or small illustrations. They use `border-radius` values generated from hand-drawn blob outlines (e.g., `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%`) and float freely, positioned with `margin` offsets that break any sense of columnar alignment.
- **Shore Break (Footer):** The page concludes with a drawn shoreline that runs horizontally across the viewport. Below it, a sandy-colored region holds minimal footer content, hand-lettered in the illustration style. The shoreline is an SVG path that gently animates (a slow, breathing wave motion using CSS keyframes on the `d` attribute via SMIL or JavaScript path morphing).
All transitions between sections are soft and organic. There are no sharp horizontal dividers or ruled lines. Every boundary is a drawn line, a painted edge, a dissolving wash.
## Typography and Palette
**Typography:**
- **Display / Headlines:** "Gaegu" (Google Fonts) -- a Korean handwriting font with the loose, bouncy character of actual pen-on-paper writing. It has an inherently childlike warmth without being infantile; the strokes are confident but imperfect, with baseline variation that feels genuinely hand-drawn. Used at 3rem-6rem for main headings. Set with `letter-spacing: 0.01em` and `line-height: 1.15` to give each character room to breathe. All headlines use a CSS `filter: url(#rough-edge)` referencing an SVG feTurbulence filter that adds the faintest paper-texture roughness to glyph edges.
- **Body / Reading Text:** "Noto Sans KR" (Google Fonts), weight 300 (Light) for body text at 1rem-1.1rem, weight 400 (Regular) for emphasis. This humanist sans-serif has the gentle, open letterforms needed to complement the hand-drawn aesthetic without competing with it. Its Korean glyph coverage ensures proper rendering of any Korean text elements. Set with `line-height: 1.75` and `max-width: 38em` per text block for comfortable reading. Paragraph spacing is generous at `margin-bottom: 1.5em`.
- **Accent / Captions:** "Caveat" (Google Fonts) -- a connected handwriting font used sparingly for annotations, captions under illustrations, and interactive label text. At 0.9rem-1.2rem it functions as the "margin notes" typeface, as though someone scribbled additional thoughts alongside the main text. Color is set to the muted teal (#5B8A8A) to differentiate from body text.
**Palette:**
The coastal-blend palette is drawn from the literal colors of the Korean southern coast -- the grey-green of winter seas, the warm sand of Haeundae, the faded blue of painted fishing boats, the soft terracotta of clay roof tiles, and the deep teal of deep water glimpsed through clear shallows.
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Deep Water | Dark teal | #2C5F5F | Primary text, strong UI elements, anchor points |
| Sea Glass | Muted teal | #5B8A8A | Secondary text, captions, interactive states |
| Coastal Sand | Warm beige | #E8D9C5 | Primary background, breathing space |
| Driftwood | Warm grey-brown | #A89280 | Borders, subtle dividers, illustration outlines |
| Foam White | Off-white | #F5F0EA | Card backgrounds, tidal pool fills, hover states |
| Painted Hull | Faded coral-red | #C4705A | Accent, highlights, drawn underlines, call-outs |
| Horizon Blue | Soft periwinkle | #7A9EB8 | Secondary accent, sky tones, gradient endpoints |
| Seaweed Dark | Near-black green | #1A2F2F | Deep shadows, strong contrast text on light backgrounds |
The palette explicitly avoids high-saturation neons and pure blacks/whites. Every color has a slight warmth or grey cast, as if seen through salt-hazed air. Gradients, when used, are extremely subtle: `linear-gradient(180deg, #F5F0EA 0%, #E8D9C5 100%)` for gentle tonal shifts that mimic the sky-to-sand transition.
## Imagery and Motifs
**Custom Illustration System:**
All imagery is original hand-drawn illustration -- no stock photography, no generated renders. The illustration style references Korean ink wash painting (sumukhwa) merged with contemporary line-art zine culture. Specific characteristics:
1. **Ink Line Work:** Primary illustrations use a single-weight ink line (approximately 2px at standard viewport) with deliberate imperfections -- line ends that taper unevenly, corners that overshoot, parallel lines that diverge slightly. In CSS/SVG, this is achieved with `stroke-linecap: round`, `stroke-linejoin: round`, and a subtle SVG feTurbulence displacement filter applied to paths.
2. **Wash Fills:** Interior fills use flat colors from the palette with a noise texture overlay (`background-blend-mode: multiply` over a 3% opacity grain pattern) that simulates the uneven absorption of ink wash on rough paper. No flat solid fills -- everything has the breath of paper texture.
3. **Coastal Subjects:** Illustration subjects are strictly coastal/maritime: stylized waves, rounded stones, drying fishing nets, seabirds in flight, lighthouse silhouettes, coiled rope, glass fishing floats, tide lines, shell spirals, small crabs, kelp fronds. These are drawn in a slightly whimsical but not cartoonish style -- proportions are observed but simplified, details are suggested rather than rendered.
**Organic Blob Motifs:**
The signature visual motif is the **organic blob** -- amorphous, rounded shapes that function as containers, decorative elements, and transitional devices throughout the site. These blobs are not mathematically generated ellipses; they are traced from actual hand-drawn shapes, digitized as SVG paths. Each blob is unique.
Blob applications:
- **Section containers:** Content sections are clipped to blob-shaped SVG paths using `clip-path: url(#blob-1)` etc.
- **Decorative scatter:** Small blobs (50-150px) in semi-transparent palette colors (#5B8A8A at 15% opacity, #C4705A at 10% opacity) are scattered across backgrounds as decorative elements, positioned pseudo-randomly with CSS custom properties.
- **Interactive blobs:** On hover/focus, blobs undergo a slow morph animation (CSS `animation` with `@keyframes` that interpolate between two blob path shapes over 3-4 seconds, eased with `cubic-bezier(0.37, 0, 0.63, 1)`).
- **Transition blobs:** Between sections, a large blob shape acts as a visual "bridge," overlapping both sections by ~10vh, with a color that blends the two section backgrounds.
**Drawn Dividers:**
Instead of `
` elements or border lines, section breaks use hand-drawn SVG wave lines, looping rope patterns, or a row of small illustrated shells/stones. These are inline SVGs colored in #A89280 (Driftwood) and repeat horizontally with slight randomized spacing.
## Prompts for Implementation
**Full-Screen Narrative Coastal Journey:**
The entire site experience is a continuous illustrated journey along a coastline. The user begins at a high vantage point (the hero illustration shows a panoramic coastal view) and as they scroll, they move through the landscape: past a rocky headland (section 1), down to a sandy cove (section 2), along a harbor (section 3), and out to a quiet promontory (footer). Each section's illustration connects to the next, creating a continuous panoramic narrative that rewards scrolling. There is no traditional navigation menu -- the coastline IS the navigation.
**Bounce-Enter Animations:**
All content elements enter the viewport with a distinctive **bounce-enter** animation. As an element crosses the viewport threshold (detected via `IntersectionObserver` with `threshold: 0.15`), it animates from `opacity: 0; transform: translateY(40px) scale(0.95)` to `opacity: 1; transform: translateY(0) scale(1)` using a spring-physics easing curve: `cubic-bezier(0.34, 1.56, 0.64, 1)`. The overshoot in the cubic-bezier creates the characteristic bounce -- elements slightly overshoot their final position then settle back. Stagger timing between sibling elements: 80ms delay increment via CSS custom property `--stagger-index`.
Different element types have different bounce characteristics:
- **Text blocks:** Gentle bounce, 600ms duration, 20px translateY offset
- **Illustrations:** Pronounced bounce, 800ms duration, 40px translateY offset, with additional slight rotation (`rotate(2deg)` to `rotate(0)`)
- **Blob containers:** Elastic bounce, 1000ms duration, using `cubic-bezier(0.68, -0.55, 0.27, 1.55)` for a more exaggerated overshoot
- **Small decorative elements (shells, stones):** Quick pop, 400ms duration, scale from 0.5 to 1 with bounce
**SVG Illustration Integration:**
All illustrations are inline SVGs embedded directly in the HTML (not `![]()
` tags) so they can be styled, animated, and filtered with CSS. Key SVG techniques:
- Wave animations: `` elements with CSS `@keyframes` that subtly shift control points, creating a slow breathing motion
- Drawing-on effect: `stroke-dasharray` and `stroke-dashoffset` animation to make illustration lines appear as if being drawn in real-time as the user scrolls to them
- Parallax layers: Illustration backgrounds are split into 2-3 SVG groups (foreground rocks, midground water, background sky) that translate at different speeds on scroll using `transform: translateY(calc(var(--scroll-offset) * 0.3))` etc.
**Paper Texture Foundation:**
The entire page has a subtle paper texture applied to ``:
```css
body {
background-color: #E8D9C5;
background-image: url('data:image/svg+xml,...'); /* inline SVG noise pattern */
background-blend-mode: multiply;
}
```
The noise pattern is a tiled 200x200 SVG using `` and `` to produce a barely-visible grain (opacity ~4%) that gives the entire page the tactile quality of drawing paper.
**Interactive Tidal Pools:**
The blob-shaped content containers ("tidal pools") respond to cursor proximity. Using a lightweight JavaScript approach: when the cursor moves within 200px of a pool, the pool's border subtly ripples (achieved by animating the blob's SVG path control points with small sinusoidal offsets). The effect is as if the user's cursor is a dropped pebble sending ripples through the tidal pool surface. On mobile, this effect triggers on tap with a brief ripple-and-settle animation.
**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie-cutter hero-with-navbar patterns, stock photography, gradient mesh backgrounds, dark mode, corporate grid systems, parallax for the sake of parallax.
## Uniqueness Notes
**Differentiators from other designs:**
1. **Hand-Drawn Organic Flow Navigation:** No other design in the portfolio uses an illustrated coastline as the literal navigation structure. The organic-flow layout (3% frequency) combined with hand-drawn illustration-as-wayfinding is completely unique. Users navigate by following a drawn landscape rather than clicking menu items -- the content topology IS the geographic topology of the illustration.
2. **Korean Coastal Illustration Vocabulary:** While hand-drawn aesthetics appear at 23% frequency, none use the specific visual vocabulary of Korean southern coast maritime culture (haenyeo, doldam walls, painted fishing hulls, glass buoys). This creates an immediately recognizable cultural identity that is neither generic "Asian zen" nor generic "seaside retreat" but a specific, researched visual language rooted in Tongyeong/Jeju coastal traditions.
3. **Bounce-Enter Spring Physics:** At only 2% frequency, bounce-enter animations are nearly absent from the portfolio. This design makes bounce the PRIMARY animation language rather than using the overused scroll-triggered fade-ins (97%) or parallax (79%). Every element bounces into existence with spring-physics easing, creating a sense of liveliness and physical presence that contrasts sharply with the smooth, frictionless transitions dominating other designs.
4. **Tidal Pool Interactive Blobs:** The combination of organic-blobs motif (4% frequency) with proximity-reactive ripple behavior creates interactive containers that have no equivalent elsewhere. These are not static decorative blobs or simple hover-state changes -- they are responsive micro-environments that react to cursor presence with fluid-dynamics-inspired animation.
5. **Continuous Panoramic Scroll Illustration:** Rather than discrete sections with decorative illustrations between them, this design uses a single continuous illustrated coastline panorama that spans the entire page length. Scrolling reveals new parts of the same drawing. This connected-illustration approach transforms the scroll experience from "reading a page" to "unrolling a painted scroll" (emakimono), a fundamentally different spatial metaphor.
**Chosen Seed/Style:** aesthetic: hand-drawn, layout: organic-flow, typography: humanist, palette: coastal-blend, patterns: bounce-enter, imagery: custom-illustration, motifs: organic-blobs, tone: friendly
**Avoided Overused Patterns:**
- Avoided centered layout (99% frequency) in favor of organic-flow (3%)
- Avoided scroll-triggered as primary animation (97%) in favor of bounce-enter (2%)
- Avoided mono typography (99%) in favor of humanist (Noto Sans KR) with handwritten display (Gaegu)
- Avoided minimal imagery (95%) in favor of custom-illustration (6%)
- Avoided vintage motifs (77%) in favor of organic-blobs (4%)
- Avoided photography imagery (69%) -- zero photographic content, 100% illustration
- Avoided gradient palette dominance (91%) -- palette uses flat coastal tones with minimal gradients