# Design Language for ronri.day ## Aesthetics and Tone `ronri.day` is a contemplative journal of a logician who fell in love with a garden — or perhaps a botanist who started writing proofs. The aesthetic is **art-deco pastoral**: the severe gilded geometry of 1925 Paris unexpectedly softened by honeysuckle and afternoon light slanting through tall windows. Think of a Walter Crane illustration reprinted in a 1927 Vienna Secession annual, its vine-border ornaments drawn with drafting compasses and dividers, its text set in an inky serif that smells faintly of beeswax. Every corner is precisely mitred. Every mitre sprouts a tendril. The site is not a product page. It is a day — specifically the *logic* of a day: the moment at which rational structure dissolves into sensory experience. `ronri` (論理) is the Japanese word for logic, reason, structure. The `.day` tld is its antithesis: ephemeral, ambient, seasonal. The design holds the tension between the two without resolving it. **Mood:** Pastoral-romantic with hidden discipline. Warmth that has been ruled with a T-square. Honey and brass and old vellum, but measured in precise finger-widths. **Tone:** The register of a private notebook that has been set in type with professional care — intimate without being confessional, ornate without being fussy. The reader senses that someone very organized has given themselves permission to be moved. ## Layout Motifs and Structure The layout engine is **masonry with art-deco armature**. The page is not a grid; it is a *cabinet of curiosities* whose cases happen to align to a golden-ratio modular scale. Individual masonry tiles range from 1-column narrow (a single aphorism, a date, a pressed leaf silhouette) to 3-column wide (a full-bleed meadow wash). No two consecutive rows repeat the same rhythm. **The structural spine:** A single vertical brass rule (2px, `#C8A84B`) runs the full height of the page at 80px from the left edge on desktop, functioning as the margin line of a handwritten journal. All ornamental chapter-heads hang left of this rule; all body columns align to its right. **Chapter architecture (five movements, masonry-continuous):** 1. **Incipit** — A full-viewport opening tile: a large art-deco ornamental drop-cap `R` in gilded SVG, followed immediately by the typewriter cursor. The title resolves one glyph per 80ms: `r · o · n · r · i · . · d · a · y`. No hero image. No CTA. 2. **The Logician's Garden** — Masonry columns of journal entries: short prose fragments set in the display font, dated in small-caps, each tile edged with a thin geometric border that echoes a library card catalogue. 3. **Axioms** — Narrower tiles, mostly 1-column, containing single-line propositions formatted like logical statements (`∀ afternoon ∈ June : stillness(t) → gold`). The font shifts to a monospace variable for these tiles only. 4. **The Gradient Meadow** — Two 2-column tiles carrying gradient-mesh background washes (amber into sage, rose into ivory) with no text, functioning as breathing panels between content movements. 5. **Coda** — A single centered tile, narrower than the page, set in italics, the final entry of the day. The brass rule terminates here in an art-deco terminal ornament. **Spatial logic:** - Desktop (≥1280px): three-column masonry, 24px gutter, max-width 1240px, centered. - Tablet (768–1279px): two-column masonry, 20px gutter. - Mobile (<768px): single column, 16px margin, all tiles full-width; masonry collapses to stacked vertical flow. - Tile padding: 32px desktop, 24px mobile. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & Ornamental Caps — [Cormorant](https://fonts.google.com/specimen/Cormorant)**, variable weight 300–700, italic axis available. The primary voice of the site. Used at 4rem–12rem for tile headings, drop-caps, and date headers. The extreme optical range of the variable axis is exploited: at light 300 it reads like manuscript pencil; at bold 700 italic it reads like a proclamation etched in bronze. Letter-spacing: -0.04em at display sizes, +0.06em at small-caps. - **Body & Journal Text — [EB Garamond](https://fonts.google.com/specimen/EB+Garamond)**, regular 400 and italic 400. Set at 17px/1.75 leading for journal entry prose. The old-style figures and ligatures (`font-feature-settings: "onum" 1, "liga" 1`) are enabled throughout. This is the ink of the private notebook. - **Logic/Axiom Register — [DM Mono](https://fonts.google.com/specimen/DM+Mono)**, regular 400 and italic 400. Used exclusively in the Axioms movement tiles. Set at 14px/1.6, letter-spacing +0.02em. The monospace voice signals a mode-shift: we have left the garden and entered the proof. - **Dates, Labels, Navigation — [Cormorant SC](https://fonts.google.com/specimen/Cormorant+SC)**, medium 500. All-caps, 11px, letter-spacing +0.18em. Provides the disciplined cataloguing system of the art-deco armature. **Palette (honeyed-neutral, five-color system):** | Role | Name | Hex | |---|---|---| | Background vellum | Antique Ivory | `#F5EDD8` | | Primary text | Ink Brown | `#2C1F0E` | | Brass accent / rule | Burnished Gold | `#C8A84B` | | Sage counterpoint | Dusty Verdure | `#7A8C6E` | | Blush warmth | Old Rose | `#C4856A` | **Gradient mesh pairs (CSS `background: mesh-gradient()` polyfill via JS canvas):** - Tile A: `#F5EDD8` → `#E8D5A3` → `#C4856A` (amber warmth, amber-rose) - Tile B: `#E8F0E0` → `#F5EDD8` → `#D4E0C8` (sage-ivory-sage, breath of meadow) All color mixing uses `oklch()` with `color-mix()` for the gradient transitions, with a `#hex` fallback for browsers lacking support. ## Imagery and Motifs **No photography. No stock. No raster images except one optional scanned vellum texture (512×512, used as CSS `background-image` at 6% opacity on the body).** All imagery is constructed from: 1. **Art-deco SVG ornaments** — Five custom inline SVG decorative elements, all geometric: a symmetrical fan motif (used as a tile-corner accent), a stepped-chevron border rule, a sunburst terminal marker (used to close the brass rule at the Coda), a drop-cap cartouche, and a repeating key-pattern divider. All drawn on a 24-unit grid; all stroked with `#C8A84B` at 1.5px. No fills except the drop-cap cartouche which uses `#F5EDD8` as infill. 2. **Gradient mesh panels** — Two full-tile gradient washes (described above under Palette). These are the only non-text content tiles; they function as *glances out the window* between journal movements. Rendered via a small canvas gradient-mesh library (mesh.js, ~3KB), no external dependency. 3. **Marble-classical texture overlay** — A single repeating SVG `` filter applied at very low opacity (opacity: 0.04) as a `filter` on the `.tile--wide` class. This produces a barely-visible marble-vein shimmer on the large breathing tiles only. It evokes the surface of an old writing desk without ever reading as "marble effect." 4. **Pressed-leaf silhouettes** — Three SVG path silhouettes of stylized botanical forms (a branch with three leaves, a single compound frond, a trailing vine tendril), each used once as a decorative frame element. All stroked in `#7A8C6E` at 1px, no fill. These are the only organic shapes; everything else is geometric. 5. **Logical notation glyphs** — Unicode mathematical symbols (∀, ∃, →, ∧, ∨, ∈, ⊢) appear in-line in the Axioms tiles, set in DM Mono, colored `#C8A84B`. They are decorative-functional: real logical syntax applied to pastoral subjects. **The marble-classical motif** is treated with extreme restraint — it is the writing surface, not the subject. The site never depicts a classical column, frieze, or statue. The marble is *underneath*, felt more than seen. ## Prompts for Implementation Treat `ronri.day` as a **single continuously scrolling cabinet of journal tiles**, not a sequence of pages. There is no navigation. There is no header. There is no footer with links. The brass rule is the only persistent structural element; everything else flows in the masonry current. **Opening sequence (typewriter-effect, critical):** - Page loads with the background at `#F5EDD8` and the brass rule already rendered. - After a 300ms settle delay, the drop-cap `R` fades in (opacity 0 → 1, 600ms ease-out). - After the drop-cap is visible, the typewriter begins: `ronri` appears letter by letter at 80ms/char, followed by a 200ms pause, then `.`, `d`, `a`, `y` at 80ms/char. - The cursor is a 2px vertical bar in `#C8A84B`, blinking at 530ms intervals. - After the full domain is typed, the cursor blinks three times and then dissolves (opacity → 0, 400ms). The domain text locks into final position. - This is not a loading animation. It is the first *event* of the day. **Masonry tile reveal (scroll-triggered, stagger):** - All masonry tiles below the fold begin at `transform: translateY(28px); opacity: 0`. - As each tile's top edge enters the viewport (IntersectionObserver, threshold 0.15), it animates to `translateY(0); opacity: 1` over 480ms with `cubic-bezier(0.16, 1, 0.3, 1)` (Expo out). - Tiles within the same masonry row stagger by 90ms per column position. - The gradient mesh tiles (Gradient Meadow movement) animate with a slightly longer 640ms and a 180ms delay so they feel like a slow breath. **Art-deco ornamental borders (CSS-only animation):** - Each tile has a `::before` pseudo-element that draws a thin geometric border, initially at `clip-path: inset(50% 50% 50% 50%)`. On tile reveal, `clip-path` transitions to `inset(0% 0% 0% 0%)` over 320ms, 120ms after the tile opacity begins. This makes the border appear to draw itself outward from the tile center — the ruling effect of a draftsman's compass. **Axiom tiles (DM Mono, no animation except cursor):** - Axiom tiles are never stagger-delayed. They appear immediately when in viewport. - Each axiom has a blinking cursor (`_`) appended in `#C8A84B` that pulses once every 2 seconds, as if the logical statement is still being composed. **Gradient mesh panels:** - Rendered on `` elements that are resized on window resize. - The mesh gradient slowly animates: the color stop positions shift ±4% along each axis over 8 seconds in a looping ease-in-out. This produces a barely perceptible slow breathing — the light shifting outside the window, not an animation that demands attention. **No JavaScript frameworks. No bundler required.** Plain ES2022 modules: `typewriter.js` (~80 lines), `masonry.js` (~120 lines), `mesh.js` (~160 lines), `reveal.js` (~60 lines). Total JS budget: under 440 lines. No animations that autoplay sound. No scroll-jacking. The masonry layout is CSS-columns with a small JS equalization pass for gutter correction. **AVOID:** - Hero sections with a headline, subheadline, and a CTA button. - Pricing tables, stat grids, testimonial carousels. - Any image that looks like a stock photograph of nature. - Dark mode (this site exists only in afternoon light). - Any font pairing that doesn't include Cormorant as the primary display voice. ## Uniqueness Notes 1. **Masonry at 7% corpus frequency, combined with art-deco armature and a brass vertical rule.** The existing masonry designs in the corpus treat the layout as a media-first Pinterest clone. `ronri.day` is the first masonry site where the tiles are *text-primary* and the masonry rhythm serves journaling logic, not image collection. The brass rule running the full page height is unprecedented in the corpus. 2. **Gradient-mesh as a breathing panel, not a background.** Corpus usage of `gradient-mesh` at 8% is almost entirely as a full-page background treatment. Here gradient mesh appears in only two tiles, functioning as *windows* within a text-dominant cabinet. The distinction is conceptual: mesh is what you see when you look up from the journal page. 3. **Marble-classical as substrate rather than decoration.** At 2% corpus frequency, marble-classical is rare — and every existing use depicts marble as a decorative surface (veined panels, classical columns, stone frames). `ronri.day` inverts this: the marble is never depicted directly; it is applied only as a barely-visible SVG filter at 4% opacity, evoking the writing desk's surface. The motif is present as texture, not imagery. 4. **Logical notation (∀, ∃, →) as ornament.** No other design in the corpus uses mathematical logic symbols as decorative elements. Placing them in `#C8A84B` within DM Mono against the pastoral background creates the site's core paradox visually — the reason-sign surrounded by honeyed light. 5. **Typewriter-effect as site title, not body text.** Corpus use of typewriter-effect (5%) defaults to body content (terminal emulation, typing subtitles, hero taglines). `ronri.day` applies it to the domain name itself, making the *act of naming the site* the opening event of the day. The domain is the first sentence. **Chosen seed:** aesthetic: art-deco, layout: masonry, typography: expressive-variable, palette: honeyed-neutral, patterns: typewriter-effect, imagery: gradient-mesh, motifs: marble-classical, tone: pastoral-romantic **Avoided overused patterns (frequency analysis):** - No hand-drawn aesthetic (58% — most overused in corpus) - No photography imagery (87% — overwhelming default) - No centered layout (84%) - No full-bleed layout (64%) - No parallax pattern (75%) - No mono typography (74%) - No warm/gradient palette as primary treatment (89%/77% — warm is present but via honeyed-neutral, not generic warm-gradient)