# Design Language for ronri.net

## Aesthetics and Tone

ronri.net breathes through ink and water — a site that feels hand-sketched on the surface of a deep ocean. The visual language borrows from Japanese **ronri** (論理, "logic" or "reason"), reinterpreted not as cold precision but as fluid thinking made visible. Every element appears to have been drawn with a soft brush or worn pencil, then submerged in deep oceanic waters. The result is a paradox: rigorous thought expressed through the softness of hand-craft.

The aesthetic is **hand-drawn meets ocean-deep** — rough-edged SVG strokes, lightly textured paper backgrounds with a tidal blue undertone, and imperfect organic blob shapes that drift and pulse like bioluminescent organisms. Sketched annotations and flowing curves replace gridlines. The overall feeling is calm, contemplative, almost meditative — like watching ink slowly dissolve in water.

Tone is **calm-serene**, never clinical or rushed. Text appears to float, spacing is generous, silence is respected as much as content.

## Layout Motifs and Structure

The site uses a **hero-dominant single-column narrative** structure — the hero takes up the full viewport height, with a large illustrative blob form drifting in the upper portion and the site's identity statement floating atop it. Below the fold, content sections unfold like turning pages of a water-soaked sketchbook.

- Hero: Full-viewport. A large, slowly morphing SVG blob (ocean tones, bioluminescent soft glow) anchors the top half. Over it floats a monospace headline and a hand-sketched underline. The blob pulses gently with CSS animation.
- Content zones: Narrow single-column (max-width 640px on large screens), centered, with generous vertical rhythm. Each content block floats in from below on scroll with a slow fade-and-rise transition — like objects surfacing from depth.
- Section separators: Wavy hand-drawn SVG dividers rather than hard lines. Each wave is slightly different, giving an organic, imperfect feel.
- Navigation: Minimal, almost hidden — a set of 3–4 monospace labels in the upper-right corner, small and unobtrusive, ink-stroke underlines on hover.
- Spatial philosophy: Asymmetric breathing room. Large top padding, staggered left margins. Content does not sit on a uniform grid but drifts slightly left or right, like debris on slow currents.

## Typography and Palette

**Fonts:**
- Primary / Headlines: `Space Mono` (Google Fonts) — monospace with a mechanical-yet-human quality. Used for all headlines, labels, and nav items. Tracks slightly loose for a typewritten feel.
- Secondary / Body: `DM Sans` (Google Fonts) — warm, approachable sans-serif for paragraphs. Light weight (300) for body, medium (500) for emphasis.
- Accent / Annotations: `Caveat` (Google Fonts) — a handwritten script for sketched callouts, labels on blob shapes, marginal notes. Gives the hand-drawn aesthetic its authenticity.

**Palette (ocean-deep):**
- `#0a1628` — Abyss Navy: primary background, the deepest ocean floor
- `#0e2a4a` — Midnight Reef: secondary background panels
- `#1a5276` — Twilight Blue: mid-depth surface, card/section backgrounds
- `#2e86ab` — Cerulean Current: primary accent — links, highlights, decorative strokes
- `#5bbcd1` — Bioluminescent Teal: glowing accent for pulse effects, SVG blob fill at low opacity
- `#a8d8ea` — Surface Shimmer: pale reflective highlight, used for headline text on dark backgrounds
- `#e8f4f8` — Sea Foam White: body text, annotations
- `#c7f9cc` — Phosphorescent Green: rare accent for hand-drawn marks, tooltip borders — gives the effect of glowing plankton
- `#f4e4c1` — Worn Parchment: used selectively as a contrast note, suggesting old nautical charts

## Imagery and Motifs

**Organic Blobs:** The central visual motif is a trio of slowly morphing SVG blobs — created using `border-radius` tricks or `<path>` animations. They live in the hero section and reappear (smaller, subtler) as section backdrops. Colors are translucent ocean tones at 15–25% opacity, layered to create depth. They pulse rhythmically using `@keyframes` with easing bezier curves.

**Flowing Curves:** No straight dividers. All section transitions use hand-sketched SVG wavy lines — slightly irregular, as if drawn freehand. Decorative curves also appear behind pull-quote text, like underlining a thought in pencil.

**Hand-drawn Textures:** A paper noise overlay (`filter: url(#noise)` SVG feTurbulence) is applied at very low opacity over the entire site — just enough to suggest texture without breaking legibility. Individual elements (cards, blobs) have slightly roughened edges via SVG path stroke jitter.

**Pulse Attention:** The hero blob has a dual-pulse animation: a slow morphing of blob shape (8s cycle) and a gentle opacity wave (4s cycle), drawing the eye without urgency. Critical call-to-action elements (e.g., a "learn more" anchor) use a single ink-drop ripple animation on hover.

**Nautical Chart Elements:** Faint concentric depth-ring circles (like sonar or bathymetric contours) appear behind the hero blob at ~5% opacity — referencing both ocean cartography and logical diagrams.

**Sketch Annotations:** Small `Caveat`-font labels float near blobs and section headers, styled as if handwritten afterthoughts: e.g., "← here", "depth: unknown", or "logic flows down". These are purely decorative but reinforce the hand-drawn intellectual identity.

