# Design Language for miris-project.net
## Aesthetics and Tone
**miris-project.net** carries the name of Miris — a word that hovers between mirror and mire, between reflection and entanglement in something soft and wet, a meadow after rain. The site is built around a single sustained fiction: a candlelit writing room at the edge of a garden, where someone has been composing letters that will never be sent, pressing flowers between pages that will never be bound. The visitor does not arrive at a project page. They arrive at the room. The candle is already lit.
The aesthetic is **cottagecore** interpreted through the discipline of ma-negative-space — the Japanese concept of meaningful emptiness, the pause between notes, the gap between window frame and curtain edge that lets in specific light. Where most cottagecore web treatments crowd the canvas with textile patterns, dried herbs, and overflowing florals, this site uses negative space as its primary material. Each element — a single pressed fern, a fragment of handwritten text, a candle flame drawn in a single SVG path — exists in a field of cream silence so large that the element becomes precious by virtue of solitude. The room breathes.
The tone is **pastoral-romantic**: not saccharine, not naive. It is the romance of late afternoon light on an unfinished manuscript, of a garden that has been tended for decades by someone who no longer hurries. It is Keats reading in a garden, not Pinterest. It is Colette's prose, not a mood board. Every design decision must earn this distinction — if it could appear on a lifestyle blog, it should be removed.
**Mood references (internal, not visual):** Willa Cather's prairie light. Sylvia Townsend Warner's attic rooms. The particular silence of a country house library at four in the afternoon. A candle that has been burning long enough to pool deeply.
## Layout Motifs and Structure
The layout is built on **ma-negative-space** as a structural system, not a stylistic preference. Ma is not the absence of content — it is the active, intentional placement of air. Every composition decision is made by asking: what does the silence do here?
**Page architecture:** A single tall scroll, no horizontal navigation, no sticky header. The viewport is treated as a window frame. The content is outside, in the garden. The visitor looks through.
**Spatial grammar:**
- The primary column is 44ch wide, centered, set in body text. Nothing exceeds this width at the paragraph level.
- Section separators are not lines or dividers — they are vertical gaps of `min(18vh, 160px)` of pure background. The air is the separator.
- Every text block is preceded by an asymmetric lead — a single decorative element (pressed botanical SVG, candle flame, a single letter in display scale) that sits 2–3 viewport widths to the left or right of the column, connected to the text only by proximity and scale relationship, never by a rule or container.
- The hero is not a hero. It is an **approach** — the first 100vh shows only a candle flame SVG (center, ~120px tall) and a single line of text below it in small caps, set in pale ink on cream. Nothing else. The visitor must scroll to enter the room.
- Pull quotes escape the column entirely: they are set in display scale (clamp(2.4rem, 6vw, 5.2rem)), rotated ±1.2°, and positioned at the far edge of the viewport in very low opacity (0.12–0.18), visible as atmosphere rather than content.
- The footer is a colophon — a single centered line in small caps at the bottom of a 40vh air gap.
**Depth and layering:** Two compositional layers only. Background layer: the cream field, the atmospheric pull quotes. Foreground layer: the reading column and decorative elements. No z-axis theatrics, no parallax scrolling. Depth is achieved through opacity and scale alone.
## Typography and Palette
**Typography:**
- **Display / Atmosphere:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic for pull quotes, section frontspieces, and the approach line. Weight 500 for headings within the column. Cormorant Garamond is a direct revival of the 16th-century Garamond types; its extreme stroke contrast and delicate serifs carry the weight of manuscript culture without archaism. Set the approach line at clamp(1.1rem, 2.2vw, 1.6rem) in small-caps, tracking 0.18em. Pull quote display at clamp(2.4rem, 6vw, 5.2rem), weight 300, italic.
- **Body / Reading:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond), weight 400 for body prose. EB Garamond is the Georg Duffner revival of the 1592 Egenolff-Berner specimen — it has a warmth and ink-trap quality that Cormorant lacks at small sizes. Set at 18px / 1.75 line-height / measure of 44ch. The body text is the soil; everything else grows from it.
- **Accent / Labels:** [Cormorant SC](https://fonts.google.com/specimen/Cormorant+SC) (small caps variant), weight 400, tracking 0.12em, for section labels, dates, and the colophon. Never uppercase — always small caps, set as `font-variant: small-caps` or the SC face directly.
- **Functional (navigation, if any):** There is no navigation. If a secondary link is needed, it appears as an inline text link in EB Garamond, colored in `Wick` (see palette), with a hand-drawn single underline drawn as a `::after` pseudo-element using a slightly irregular border — not a clean CSS underline.
**Palette — five colors, named for the room:**
- `Tallow` — `#F5EFE0` — the primary background. Warm cream, the color of old beeswax candles and aged laid paper. Not white. Not off-white. Specifically tallow.
- `Ink` — `#2C2416` — the primary text color. Deep warm brown-black, the color of iron gall ink that has aged slightly. Not pure black. The warmth is essential.
- `Wick` — `#8C6A3F` — the accent color. The color of a spent candle wick, of tanned leather bookbinding, of old honey. Used sparingly: inline links, the approach candle flame, decorative SVG strokes.
- `Frost` — `#C8D8D0` — the glassmorphic card surface color. A very soft sage-blue-grey, like morning fog on a cold window. Used for glassmorphic information panels — frosted glass set over the cream field, holding metadata or supplementary text without disrupting the atmosphere.
- `Pool` — `#1A2833` — the deep navy. Used only for the candle-pool shadow beneath the flame SVG, for drop shadows on glassmorphic panels, and for the darkest typographic accents. The navy-metallic palette element — cold depth against the warm cream ground.
**Metallic accent:** A single gold thread, `#BFA06B`, used exclusively as a 1px border on glassmorphic panels and as the stroke color of the candle flame SVG. Not a color field — only a line.
## Imagery and Motifs
**All visual elements are custom inline SVG.** No photography. No stock illustration. No icon fonts. No raster images of any kind. The design corpus uses photography at 85% — this site abstains entirely, treating that absence as a design statement: the garden outside the window is described, not shown.
**The SVG vocabulary (five recurring glyphs, each drawn as a single continuous path where possible):**
1. **Candle Flame** — The site's primary symbol. A single flame drawn in three paths: the outer flame body (a tapered teardrop, widening at the base, narrowing to a sharp point), the inner cone (smaller, offset slightly left to suggest convection), and the wick line (a single vertical stroke below). Stroke only — `Wick` (#8C6A3F) for the wick and inner cone, `#BFA06B` for the outer flame. No fill. Animated with a very slow (8s) path-morphing loop that makes the flame breathe by ±3px at the tip. This is the only persistent animation on the page.
2. **Pressed Fern** — A single frond, seven pinnae, drawn with 1px stroke in `Ink` at very low opacity (0.35). Appears once in the left margin of the first full prose section, rotated −7°. Not repeated. The SVG is sized at approximately 180px tall. The fern is silent; it does not animate.
3. **Single Floret** — A five-petal flower head (imagine a pressed primrose), drawn in outline, 80px diameter, used as a section separator in lieu of a horizontal rule. Appears three times maximum across the full page. Each instance is rotated differently (−4°, 0°, +6°).
4. **Glassmorphic Panel** — Not a purely SVG element: a `div` with `background: rgba(200, 216, 208, 0.18)`, `backdrop-filter: blur(12px) saturate(140%)`, `border: 1px solid rgba(191, 160, 107, 0.4)` (the gold thread), and `border-radius: 2px`. Used for metadata blocks — a project date, a note on materials, a single epigraph attributed to its source. The panel is always narrower than the reading column (max 36ch), centered, and preceded by 6vh of air. The glassmorphism is subtle — fog on glass, not ice — the blur radius is intentionally modest.
5. **Candle Pool Shadow** — An SVG ellipse, 180×20px, filled with a radial gradient from `Pool` (#1A2833, opacity 0.22) to transparent. Placed directly beneath the approach candle flame. This is the only use of the `Pool` color as a field rather than a line.
**Decorative motif — candle-atmospheric:** Every section of the page takes its light from the single candle in the hero approach. As the visitor scrolls away from the candle, the prose sections are progressively slightly cooler in text opacity — not dramatically, but measurably: the approach body text is at full `Ink` opacity (1.0), the middle sections at 0.92, the final colophon section at 0.85. The candle's warmth is directional. The page reads like a room lit from one source.
## Prompts for Implementation
**The story to tell.** A visitor scrolls through the room of someone who has been working on a long project for a long time — not hurrying, not pitching. The candle has been burning all afternoon. There are notes on the table, a pressed fern in the notebook margin, glass panels of fog on the window. The project is explained the way you would explain it to a friend who sat down across from you: in full sentences, in the present tense, without slide-deck structure. There are no bullet points. There are no feature lists. There is only the prose of the room and the candle's particular light.
**Implementation priorities:**
- **The approach sequence (first 100vh):** On initial load, show only the candle SVG fading in over 1.2s (opacity 0 → 1, ease-in-out) and the approach line appearing below it with a 0.6s delay. No scroll indicator. No arrow. The visitor discovers scrolling. This is not a hero section — it is a threshold.
- **The zoom-focus scroll pattern:** As the visitor scrolls into the first prose section, the reading column undergoes a very subtle scale transition — from `transform: scale(0.97)` to `scale(1.00)` over the first 200px of scroll, with `transform-origin: top center`. The effect is of leaning in, of the room coming into focus. This is the zoom-focus pattern applied with pastoral restraint — not a dramatic cinematic zoom, but the small focus-pull of adjusting to candlelight.
- **Glassmorphic card entry:** Each glassmorphic panel enters with a `blur-focus` pattern — arriving at `blur(20px) opacity(0)` and transitioning to `blur(0px) opacity(1)` over 600ms as it enters the viewport via IntersectionObserver. The blur-to-focus transition mimics condensation clearing from cold glass. Use `will-change: filter, opacity` for performance.
- **Typography refinement (critical):** Set `text-rendering: optimizeLegibility` and `font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "pnum" 1` on all Garamond text. Enable old-style numerals throughout — dates and numbers should sit in the text line, not above it. The ligatures (ff, fi, fl, ffi, ffl) are part of the voice.
- **The candle flame animation:** Implement using CSS `@keyframes` on the SVG path `d` attribute, morphing between three keyframes — rest shape, lean-left, lean-right — on an 8s loop with `animation-timing-function: ease-in-out`. The total displacement is small: ±3px at the flame tip. Add a secondary keyframe for the inner cone that is slightly out of phase (offset the timing by 1.2s) so the inner and outer flames do not move as one rigid body.
- **Pull quote atmosphere:** The atmospheric pull quotes (large, rotated, very low opacity at 0.12–0.18) are positioned with `position: absolute` relative to their prose section containers. They are set in `pointer-events: none; user-select: none;` — they are atmosphere, not content. On mobile (below 680px), suppress them entirely with `display: none`.
- **Progressive candle warmth:** Implement the directional opacity diminution using CSS custom properties on section elements, set via JavaScript on scroll: `--prose-opacity` ranging from `1.0` to `0.85` as a linear interpolation of scroll position between 0 and `document.body.scrollHeight`. Apply as `color: rgba(44, 36, 22, var(--prose-opacity))` on body paragraphs. The effect must be so subtle that the visitor does not notice it consciously — only notices, if they compare top and bottom, that the page has a quality of distance.
- **No navigation, no header, no sticky elements.** The page is one room. You do not navigate a room — you walk through it.
- **Performance note for imagery:** Since all imagery is SVG, inline every SVG in the HTML. Do not use `` or `
` or `