# Design Language for soning.stream

## Aesthetics and Tone

**soning.stream** is read as a compound: *son* (Korean 손, "hand"; also English *son*) + *ing* (present-participle, ongoing action) + *.stream* (flowing water, live transmission). The site is a living handwork archive — a place where craft gestures are transmitted in real time, preserved in amber, and arranged along a single flowing vertical spine. The aesthetic is **Frutiger Aero** rendered through a watercolor membrane: that particular 2004–2012 era of computing when interfaces believed in nature — the translucent bubbles, the soft gradients of alpine meadows, the sky-blue highlights that made every button look like it had just emerged from spring water — married to the quiet, ink-bleeding tenderness of Japanese watercolor botanical illustration.

The tone is **zen-contemplative**: unhurried, ceremonially precise, without anxiety. Like watching a practitioner perform a tea ceremony through a rain-flecked window. There is no urgency here. The page does not ask you to scroll — it unfolds the way a hand opens, petal by petal, moment by moment.

The Frutiger Aero soul lives in the translucency of the UI layer: frosted-glass panels, soft inner-glow borders, light-refracting dividers. Beneath that glass layer lives the actual world: painted moss on stone, ink spreading through wet cotton fiber, a spider orchid catching morning light. These two languages — the digital shimmer of Web 2.0 optimism and the pre-digital slowness of watercolor — are not in tension here. They complete each other, the way a screen playing a nature documentary completes a dark room.

The palette is **high-contrast**: deep ultramarine shadows (`#0f1b2d`) against luminous pearl whites (`#f0f4f8`), with botanical accent greens (`#3d7a4f`) and watercolor rose-blush pinks (`#e8a4b0`), anchored by the aqua-glass shimmer characteristic of Frutiger Aero (`#7ec8d4`). Black is never pure black — it is deep water, the color of ink dropped in a bowl.

## Layout Motifs and Structure

The page is built on a **vertical timeline** — a single chronological spine running top to bottom, center-left anchored, that the reader descends like walking a garden path. The timeline is not metaphorical: it is rendered as a physical element, a 2 px vertical stroke in `#7ec8d4` aqua-glass that runs the full height of the scrollable content, punctuated at each entry by a circular node (14 px diameter, filled `#f0f4f8`, bordered 2 px `#7ec8d4`, with a 6 px inner fill in `#3d7a4f` for completed nodes and `#e8a4b0` for featured nodes).

**Macro structure (top to bottom, seven sections):**

1. **Canopy (full-viewport hero):** The domain wordmark `soning.stream` sits in the upper third, rendered in Cormorant Garamond italic at 11 vw, color `#0f1b2d`, against a full-bleed watercolor botanical painting (painted spider orchids and maiden-hair ferns on wet cotton paper, warm light from upper-right). Over this painting, a frosted-glass panel (Frutiger Aero translucency: `backdrop-filter: blur(12px)`, `background: rgba(240,244,248,0.45)`) occupies the lower 30% of the viewport, introducing the first timeline node. The aqua-glass spine begins here, fading in from the bottom of the wordmark.

2. **Entry Leaves (repeating timeline sections):** Each leaf is a horizontal composition: the timeline spine on the left (at 22% viewport width), a date-node bubble at the spine intersection, and the content card floating to the right (spanning 65% viewport width). Cards alternate: odd leaves have content cards that extend rightward, even leaves have content cards that extend leftward, but the spine stays center-left, so the alternation creates a gentle S-curve reading path. Each card is a frosted-glass panel with `border: 1px solid rgba(126,200,212,0.4)`, `box-shadow: 0 4px 24px rgba(15,27,45,0.12), inset 0 1px 0 rgba(255,255,255,0.6)` — the characteristic Frutiger Aero inner-highlight.

3. **Botanical Interstices:** Between every third timeline entry, a full-width watercolor botanical illustration (no glass, no UI chrome) occupies a 60 vh strip. These are rendered with `mix-blend-mode: multiply` against the page's `#f0f4f8` background, so the white paper in the illustrations becomes the page background, creating the illusion of ink painted directly on the page.

