# Design Language for mosoon.org

## Aesthetics and Tone

**mosoon.org** is named for the monsoon season — but filtered through the Japanese concept of *mono no aware* (物の哀れ), the bittersweet awareness that all beautiful things pass. The monsoon is not a storm here; it is the haze over a garden after rain, petals caught between falling and floating, the light that exists only for the seven minutes after downpour stops and before the sun returns properly. The aesthetic is **ethereal pastoral**: soft-focus meadow vistas interrupted by hovering botanical elements that drift like seeds on humid air.

The visual mood draws from two unlikely sources pressed together: the **misty watercolor plates** of 19th-century Japanese botanical journals, and the dreamy soft-bloom of **generative art** — algorithmic particle fields that mimic the gentle chaos of pollen in summer light. Every surface feels slightly out of focus at the edges, like a morning remembered rather than experienced directly.

Warm cream and parchment grounds. Translucent overlapping card surfaces with soft peach and lavender tints. Generative SVG/canvas fields of slowly drifting spores, petals, and soft bokeh circles populate the background — never frantic, always adagio. The entire page breathes at roughly 60 bpm.

This is not a commercial site. It does not sell. It does not convert. It is a **meadow in a browser window** — a place to arrive and stay briefly, the way one pauses in a garden before walking on.

## Layout Motifs and Structure

The layout is a **loose card-grid** — but "card-grid" here means a field of botanical specimen cards arranged like specimens pinned to cream linen, not a SaaS pricing matrix or a portfolio thumbnail gallery. Cards are irregular in height: some tall and narrow like pressed-flower envelopes, some wide and short like field-notebook pages torn to landscape. No two rows are the same height.

**Macro structure:**
- Full-viewport opening sequence: the domain name `mosoon.org` materializes letter by letter through a slow fog-dissolve, surrounded by three drifting botanical generative elements that orbit the wordmark
- Card field: 4–5 rows of mixed-dimension cards on a warm cream ground, laid on a 12-column implicit grid but never using all 12 — most cards span 4 or 6 columns, with deliberate negative-space gaps
- Closing gradient wash: the page fades into a deeper warm amber/rose at the bottom, where a single line of text rests in the silence

**Micro behaviors:**
- Cards hover with a soft `zoom-focus` — the hovered card gently magnifies to 1.04× while its neighbors recede slightly to 0.97×, creating the sensation of leaning toward a specimen under soft light
- Floating elements between cards: generative petal-path SVGs wander across the grid at `position: absolute`, drifting at 0.3–0.6 px/frame, wrapping at viewport edges
- On scroll, cards enter with a `fade-up` stagger — each card rises 18px into its final position over 600ms, cascading left-to-right then next row

