# Design Language for naru.day ## Aesthetics and Tone naru.day channels an ethereal aesthetic — the luminous, weightless quality of light passing through translucent materials, applied to a daily reflection and contemplation platform. The site floats — every element seems to hover between states of being, surfaces glow from within, and the boundary between screen and viewer dissolves into shared luminescence. Inspiration draws from the light installations of James Turrell, the translucent architecture of SANAA, the atmospheric photography of Rinko Kawauchi, and the glowing digital landscapes of teamLab's immersive exhibitions. The tone is scholarly-intellectual — measured, thoughtful language that treats daily reflection as a rigorous intellectual practice. ## Layout Motifs and Structure The layout uses a **timeline-vertical** architecture — content arranged along a vertical temporal axis, creating the chronological flow of a daily journal where each entry marks a moment of reflection. **Timeline Vertical Architecture:** - Central vertical line (1px, Duotone accent at 0.15 opacity) as temporal spine - Content blocks alternate left/right of the timeline - Time markers (small circles, 8px) at each entry point - Generous spacing between entries (80-100px) - Container: max-width: 880px centered - The timeline flows like the passage of a contemplative day **Section Sequence:** 1. **Dawn:** Hero with garamond-classic title on duotone gradient, vintage-photography soft-focus light study, futuristic geometric light-grid accent 2. **Morning:** Morning reflections along timeline — morph interactive cards with vintage-photography atmospheric treatments 3. **Midday:** Peak contemplation entries in timeline center with futuristic light-ray overlay graphics 4. **Evening:** Twilight reflections in descending timeline with vintage-photography golden-hour treatments 5. **Night:** Footer as darkness arrival — scholarly-intellectual closing with futuristic constellation map and quiet sign-off ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.2rem-3rem, weight 700. Its warm scholarly authority creates the contemplative, literary quality of philosophical journal entries. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "EB Garamond" at 1.1rem, weight 400, italic for reflective passages and quotations. - **Labels:** "Source Sans 3" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Twilight Deep:** #0c0814 — deep twilight for dark backgrounds - **Dusk Surface:** #181020 — soft dusk purple for panels - **Ethereal Lavender:** #9878c0 — luminous lavender for primary duotone - **Ethereal Gold:** #c8a850 — warm ethereal gold for secondary duotone - **Mist White:** #e4dce8 — misty white-lavender for light text - **Fog:** #504860 — soft fog for secondary text - **Dawn Pink:** #c88898 — soft dawn pink for tertiary accent - **Border Ethereal:** rgba(152,120,192,0.1) — ethereal border ## Imagery and Motifs **Vintage-Photography Light Studies:** Daily reflections accompanied by vintage-treated photographs — CSS filters creating duotone effect: grayscale(1) followed by overlay blend with Ethereal Lavender and Ethereal Gold gradients. Slight softness (filter: blur(0.5px) on backgrounds) creates the dreamy, unfocused quality of half-remembered moments. **Morph Contemplation Cards:** Reflection cards smoothly change shape during interaction — border-radius transitions from angular (4px) to organic (24px) over 500ms on hover, with background gradient shifting subtly (opacity change on pseudo-element overlay). The morphing represents the fluid nature of thought as it develops during contemplation. **Futuristic Light-Grid Overlays:** Subtle geometric grids (SVG, 1px lines at 0.03 opacity in Ethereal Lavender) suggesting cosmic structure — concentric circles (planetary orbits), straight-line intersections (coordinate systems), and small node points (2px dots) at intersections. The futuristic overlays suggest that daily reflection connects individual consciousness to larger universal patterns. **Duotone Atmospheric Depth:** Color restricted to two primary tones — Ethereal Lavender and Ethereal Gold — creating a duotone atmosphere where the entire page exists in a continuous luminous field. Additional colors (Dawn Pink) appear only at transitional moments between timeline sections. **Timeline as Day's Passage:** The central timeline line uses a gradient from Ethereal Gold (top, dawn) through Ethereal Lavender (middle, day) to Twilight Deep (bottom, night), visually mapping the passage of a single day. Time markers shift color along this gradient. ## Prompts for Implementation Build the page as an ethereal daily timeline. Timeline: .timeline { position: relative; max-width: 880px; margin: 0 auto; padding: 60px 24px; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(200,168,80,0.15), rgba(152,120,192,0.15), rgba(12,8,20,0.5)); } Timeline blocks: .reflection { width: 42%; margin-bottom: 80px; } .reflection:nth-child(odd) { margin-left: 5%; } .reflection:nth-child(even) { margin-left: 53%; } Morph: .contemplation-card { border-radius: 4px; transition: border-radius 500ms ease; } .contemplation-card:hover { border-radius: 24px; } Duotone photo: .duotone-img { filter: grayscale(1); position: relative; } .duotone-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(152,120,192,0.4), rgba(200,168,80,0.3)); mix-blend-mode: overlay; } Futuristic grid: .light-grid { position: absolute; inset: 0; opacity: 0.03; background: radial-gradient(circle at center, transparent 40px, rgba(152,120,192,0.1) 41px, transparent 42px), radial-gradient(circle at center, transparent 80px, rgba(152,120,192,0.08) 81px, transparent 82px); pointer-events: none; } AVOID: Productivity journal apps, goal-tracking dashboards, and structured daily planners. Let ethereal luminescence and scholarly-intellectual rigor create a daily platform where reflection feels like a practice of consciousness floating through the passage of light. ## Uniqueness Notes 1. **Ethereal for daily reflection:** Luminous, weightless aesthetics transform daily journaling into an experience of floating through light. 2. **Timeline-vertical as day's passage:** Chronological vertical flow maps the literal passage of dawn through twilight in a single page scroll. 3. **Morph as thought development:** Shape-shifting cards represent the fluid, evolving nature of contemplative thought. 4. **Duotone as atmospheric unity:** Two-tone color restriction creates a continuous luminous field unifying all daily entries. 5. **Vintage-photography as memory quality:** Soft, treated images give each reflection the dreamlike quality of recalled experience. **Seed/Style:** aesthetic: ethereal, layout: timeline-vertical, typography: garamond-classic, palette: duotone, patterns: morph, imagery: vintage-photography, motifs: futuristic, tone: scholarly-intellectual **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses ethereal aesthetic, timeline-vertical layout, duotone palette, vintage-photography imagery, and scholarly-intellectual tone.