# Design Language for naru.day ## Aesthetics and Tone naru.day is a **diurnal almanac of becoming** — a quiet, retro-futuristic observatory built around the Japanese verb *naru* (鳴る — to ring; 成る — to become). The domain reads, when spoken aloud, as the moment a day *rings into existence*: the strike of a temple bell at dawn, the snap of a campanile chime, the low gong that calls a planet into orbit. The site treats every twenty-four-hour cycle as an astronomical event — something with a charted arc, a peak-magnitude, an ingress and an egress — and presents it the way a 1968 almanac, printed on heavy cream stock and stapled by a Japanese astronomical society, would have presented the year's eclipses. The mood is that of a **space-age agricultural calendar** — the strange, confident graphic vocabulary of late-1960s Japanese government brochures (think the *Expo '70* Osaka pavilion ephemera and JNR rail-timetables) crossed with NASA's mid-century mission patches and the botanical engravings of Pierre-Joseph Redouté. It is unhurried but never sleepy. It does not ask for the visitor's attention; it *announces*. Each section feels stamped with a wax seal — declarative, dignified, slightly old-fashioned, and yet engineered with the optimistic curvature of a future that never quite arrived. The voice is that of a **station-master who is also an astronomer**: precise about minutes, generous about meaning. Headlines speak in the imperative-passive of telegraphs ("THIS DAY SHALL BLOOM AT 06:17"), captions are written like marginalia in a leather-bound logbook. There is no ambient anxiety, no urgency, no sales pressure — only a calm, declarative authority that says: *this is how the day will unfold. Be ready.* ## Layout Motifs and Structure **The Tellurion Dashboard.** The page is structured as a single tall *navigational chart* — not a card-grid dashboard, not a SaaS analytics board, but a literal **mid-century planetarium control panel** rendered in CSS. The screen is divided into four declared zones, each labeled in small slab-serif caps with an enclosing oval (☉ DECLARATION · ☽ PHASES · ♃ CONJUNCTIONS · ♄ LEDGER). The layout is non-grid: it is built on a 12-column structural lattice but the *content* sits inside hand-positioned ovals, lozenges, and rectangles whose corners are clipped at exactly 8px (a small chamfer that reads as "metal-stamped"). **Top zone — The Annular Hero.** A full-bleed band, 88vh tall on desktop, dominated by a single enormous **annular diagram**: a ring of 24 numbered notches (the hours), within which a slimmer ring of 12 notches (the months), within which a circular reserve of negative cream space holds the day's *standing declaration* set in slab-serif at clamp(3.6rem, 7vw, 6.4rem). A thin SVG path draws itself along the outer ring on page load (700ms, ease-out), tracing the day's solar arc from horizon-rise to zenith to set, marked by three tiny six-pointed asterisks. To the left and right of the annulus, in the tellurion's "margins," sit two stamped lozenges: the day's Latin-style designation (e.g., *DIES MMVI · CXLII*) and the local sidereal time, tickered by SVG numerals that redraw rather than animate. **Second zone — The Phase Strip.** A horizontal band of seven *botanical engraving plates* — one per day of the week — each rendered as a vertical card with: a hand-traced botanical specimen at the top (different flower per weekday: lily for Sunday, iris for Monday, camellia for Tuesday, magnolia for Wednesday, peony for Thursday, narcissus for Friday, chrysanthemum for Saturday), a small slab-serif heading mid-card, a tiny celestial sigil bottom-right (☉☽♂♃♀♄), and a four-digit "epoch number" stamped into the lower-left corner. The strip does **not** scroll horizontally; it sits as a static heptaptych, a frieze. **Third zone — The Ledger Spread.** A two-page ledger imitation, rendered as a single split-screen with a faint vertical seam (a 1px dashed line). The left page is "FORECAST" — bullet entries with leading dingbats and right-aligned hour columns. The right page is "PRECEDENT" — a sparse vertical timeline with date stamps in slab-serif small caps and SVG paths drawing themselves between event nodes as the user scrolls past 60% threshold. There is generous outer margin (96px) and a tight gutter (24px) — it must read as a real bound book, not a CSS approximation. **Fourth zone — The Coronal Footer.** Not a dashboard footer. Instead, a single wide arc — the inversion of the Annular Hero — with the site title (NARU.DAY) set in slab-serif at clamp(4rem, 9vw, 7.2rem) along the curve of an SVG path, and three tiny celestial coordinates (RA · DEC · ALT) printed beneath in 11px slab-serif caps with hairline underscoring. **Critically: no cards. No tiles. No bento.** The entire layout rejects the modular box paradigm that "dashboard" usually implies. Information is arranged the way a 1965 NASA mission-status board arranged it: as labeled diagrams with fields, surrounded by cream margin, and stamped with authority. ## Typography and Palette **Primary Slab — *Roboto Slab* (Google Fonts).** Weight 700 for the Annular Hero declaration at clamp(3.6rem, 7vw, 6.4rem) with letter-spacing -0.015em. Weight 500 for second-tier headings (zone labels, ledger column headers) at 1.05rem with letter-spacing 0.18em, all-caps. Weight 400 for body at 17px / 1.72 line-height with letter-spacing 0.005em. Roboto Slab carries the squared, almost-mechanical authority of vintage timetable typefaces while remaining legible at small sizes — its bracketed serifs feel *engineered*, not literary, which is exactly the tone naru.day requires. **Secondary Display — *Zilla Slab Highlight* (Google Fonts).** Weight 700, used *only* for the four zone labels (DECLARATION / PHASES / CONJUNCTIONS / LEDGER) at 13px with 0.32em letter-spacing. The "highlight" cut has a built-in inline panel that gives each label the look of a printed rubber-stamp. **Tertiary Numeric — *Big Shoulders Inline Display* (Google Fonts).** Weight 700, used exclusively for the four-digit epoch numbers stamped on each phase card and for the sidereal-time tickers. Its tall, condensed inline-stripe forms feel like the numerals on a 1970s departure board. **Italic accent — *Cormorant Garamond Italic* (Google Fonts).** Weight 400, used for ledger marginalia and the small Latin designations (*DIES MMVI · CXLII*). The contrast between Cormorant's calligraphic italic and Roboto Slab's mechanical uprights is the typographic spine of the entire site. **Palette — Solar-Ascent Sunset (warm-bias, deliberately uncommon).** - **#FBF1DD** — *Almanac Cream*. Primary background. The color of unbleached Japanese washi paper after a decade in a leather-bound volume. - **#F4D1A7** — *Equinox Honey*. Secondary surface — the inner reserve of the annular hero, the verso ledger page. A faint warmth that distinguishes from the page background by 6 LAB units. - **#E08246** — *Magnitude Orange*. Primary accent. Used for the SVG-drawn solar arc, the dingbats in the forecast ledger, and the underscoring beneath section headings. A muted, ceramic burnt-amber — emphatically *not* a saturated dopamine orange. - **#B83A1A** — *Vermillion Stamp*. Reserved exclusively for the rubber-stamp zone labels and the day's "peak hour" callout. A red-orange so saturated it reads almost sealing-wax — used in approximately 2% of the page area, never more. - **#3E2C1F** — *Iron Gall Ink*. Body text and primary line-work. Not black. The brown-black of oxidized iron-gall ink in a 19th-century logbook — softer on cream than pure black, more credible as historical artifact. - **#1F1D2A** — *Midnight Indigo*. The deepest accent — used for the celestial sigils, the dashed seam between ledger pages, and the four corner registration marks (printer's crosshairs at 24px from each viewport corner). Cooler than Iron Gall, signaling *night* and *coordinate*. - **#8E9B6E** — *Foliage Verdigris*. The single botanical color — the stems and leaves of the seven weekday flowers, kept desaturated so they sit quietly within the warm palette without becoming a spring-meadow green. - **#D9A65A** — *Brass Hairline*. Used at 60% opacity for the 1px hairlines that delineate annular rings, ledger columns, and the seven phase-card bottom borders. Reads as *finished metalwork*, not as design-system divider. ## Imagery and Motifs **Botanical engravings as celestial signage.** The seven weekday flowers (lily, iris, camellia, magnolia, peony, narcissus, chrysanthemum) are rendered as **single-color SVG line-engravings** in the style of Pierre-Joseph Redouté and the *Curtis's Botanical Magazine* plates — every line is a hand-tuned bezier with a stroke width that tapers from 0.6px at terminals to 1.4px at stem-junctions. Each flower is not merely decorative: it is *paired with a celestial sigil*, declaring that this plant's blooming is governed by that body. (Lily ↔ ☉ Sun. Iris ↔ ☽ Moon. Camellia ↔ ♂ Mars. Magnolia ↔ ☿ Mercury. Peony ↔ ♀ Venus. Narcissus ↔ ♃ Jupiter. Chrysanthemum ↔ ♄ Saturn.) This *floricelestial correspondence* is the site's invented mythology. **Six-pointed asterisks as marginalia.** Tiny six-pointed star-asterisks (✶) appear as tick-marks along the annular hero's outer ring (one per hour), as bullet-glyphs in the forecast ledger, and as scattered punctuation throughout the site. They are not Unicode rendered — they are individual SVG `` elements with subtly varied sizes (1.6px to 3.2px) and slight rotational variation (±4°), so the eye registers a *constellation of glyphs* rather than a tiled pattern. **Printer's registration crosshairs.** At each viewport corner, 24px from the edge, sits a tiny crosshair (12px x 12px, 0.75px stroke, Iron Gall) — a deliberate quotation of letterpress proof-sheets. They never animate. They are simply *there*, the way a chronometer always shows the time. **The Annular Diagram.** The hero ring is an SVG composition of three concentric circles with carefully-tuned stroke-dasharrays (outer ring: 0.8 4.4, middle ring: 1.2 6.0, inner: solid). Twenty-four hour-notches pierce inward from the outer ring; twelve month-notches pierce outward from the middle ring; the gap between is filled with thirty-six sub-tick marks at exact 10° intervals. The whole composition is mathematically precise and deliberately beautiful — a working instrument that happens to also be the page's largest visual. **The Solar-Arc Path.** A single sinuous SVG path traces the day's modeled sun-trajectory from rising to zenith to setting, drawn over the annular ring's inner edge. On page load, the path's `stroke-dashoffset` animates from full length to zero over 700ms (cubic-bezier 0.22, 0.61, 0.36, 1), so the visitor sees the day *being inscribed* into the diagram. Three small ✶ glyphs appear at exactly 06:00, 12:00, and 18:00 with a 120ms stagger after the path completes. **No photography. No gradient meshes. No 3D-rendered orbs.** The entire visual language is line-art on cream, with vermillion and orange as punctuation. This is a *printed object*, not a screen. ## Prompts for Implementation **Architecture: storytelling-first, single document.** Build naru.day as one long vanilla HTML page — no SPA, no component framework. A single 9–12kb hand-written CSS file (with carefully ordered cascade for the typographic system) and a single 6–8kb JS file that handles only four behaviors: (1) IntersectionObserver-driven SVG path-draw (`stroke-dashoffset` animations) for the solar-arc and the precedent-timeline lines; (2) the sidereal-time ticker (which **redraws** the SVG numerals every second using a setInterval — never CSS counter-increment, never a digital-clock font); (3) cursor-follow tilt on the annular hero (clamped to ±2°, dampened by easing — *barely perceptible*, like a brass instrument settling under fingertips); (4) a one-shot reveal as the Phase Strip enters viewport — the seven flowers' stems-then-petals draw themselves in, **all at once, no stagger** (refusing the 68% stagger-pattern frequency), over 1100ms. **The day must feel narrated, not navigated.** The visitor scrolls down the page the way a reader turns pages of an almanac. There is no sticky navigation. There is no menu. Anchor-jumps, if needed, are a single line of small slab-serif caps at the very top of the document: ☉ ANNULAR · ☽ PHASES · ♃ LEDGER · ♄ CODA, with 0.5em spaces between sigil-glyph and word, and Brass-Hairline underscoring beneath each on hover. Nothing more. **SVG is a first-class language here.** Every line — the annular ring's notches, the ledger seam, the seven flower engravings, the precedent-timeline path, the corner registration marks — is hand-authored SVG, not Lottie, not icon-font. The botanical illustrations should each be a 480-line `` element (with a few `` groupings for stem/leaf/petal) authored by tracing a Redouté reference, then simplified to under 4kb gzipped per flower. The aesthetic insists on *handmade vector authority*. **Path-draw-svg is the signature animation, used sparingly.** It is reserved for: the solar-arc (on load), the seven flower stems (on Phase Strip enter), the precedent-timeline connecting lines (on scroll past 60%), and the long horizontal underscoring beneath the *DECLARATION* heading (on load, 350ms after solar-arc completes). It is **not** used for borders, hover states, or decorative flourishes. When path-draw is used, it should feel like *a hand inking a fresh page* — slow, deliberate, never spring-easing. **Reject CTA-first patterns. Reject pricing tiles. Reject "stat-grids."** There is no signup form, no testimonial carousel, no "what our customers say." The site is a *stated artifact*: a daily declaration. The closest thing to a call-to-action is a single line at the very bottom — "TO RECEIVE THE DAY: ✶" — followed by a 1px-stroke email field with no fill, no border-radius, no submit button styling other than slab-serif "ENROLL" in vermillion. **Type everything with care.** Slab-serif at body sizes is unusual on the modern web; do not let line-height collapse below 1.7. Maintain measure between 56 and 68 characters. Allow hyphenation in the ledger spread but **disable** it in the hero declaration (which must always break on word boundaries to preserve its declarative cadence). Use OpenType `lnum` (lining figures) for all numerals, never `onum`, because this is mid-century-modern, not Victorian. **Bias toward immersive scroll.** The page's vertical journey, from the Annular Hero through the Phase Strip and Ledger Spread to the Coronal Footer, must feel like reading an almanac cover-to-cover in a single sitting — about 2400px on desktop. Each zone is full-viewport-tall; the visitor scrolls from one celestial chamber to the next, with the cream-colored page acting as the connective tissue. **Cursor-follow only on the hero, only barely.** No cursor-follow effects elsewhere. The annular hero responds to mouse position with a 2° max parallax tilt of the inner reserve text — slow enough that visitors *notice the calmness*, not the effect. On touch devices, the tilt is replaced by a 3° device-orientation parallax with a 1.4s smoothing window. **Storytelling is paramount.** Every label should be a *small declaration*: not "Forecast" but "FORECAST FOR THIS DAY"; not "Signup" but "TO RECEIVE THE DAY"; not "About" but "ON THE NATURE OF THIS ALMANAC." The voice is the heart of the experience. Authority through specificity. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **"Dashboard" reinterpreted as a 1968 planetarium control panel — not as a SaaS analytics view.** Frequency analysis shows dashboard at 74% across the registry, but virtually all instances render it as card-grids, KPI tiles, or sidebar+main layouts. naru.day takes the *literal* meaning of "dashboard" — the instrument-cluster on a vehicle's panel — and renders it as an annular instrument with stamped zone-labels, ledger spread, and coronal footer. There are no tiles anywhere. This is a structural, not stylistic, divergence. 2. **Floricelestial correspondence as invented mythology.** No other registered design pairs seven botanical engravings with seven planetary sigils to encode the days of the week into a single coherent symbolic system. Most botanical-illustration sites in the registry (6% frequency) use florals as backdrop or decoration. naru.day makes them *signage*: each flower means something specific within the site's invented cosmology, and that meaning is consistent across every reference. 3. **Slab-serif at body size, on cream paper, with iron-gall ink — refusing the mono-typography monoculture.** Frequency shows mono at 81% — the registry's overwhelming default. naru.day uses *Roboto Slab* at 17px for body, paired with Zilla Slab Highlight as stamp-display and Big Shoulders Inline as numerals. Three slab-serif flavors, no monospace, no humanist sans, no grotesk. The site reads as *printed*, not *typed*. 4. **Solar-arc SVG path-draw on load is the only motion ceremony — no parallax, no stagger, no scroll-triggered cascade.** Frequency shows parallax at 77% and stagger at 68%; naru.day uses neither. The signature animation is a single 700ms path-draw of the day's solar trajectory, performed once, on page load. After that, the page is *still*, except for a barely-perceptible ±2° hero parallax and the precedent-timeline lines drawing themselves in once. Movement is rare and meaningful. 5. **Sunset-warm palette anchored by Iron Gall Ink (#3E2C1F), not black.** Frequency shows warm at 80% but most warm palettes default to off-white-on-charcoal or cream-on-black; naru.day refuses pure black entirely, substituting iron-gall brown-black to maintain the *printed-on-paper* illusion. The vermillion stamp accent (#B83A1A) covers under 2% of page area and is reserved for stamp-labels and peak-hour callouts — discipline rare in the registry. 6. **Authoritative tone delivered through declarative voice, not corporate language.** Frequency shows authoritative at 48% — common — but most instances express it through "trusted," "enterprise-grade," "industry-leading" copy. naru.day's authority is *station-master authority*: imperative-passive headlines, Latin date designations (*DIES MMVI · CXLII*), small slab-caps zone labels enclosed in stamp-ovals. The voice belongs to a 1968 Japanese government almanac editor, not a 2025 SaaS marketing director. **Chosen seed/style:** *aesthetic: retro-futuristic, layout: dashboard, typography: slab-serif, palette: sunset-warm, patterns: path-draw-svg, imagery: botanical-illustration, motifs: star-celestial, tone: authoritative.* **Avoided patterns referenced from frequency analysis:** hand-drawn aesthetic (75%), photography imagery (80%), gradient palette (81%), mono typography (81%), parallax patterns (77%), stagger patterns (68%), card-grid layout (50%), centered layout (59%), full-bleed CTA hero (47%) — all explicitly refused or deeply re-interpreted in naru.day's structural choices.