# Design Language for matsurika.bid

## Aesthetics and Tone

matsurika.bid is a **blobitecture aquarium of neon-electric blobs and water bubbles** -- the silhouettes of soft amoeba-architectures glow in electric pinks, cyans, and greens, floating in a single vertical column like a curated jellyfish exhibit. Each blob holds one specimen (a "bid" -- a small offering), and the entire site is one long aquarium-tank wall, scrolled vertically. The mood is *friendly* -- inviting, glowing, like an after-hours museum where the lights are low and the tanks are alive.

The brand "matsurika.bid" -- jasmine + bid -- is reframed as a casual exchange of small jasmine-themed offerings: photographs, poems, recipes, gestures. Each offering is presented in a glowing blob-tank. The tone is approachable and slightly dreamy, like an aquarium docent inviting you to look closely.

Inspirational anchors: the bioluminescent jellyfish exhibits at the Monterey Bay Aquarium, the neon-architecture of Tokyo's Shinjuku at night, Karim Rashid's furniture silhouettes, the LavaLamp aesthetic of the late 1990s, contemporary glass blowing by Dale Chihuly, and the cover art of Yves Tumor records.

## Layout Motifs and Structure

A **single-column** composition -- everything stacked vertically in a narrow center column (max-width 680px), like specimens in a single aquarium wall. The single-column is intentionally narrow to focus attention; the surrounding void is dark and full of drifting water-bubbles.

**Structural anatomy:**
- **Header (centered, 160px tall):** A single neon-glowing organic blob containing the wordmark "matsurika.bid" set in humanist sans, with a small jasmine-flower SVG glowing in cyan above. Below: a thin neon-electric horizontal rule.
- **The Aquarium Column (centered, 680px wide, vertical scroll):** 9-12 "offering blobs" stacked vertically. Each blob is an organic SVG silhouette filled with a neon-electric gradient, containing: a small offering title in humanist sans, a water-bubbles photograph or illustration of the offering, and 2-4 lines of friendly tutorial text.
- **Drifting bubbles (background ambient):** The dark surrounding void has water-bubble SVGs slowly rising -- 30-50 bubbles at varying sizes (4-32px) and alpha (0.2-0.6), drifting upward at 0.04-0.12 px/ms with gentle sine-drift.
- **Offering blob spacing:** Each offering blob is separated by 200-300px of dark void, allowing the bubbles to drift visibly between them.
- **Footer blob:** A small final blob with credits, a "thanks for visiting" line in humanist sans, and a tiny jasmine-flower SVG.

Spatial rhythm: a single calm column with vast surrounding darkness. The single column is the entire reading experience -- no sidebars, no asides.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Humanist sans (primary):** "Work Sans" 400/500/700 -- a humanist sans with friendly proportions and gentle curves. Used for the wordmark at clamp(56px, 8vw, 132px), offering titles at 28-34px, body at 16-17px, line-height 1.65.
- **Tiny labels:** "Work Sans" 500 small-caps at 12-13px, letter-spacing 0.18em -- "OFFERING IV", "JASMINE PETAL", etc.
- **Friendly emphasis:** "Work Sans" 400i for italic flourishes.

**Palette (neon-electric):**
- `#0A0E2A` -- Ocean Midnight (primary background, the aquarium darkness)
- `#FF2B7E` -- Electric Pink (primary neon, hot-pink jellyfish glow)
- `#22F2D2` -- Electric Cyan (secondary neon, glowing rules)
- `#7CFF4A` -- Electric Lime (tertiary neon, occasional accents)
- `#FFFFFF` -- Pure White (text on neon, brightest highlights)
- `#1E2A50` -- Tank Glass (panel inner-glow, deep midtones)
- `#9DEEFF` -- Cool Glow (soft cyan glow on bubble outlines)

Neon strategy: every blob has a multi-layered glow -- inner gradient (Electric Pink -> Tank Glass), CSS filter `drop-shadow(0 0 24px Electric Pink)` outer halo, and `box-shadow: 0 0 64px Electric Pink at 0.5 alpha` for ambient bleed. Alternate blob colors between pink, cyan, and lime.

## Imagery and Motifs

**Core visual motifs:**
- **Organic-blob silhouettes (the centerpiece):** Each offering is contained within an SVG organic blob with 12-16 control points, generating soft amoeba shapes. Each blob's silhouette gently *breathes* (path morphs ±4% on a 6-8s loop).
- **Water-bubbles imagery (paired centerpiece):** Inside each blob, a photographic or illustrated water-bubble pattern -- spheres of varying alpha (0.4-0.8) clustered to resemble underwater bubbles caught by light. Some bubbles have tiny inner lens-flares.
- **Organic-blob ambient:** Background void contains drifting blob silhouettes (very low alpha, 0.08) at the page edges -- ambient blob shapes that drift slowly.
- **Drifting bubble particles:** Pure JS Canvas2D particle layer with 30-50 bubble particles, ascending at 0.04-0.12 px/ms with sine drift.
- **Neon glow halos:** Every blob has a 3-layer glow system (inner gradient + drop-shadow + box-shadow), producing convincing neon depth.