**No sticky navigation. No fixed headers. No sidebars. No modal overlays.** The only UI chrome is a minimal 2-item navigation (wordmark left, one text link right) that dissolves to 20% opacity on scroll and returns on scroll-pause.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Wordmark / Hero Display**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 300, letter-spacing `0.12em`, set at `clamp(3.5rem, 10vw, 9rem)`. Nunito is the canonical rounded-sans: its terminals are perfectly circular, giving it the softness of morning mist on glass. Use weight 300 for maximum airiness — heavy Nunito reads playful; light Nunito reads ethereal.
- **Card Titles**: [`Nunito`](https://fonts.google.com/specimen/Nunito), weight 500, `clamp(1.1rem, 2.2vw, 1.4rem)`, no letter-spacing. The same family at medium weight provides continuity while grounding individual cards.
- **Body / Captions**: [`Nunito Sans`](https://fonts.google.com/specimen/Nunito+Sans), weight 400, `clamp(0.85rem, 1.4vw, 1rem)`, line-height `1.72`. The companion family maintains the rounded-sans warmth while offering slightly more text economy.
- **Botanical Labels / Secondary Meta**: [`Nunito Sans`](https://fonts.google.com/specimen/Nunito+Sans), weight 300 italic, size `0.78rem`, color `--sage-ink` at 55% opacity — the visual equivalent of pencil annotations in a field journal.

**Color Palette:**

| Token | Hex | Use |
|---|---|---|
| `--parchment` | `#faf6ef` | Page ground, card backgrounds |
| `--cream-deep` | `#f2ebe0` | Alternating card tint, card shadows |
| `--peach-blush` | `#f0c9a8` | Accent cards, warm highlights, generative circle fills at 15% opacity |
| `--rose-haze` | `#e8a89c` | Hover states, botanical label accents, footer gradient |
| `--lavender-mist` | `#c9b8d8` | Secondary card tint, floating element strokes |
| `--sage-ink` | `#5a6650` | Body text, botanical label text |
| `--fog-line` | `#d4cfc8` | Card borders (0.5px), grid dividers |
| `--amber-dusk` | `#c47a3a` | Wordmark color, rare bold accent |

Gradient used sparingly: `linear-gradient(160deg, #faf6ef 0%, #f5dece 55%, #e8c8be 100%)` applied as the full-page background wash. Cards float above this gradient, never obscuring it fully — each card has `background: rgba(250,246,239,0.82)` with `backdrop-filter: blur(6px)`.

## Imagery and Motifs

**Floating elements** are the primary visual language of the site. They are not decorative borders or static icons — they are **kinetic botanical particles** rendered in two layers:

**Layer 1 — Generative canvas field (background):**
A `<canvas>` element fills the viewport behind all content. It runs a gentle particle system: 60–80 circles of radii 4–32px in `--peach-blush`, `--lavender-mist`, and `--rose-haze` at 8–20% opacity. Each particle drifts on a sine-wave path (unique phase offset per particle) at 0.2–0.5 px/frame. On page load, particles `fade-in` over 2s. The system is requestAnimationFrame-based, never WebGL — it must feel gentle, not technical.

**Layer 2 — SVG botanical drifters (foreground, `position: absolute`):**
Six unique hand-drawn SVG botanical elements float above the card grid. They are all stroke-only (1px–1.5px stroke, no fills), rendered in `--sage-ink` at 30–40% opacity:
1. **Seed parachute** (dandelion-style) — 7-strand radial with a small ovoid at the base
2. **Monsoon petal** — a single five-petal asymmetric flower silhouette, stroke only
3. **Fern frond** — a single rachis with 6 alternating pinnae, gentle S-curve on the stem
4. **Rain-fog spiral** — a loose logarithmic spiral, 2.5 turns, open terminus
5. **Grass blade cluster** — three blades at diverging angles, curved at tips
6. **Dewdrop ellipse** — a perfect 18×28px ellipse with a single interior reflection stroke

Each SVG drifter starts at a random position and drifts on its own slow vector, rotating 0.02°/frame. On intersection with a card edge, it gently deflects. All six SVGs are inline in the HTML.

**Card imagery** is purely typographic + color-field — no photographs. Cards are color-washed rectangles with the card's text content and a botanical label in the lower-left corner. Some cards have a single large-format SVG botanical drifter pinned at their center as a static illustration.

## Prompts for Implementation

**The story the page tells:** A botanist has been wandering a monsoon meadow for three hours. She returns to her field station and spreads her notes across a linen table. The cards are her notes. The floating elements are the seeds and petals that drifted in through the open window while she wrote. The visitor is not a customer — they are a fellow wanderer who stumbled into her field station.

**Opening sequence:**
On load, begin with a 100vh full-screen composition: `--parchment` ground with the generative canvas already running (particles fade in 0–1s). The wordmark `mosoon.org` appears letter by letter via opacity + subtle `translateY(8px → 0)`, each letter delayed by 80ms, beginning at 0.5s. Three botanical SVG drifters are pre-positioned around the wordmark in a loose orbital arrangement and begin their drift immediately. A soft subtitle fades in at 1.8s. At 3.5s, the page subtly signals scrollability by nudging the first card row 4px upward and back.

**Card grid section:**
Cards use CSS Grid: `grid-template-columns: repeat(12, 1fr)`, gap `1.5rem`. Apply varied `grid-column` spans (4, 6, 8) and use `grid-row` span `2` for tall accent cards. On scroll-enter, each card fires a staggered `@keyframes fadeRise` (opacity 0→1, translateY 18px→0, 600ms ease-out). Implement `zoom-focus` with CSS: `.card:hover { transform: scale(1.04); z-index: 10; }` and `.card-grid:has(.card:hover) .card:not(:hover) { transform: scale(0.97); opacity: 0.88; }`.

**Floating element system:**
Use JavaScript `requestAnimationFrame` for the canvas particle layer. For SVG drifters, use CSS `@keyframes drift-N` with `translate()` and `rotate()`, each keyframe set unique, duration 18–28s, `animation-iteration-count: infinite`, `animation-timing-function: linear`. SVG drifters use `pointer-events: none` so they never block clicks.

**Transitions and interactions:**
- Navigation link hover: underline draws from left via `scaleX(0→1)` on `::after` pseudo-element, 240ms
- Card title hover: `color` transitions from `--sage-ink` to `--amber-dusk`, 180ms
- Page scroll progress: the background gradient `background-position` shifts subtly as the user scrolls (parallax the gradient, not images)
- No JavaScript-required layout — the grid and cards must be fully readable without JS

**Typography rhythm:**
Set `html { font-size: clamp(14px, 1.1vw, 16px) }`. Use `rem` throughout. Card title `font-size: 1.25rem`. Caption `font-size: 0.875rem`. Botanical labels `font-size: 0.72rem`. Leading everywhere `line-height: 1.7`. Never set `color: black` — always use `--sage-ink` or `--amber-dusk`.

**Avoid entirely:** hero CTAs, pricing tables, feature comparison grids, testimonial carousels, social proof badges, sticky add-to-cart bars, countdown timers, popup modals, newsletter overlays, statistics grids (87% of users, etc.), progress bars, breadcrumbs, pagination numbers.

## Uniqueness Notes

1. **Zoom-focus used as botanical specimen interaction, not product-card hover.** The frequency report shows `zoom-focus` at only 3% across the registry. This design pairs it with the specific semantic of a botanist leaning toward a field specimen — the hover scale difference between focused card (1.04×) and receded neighbors (0.97×) creates a depth-of-field sensation that no other registry design implements this way.

2. **Rounded-sans used for ethereal pastoral, not playful/youth.** `rounded-sans` appears at 3% in the registry and is consistently paired with energetic, friendly, or youthful tones in existing designs. Here, Nunito at weight 300 is deployed for its misty, watercolor quality — the rounded terminals read as soft focus rather than cartoon friendliness. This is a new semantic for the typeface class.

3. **Generative art as atmospheric ground, not hero centerpiece.** The registry shows `generative-art` at 3% frequency, and in all existing cases it is used as a featured visual element — a centerpiece or hero illustration. Here the generative canvas is intentionally demoted to a background layer, visible through card transparency, providing ambient atmospheric quality without ever being the subject of attention.

4. **`warm` palette at 89% frequency SUBVERTED by explicit non-commercial use.** Nearly every warm-palette site in the registry pairs warmth with conversion goals — warmth as trustworthiness-for-purchase. This design strips all commercial affordances and uses warm parchment tones purely as the palette of old field journals and botanical collections, resetting the semantic of warmth from "trust us, buy this" to "sit in a meadow, read slowly."

5. **Floating elements implemented as truly floating** — animated, physics-aware SVG drifters that deflect on card boundaries, not static decorative corner ornaments or fixed background textures. `floating-elements` at 4% in the registry; deflection-on-card-boundary behavior appears in zero other designs.

**Chosen seed:** aesthetic: ethereal, layout: card-grid, typography: rounded-sans, palette: warm, patterns: zoom-focus, imagery: generative-art, motifs: floating-elements, tone: pastoral-romantic

**Avoided patterns from frequency analysis:**
- `warm` palette used at 89% but stripped of all commercial conversion patterns
- `card-grid` at 8% but implemented as botanical specimen field, not SaaS/portfolio thumbnails
- `ethereal` at 6% but cross-bred with generative-art atmospheric ground (not soft-glow photography)
- `vintage` motifs at 41% explicitly avoided — this is not nostalgic, it is contemporary pastoral
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:04:21
  domain: mosoon.org
  seed: seed:
  aesthetic: mosoon.org** is named for the monsoon season — but filtered through the Japanese...
  content_hash: 88d21f87fad2
-->