# Design Language for ronri.org

## Aesthetics and Tone

**ronri.org** — the word *ronri* (論理) is Japanese for "logic" or "reasoning." The site is built around a single quietly radical premise: that logic is not cold machinery but a form of candlelit scholarship — the ancient human practice of sitting with a difficult question until it yields. The aesthetic is **light-academia** in its rarest, most restrained expression: not the cozy-library Instagram variety, but the atmosphere of a Benedictine scriptorium at 4 a.m., where arguments are tested the way wax is tested — by flame.

The visual mood is **warm parchment meets rigorous geometry**. Surfaces carry the faint memory of marble and vellum. Typography is set with the disciplined confidence of a philosophical treatise — clean Futura-derived geometry for the structure of thought; a refined serif for the substance of it. There are no gradients, no animations that perform, no elements that compete for attention. Everything defers to the text and to a single, recurring atmospheric motif: the candle — source of illumination, measure of time, emblem of solitary inquiry.

The tone is **authoritative without being cold**. The site does not sell. It asserts. Every element carries the quiet conviction of a scholar who has done the work and knows the answer. Visitors are not customers; they are readers who have arrived at a monograph.

Inspiration draws from: the folio editions of Wittgenstein and Frege; the marbled endpapers of 19th-century academic presses; the spare geometry of Cassandre's Bifur posters; the candle-lit reading rooms of the Bodleian Library. The site is a space one enters, not a product one evaluates.

## Layout Motifs and Structure

The layout is a strict **single-column narrative scroll** — not the blog-post single-column (centered text with excessive margins), but the folio single-column: a column of maximum intellectual weight anchored to a deliberate left-right tension. The text block is set at 68ch maximum width, aligned to a quiet left rail that sits at ~14% from the left viewport edge on large screens, breathing toward the right margin.

**Vertical rhythm** is the structural grammar. A base unit of `1.618rem` (golden ratio applied to the 1rem base) governs all spacing: section gaps, heading margins, card flip reveals, block element padding. Everything is a multiple or fraction of this unit. The page feels not designed but *typeset*.

