# Design Language for yome.day ## Aesthetics and Tone yome.day is a glassmorphic dreamscape submerged in a private ocean -- a digital memory aquarium where everyday tenderness is captured under frosted glass, suspended in deep blue water, and watched over by drifting silver bubbles. The site reads as a personal almanac of small domestic moments (the ".day" of a "yome") rendered as if those moments were sealed inside specimen jars and carried to the bottom of the sea. The dominant feeling is **dreamy-ethereal**: soft, weightless, hush-toned, slow-blinking. Nothing shouts. Words appear letter by letter as though typed by someone half-asleep at 3 a.m., and translucent panels float like jellyfish lit from within. The mood deliberately avoids the brisk, productivity-oriented register most ".day" domains adopt. There are no streaks, no checkmarks, no productivity gamification. Instead the visitor is invited into a quiet underwater room where each glass tile preserves a fragment of the day -- the steam curling off a kettle, the shape a person leaves in a duvet, a cracked egg yolk in late afternoon light. The entire experience is built so that a slow scroll feels like a slow descent: the deeper you go, the darker the water and the more luminous the cards become against it. This is **glassmorphism that has been weathered by water**. The frosted panels are not the crisp, hard-edged Apple-style cards of the 2020 trend; they are softer, slightly warped, with chromatic aberration along their edges as though refracted through a porthole. Bubbles drift up across the entire viewport at all times, ignoring section boundaries, reinforcing the feeling that the cards are submerged in one continuous body of water rather than stacked on a webpage. ## Layout Motifs and Structure The layout is a **bento-box composition rendered as an aquarium grid**. The viewport is divided into a CSS Grid of irregularly sized rectangular cells (`grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto)`), where each cell is a frosted-glass tile holding one small artifact of the day. Tile sizes vary deliberately -- a 2x2 tile holds a "morning ritual" card, a 4x1 holds a horizontal strip of a typewritten haiku, a 3x3 holds the largest "letter to my future self" card, a 1x1 holds nothing but a single floating bubble. Tiles never tile perfectly; small empty water-gaps (16-32px) sit between them so the dark ocean shows through and bubbles can drift through the gaps. **The Tide Line.** Roughly every three viewport heights of scrolling, a soft horizontal caustic line crosses the screen -- a thin gradient bar (`linear-gradient(90deg, transparent, #6FA8C0 50%, transparent)` at 12% opacity) that animates a slow left-to-right shimmer. This is the "tide line," and it acts as the only structural divider between bento clusters. There are no `
` rules, no section headers in the conventional sense; only tide lines. **Depth-Indexed Bento Clusters.** Clusters are arranged top-to-bottom with each cluster's background growing one shade darker than the one above it (`#0A1F33 -> #07182A -> #051221 -> #030B17`). This creates the descent metaphor: the visitor is not browsing pages but sinking. Within each cluster the bento grid is reshuffled -- the 1st cluster favors small, dense tiles; the 4th cluster has fewer, larger tiles with more empty water around them, mimicking the increasing emptiness of the abyssal zone. **The Aperture Tile.** One tile per cluster is "open" -- it has no glass front, only a circular SVG porthole that reveals raw water (the dark background) with a single drifting bubble inside it. This tile holds no content; it is a breathing space, and its placement within the bento grid is randomized per cluster. **Reading Order.** The grid does not enforce z-pattern or f-pattern reading. Instead, tiles use `view-timeline` and intersection observers so that as a tile enters the viewport it begins its typewriter reveal independently. The result is that reading order emerges from the visitor's scroll pace and eye path, not from a prescribed sequence. ## Typography and Palette **Display & Body Font: "Commissioner"** (Google Fonts, variable). This is the load-bearing typographic choice and the reason it carries the entire site. Commissioner is a humanist sans-serif by Kostas Bartsokas with a remarkable variable axis (weight 100-900, plus FLAR for flare and VOLM for volume). It is **commissioner-versatile** in the truest sense: I use Commissioner for everything from 0.75rem captions in weight 300 to a 7rem hero numeral in weight 800 with FLAR pushed to 100 (giving the strokes a subtle glyphic flare that reads as wet ink underwater). Headings: weight 700, FLAR 80, letter-spacing -0.02em, sizes `clamp(2.4rem, 5vw, 5.6rem)`. Body: weight 380 (a custom variable instance between regular and book), 1.05rem/1.7 line-height, letter-spacing 0.01em. Captions and tile labels: weight 600, uppercase, letter-spacing 0.18em, 0.72rem. **Mono Accent Font: "JetBrains Mono"** (Google Fonts), used **only** for the typewriter-effect strings. Weight 400, 0.92rem. The mono face is intentional: it makes each typewritten character carve out a fixed cell of horizontal space, so the text reveal feels like a typewriter striking a ribbon rather than a word processor flowing. Cursor: a solid block `▮` that blinks at 1.1s. **Palette: ocean-deep** with deliberate restraint. Eight values, no more. - `#030B17` — Abyssal Black (deepest cluster background, near-black with blue undertone) - `#051221` — Trench Indigo (cluster 3 background) - `#07182A` — Bathyal Blue (cluster 2 background) - `#0A1F33` — Mesopelagic Blue (cluster 1 / main background) - `#1B3A52` — Submerged Slate (used for tile glass tints and inner shadows) - `#6FA8C0` — Caustic Steel (the tide-line shimmer, secondary text, hairlines) - `#B8D4E0` — Pearl Mist (primary body text on dark glass) - `#F2EAD8` — Candle Ivory (the single warm color, used sparingly for emphasis: a key word, a cursor accent, the warmth of a bedside lamp glimpsed underwater) The palette breaks ocean-deep convention by introducing one warm value (Candle Ivory) deliberately -- it is the only memory of land in the entire scheme, and it appears at most twice per cluster. ## Imagery and Motifs **The Bubble Field.** A continuous, full-viewport canvas of drifting bubbles is the primary motif and the load-bearing **bubble-playful** element. Bubbles are pure SVG `` elements with `fill: none`, `stroke: rgba(184, 212, 224, 0.35)`, `stroke-width: 1`, and an inner radial gradient applied via `` to give them a soft highlight on the upper-left (positioned at fx=30%, fy=30%). Sizes vary: small bubbles 4-8px radius, mediums 12-20px, occasional giants 32-48px. Each bubble has a slight wobble in its X position (`translateX` keyframed to oscillate ±8px over 4-7s) while its Y position rises continuously over 14-26s, creating that signature uneven-buoyancy lift. Density is low -- roughly 18-24 bubbles on screen at any time -- so the field feels alive but never crowded. Bubbles pass *behind* and *in front of* tiles randomly (z-index layering), reinforcing depth. **Specimen Tiles.** Each bento tile is a frosted glass specimen container holding one small artifact. Artifacts are intentionally **minimal imagery** -- not photographs, but tiny SVG illustrations rendered in 1.5px Pearl Mist line-work with no fill: a teacup with two steam curls, a slipper, a folded shirt, a half-moon, a single hairpin, a slice of toast, a kettle in profile. Each illustration occupies no more than 30% of its tile; the rest is breathing water. The line-work has a deliberate hand-drawn wobble (achieved by adding small random offsets to SVG path control points, generated once per page-load). **The Glass Refraction.** Tile borders are not flat. Each tile's border uses a 3-stop conic-gradient (`conic-gradient(from 130deg, rgba(255,255,255,0.18), rgba(111,168,192,0.05), rgba(255,255,255,0.12))`) that simulates the way light bends along the edge of a thick glass panel underwater. Inside each tile, `backdrop-filter: blur(18px) saturate(140%)` softens whatever bubbles or background pass behind it. A 1px inset shadow on the top edge creates a subtle "meniscus" highlight as if water surface tension were holding the tile. **The Caustic Mesh.** Behind everything, a slow-moving caustic light pattern animates across the deepest layer. Built as a single SVG `` chain (` + `) animated by mutating the `seed` attribute every 3 seconds. This produces those wavering caustic light webs that ripple across pool floors. The caustics are clipped to 6% opacity in Caustic Steel so they read as a barely-perceptible undulation rather than a feature. **The Day Stamp.** Every cluster opens with a small Day Stamp tile: the date typewritten in mono, e.g. `2026.05.10 — sunday — high tide 14:32`. This is the only "data" element in the design, and it grounds the dreamscape in the literal sense that this is a day in a life. ## Prompts for Implementation Build yome.day as a **single-page vertical-descent narrative** where the visitor scrolls through four ocean-depth clusters, each darker and quieter than the last. The page is one continuous body of water; bubbles drift across the entire scroll without restarting at section boundaries. There is no navigation menu, no CTA, no pricing section, no stat grid -- there is only the descent. **Bubble Field Setup.** Mount one fixed-position SVG (`position: fixed; inset: 0; pointer-events: none; z-index: 1`) that contains ~22 bubble elements. Each bubble is positioned via percentage-based `cx` and animated with a CSS `@keyframes` that translates Y from `100vh` to `-10vh` over a randomized duration. Use `animation-delay: calc(var(--i) * -1.3s)` with a CSS custom property per bubble to stagger entries. Inside the rise animation, layer a second `wobble` animation on `transform: translateX(...)` with a slower, ±8px ease-in-out cycle. Do NOT use a particle library; hand-author 22 SVG circles so the rendering is crisp at any zoom and the file size stays small. **Bento Grid Construction.** Use CSS Grid with `grid-template-columns: repeat(12, 1fr)` and place tiles using explicit `grid-column` and `grid-row` spans. Cluster 1 has 9 tiles in a tight 12-column grid; cluster 2 has 7 tiles with one "aperture" tile; cluster 3 has 5 tiles spaced more widely; cluster 4 has 3 tiles with vast empty water around them. Empty water gaps come from a 24px `gap` and from intentional grid cells that are simply left empty (the bubbles drift through them). **Tile Glass Recipe.** ``` background: linear-gradient(135deg, rgba(27,58,82,0.42), rgba(27,58,82,0.18)); backdrop-filter: blur(18px) saturate(140%); border-radius: 18px; border: 1px solid transparent; background-clip: padding-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.04), 0 12px 36px -12px rgba(3,11,23,0.65); ``` The conic-gradient border is layered via a `::before` pseudo-element using the `mask` technique so the gradient only paints the 1px ring. **Typewriter Reveal.** Each tile's primary text uses an `IntersectionObserver` to trigger a typewriter effect when 30% visible. Implement by wrapping the text in a span with `width: 0` and animating `width` to its measured natural width using a `steps(N, end)` timing function where N is the character count. Always render the text twice in the DOM: once visible (the animating one) and once with `visibility: hidden` to reserve the layout space (so the bento grid doesn't reflow as text reveals). The blinking `▮` cursor is appended after the animating span and persists until the next tile begins typing. **Tide Line Animation.** Between clusters, place a 1px-tall full-bleed `
`. Apply a horizontal gradient and animate a `::after` shimmer pseudo-element with `background-position` keyframes over 9-12 seconds. The tide line should fade in via intersection observer when 60% visible. **Depth Transition.** Cluster backgrounds are stacked using `position: sticky` with `top: 0; z-index: -1` and graduating darkness. Or simpler: just set each cluster's background-color and let the dark color of the next cluster smoothly reveal as the visitor scrolls past. Avoid scroll-jacking; the visitor should be free to scroll at any pace. **Aperture Tile.** Render this as a tile with `background: transparent; backdrop-filter: none; border: 1px dashed rgba(184,212,224,0.18)` and a single SVG `` "porthole" inside it. Inside the porthole, mount a single oversized bubble (32px radius) with its own slow rise animation contained to the porthole's clip-path. **Caustic Filter.** Apply the SVG `` filter as a fixed-position decorative layer behind everything (`z-index: 0`, `opacity: 0.06`). Use JS to mutate the `baseFrequency` or `seed` attribute every 3000ms with `requestAnimationFrame` to animate it without re-rendering the entire DOM. **Reduced Motion.** When `prefers-reduced-motion: reduce` is set, freeze bubbles at their current positions, disable typewriter (show full text immediately with cursor static), and stop the caustic shimmer. **No Hover-Heavy Interactions.** The site is meant to be experienced by scrolling. Hover effects on tiles are limited to a 0.6s ease where the tile's `box-shadow` grows by 4px and its `backdrop-filter` saturation lifts to 160%. No flips, no parallax tilt, no zoom. **Storytelling Anchor.** The final cluster's last tile is the largest of the page (spans 8 columns, 4 rows). It contains a single typewritten paragraph: an ordinary letter from the spouse to themselves, listing seven small things from a day. This tile is the emotional payoff -- the visitor descends through smaller, more abstract artifacts and finally arrives at concrete domestic prose. The cursor blinks at the end of the paragraph indefinitely. ## Uniqueness Notes 1. **Bento-grid bubbles drift across cell boundaries** — most bento-box layouts treat each cell as a sealed component. Here, the bubble field is rendered on a fixed overlay so bubbles pass through the gaps between tiles, breaking the modular discreteness of the bento format and turning the entire page into one submerged volume. No other design in the registry combines bento-box with a continuous full-viewport particle field that ignores cell boundaries. 2. **Variable-font Commissioner with FLAR axis as load-bearing typography** — Commissioner appears in 0% of the registry. Beyond merely choosing it, this design exploits its less-known FLAR (flare) variable axis to give the headline strokes a subtle glyphic flare that reads, in this aquatic context, as wet ink. Most "humanist sans" choices in the corpus stop at weight; this one uses two axes. 3. **Vertical-descent depth metaphor with progressively darkening clusters** — instead of ".day" sites' typical horizontal/timeline layouts, yome.day uses scroll as a literal sinking through ocean strata. Cluster backgrounds graduate from `#0A1F33` to `#030B17`, and tile density inversely correlates with depth (sparser tiles in deeper clusters). This is distinct from the standard "dark-mode = whole page is one dark color" pattern and from typical immersive-scroll designs that use parallax rather than tonal depth. 4. **Aperture tiles as deliberate negative-space wells** — one bento cell per cluster is a "porthole" containing nothing but a single oversized bubble. This pattern is structurally novel: most bento layouts treat every cell as content; here, ~10% of cells are intentional voids that frame the absence of content as content. 5. **Specimen-jar minimal imagery instead of photography** — at 82% photography prevalence in the registry, this design's commitment to hand-wobbled SVG line-illustrations (teacup, slipper, kettle, hairpin) inside specimen-jar tiles is a sharp departure. Combined with the underwater frame, the illustrations read as preserved domestic artifacts rather than decorative spot illustrations. 6. **Chosen seed: glassmorphism / bento-box / commissioner-versatile / ocean-deep / typewriter-effect / minimal / bubble-playful / dreamy-ethereal.** Avoided patterns drawn from frequency analysis: card-grid (73%), centered (66%), playful aesthetic (70%), photography (82%), mono typography (79%), mysterious-moody tone (26%) — none of these are used here. Instead the design leans into underused vocabulary: bubble-playful (1%), commissioner-versatile (0%), ocean-deep (2%), typewriter-effect (3%).