# Design Language for mysterious.day ## Aesthetics and Tone **mysterious.day** is a retro-futuristic dream journal rendered as a portfolio grid — the aesthetic of a 1970s NASA concept art booklet that was left in a damp greenhouse for forty years and then scanned at 4K. Every element lives in the tension between analog warmth and cold synthetic precision: thermal-print orange against deep-space indigo, Bebas Neue industrial slab next to hand-lettered annotations in the margins. The tone is **dreamy-ethereal** but without softness — this dreamscape has edges. Think: Voyager probe data rendered as a textile. A cassette tape rewound inside a nebula. The year is simultaneously 1979 and 2079 and neither is fully awake. The palette is **complementary** — burnt-solar orange (#E8621A) crashing against deep-space cobalt (#1A2AE8), a clash that registers as both vintage and alien. Neither color apologizes for the other. The site is a **portfolio grid** — a working artist's light table scattered with contact prints, each cell a small world with its own gravitational pull. Nothing is centered. Everything leans. The grid breathes. The dominant mood is: you found this site on a forgotten server at 3 a.m. and you're not sure if it's a real portfolio or a transmission from somewhere else. ## Layout Motifs and Structure The macro layout is a **variable-column portfolio grid** — NOT a uniform card grid. Columns break: 3 → 2 → 1 across breakpoints, but within the 3-column desktop view, cells carry irregular spanning rules: - Column 1 spans `1 / 2` for standard items - Every 5th item spans `1 / 3` (full bleed across all columns) — these are "transmission cells" - Every 7th item spans `2 / 3` — these are "wide-signal cells" The grid uses `grid-auto-rows: minmax(260px, auto)` with a `gap: 3px` — the gap is not a gutter, it is a gap, a thin void between panels like the border of an undeveloped film strip. **Spatial logic:** - **No vertical centering** within cells — content anchors to the bottom-left corner. Text rises up from the floor of each cell. - **Depth via blur-focus layering:** Background cells sit behind a `backdrop-filter: blur(0px)` by default; on hover, the hovered cell sharpens to `blur(0px)` while its immediate neighbors soft-blur to `blur(3px)` and distant cells to `blur(6px)`. The grid acts like a camera finding focus. - **Floating elements** drift autonomously: 6–10 small geometric primitives (circles ⌀12px–40px, thin rectangles 2px × 60px, right-angle corner brackets) float on a slow `animation: drift` loop independent of scroll — they belong to the page, not to any cell. - **Transmission bars:** Full-width horizontal lines (1px, `#E8621A` at 30% opacity) cross the viewport at fixed intervals (every ~320px of scroll depth), like scan lines on an old monitor. **Hero zone:** The top of the page has a full-viewport-width zone that is NOT a hero image — it is the grid starting immediately, but the first row of cells is 80vh tall, the second row 40vh, the third row 30vh, compressing downward as the user enters the grid, as if the page is landing. **Navigation:** A single `position: fixed` line of text in the top-left corner — just the domain name in Bebas Neue, 13px, uppercase, color `#E8621A`. No nav links. No hamburger. The domain is the only compass. ## Typography and Palette **Palette — Complementary (Solar / Space):** | Role | Name | Hex | |---|---|---| | Background | Deep Space | `#0D0D1A` | | Primary | Solar Flare | `#E8621A` | | Complement | Cosmic Cobalt | `#1A2AE8` | | Surface | Carbon Plate | `#1A1A2E` | | Grid Void | Vacuum | `#07070F` | | Text Primary | Thermal Paper | `#F0EBD8` | | Text Secondary | Faded Proof | `#8A7E6A` | | Accent Hot | Burn Orange | `#FF8940` | | Accent Cold | Ionosphere | `#4A6EFF` | The background is nearly black but with a distinct blue undertone — `#0D0D1A` not `#000000`. This shifts the darkness from void to depth. **Typography:** - **Display / Grid Cell Titles:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — the primary typeface for all cell headings, the site wordmark, large labels. Set at sizes from `clamp(2rem, 5vw, 8rem)` down to `1.1rem` for small card labels. All-caps. Tracking `0.04em`. Color `#F0EBD8` on dark surfaces, `#E8621A` for emphasis. Bebas Neue carries the aesthetic cleanly — industrial, bold, no-apologies. - **Body / Annotations:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — regular weight, 14px, `#8A7E6A`. Used for descriptions, dates, metadata lines. Its typewriter geometry echoes mission logs and data readouts — monospaced but warm. - **Caption / Small Labels:** [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) — weight 300, uppercase, letter-spacing `0.12em`, `#4A6EFF`. Used for category tags, grid cell indices (`001`, `002`), and floating labels that drift near the floating elements. **Type rules:** - No paragraph text longer than 3 lines in any grid cell - All dates formatted as `YYYY.MM.DD` in Space Mono - No underlines, no link decorations — links change color to `#FF8940` on hover only ## Imagery and Motifs **Imagery approach — mixed-media collage layers:** Each grid cell contains one of three image treatments, never all three on the same page — variety is law: 1. **Thermal scan / false-color photography:** Real photographs with `filter: sepia(0.3) hue-rotate(200deg) contrast(1.2)` applied — this shifts them into the blue-orange complementary register, making any photograph feel like a NASA thermal imaging scan. The transformation is done in CSS, not in image editing, so it applies live. 2. **Generative noise field:** Cells without photographs contain an inline `` rendering a 2D Perlin noise field in real time, colored in the palette's deep space range — dark moving texture that is never static, never looping. Each canvas is seeded from the cell's index so they are all different. 3. **Geometric abstraction:** Some cells contain only two or three geometric shapes (SVG rectangles, circles, diagonal lines) arranged with asymmetric precision — these cells feel like circuit board cross-sections or star chart fragments. **Floating elements (the motif):** Eight persistent floaters live at `position: fixed`, pointer-events: none, z-index: 10, cycling through gentle drift animations: - `F1`: 32px circle, `#E8621A` at 60% opacity, drifts in a 8-second elliptical path - `F2`: 2px × 80px vertical line, `#4A6EFF` at 40% opacity, drifts slower (14s), slight rotation - `F3`: Right-angle corner bracket (SVG, 20px), `#F0EBD8` at 35% opacity, drifts on a figure-8 path - `F4–F8`: Smaller variants (12px circles, 1px lines, single dots) at varying opacities and drift speeds Floaters never interact with content — they are ghosts of the interface layer. **Recurring motifs:** - **Scan line overlay:** Full-page `repeating-linear-gradient` overlay with 2px lines at 4px repeat, `rgba(0,0,0,0.15)` — like an old CRT screen - **Film strip edge:** Left margin (24px wide) has alternating `#1A1A2E` / `#07070F` stripes at 20px intervals — the sprocket holes of a film strip, implied - **Grid index numbers:** Each cell is labeled `001` through `NNN` in `Barlow Condensed` 10px, `#1A2AE8` at 40% opacity, positioned at top-right of each cell - **Horizon line:** A single `1px solid #E8621A` at `opacity: 0.2` runs across the full viewport at `top: 60vh` on desktop — a false horizon, fixed to the viewport, not to the content ## Prompts for Implementation **The narrative premise:** This is the personal portfolio of someone who works at the intersection of synthetic biology and computational art — or maybe deep-space signal processing — the domain never says. Visitors arrive and must assemble meaning from the grid's fragments. There is no About page. There is no Contact section. There is only the grid, transmitting. **Animation directives:** 1. **Page entry — landing sequence:** On load, all grid cells start at `opacity: 0, filter: blur(12px)`. They reveal in a staggered sequence using `animation-delay: calc(var(--cell-index) * 0.07s)` — a radar sweep outward from top-left to bottom-right. Total load animation: ~2.4 seconds. No skeleton loaders. No spinner. 2. **Blur-focus depth field (core interaction):** On hover over any cell, apply a CSS custom property `--focus-cell: [index]` to the grid container. All cells get `transition: filter 0.4s ease` and compute their blur from distance to the hovered cell: `filter: blur(calc(var(--dist) * 1.5px))`. Cells 0 distance: `blur(0)`. Cells 1 step away: `blur(1.5px)`. 2+ steps: `blur(4px)`. This creates a lens-focus effect across the grid. 3. **Transmission cells (full-bleed):** When a transmission cell (every 5th) enters the viewport (Intersection Observer), it plays a 1.2-second animation: the cell's background slides from left to right (a scan-line wipe) revealing the content beneath. `clip-path: inset(0 100% 0 0)` → `clip-path: inset(0 0% 0 0)` over 1.2s cubic-bezier. 4. **Floating element behavior:** The eight floaters use `@keyframes drift-N` where N is 1–8, each with a unique path defined by `translate(Xpx, Ypx)` keyframes at 0%, 25%, 50%, 75%, 100%. They move slowly — fastest is 8s, slowest is 22s. On `prefers-reduced-motion: reduce`, they freeze in place (no disappear, just no motion). 5. **Scroll behavior:** The page is a standard vertical scroll — no horizontal scroll, no scroll-snap. But as the user scrolls down, the floating elements shift their paths very slightly via `scroll-linked animation` (CSS `animation-timeline: scroll()`) — they drift more horizontally as the user scrolls deeper, as if the page's gravity is shifting. 6. **Color temperature shift:** As the user scrolls past 50% of page height, the CSS custom property `--page-warmth` transitions from `0` to `1`. This affects the CRT scan-line overlay (warms slightly) and the film strip margin (brightens). The shift is subtle — imperceptible in isolation but creates a feeling that the page is warming as you go deeper. **Structural HTML notes:** - Grid cells use `
` elements with `data-cell-index` and `data-cell-type` (standard/wide/transmission) - The film strip margin is a `::before` pseudo-element on `` - Floaters live in `
` as direct children of ``, outside the grid - The fixed horizon line is a `::after` pseudo-element on `` - No framework. No build step. Single HTML file with embedded CSS and vanilla JS. **What this site is NOT:** - Not a landing page - Not a SaaS product site - Not a resume - Not a blog with posts - No CTA buttons - No pricing - No testimonials - No stats grid ("10M users, 99.9% uptime") ## Uniqueness Notes 1. **Blur-focus depth field as the primary interaction model.** The corpus uses `blur-focus` at only 3%. Most implementations use it decoratively (blurred hero background behind sharp text). This design uses it as a *relational* depth signal — the grid itself is a camera, and the hovered cell is what the camera focuses on, softening everything else. No other registry entry uses blur as a proximity-computed, multi-element interaction. 2. **Complementary palette at full saturation in a dark-mode context.** The corpus overuses warm gradients (78%) and muted palettes (32%). A pure burnt-orange / cosmic-cobalt complementary pair in a nearly-black dark-mode context is absent from the frequency data. Most dark-mode designs use neon accents on black; this design uses two fully saturated complementary hues that compete equally, creating visual tension rather than hierarchy. 3. **Retro-futuristic without vaporwave.** The corpus uses retro (10%) and vaporwave (6%), and both almost exclusively resolve to pink/purple/cyan synthwave palettes. This design is retro-futuristic via the NASA/space-program vocabulary — orange thermal scans, mission log monospace, geometric instrument readouts — without any pink, without any chrome gloss, without any Outrun grid. The retro register is 1970s aerospace, not 1980s music video. 4. **Film strip left-margin motif as structural navigation cue.** Decorative borders are common but almost always top/bottom or corner-accent. A left-margin that reads as 16mm film sprocket holes — purely via alternating dark stripes in a 24px column — is an uncommon spatial device that grounds the portfolio-grid aesthetic in physical analog media without using any imagery. 5. **Floating elements as persistent layer ghosts, not decorative blobs.** The corpus uses floating-elements at 4%, almost exclusively as CSS blob/gradient shapes in the hero. This design uses geometric primitives (circles, lines, corner brackets) as persistent viewport-fixed elements on a separate z-index layer throughout the entire scroll journey — they are witnesses to the content, not decorations of the header. Chosen seed/style: aesthetic: retro-futuristic, layout: portfolio-grid, typography: bebas-bold, palette: complementary, patterns: blur-focus, imagery: mixed-media, motifs: floating-elements, tone: dreamy-ethereal Avoided patterns from frequency analysis: centered layout (85% — used asymmetric bottom-anchored content instead), warm gradient palette (78% — used full-saturation complementary instead), parallax (77% — no parallax at all), hand-drawn aesthetic (58% — strictly geometric/synthetic), editorial aesthetic (50% — transmissive/archival instead).