## Prompts for Implementation

**Hero Section:**
- Full-viewport dark panel (`#0a1628` background).
- Three layered SVG blobs positioned absolutely — one large (60vw × 50vh) upper-left, one medium upper-right, one small lower-center. Each blob uses CSS `animation: morph Xs ease-in-out infinite alternate` where X varies (7s, 11s, 9s) so they never synchronize. Fill colors: `#1a5276` at 40% opacity, `#2e86ab` at 20%, `#5bbcd1` at 15%.
- Concentric circles (faint, `stroke: #2e86ab`, `stroke-width: 0.5px`, opacity 0.08) as a static SVG layer behind blobs.
- Foreground text: `Space Mono` headline, size clamp(2rem, 5vw, 4rem), color `#a8d8ea`. Below it, a `Caveat` subtitle at 1.4rem in `#e8f4f8`. A hand-sketched SVG underline below the headline (a slightly wobbly horizontal stroke, not a CSS border).
- SVG noise texture overlay on hero.

**Navigation:**
- Fixed top-right, three `Space Mono` items in uppercase, font-size 0.75rem, color `#5bbcd1`. Each has an ink-stroke underline that extends left-to-right on hover (CSS clip-path animation, 200ms ease).
- Site "logo" top-left: just the word `ronri` in `Space Mono` medium, `#a8d8ea`, with a hand-drawn circle SVG around it that draws itself on page load (stroke-dashoffset animation, 1.2s).

**Content Sections:**
- Each section fades and rises 30px into view when scrolled into viewport (IntersectionObserver + CSS transition: `opacity 0.6s ease, transform 0.6s ease`). Stagger delay by 100ms for sibling elements.
- Section headings in `Space Mono`, size 1.4rem, `#5bbcd1`. A wavy SVG underline (unique per section — no two identical) in `#2e86ab` at 60% opacity appears below.
- Body text in `DM Sans` 300, 1.05rem, `#e8f4f8`, line-height 1.8.
- Sketched marginal annotations (Caveat, 0.85rem, `#c7f9cc`) appear rotated ±3° next to certain paragraphs, like pen-in-margin thoughts.

**Blob Pulse Animation:**
```css
@keyframes blobMorph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
```
For SVG paths, use `<animateTransform>` or CSS `d` property keyframe morphing between pre-defined blob paths.

**Ink Ripple Hover (CTA link):**
- On hover: a CSS `::after` pseudo-element expands from center as a circle with `border: 1.5px solid #2e86ab`, scaling from 0 to 1.4× width, fading out in 400ms. Gives the sense of dropping ink into water.

**Section Dividers:**
- Hand-drawn SVG wave dividers between sections. Each is a `<path>` with slightly irregular amplitude. Color: `#1a5276`. Height ~60px.

**Atmosphere:**
- Background gradient on `<body>`: subtle radial gradient from `#0e2a4a` at center to `#0a1628` at edges — adds depth illusion.
- Very faint paper noise texture via SVG `<feTurbulence>` filter applied at 3% opacity.

**Avoid:** No bold CTAs with heavy backgrounds. No pricing tables, stat counters, feature grids. No harsh borders. No system fonts.

## Uniqueness Notes

1. **Dual-language conceptual identity:** The domain "ronri" is the Japanese word for logic/reason, but the design deliberately expresses logic through *illogical*, organic, hand-drawn forms — a deliberate contradiction that makes the site intellectually interesting and visually surprising.

2. **Self-drawing logo animation:** The circle SVG around the logo word draws itself on load using stroke-dashoffset animation — a micro-interaction that establishes the hand-crafted ethos from the first second of the visit.

3. **Asynchronous blob trio:** Three blobs with prime-number animation durations (7s, 11s, 13s) never perfectly re-synchronize — the hero remains perpetually in gentle motion, never looping in a way the eye can predict, mimicking ocean currents.

4. **Depth-ring sonar backdrop:** Faint concentric circles at near-zero opacity reference both ocean bathymetric maps and logical diagrams simultaneously — bridging the conceptual gap between the domain's meaning and its aesthetic.

5. **Per-section unique wave dividers:** Each SVG wave separator is hand-tuned with different amplitude and frequency — small detail but reinforces that nothing here is templated or mechanical.

**Chosen Seed:** `aesthetic: hand-drawn, layout: hero-dominant, typography: mono, palette: ocean-deep, patterns: pulse-attention, imagery: organic-blobs, motifs: flowing-curves, tone: calm-serene`

**Avoided patterns (from frequency analysis):**
- photography (87% — extremely overused): no photographic imagery used anywhere
- minimal imagery (43% — overused): replaced with bespoke SVG illustration work
- mono typography (74% — overused but required by seed): differentiated by pairing Space Mono with handwritten Caveat for contrast
- hand-drawn aesthetic (58% — overused but required by seed): differentiated by the ocean-deep color context, which few hand-drawn sites use (most use warm/earthy tones)
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:52:37
  domain: ronri.net
  seed: seed:
  aesthetic: ronri.net breathes through ink and water — a site that feels hand-sketched on th...
  content_hash: 14dbe6cfeb7e
-->