**Decorative patterns:**
- A subtle radial-gradient vignette (Ocean Midnight at edges -> slight Tank Glass at center) gives the background a "tank-window" feel.
- A faint horizontal scan-line pattern (1px Cool Glow at 3% alpha, every 5px) overlays the background -- like the glass of the aquarium.

## Prompts for Implementation

**Open with bioluminescent activation.** First 2400ms: viewport begins pitch Ocean Midnight. After 400ms, the header blob's organic silhouette draws itself with stroke-dashoffset (1000ms, ease-out). As the path closes, the blob's neon-electric gradient fills (opacity 0 -> 1, 600ms) and its outer glow halo expands (drop-shadow blur 0 -> 32px). Simultaneously, the wordmark "matsurika.bid" fades in *inside* the blob (opacity 0 -> 1, 600ms). After hero settles: bubble particles begin to rise from below the viewport.

**Fade-reveal pattern (featured):** This is the primary motion vocabulary.
- Each offering blob fades in as it enters viewport (opacity 0 -> 1, 1200ms, no movement).
- Neon glow halos build progressively: inner gradient (300ms), drop-shadow (600ms), box-shadow (900ms) -- each layer fading in slightly later.
- Offering titles fade in with a 200ms delay after their blob.
- Bubble particles within the blob fade in last (after blob fully visible, +400ms).
- No movement, no slide -- just patient luminous reveals.

**Blob breathing morph:** Every blob's SVG path has a slow morph animation:
```css
@property --blob-morph: { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes blob-breathe {
  0%, 100% { --blob-morph: 0; }
  50% { --blob-morph: 1; }
}
```
Using `path()` interpolation between 2 keyframe shapes, the blob silhouette gently breathes ±4% over 7-9 seconds (different period per blob).

**Neon hue cycling:** Every 20-30 seconds, blobs gently cycle their hue: a hue-rotate filter animates from 0deg -> 36deg -> 0deg over 12s. Different blobs are offset, producing a slow chromatic dance across the column.

**Bubble particle physics:** Canvas2D layer with 40 bubble particles. Each has: position, radius (4-32px), alpha (0.2-0.6), vertical velocity (0.04-0.12 px/ms), horizontal sine drift (amplitude 6-18px, period 5-9s), occasional "wobble" (radius oscillation ±2px on a 3s loop). When a bubble exits the top of the viewport, it re-enters from below at a new x-position.

**Hover interaction:** On blob hover, the neon glow halo brightens by 25% and the inner gradient saturates by 12%. Bubble particles inside the blob accelerate by 1.5x for the duration of hover.

**Storytelling beats (friendly, no CTAs, no real bidding):**
1. Bioluminescent activation intro.
2. Header blob with wordmark.
3. Offering blobs I through IX-XII: each a small jasmine-themed gift (a photograph, a poem, a recipe, a gesture).
4. Long stretches of dark void with drifting bubbles between offerings.
5. Footer blob with "thanks for visiting" in Work Sans italic.

**Anti-patterns to avoid:** No CTAs, no real bidding interface, no signup, no pricing, no stat-grids. The "bid" framing is poetic -- each blob is an offering, not a transaction.

## Uniqueness Notes

**Differentiators from other designs in this collection:**

1. **Blobitecture aesthetic (2%) + neon-electric palette (3%) + single-column layout (11%) -- the combination is unique:** Most neon-electric designs use multi-column or dashboard layouts; the narrow single-column with vast surrounding void is a deliberate contemplation device.

2. **Water-bubbles imagery (2%) + organic-blobs motif (6%) deployed as paired centerpiece:** Both motifs in collaboration -- bubbles inside the blobs, ambient bubbles between -- creates a coherent aquarium metaphor.

3. **Friendly tone (15%) on a dark neon palette (rare combination):** Most friendly-tone designs lean light-and-bright; this one is friendly through *glow* and *invitation*, not through brightness.

4. **Humanist typography (15%) at intimate sizes:** Most humanist-sans designs in the collection use it for marketing copy at standard sizes; here Work Sans is used at lavish hero sizes and very-tight 12px small-caps, producing a refined humanist-sans range.

5. **Fade-reveal (6%) as the *only* motion vocabulary in a neon palette:** Neon designs usually layer multiple motion patterns (pulse, glow-cycle, particle, etc.); this one commits to fade only -- creating a meditative, slow-luminous reveal.

**Chosen seed/style:** aesthetic=blobitecture, layout=single-column, typography=humanist, palette=neon-electric, patterns=fade-reveal, imagery=water-bubbles, motifs=organic-blobs, tone=friendly.

**Avoided overused patterns:** Refused parallax (95%), centered/card-grid (95%/91%), mono typography (81%), and the mysterious-moody tone (71%) -- replaced with friendly luminous calm.
<!-- DESIGN STAMP
  timestamp: 2026-05-12T01:21:41
  seed: seed
  aesthetic: matsurika.bid is a **blobitecture aquarium of neon-electric blobs and water bubb...
  content_hash: 51103613f287
-->