**Card Flip mechanic** — the primary interactive structure. Concepts are presented as front-face **propositions** (clean Futura geometry, minimal, declarative) that flip on hover or focus to reveal back-face **elaborations** (set in the serif body font, warm parchment #F5EFE0 background, slightly recessed shadow). The flip axis is always vertical — a page turn, not a tumble. Cards are set in a 1-column configuration (full text-column width) so each flip is a singular, attended revelation, never a grid of simultaneous activity.

**Section demarcation** uses a device borrowed from manuscript marginalia: a thin rule on the left, 2px wide, in warm gold `#C8A96E`, running the height of the section. No horizontal rules. No borders. Just the quiet vertical witness of the margin rule.

**The footer** is a colophon — a few lines in small Futura caps, centered, documenting the site's publication date and primary proposition in the manner of 18th-century book colophons.

The page never has a persistent navigation. There is one anchor: a single glyph — `℃` transformed into a wax seal medallion at top-left — that, when pressed, reveals an overlay table of contents in the manner of a manuscript index, white on deep warm-dark `#2C1F0E`.

## Typography and Palette

**Typography** is the productive collision at the heart of the seed: **futura-geometric** governing all structural elements, set atop a classical warm serif for the body. This is not minimalism — it is *disciplined contrast*. The geometry of Futura against the humanist warmth of a roman body face creates the same productive tension as a wax seal pressed into silk.

- **Display / Proposition headings:** [Jost](https://fonts.google.com/specimen/Jost) — the closest Google Fonts approximation of Futura's geometric humanist construction. Set in weight 300 and 500 only. Tracking `+0.08em` on headings. All-caps for section labels only.
- **Body / Elaboration (card back):** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — the definitive scholarly Google Fonts Garamond. Set at 18px/1.75rem line height. Italic for citations, asides, and the candle-legend captions. Never bold.
- **Metadata / Colophon / Margin labels:** [Jost](https://fonts.google.com/specimen/Jost) 200 weight, 10px, tracked `+0.2em`, all uppercase. Used sparingly — dates, section numbers in Roman numerals, attribution lines.

**Palette** — warm, muted, never saturated. Derived from parchment, marble veining, candlelight, and oxidized bronze:

| Role | Name | Hex |
|---|---|---|
| Page ground | Warm vellum | `#F8F2E4` |
| Card back surface | Aged parchment | `#F0E8D4` |
| Primary text | Ink brown | `#2C1F0E` |
| Section rule / accent | Warm gold | `#C8A96E` |
| Secondary text / metadata | Faded umber | `#7A6040` |
| Marble vein (decorative) | Warm ivory vein | `#E8DEC8` |
| Candle glow ambient | Deep amber | `#B87333` |
| Overlay / TOC background | Scorched dark | `#1E1408` |
| Overlay text | Warm white | `#F5EFE0` |

No pure black. No pure white. No blue-tinted grays.

## Imagery and Motifs

**Marble Texture** — the governing surface material. Not dramatic Calacatta black, but a warm Italian Giallo Siena marble: honey-gold ground, pale ivory veining, occasional amber inclusions. This texture appears in three controlled contexts:

1. **Hero panel surface** — the first scroll section, full column width, approximately 320px tall, carries a marble slab rendered at high resolution as a CSS `background-image` with `background-size: cover` and a very subtle `opacity: 0.18` overlay of the vellum ground color, so the marble reads as memory rather than material.
2. **Card flip card-back bottom edge** — a thin 6px strip of marble texture at the bottom of each card-back face, functioning as a visual "binding" — the suggestion of a page with a marble edge, as in marbled book edges.
3. **Section rule terminator** — where the left gold margin rule ends, a small 18×18px marble circle terminates it, like a finial on an iron railing.

**Candle atmospheric motif** — the primary recurring symbol. Appears as:
- A single SVG candlestick (clean, geometric, Futura-proportioned) at the very top of the page, centered above the marble hero panel. The flame is a CSS animated flicker: `opacity: 0.85 → 1.0`, `transform: scaleY(1.0) → scaleY(1.05)`, duration 2.4s, `ease-in-out`, infinite, subtle enough to be noticed only on sustained attention.
- A repeated small candle glyph `✦` (repurposed as a star-flame) used as the list bullet in all elaboration text (card backs).
- The favicon: a single pixel-perfect 32×32 candle SVG, rendered in warm gold on ink-brown.

**No photography.** No stock imagery. No illustrations beyond the SVG candlestick. The marble texture is the only image file. The rest is pure typography and geometric ornament.

**Ornamental devices** (all CSS/SVG, no external assets):
- Roman numeral section counters in Jost 200, positioned in the left margin at the midpoint of each section rule.
- A thin `1px` horizontal rule in `#C8A96E` at 12% opacity used only inside card-back elaborations as a paragraph separator — not a section divider.
- Wax-seal medallion at top-left: a 48px circle of `#B87333` with an inset `1px` border of `#C8A96E`, containing the site's initial glyph (`論`) in Jost 300, white — acting as the site's only navigation trigger.

## Prompts for Implementation

Build this as a **single continuous scroll manuscript** — every implementation decision must serve the fiction that this is a digitally-rendered philosophical treatise, typeset in the tradition of academic press monographs, lit by candle.

**Structure:**

1. **Opening hero** — full column width, marble texture panel. Centered SVG candlestick above. A single proposition in Jost 300 display size (4.5rem), no subtitle. Then a thin gold rule. Nothing else. This section is the "title page."

2. **Body sections (IV–VI)** — each begins with a Roman numeral in the left margin, a Jost 500 heading in 1.5rem, and then either: (a) a paragraph of EB Garamond body text, or (b) a card-flip proposition/elaboration pair. Card flips are full-column-width. The flip is triggered on `:hover` and `:focus-within`. On mobile, the flip is triggered on tap; no hover state exists.

3. **Colophon footer** — 3 lines, centered, Jost 200 small-caps, warm gold on vellum ground. Publication date, primary proposition in compressed form, the word RONRI.ORG.

**Card flip implementation:**
```css
.card-container {
  perspective: 1200px;
  width: 100%;
  margin-block: calc(1.618rem * 2);
}
.card-inner {
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-container:hover .card-inner,
.card-container:focus-within .card-inner {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
  padding: calc(1.618rem * 1.5);
}
.card-front {
  background: #F8F2E4;
  border-left: 2px solid #C8A96E;
}
.card-back {
  background: #F0E8D4;
  transform: rotateY(180deg);
  border-left: 2px solid #B87333;
}
```

**Candle flicker animation:**
```css
@keyframes candleFlicker {
  0%, 100% { opacity: 0.85; transform: scaleY(1.0) scaleX(1.0); }
  25% { opacity: 0.92; transform: scaleY(1.04) scaleX(0.97); }
  50% { opacity: 1.0; transform: scaleY(1.05) scaleX(0.96); }
  75% { opacity: 0.88; transform: scaleY(1.02) scaleX(0.98); }
}
.candle-flame {
  animation: candleFlicker 2.4s ease-in-out infinite;
  transform-origin: bottom center;
}
```

**Golden ratio spacing system:**
```css
:root {
  --phi: 1.618;
  --base: 1rem;
  --unit: calc(var(--base) * var(--phi));
  --gap-sm: var(--unit);
  --gap-md: calc(var(--unit) * var(--phi));
  --gap-lg: calc(var(--unit) * var(--phi) * var(--phi));
  --col-max: 68ch;
  --col-left: 14%;
}
```

**Marble texture** — license-free SVG-filter approach if no image asset is available: use a layered CSS `background` with multiple radial-gradient calls in ivory/honey tones, or source a single seamless JPG tile from a CC0 resource. Keep marble subtle — it is atmosphere, not wallpaper.

**TOC overlay** — triggered by the wax seal medallion. A `position: fixed` overlay, `background: #1E1408`, slides in from the left as a narrow panel (320px wide). Links in Jost 300, warm white `#F5EFE0`, each preceded by its Roman numeral in `#C8A96E`. Closes on overlay click or Escape key. No hamburger icon — only the wax seal glyph.

**AVOID entirely:**
- CTA buttons (no "Get Started", "Learn More", "Subscribe")
- Pricing blocks, stat grids, feature cards
- Sticky navigation bars or floating headers
- Testimonial sliders, social proof, logo bars
- Any animation faster than 0.4s or that animates on scroll without user intent
- Hover-only interactions without keyboard equivalent
- Any image beyond the marble texture tile
- Color outside the defined palette — especially blue-grays, pure whites, or saturated accents

The page should feel like something discovered, not something marketed. A reader should finish scrolling and feel they have read a short, serious text — not visited a website.

## Uniqueness Notes

**Differentiators from all other designs in the registry:**

1. **light-academia aesthetic at 1% frequency — the rarest aesthetic in the registry.** Every other academic or scholarly treatment in the registry leans dark-academia (2%) or editorial-warm. This design inverts the convention: instead of dark walnut and candlelit shadow, it uses the morning-light side of academia — the cream folio, the marble reading desk, the gold of morning sun rather than evening flame. The candle motif reinforces this: it is the scholar's working candle, not the atmospheric-gothic candle.

2. **Card-flip as single-column sequential revelation, not a grid.** The registry's 3% card-flip usage appears in grid contexts — multiple cards flipping in array. This design uses card-flip as a *hermeneutic device*: one proposition at a time, full column width, creating a reading rhythm of assertion → expansion that mirrors the structure of philosophical argument itself. The flip *is* the content form, not a UI component.

3. **Futura-geometric (Jost) paired with EB Garamond as primary typographic tension.** The registry's 5% futura-geometric usage pairs it with sans-only or tech pairings. Here the geometric display face meets a classical humanist roman — the same productive collision as bauhaus-meets-antiquarian-press. No other design uses Jost + EB Garamond. This specific pairing has zero precedent in the analyzed corpus.

4. **Marble as ambient surface memory, not hero imagery.** The registry's 4% marble-texture usage employs marble as dominant visual. This design uses marble at 18% opacity as a surface ghost — present in the haptic imagination, invisible to casual inspection. The marble is felt, not seen.

5. **Strict golden-ratio spacing system with no deviation.** No other design in the registry documents a mathematical spacing constraint. All spacing multiples are exact powers of φ = 1.618. This creates a vertical rhythm that is measurably harmonious — a scholarly choice that embeds the site's subject matter (logic, reasoning) into its physical proportions.

**Chosen seed:** `aesthetic: light-academia, layout: single-column, typography: futura-geometric, palette: warm, patterns: card-flip, imagery: marble-texture, motifs: candle-atmospheric, tone: authoritative`

**Avoided patterns (frequency analysis):** editorial (52%), asymmetric (42%), warm-generic (88% — used here with strict palette discipline), single-column-blog (20% — this is folio single-column, not blog), vintage (35%), dark-academia (2% — inverted to light).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:57:42
  domain: ronri.org
  seed: seed:
  aesthetic: ronri.org** — the word *ronri* (論理) is Japanese for "logic" or "reasoning." The ...
  content_hash: 188dcdec3a24
-->