4. **Cursor-Follow Layer:** A floating orb (60 px diameter, radial gradient from `rgba(126,200,212,0.35)` center to transparent edge, `filter: blur(20px)`) follows the cursor with 0.25 s easing lag (`cubic-bezier(0.16, 1, 0.32, 1)`). On hover over timeline nodes, the orb swells to 120 px and shifts color to `rgba(232,164,176,0.45)` — a rose-blush bloom. This is the primary interaction feedback; there are no other hover effects on the spine.

5. **Stream (live or periodic feed):** Near the bottom of the timeline, a "live" section renders the most recent entries with a subtle pulsing aqua-green ring on the timeline node (`animation: pulse-ring 2.4s ease-out infinite`, ring expands from 14 px to 28 px and fades).

6. **Stillness (footer leaf):** A final full-viewport section with no glass, no timeline spine — just a single Cormorant Garamond italic phrase in `#0f1b2d` at 4.5 vw centered on the watercolor ground, and the site's copyright in 11px `#7ec8d4` below. The spine terminates here in a small circular end-cap (filled `#0f1b2d`).

**Spatial rules:** Page background is `#f0f4f8`. No sticky headers. No navigation bars visible at page load — only the timeline and its leaves. The maximum content width is 1080 px, centered. On mobile, the timeline spine shifts to 8% viewport width, cards take the full remaining width, and the alternating left-right is dropped in favor of a single-column rightward layout.

## Typography and Palette

**Typography is garamond-classic** — one serif family carries the entire intellectual weight of the page. Every word is either Cormorant Garamond or bare HTML (which gets the same font). There is no grotesque, no sans, no monospace on any visible text. This is a deliberate choice: the Frutiger Aero glass panels house calligraphic text, which inverts the usual digital expectation (glass UI → sans-serif) and makes every word feel like it was written by hand and then encased in a bubble.

- **Display / Wordmark:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), style `italic 700`, size `clamp(4rem, 11vw, 9rem)`, tracking `-0.02em`, color `#0f1b2d`. Used for the hero wordmark `soning.stream` and the final stillness phrase only.

- **Section Headings:** Cormorant Garamond, `italic 600`, size `clamp(1.6rem, 3.2vw, 3rem)`, tracking `-0.015em`, color `#0f1b2d`.

- **Body / Card Text:** Cormorant Garamond, `regular 400`, size `clamp(1rem, 1.4vw, 1.2rem)`, line-height `1.72`, color `#1a2e40`. Body text inside glass cards benefits from the frosted panel's slight white tint — the text appears softly lifted, like ink on rice paper held to the light.

- **Timeline Dates:** Cormorant Garamond, `small-caps 500`, size `0.8rem`, tracking `0.06em`, color `#7ec8d4`, displayed above each timeline node.

- **Footer / Copyright:** Cormorant Garamond, `regular 400`, size `0.7rem`, tracking `0.1em`, color `#7ec8d4`.

**Palette (all six values used throughout):**

| Role | Hex | Usage |
|------|-----|-------|
| Deep Water (primary dark) | `#0f1b2d` | Text, spine end-cap, shadow base |
| Pearl White (page ground) | `#f0f4f8` | Page background, card tint base |
| Aqua Glass (Frutiger accent) | `#7ec8d4` | Timeline spine, node borders, dates, footer |
| Botanical Green (node fill) | `#3d7a4f` | Active/completed timeline nodes, botanical accent |
| Rose Blush (feature accent) | `#e8a4b0` | Featured nodes, cursor orb hover, rare decorative detail |
| Ink Shadow (mid-dark) | `#1a2e40` | Body text, subtle card shadow |

No additional colors are permitted. Gradients are linear blends between adjacent palette values only.

## Imagery and Motifs

**Imagery is pure watercolor botanical.** All visual content that is not UI chrome is painted — or processed to appear painted — on cotton-fiber watercolor paper. No photography. No 3D renders. No vector illustrations with hard edges.

