# Design Language for miris.day ## Aesthetics and Tone miris.day inhabits the liminal space where a terminal window has been left open on a poet's desk overnight -- the phosphor glow of a CRT monitor bleeding soft blue light across handwritten letters, dried wildflowers pressed between the pages of a shell scripting manual, and the distant sound of rain against a window that overlooks rolling meadows. The domain name itself -- "miris" evoking the Korean word for "miri" (in advance, beforehand) layered with "iris" (the flower, the eye) -- suggests a site that sees beauty before it arrives, a premonition rendered in monospaced type and watercolor blues. The aesthetic is **terminal-pastoral**: the rigid geometry of command-line interfaces softened by the organic imperfection of nature. Imagine a vintage VT220 terminal whose screen has been stained by morning fog, its sharp green characters replaced by the dusky cerulean of a twilight sky. Every surface carries a gentle bokeh blur at its edges, as though the interface itself is dreaming. The cursor blinks not with mechanical urgency but with the rhythm of breathing -- slow, deliberate, meditative. The tone is **pastoral-romantic** in the tradition of Keats and Wordsworth reborn as systems administrators: reverent toward natural beauty, unhurried in pace, finding the sublime in the mundane act of typing commands into a luminous void. There is no sales pitch here, no urgency. miris.day is a place you visit the way you visit a garden at dusk -- to stand still, to notice the light changing, to feel the world slow down around you. ## Layout Motifs and Structure The layout employs a **sidebar** architecture that divides the viewport into two asymmetric regions: a narrow left panel (approximately 280px on desktop, collapsing to a top drawer on mobile) and a wide main content area that fills the remaining space. This is not a navigation sidebar in the conventional sense -- it is a **terminal prompt column**, a persistent vertical strip that evokes the left margin of a terminal emulator where line numbers and prompt characters live. **The Prompt Column (Left Sidebar):** The sidebar is rendered with a slightly darker background (#0B1A2B) than the main content area. It contains the site identity -- "miris.day" rendered vertically in Libre Baskerville at 14px, rotated 90 degrees counterclockwise so it reads bottom-to-top, anchored to the lower-left corner. Above the site name, a column of decorative elements: small SVG wave-form glyphs (sine curves rendered as 24x24 icons) that pulse gently with a 4-second CSS animation cycle. The sidebar also houses a minimal set of section anchors -- not traditional navigation links but single Unicode characters (a flower, a wave, a terminal cursor, a star) that serve as waypoints for the scroll journey. Each anchor is a 32x32 hit target with a 2px Libre Baskerville italic label that appears on hover, sliding in from the left with a 200ms ease-out transition. **The Content River (Main Area):** The main content area is a single continuous vertical scroll -- a flowing river of content sections separated not by hard horizontal rules but by gradual background-color transitions. Each section occupies at minimum 100vh (full viewport height) and flows into the next through a 200px vertical gradient blend. The content within each section is set in a narrow column (max-width: 640px) that floats slightly right of center (offset by 40px from true center), creating an intentional asymmetry that prevents the layout from feeling static. This offset mirrors the way handwritten text drifts rightward on an unlined page. **The Bokeh Backdrop:** Behind the content column, the full width of the main area is occupied by a CSS-generated bokeh field: large, soft, overlapping circles of varying opacity (0.03-0.08) and radius (60px-200px) in shades of #4A7CB5, #6BA3D6, and #A8D0F0. These circles are positioned absolutely and do not scroll with the content -- they remain fixed, creating a parallax depth effect as text flows over them. The bokeh field is generated using CSS radial-gradient backgrounds layered with background-blend-mode: screen. On each page load, a small JavaScript function randomizes the positions of 12-18 bokeh circles using CSS custom properties, ensuring no two visits produce an identical backdrop. **Wave-Form Dividers:** Between content sections, instead of horizontal rules, SVG wave-form paths are rendered at full width. Each wave is a single continuous sine curve with amplitude varying between 8px and 24px, stroke color #4A7CB5 at 0.15 opacity, stroke-width 1.5px, and no fill. The waves are animated with a slow horizontal translation (60-second loop, linear timing) so they appear to drift perpetually leftward, like the surface of a pond disturbed by a distant stone. ## Typography and Palette **Typography:** - **Display / Headlines:** "Libre Baskerville" (Google Fonts) -- the refined Baskerville revival that carries the weight of 18th-century English printing while remaining crisp on screens. Used at `clamp(2rem, 4vw + 0.5rem, 3.5rem)` for section titles. Weight: 700 (Bold). Set with `letter-spacing: 0.02em` and `line-height: 1.15`. Titles are always set in sentence case with a soft text-shadow: `0 0 40px rgba(74, 124, 181, 0.2)`. This creates a subtle glow effect as though the letters are illuminated from within. - **Body Text:** "Libre Baskerville" (Google Fonts) -- weight 400 (Regular) at `18px / 30px` (font-size / line-height). The generous line-height creates an airy, meditative reading rhythm. Body text color is #C8D8E8 against darker backgrounds and #2A3A4A against lighter sections. Paragraphs are set with `max-width: 58ch` to enforce an optimal reading measure. First paragraphs in each section use `Libre Baskerville Italic` (400 italic) for their opening sentence, a typographic convention borrowed from literary journals. - **Terminal / Code / Accent:** "IBM Plex Mono" (Google Fonts) -- weight 400 at 14px for any text that represents terminal commands, timestamps, or system-generated content. Color: #6BA3D6 (a mid-blue that reads as "terminal blue" against dark backgrounds). Used sparingly -- for prompt characters (`$`, `>`), timestamps in the sidebar, and decorative "system messages" that appear between content sections (e.g., `[signal received: beauty.overflow]`). IBM Plex Mono's rounded terminals and open apertures give it a warmth that monospaced fonts rarely possess, bridging the gap between the terminal aesthetic and the pastoral tone. **Palette:** The palette is **ethereal-blue** -- a spectrum of blues ranging from near-black navy through soft cerulean to pale morning-sky white, punctuated by a single warm accent. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Background | Midnight Navy | #0D1B2A | Sidebar, darkest sections | | Primary Background | Twilight Blue | #1B2838 | Main content area default | | Mid-tone | Dusk Blue | #2A4158 | Section transitions, borders | | Primary Accent | Cerulean | #4A7CB5 | Links, headings glow, wave-forms | | Light Accent | Morning Blue | #6BA3D6 | Terminal text, hover states | | Atmospheric | Sky Wash | #A8D0F0 | Bokeh circles, decorative elements | | Text Light | Pale Linen | #E0E8F0 | Primary body text on dark | | Warm Accent | Dried Rose | #C4877A | Single warm counterpoint -- used for the cursor blink, visited links, and one decorative element per section (a pressed-flower SVG or a wave crest highlight) | The warm accent (#C4877A, Dried Rose) appears at no more than 5% surface area on any given viewport. Its scarcity makes it precious -- a single rose petal caught in the gears of a machine, a drop of warmth in a field of cool blue. ## Imagery and Motifs **Bokeh Light Fields:** The primary visual motif is bokeh -- the soft, out-of-focus circles of light that appear in photographs when a lens renders distant light sources. These are not photographic but CSS-generated: radial gradients with extreme feathering (background: radial-gradient(circle, rgba(74,124,181,0.08) 0%, transparent 70%)). Each bokeh circle exists on its own absolutely-positioned div, layered behind content with pointer-events: none. The circles vary in size (60px to 200px diameter), opacity (0.03 to 0.10), and hue (cycling through the blue palette). A subtle CSS animation (@keyframes drift) moves each circle 20-40px in a random direction over 30-60 seconds, creating a living, breathing background that never repeats. **Wave-Form Patterns:** Waves appear throughout the site as a secondary motif. They manifest as: 1. **Section dividers:** Full-width SVG sine curves between content blocks, animated with slow horizontal drift. 2. **Sidebar ornaments:** Small 24x24 SVG wave glyphs stacked vertically, pulsing with opacity animation. 3. **Text decoration:** A custom CSS underline for links that replaces the standard underline with an SVG wave pattern -- a 4px-amplitude sine curve in #4A7CB5 that draws itself from left to right on hover using `stroke-dasharray` and `stroke-dashoffset` animation over 400ms. 4. **Background texture:** At very low opacity (0.02), a repeating SVG wave pattern tiles across the content area like a watermark, giving the flat background a subtle sense of motion even before any JavaScript loads. **Cursor-Follow Interaction:** The cursor-follow pattern manifests as a soft, circular glow (120px diameter, radial gradient from rgba(74,124,181,0.12) to transparent) that follows the mouse position with a 150ms delay (implemented via CSS custom properties updated by a requestAnimationFrame loop). This glow represents the "iris" in "miris" -- the eye that watches, the flower that turns toward light. The glow is rendered as a fixed-position pseudo-element on the body, clipped to the main content area (not the sidebar). On touch devices, the glow anchors to the last tap position and fades out over 2 seconds. **Pressed-Flower SVGs:** Scattered throughout the content sections, at irregular intervals, are small inline SVG illustrations of pressed flowers -- rendered as minimal line drawings (stroke only, no fill) in #C4877A (Dried Rose). Each flower is 48-80px in size and positioned as a float:right or float:left element within text blocks, causing body text to wrap around it. The flowers are drawn with a single continuous SVG path, enabling a path-draw animation on scroll: the flower "draws itself" as it enters the viewport, its stroke-dashoffset animating from 100% to 0% over 1.2 seconds. Flowers include: an iris (naturally), a forget-me-not, a wild rose, dried lavender stems, and a single dandelion seed head. **Terminal Poetry Fragments:** Between major content sections, full-width bands appear with a darker background (#0D1B2A) containing terminal-styled text in IBM Plex Mono. These are not functional commands but poetic fragments formatted as terminal output: ``` $ echo "the field remembers what the screen forgets" the field remembers what the screen forgets $ date --format='%season' late spring, almost dusk $ ls ~/memories/ iris.bloom morning.fog handwritten.letter ``` These fragments use the cursor-blink animation (a 1.2-second step function that toggles a #C4877A block cursor between opacity 1 and 0) and appear with a typewriter-effect animation on scroll entry. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens with a 100vh introductory section. Background: #0D1B2A. The sidebar is immediately visible on the left (280px, #0B1A2B). In the main content area, centered vertically and offset slightly right, the domain name "miris.day" appears in Libre Baskerville 700 at `clamp(2.5rem, 5vw + 1rem, 4rem)` in #E0E8F0 with a text-shadow of `0 0 60px rgba(74,124,181,0.3)`. Below the title (separated by 32px), a subtitle in IBM Plex Mono 400 at 16px in #6BA3D6: `a place where terminals dream of meadows`. The subtitle renders with a typewriter effect (each character appearing with a 40ms delay). Behind everything, 15-20 bokeh circles drift slowly across the viewport. A single pressed-flower SVG (an iris) is positioned at the bottom-right of the viewport, 30% opacity, 200px tall, drawing itself with a path animation over 3 seconds after page load. **Scroll-Driven Section Transitions:** As the user scrolls past the first section, the background color transitions from #0D1B2A through #1B2838 to #2A4158 using a CSS scroll-driven animation (or IntersectionObserver fallback). Each section is a full-viewport narrative moment. Section boundaries are marked by the wave-form SVG dividers. The sidebar remains fixed throughout, its wave-glyph ornaments pulsing in sequence as the corresponding section enters the viewport. **Cursor-Follow Implementation:** A lightweight JavaScript module (fewer than 40 lines) tracks mouse position and updates two CSS custom properties (--cursor-x, --cursor-y) on the document root. A fixed-position div with pointer-events:none uses these properties for its left/top position, applying a CSS transition of 150ms ease-out for the smooth follow effect. The div has a radial-gradient background creating the soft glow. On scroll, the glow's opacity reduces to 0.04 to avoid distraction during reading. **Typography Animation:** Section headlines use a fade-and-rise entrance animation: starting 20px below their final position with opacity 0, animating to their resting state over 600ms with an ease-out curve, triggered by IntersectionObserver when 20% of the element is visible. Body paragraphs fade in more subtly (opacity only, 400ms, 50ms stagger between paragraphs). **Wave-Form Link Underlines:** All text links within body content replace the standard underline with an SVG wave pattern. Implementation: each `` tag within `.content` receives a `background-image` of a repeating SVG sine curve (encoded as a data URI), positioned at `bottom left`, `background-size: 8px 4px`, `background-repeat: repeat-x`. On hover, the background-position animates leftward over 400ms, creating the illusion of the wave flowing. Visited links change color from #4A7CB5 to #C4877A (Dried Rose). **Responsive Behavior:** Below 768px, the sidebar collapses to a 56px top bar containing the vertical "miris.day" text rotated back to horizontal at 12px, with the wave-glyph ornaments arranged horizontally. The main content area occupies 100vw. Bokeh circles reduce to 8-10 and their maximum size drops to 120px. Pressed-flower SVGs reduce to 36-48px. The cursor-follow effect is disabled entirely on touch devices (detected via matchMedia('(hover: hover)')). **Performance Considerations for Storytelling:** All animations use transform and opacity exclusively (no layout-triggering properties). Bokeh circles use will-change: transform. The wave-form divider animations use CSS animations rather than JavaScript. IntersectionObserver instances are created once and never re-created. The pressed-flower path-draw animations use CSS stroke-dashoffset animation rather than JavaScript path manipulation. **AVOID:** CTA buttons, pricing tables, stat grids, testimonial carousels, hamburger menus with full-page overlays, gradient text effects, 3D transforms, WebGL, heavy framework dependencies. This is a site built with vanilla HTML, CSS, and minimal vanilla JavaScript. ## Uniqueness Notes **Differentiators from other designs:** 1. **Terminal-Pastoral Fusion:** No other design in the collection combines the terminal aesthetic (26% frequency) with a pastoral-romantic tone (2% frequency). The typical terminal design leans into cold, technical, hacker-culture signifiers. miris.day subverts this by filling the terminal container with the emotional vocabulary of Romantic poetry -- pressed flowers, meadow imagery, breathing rhythms. The terminal becomes a greenhouse. 2. **Baskerville in a Terminal Context:** The typography frequency shows baskerville-refined at only 1% usage across all designs. Using Libre Baskerville -- a font rooted in 18th-century English printing tradition -- as the primary face in a terminal-aesthetic site is deliberately dissonant. Terminals use monospace; miris.day uses monospace only for accent/decorative elements and gives the main stage to a refined serif. This inversion (serif as primary, mono as accent) has no precedent in the existing collection. 3. **Bokeh as Structural Element:** While bokeh-background appears at only 1% frequency in existing designs, miris.day elevates it from background decoration to the primary visual system. The randomized, animated bokeh field IS the visual identity -- it replaces photographs, illustrations, gradients, and patterns as the dominant non-typographic element. No other design in the collection uses CSS-generated bokeh as its sole imagery system. 4. **Wave-Form Link Underlines:** The wave-forms motif (2% frequency) is expressed not just as decorative dividers but integrated into the fundamental interaction pattern of link hovering. Using an animated sine wave as a link underline is a unique micro-interaction that carries the motif language down to the smallest typographic detail. 5. **Ethereal-Blue Monochromatic Discipline:** The palette is almost entirely blue (ethereal-blue at 1% frequency), with only a single warm accent (#C4877A, Dried Rose) serving as the sole break in the cool spectrum. This extreme chromatic discipline -- where 95% of all color is blue and the remaining 5% is a dusty warm pink -- creates a visual identity that is instantly recognizable and has no analogue in the collection's predominantly warm (100%) and gradient (90%) palette tendencies. **Chosen seed/style:** aesthetic: terminal, layout: sidebar, typography: baskerville-refined, palette: ethereal-blue, patterns: cursor-follow, imagery: bokeh-background, motifs: wave-forms, tone: pastoral-romantic **Avoided overused patterns:** playful aesthetic (94%), centered layout (99%), mono typography as primary (99%), warm palette (100%), scroll-triggered as sole pattern (97%), minimal imagery (94%), vintage motifs (82%), friendly tone (98%). Every major seed axis for miris.day pulls from the bottom quartile of frequency distribution, ensuring maximum distinctiveness.