# Design Language for luminous.day ## Aesthetics and Tone luminous.day is a **circuit-traced sundial** — a meditation on light as a phenomenon that can be measured, timed, and etched into silicon. The domain collapses two registers: the meteorological ("luminous" — of or relating to the emission of light) and the calendrical ("day" — a unit of solar rotation). The aesthetic is **japanese-minimal crossed with the inner face of a printed circuit board**: white space held as carefully as negative space in a Hiroshi Sugimoto seascape, but scored through with fine copper trace-lines at 0.5 px that map the hidden routing of light. Every element earns its position through a discipline of deliberate reduction. The tone is **bold-confident without volume** — the site never shouts, but never hedges. Sentences land like woodblock prints: weight distributed, margins honored, silence treated as content. The overall impression is a Tokyo instrument maker's catalog printed in an edition of 200 and distributed only to friends: rarefied, precise, direct. No decoration that does not carry information. No color that does not carry purpose. The duotone palette enforces this discipline: only two hues are allowed to coexist on any given screen, and those two hues are chosen to evoke the specific quality of light at a particular hour — the warm side for emission, the cool side for reflection. The duotone photographs are printed as if on platinum-coated paper, the halftone grain slightly visible at 200% zoom, reinforcing the sense of physical craft inside a digital medium. Mood references: Kengo Kuma's stone-and-light interiors; the interior circuitry of a vintage Olympus OM-1 exposed under macro photography; a Japanese temple garden photographed at solar noon with a 4x5 large-format camera. ## Layout Motifs and Structure The page is structured as a **bento-box grid** — but a bento with the rigorous proportions of a Muji storage tray rather than the cheerful asymmetry of a restaurant boxed lunch. The grid is built on a **24-column base** at 1440 px, with a 16 px gutter and 48 px outer margin. Cells snap to defined aspect ratios (1:1, 2:1, 1:2, 3:1) so every box is a recognizable shape from a finite vocabulary. **Grid anatomy:** - **Row A (hero strip, 100svh):** A single full-width cell. The circuit-trace animation draws in over 3.2 s from left edge to right edge, a horizontal copper line that then branches into the sub-grid below. The page title appears in the lower-left of this cell, stamped rather than faded in — one frame, on. - **Row B (primary content band):** Three cells in a 1:2:1 ratio across the 24 columns. Left cell is a duotone photograph at 1:1 aspect. Center cell holds the primary text block (max 58 ch line length). Right cell holds a single large circuit-trace motif rendered as an SVG at 100% fill. - **Row C (secondary band):** Four equal 1:1 cells. Each holds one concept, one number, or one phrase. No more. The four cells animate in with a staggered `border-animate` — top border draws left-to-right at 0.6 s, then right border draws top-to-bottom, then bottom, then left, completing the box. Stagger: 120 ms between cells. - **Row D (wide pull-quote strip):** A 3:1 horizontal cell spanning the full grid. White ground. One sentence in display type. The sentence ends with a period, as a paragraph does. - **Row E (footer bento):** Two cells, 1:1 each. Left cell: site navigation as a column of hairline-weight links. Right cell: a small duotone photograph of light on a surface. All cells are separated by 16 px gaps. No cell has a background color — the duotone palette is carried entirely by content inside the cells. The circuit-trace SVG lines that border certain cells are the only decoration on the page container itself. **Spatial logic:** Every cell has a 32 px internal padding. Text never sits flush against a cell edge. The bento grid is not responsive in the typical sense — at mobile, it collapses to a single-column stack with a 16 px margin and cells presented in reading order (A, then B center, then each C cell individually, etc.). ## Typography and Palette **Typography — baskerville-refined, all from Google Fonts.** The typographic system draws from one serif family and one monospace family, used in strict roles that never swap. - **Display (headings, wordmark):** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 700, italic for the wordmark only. Set at `clamp(3.5rem, 8vw, 9rem)` for the hero, `clamp(2rem, 4vw, 4.5rem)` for section heads. Tracking: `-0.015em`. The italic cuts sharply; never used at body size. - **Body:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 400. Line-height `1.72`. Max-width `58ch`. The body text is the same family as the display — no font mixing in the serif register. The visual richness comes from size and weight contrast alone. - **Captions, labels, circuit annotations:** [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono), weight 400, size `0.6875rem` (11 px), tracking `+0.08em`. Used only for: photo captions, grid cell labels (invisible at 1x, visible at 2x — Easter egg for retina users), and the circuit-trace node labels that appear on hover. - **Pull-quote:** Libre Baskerville 400 italic, set at `clamp(1.5rem, 3vw, 2.75rem)`. No quotation marks — the indentation and size separation are the attribution signal. **Palette — duotone, two-hue system.** The page operates in two duotone modes: **Solar** (used from page load) and **Dusk** (invoked by a single `prefers-color-scheme: dark` query or a visible toggle at bottom-right). Solar mode: - `--warm`: `#C8955A` — amber-copper, the color of oxidized PCB traces on a sun-aged board - `--cool`: `#1B2B3A` — deep ink-blue, the shadow inside a circuit channel etched into FR4 - `--ground`: `#F5F0E8` — warm off-white, Japanese washi paper tone - `--trace`: `#A07840` — darker copper for SVG circuit lines - `--text`: `#1B2B3A` — same as cool, for body text - `--caption`: `#8A7560` — warm gray for mono captions Dusk mode: - `--warm`: `#E8A96A` — lit amber on dark ground - `--cool`: `#8FB8D4` — soft blue-gray, circuit board under UV lamp - `--ground`: `#0E1A24` — deep navy-black - `--trace`: `#C8955A` — copper on darkness - `--text`: `#D4C8B8` — warm white - `--caption`: `#6A8A9A` — cool blue-gray All photographs are processed as CSS duotone filters: `sepia(1) saturate(3) hue-rotate(Xdeg)` to map shadows to `--cool` and highlights to `--warm`. The duotone effect is applied live in CSS using `mix-blend-mode: multiply` on a color overlay, so the underlying photograph's structure survives. ## Imagery and Motifs **Imagery — duotone-photo.** All photographic imagery is treated as duotone prints, specifically evoking the appearance of cyanotype or gum bichromate prints: rich in tonal range, slight paper texture visible, slight grain at 150% zoom. Subject matter is strictly one of three categories: 1. **Light on surfaces** — diffraction patterns, caustics on tile, light through shoji screens, shadow lines on a tatami grid. All macro or near-macro. No human subjects. 2. **Electronic texture** — close-up of circuit board traces, solder joints, component leads, copper planes. Shot at f/8 on a copy stand, even lighting, maximum depth of field. 3. **Architectural silence** — corners of Japanese interior rooms, a single beam of sunlight entering a window, a tatami mat edge meeting a wooden threshold. **Motifs — circuit.** The circuit motif is the page's connective tissue. It is never illustrative (no literal PCB diagrams) — it is always abstract: a vocabulary of horizontal and vertical lines that branch at 90-degree angles, connecting to small filled circles (nodes) of 3–6 px radius. Rules: - Lines are drawn in `--trace` color at 0.5 px stroke weight on SVG canvases. - Lines travel only along the x-axis or y-axis — no diagonals, no curves. - Each branch point has a node circle at its center. - Lines and nodes are the only circuit elements — no component outlines, no through-hole symbols, no IC footprints. - The circuit SVGs are placed as background decoration inside the right cell of Row B, and as a full-bleed background layer in the hero (Row A) that animates via `stroke-dashoffset` draw-in. **Border-animate pattern.** The `border-animate` pattern is applied exclusively to the four Row C cells and is implemented as follows: - Each cell has four absolutely-positioned `` elements acting as the four border sides. - Each span is `1 px` thick, colored `--trace`, and animated via `scaleX(0 → 1)` or `scaleY(0 → 1)` with `transform-origin` set to the drawing direction (left for top/bottom edges, top for left/right edges). - The four sides draw in order: top → right → bottom → left, each taking 0.48 s with `ease-out`. The sequence takes 1.92 s per cell. - Cells stagger by 160 ms on scroll-entry (IntersectionObserver, threshold 0.15). **No icons** — the IBM Plex Mono captions and circuit nodes are the only non-typographic small elements. No chevrons, no arrows, no social icons in the primary layout. ## Prompts for Implementation Build luminous.day as a **single contemplative scroll** — a Japanese instrument manual that documents the behavior of light with the same rigor and restraint a watchmaker applies to a movement diagram. Every pixel of the page should feel considered, not composed. The visitor is not being sold something; they are being invited to observe. **Macro structure (top to bottom):** 1. **Hero (Row A, 100svh).** Full-viewport cell. No image — only `--ground` color. The circuit draw-in animation begins immediately on load: a horizontal SVG line enters from the left edge at `top: 62%`, travels to `right: 18%`, then branches into the sub-grid layout below. The wordmark `luminous.day` appears in the lower-left corner at the 3.2 s mark, stamped on in a single frame (no fade, no slide — it is not there, then it is there). Below the wordmark, a single line in IBM Plex Mono: `measuring light since [year]`. 2. **Primary content band (Row B).** Left cell: first duotone photograph (light on surface), cropped to 1:1, CSS duotone applied. Center cell: one paragraph of 80–120 words about the domain concept — precise, declarative, no marketing language. Right cell: the main circuit SVG motif, copper traces on `--ground`, 340 px × 340 px viewBox, 20–24 nodes. 3. **Concept bento (Row C).** Four 1:1 cells. Each cell: one word in display type (Libre Baskerville 700, `5rem`) and one phrase in body type below it. No further decoration — the border-animate is the decoration. Suggested words: `LIGHT`, `CIRCUIT`, `DAY`, `TRACE`. 4. **Pull-quote (Row D, full-width 3:1 strip).** White-ground cell. One sentence, 12–18 words, in Libre Baskerville 400 italic, centered. The sentence should be a factual observation about light, written with the directness of a scientific caption. No author attribution. 5. **Second content band (supplementary).** Mirror of Row B but with the photograph in the right cell and the circuit motif in the left cell. The center cell holds a second text block, 60–80 words. The duotone photograph here should be the electronic-texture subject matter (close-up circuit board). 6. **Footer bento (Row E).** Two 1:1 cells. Left: navigation links in IBM Plex Mono 11 px, column-stacked, `--trace` color, no underlines, `letter-spacing: 0.1em`, all caps. Right: third duotone photograph (architectural silence subject). **Implementation constraints:** - No sticky header. No hamburger menu. No scroll-progress bar. - The mode toggle (Solar / Dusk) is a single `