**Botanical subjects follow a single taxonomy:** the subjects of the watercolor panels are flowering plants that have either (a) historically appeared in Japanese botanical woodblock prints (*ukiyo-e shokubutsu-ga*) or (b) appeared in European Enlightenment-era herbarium illustrations — orchids, maiden-hair fern, spider lily, morning glory, wisteria, peony. This is not eclectic; it is a curated garden with a scholarly catalog behind it.

**Execution conventions:**
- Paintings are rendered on warm white cotton paper (`#f7f3ed`). The paper texture itself is part of the illustration — visible fiber, slight tooth, the way paint pools slightly at the edges of each brushstroke.
- Color in the botanical panels is restrained: each panel uses no more than three pigments — one green family (sap green → hooker's green), one accent bloom color drawn from the site palette, and raw sienna for stems and shadow. The effect is controlled abundance rather than chromatic chaos.
- Ink lines are visible in some illustrations (spider orchid details, fern frond venation), rendered as hairlines in `#1a2e40` ink, 0.6 px stroke equivalent, always drawn *after* the watercolor wash has dried in the illustration — so the ink sits on top of the color, not under it.
- All botanical panels use `mix-blend-mode: multiply` in the CSS so that the warm paper white reads as the `#f0f4f8` page background. The illustration paper disappears; only the pigment remains.

**Motifs:**
- The **circular timeline node** echoes a water droplet — the form is a closed circle, not a square, never a diamond. At the largest scale (hero section), one giant node circle (220 px diameter, barely visible, `rgba(126,200,212,0.15)` fill) sits behind the wordmark like a moon behind clouds.
- The **cursor-follow orb** is a Frutiger Aero memory: the glowing soft orb that appeared in Windows Vista promotional renders, now following the visitor like a friendly spirit animal through the garden.
- **Frosted glass panels** carry the full Frutiger Aero treatment: `backdrop-filter: blur(12px) saturate(1.4)`, inner top highlight (`box-shadow: inset 0 1px 0 rgba(255,255,255,0.7)`), outer bottom shadow (`box-shadow: 0 8px 32px rgba(15,27,45,0.1)`), and a 1 px border in `rgba(126,200,212,0.35)`. The glass is always slightly warm (never pure grey) because the watercolor botanical behind it is warm.

## Prompts for Implementation

Build soning.stream as a **single-page vertical garden walk** — a long, unhurried descent through a botanical timeline that the visitor takes at whatever pace the garden demands. There is no above-the-fold urgency. The page does not "sell" anything. It is a place of transmission and record.

**Scroll behavior:** Natural browser scroll only. No scroll-jacking. No custom scroll containers. The only scroll intervention allowed is `scroll-behavior: smooth` on anchor links. Each botanical interstice section has `scroll-snap-align: start` if the user's browser supports it natively, but snap is never forced.

**Animation principles:**
- All animations are `prefers-reduced-motion` respecting: wrap every animation in `@media (prefers-reduced-motion: no-preference)`.
- Timeline spine draws in on first scroll-into-view using a CSS clip-path animation (height from 0 to full in 1.2 s, `ease-out`).
- Timeline nodes scale from 0 to 1 on entry (`transform: scale(0) → scale(1)`, 0.4 s, `cubic-bezier(0.34, 1.56, 0.64, 1)` — a slight overshoot bounce that reads as a water droplet hitting still water).
- Glass cards translate from `translateY(24px)` to `translateY(0)` on scroll entry, with `opacity 0 → 1`, 0.6 s, `ease-out`.
- Cursor-follow orb: JavaScript tracks `mousemove`, updates a CSS custom property `--mouse-x` and `--mouse-y`, and the orb moves via `transform: translate(var(--mouse-x), var(--mouse-y))` with a `transition: transform 0.25s cubic-bezier(0.16, 1, 0.32, 1)`.
- Botanical interstice panels fade in via `opacity 0 → 1` on scroll entry (no translate — they should feel like they were always there, just hidden by attention).
- Live node pulse: pure CSS `@keyframes pulse-ring` — `transform: scale(1) → scale(2)`, `opacity: 0.6 → 0`, 2.4 s infinite. A second ring at 1.2 s offset for the double-ripple effect.

**Typography rendering:** Use `font-display: swap` for Cormorant Garamond. Enable `font-feature-settings: "onum" 1, "liga" 1, "kern" 1` — old-style numerals for dates (4 looks like a lowercase g, gives a calligraphic rhythm to the timeline dates), standard ligatures for body text.

**Glass panel implementation:** Use a single CSS class `.glass-leaf` with the full Frutiger Aero treatment. Do not use JavaScript to simulate the effect. Ensure `backdrop-filter` has a `background` fallback for browsers that do not support it (`background: rgba(240,244,248,0.85)`).

**Do not implement:** sticky header, navigation menu visible at load, hero CTA button, testimonial section, pricing block, feature grid, stat row, newsletter form, social share buttons, comment section, cookie banner (unless legally required), loading screen, progress bar, lazy-loading spinners.

**Do implement:** smooth scroll-triggered entry animations for timeline nodes and cards, the cursor-follow orb (desktop only — `@media (pointer: fine)`), the pulsing live-node ring, watercolor panels as large `<figure>` elements with `<figcaption>` in small-caps Cormorant Garamond naming the botanical subject, timeline dates in `<time datetime="">` elements for semantic correctness.

## Uniqueness Notes

**Three or more deliberate differentiators from every other design in the registry:**

1. **Frutiger Aero × watercolor botanical — a zero-occurrence combination.** The frequency report shows `frutiger-aero` at only 2% (underused) and `watercolor` at 8% — but no design in the registry merges them. Frutiger Aero always appears in tech-facing contexts; watercolor almost always in editorial or hand-drawn contexts. soning.stream places Frutiger Aero glass panels directly over botanical watercolor paintings, creating a tension between the optimistic digital sublime and the pre-digital natural world that resolves into zen contemplation rather than conflict.

2. **Timeline-vertical at 4% with garamond-classic typography — the only design with this pairing.** The frequency report shows `timeline-vertical` at 4% (underused). All other timeline layouts in the registry use sans-serif type. soning.stream uses a single, exclusive serif family (Cormorant Garamond) throughout, including inside the frosted-glass UI elements, inverting the conventional pairing of glass UI with grotesque sans.

3. **Cursor-follow at service of zen, not interactivity.** `cursor-follow` patterns in the registry are universally used in high-energy, playful, or interactive contexts. soning.stream deploys the cursor orb as a contemplative presence — a soft floating witness — rather than as a gamification element. The orb does not trigger interactions. It simply accompanies the visitor, like the shadow of a lantern.

4. **Floral-botanical at 4% (underused), executed as scholarly herbarium rather than decorative motif.** The frequency analysis shows `floral-botanical` at 4% — used sparingly. Where it appears elsewhere in the registry, it is decorative (small corner ornaments, pattern fills). soning.stream makes botanical illustration the primary visual content of the page, full-width, full-bleed between timeline sections, rendered with the precision of a 19th-century herbarium plate.

5. **Seed documented:** `aesthetic: frutiger-aero, layout: timeline-vertical, typography: garamond-classic, palette: high-contrast, patterns: cursor-follow, imagery: watercolor, motifs: floral-botanical, tone: zen-contemplative`

**Patterns deliberately avoided based on frequency analysis:**
- `hand-drawn` (56% — severely overused): soning.stream uses painted watercolor, not hand-drawn line illustration. The distinction is technical and tonal — watercolor is pigment-first, not line-first.
- `editorial` (51% — overused): the page has no editorial chrome (no bylines, no reading-time, no tag clouds, no pagination).
- `centered` (83% — dominant): while the wordmark is centered in the viewport, the timeline spine is left-of-center, and the card layout is explicitly asymmetric. soning.stream resists pure center-gravity composition.
- `full-bleed` (63% — overused as primary layout pattern): botanical panels are full-bleed, but they are *interstices*, not the primary layout container.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T09:44:43
  seed: documented:
  aesthetic: soning.stream** is read as a compound: *son* (Korean 손, "hand"; also English *so...
  content_hash: 5336ae03653d
-->