# Design Language for naru.day ## Aesthetics and Tone naru.day is a seapunk ceremonial journal — a site that exists at the intersection of deep ocean bioluminescence and the flickering warmth of a single beeswax candle held underwater. The aesthetic is **seapunk-opulent**: that specific internet subculture of aquatic neon and teal-green gradients lifted into genuine luxury by restraint and Garamond's classical gravitas. The mood is **opulent-grand** without ostentation. Think: a 17th-century Dutch still life painted in phosphorescent blues and sea-greens. Coral formations rendered in gold leaf. The hush of a cathedral beneath the ocean surface. Every element carries weight and ceremony — nothing is casual, nothing is throwaway. Tone is twilight reverence. A day journal for the serious practitioner who treats each 24-hour cycle as a rite. The site breathes at the pace of tide charts and candlelight, not notifications. ## Layout Motifs and Structure The primary layout motif is **hud-overlay** — but stripped of its sci-fi aggression and translated into oceanic ceremony. Thin bracketing lines (1px, `#4fc3b8` at 30% opacity) frame content zones as if they were instrument readouts on an antique nautical navigation console. Crosshair targets, offset diamond markers, range-finder brackets — all present but filed smooth, glowing faintly. The composition is built on a single full-viewport canvas. Content does not scroll conventionally — it **transitions through depth planes**, each zone surfacing like an object rising through clear water. A fixed HUD frame persists: four corner brackets pinned to viewport edges, a thin horizontal rule at 8vh from the top carrying the domain name in Garamond italic small-caps, and a vertical depth-counter on the right edge showing elapsed scroll as fathoms. Spatial relationships are asymmetric and intentional: - Primary text zones occupy a narrow centered column (max 54ch) — classical reading measure - Decorative HUD chrome bleeds to full viewport - Candle-glow motifs appear as absolutely-positioned radial gradients, not in the text column - Counter-animate elements (depth meter, timestamp numerals) occupy the peripheral viewport margins — never competing with body copy ## Typography and Palette **Primary typeface:** Cormorant Garamond — the Google Fonts cut of Garamond with the full classical range including italic, semibold, and light weights. Body text at 18px/1.8 leading, charcoal-on-void. Drop caps at 4.2em, floating left, colored `#4fc3b8`. **Secondary typeface:** IM Fell English — for pullquotes, epigraphs, and the HUD timestamp labels. Its slightly rough, letterpress-imperfect quality reads as both ancient and glitchy, bridging seapunk digital and classical print. **Accent / HUD numerals:** Space Mono — monospaced, used exclusively for counter-animate depth readings, timestamps, and bracket coordinates. Never for prose. **Palette — Coastal Blend:** - `#0a1628` — Abyss Void. Primary background. Near-black with a deep indigo undertone, not pure black. - `#0e2a3a` — Benthic Blue. Secondary background for inset content zones and HUD panel fills. - `#4fc3b8` — Bioluminescent Teal. Primary accent. HUD brackets, drop caps, active indicators. - `#2a9d8f` — Deep Kelp. Secondary accent for hover states and depth-meter fills. - `#c9a84c` — Sea-Candle Gold. Used sparingly: decorative flourishes, the candle-glow corona, diamond HUD markers. - `#e8dcc8` — Vellum Cream. All body text and primary prose — warm, not stark white. - `#8fa8b0` — Tide Grey. Secondary text, captions, HUD label text. ## Imagery and Motifs **Gradient Mesh — the primary visual layer:** A large-format CSS mesh gradient spans the full viewport behind all content. Three gradient nodes animate slowly (30–60s cycles, ease-in-out alternate): a teal-cyan node at upper-left, a deep indigo node at center, and a faint amber node at lower-right. The mesh shifts imperceptibly — felt more than seen, like the slow rotation of a bioluminescent tide pool. Implemented as an SVG ``-animated filter or a CSS `@property`-animated conic-gradient mesh. No raster images for the background layer. **Candle-Atmospheric Motifs:** A single procedural candle-glow element sits fixed at the lower-center of the viewport — a radial gradient bloom: `radial-gradient(ellipse 180px 220px at 50% 92vh, rgba(201,168,76,0.18) 0%, rgba(201,168,76,0.06) 40%, transparent 70%)`. It breathes: the outer radius cycles between 180px and 220px on a 4s ease-in-out loop, mimicking the swell and retreat of a real flame. On scroll, the candle trails slightly — a `transform: translateY()` lagging 200ms behind the viewport — so it feels physically anchored in the room. **HUD Chrome Elements:** - Four corner brackets: `┌` `┐` `└` `┘` constructed from thin `border` elements (1px `#4fc3b8` at 35% opacity), 24px arms, positioned 20px from each viewport corner - A `⬡` diamond/hexagon tick mark at viewport center-right margin — the anchor for the depth counter - Thin horizontal scanline rules (1px, 4% opacity teal) spaced every 80px vertically, visible only in empty zones — evoking sonar graph paper **Counter-Animate Patterns:** The depth counter on the right margin increments in real-time as the user scrolls — displaying a 4-digit fathom reading that counts upward (0000 → 1200) using Space Mono numerals at 11px. Each digit slot uses a CSS `animation: slot-tick` flip — individual characters rolling like a mechanical odometer. The HUD timestamp in the top bar pulses its colon separator (opacity 0→1, 0.5s interval) like a ship's chronometer. These animations are purely ambient — they communicate depth and time without demanding attention. **Decorative Flourishes:** Cormorant Garamond supports OpenType ornaments — `✦` and `❧` used as section separators at full opacity `#c9a84c`. Small botanical/coral SVG path illustrations (inline, 2–3 total) derived from simple Bézier curves — not photographic, not icon fonts. ## Prompts for Implementation This site is a **single full-viewport scroll narrative** — one continuous surface that the user descends through, like lowering a lantern into the sea. Implement as a single HTML file with no navigation, no hamburger menu, no sticky header beyond the HUD chrome. **Structure:** Five depth-zones separated by atmospheric transitions rather than visible dividers: 1. **The Surface** — Domain name in Garamond italic, large (clamp(3rem, 8vw, 7rem)), centered, breathing via `letter-spacing` animation. Tagline below in IM Fell English italic. 2. **First Descent** — A short prose statement about the nature of the day. Wide leading, centered, max 54ch. Drop cap in teal. 3. **The Archive** — Three journal entry previews, minimal. Date in Space Mono, title in Cormorant Garamond semibold, one-line excerpt in vellum. No card borders — entries float in the void. 4. **The Candle** — A meditation section. Single centered quote in IM Fell English italic at large size (2.4rem). Candle glow most intense here. 5. **The Return** — A minimalist close. The site's philosophy in 2–3 sentences. Depth counter reaches its maximum. **Animation principles:** - All transitions: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` — the deceleration of water resistance - Entrance animations: elements translate from `translateY(24px)` to `translateY(0)` as they enter viewport — slow, weighted, inevitable - No bouncing, no spring physics, no rapid movements - The gradient mesh shift must complete one full cycle in no less than 45 seconds **CSS variables to establish at `:root`:** ``` --void: #0a1628; --benthic: #0e2a3a; --teal: #4fc3b8; --kelp: #2a9d8f; --gold: #c9a84c; --vellum: #e8dcc8; --tide: #8fa8b0; ``` **Avoid:** - CTAs, buttons with hover fills, pricing tables, testimonial blocks, social proof, stat grids - Any layout that suggests a product page, landing page funnel, or SaaS homepage - Fast animations (under 400ms for primary transitions) - Light backgrounds — the abyss void must dominate - Serif-on-serif clashing — IM Fell English and Cormorant Garamond are both serifs; keep them in distinct hierarchical roles ## Uniqueness Notes 1. **Seapunk aesthetic at luxury-premium execution depth.** The frequency analysis shows `seapunk` is rare in the registry. Pairing it with `opulent-grand` tone and classical Garamond typography is a combination present in zero other designs — seapunk is typically paired with lo-fi, grunge, or maximalist treatments. Translating it into candle-lit ceremony is the central design innovation. 2. **HUD-overlay layout stripped of sci-fi aggression.** The registry shows `hud-overlay` at 4% frequency — used, but almost always in cyberpunk/dashboard contexts. Here the HUD chrome is so reduced in opacity and so classical in geometry that it reads as navigational instrument rather than cockpit display. The bracketing system borrows from antique sextants and astrolabes, not Star Trek. 3. **Counter-animate as ambient ritual, not UI feedback.** The `counter-animate` pattern in the registry typically signals scoreboard-style number reveals or stat counters on scroll. Here the depth meter and chronometer pulse are purely atmospheric — they have no informational purpose, only tidal and ceremonial presence. This inverts the typical use case entirely. 4. **Gradient mesh as the primary visual content layer.** Rather than using gradient mesh as a background texture behind hero images or product photography, the mesh IS the imagery — the entire visual identity of the site lives in its color and motion. No photographs, no illustrations beyond minimal SVG flourishes. 5. **Candle motif as physics simulation, not decoration.** The candle-glow radial gradient is implemented with scroll-lag physics (`200ms` behind viewport position) making it feel like a real object suspended in the scene rather than a CSS background effect. This is unusual — most decorative light effects are purely static. Chosen seed: aesthetic: seapunk, layout: hud-overlay, typography: garamond-classic, palette: coastal-blend, patterns: counter-animate, imagery: gradient-mesh, motifs: candle-atmospheric, tone: opulent-grand Avoided patterns from frequency analysis: `layered-depth` (8% — overused), `bento-box` (6% — overused), `broken-grid` (6% — overused), `editorial-flow` (6% — overused). Chose `hud-overlay` (4%) as underused layout with novel execution context. Avoided `sans-grotesk` (5% — overused) typography; chose Cormorant Garamond and IM Fell English instead.