# Design Language for shinonome.date ## Aesthetics and Tone shinonome.date — 東雲, *shinonome*, the old Japanese word for the faint striped light that rakes across the eastern sky in the last minute before sunrise — is built as **a single horizontal traverse of the dawn**, west to east, from the blue hour into the first gold. The aesthetic is **evolved-minimalism**: not the cold white-space minimalism of a Swiss poster, but a *living* minimalism — almost nothing on screen, yet everything that is there breathes, drifts, and slowly warms. Think of the discipline of a Hiroshi Sugimoto seascape crossed with the chromatic patience of a James Turrell Skyspace, then handed to someone who only had a browser. The mood is **zen-contemplative** — unhurried, almost devotional, the digital equivalent of standing on a cold platform waiting for a train that will arrive exactly when the sun does. The page is a *clock made of color*. It does not tell you the time in numerals; it tells you the time the way the sky does — by how high the band of light has climbed, by whether the horizon has gone from ash to apricot, by whether the single star is still visible. Every visitor arrives at a slightly different point in the dawn depending on the real hour of their visit; the site reads the local clock and seeds the gradient accordingly. At 4 a.m. it is indigo and grain; at 6 a.m. it is rose-gold and nearly silent; at noon it has settled into a pale, washed cerulean that simply waits, patient, for the cycle to come round again. Nothing shouts. The loudest thing on the page is a thin horizontal line of light, and even that is doing its best to be quiet. ## Layout Motifs and Structure The structure is a **horizontal-scroll traverse** (horizontal-scroll sits at only 8% in the frequency analysis — this site claims that long, flat corridor). The page is *one continuous panorama* of the eastern sky, roughly 5 viewport-widths wide, scrolled left-to-right. There is no card grid, no bento box, no hero-dominant stack, no dashboard. There is a **horizon line** — a single hairline of light that runs the entire width of the panorama at a constant vertical position (the lower third, following the photographer's rule), and the whole composition is organized around it: sky above, a darker indistinct mass of land/sea below, the line of *shinonome* light at the seam. - **The five movements of dawn.** As you scroll east, the panorama passes through five named atmospheric states, each occupying roughly one viewport-width: ① *Yoake-mae* (pre-dawn, the blue hour, deepest indigo, the last star), ② *Akatsuki* (the sky pales, the horizon goes the color of cold steel), ③ *Shinonome* itself (the striped light — faint horizontal banding rakes the lower sky), ④ *Akebono* (rose-gold floods up from the seam), ⑤ *Asahi* (the first sliver of true sun, a single warm point of light on the right edge). These are not "sections" with borders; they bleed into one another like a real sky. Section transitions are *gradient crossfades*, never hard cuts. - **Negative space is the sky.** Most of every screen is empty gradient. Text — and there is very little of it — sits in a single vertical column hugging the lower-left of each movement, set small, set quiet, never centered, never large. The eye is meant to rest mostly on emptiness. - **The drifting star.** A single point of light (the morning star, Venus) sits in the upper sky in movement ①. It does not move horizontally with the scroll at the same rate as everything else — it parallaxes *slower*, so as you scroll east it appears to sink toward the horizon, and by movement ④ it has dimmed to nothing. It is the only "navigation landmark." - **Vertical micro-rhythm.** Within each movement, a faint set of horizontal rules — the *shinonome* stripes — sit at irregular intervals in the lower sky, like the banded light itself. They are at maybe 4% opacity. They are the texture of the whole thing. - **No footer in the conventional sense.** The panorama ends at movement ⑤ with the sun half-risen on the right edge; the last few words (a colophon, a single line) float in the warm light there. Scrolling past it gently rubber-bands you back — you cannot leave the dawn, only re-watch it. ## Typography and Palette **Fonts (Google Fonts only — a serif-revival voice, because dawn deserves something with a little age and a little ink in its bones):** - **Display & movement-titles — *Cormorant Garamond* (weight 300, italic for the Japanese-romanized names like *shinonome*, *akebono*).** Set large only once — the wordmark "shinonome" at the far-left edge of movement ① — and otherwise used at modest sizes for the five movement names. Cormorant's high contrast and delicate ball terminals read like cold breath made visible; the light weight keeps it from ever feeling heavy against the empty sky. Letter-spacing slightly open (0.04em). The romanized Japanese names are always lowercase italic. - **Body & captions — *Spectral* (weight 300/400).** A serif built for screens, with a calm, slightly literary cadence. Used for the few sentences of prose that accompany each movement — observations, fragments, almost haiku-adjacent. Set at 15–17px, generous line-height (1.85), measure kept narrow (about 32 characters) so each line is a held breath. - **Numerals & timestamps — *Fragment Mono* (weight 300).** The one mono touch (mono is at 94% in the frequency analysis — this site uses it *only* for the small live UTC/local clock readout in the corner, and for the movement numbers ① ② ③ rendered as `01` `02` `03`). A whisper of the technical, kept to the margins. **Palette — the gradient *is* the design; these are the anchor stops, dawn-ordered (an aurora-gradient sensibility, but a real-sky one, not a neon one):** - `#0A0E27` — *yoake-mae indigo*, the deepest pre-dawn sky, almost black-blue. The background of movement ①. - `#1B2A4A` — *steel-blue*, the sky as it begins to pale. - `#3E4C6D` — *ash*, the indistinct land/sea mass below the horizon line throughout. - `#8A7F8E` — *cold mauve*, the transitional color the whole sky passes through around movement ② — the strange grey-violet of true twilight. - `#D89B7A` — *akebono apricot*, the warm flush rising from the seam in movement ④. - `#F2C9A0` — *shinonome gold*, the pale warm light of the striped band. - `#FBE8D3` — *asahi cream*, the near-white glow around the first sun. - `#FFF7EC` — *first-light*, the brightest point, used only for the rising-sun disc and a few text accents in movement ⑤. - `#E8DCC8` — text on dark sky (warm off-white, never pure `#FFFFFF` — the dawn has no pure white in it). - `#2A2438` — text on warm sky (a deep warm near-black, ink-colored). The transitions between these stops are *long and smooth* — CSS gradients with many intermediate stops, animated at very low speed (a full real-time-linked cycle, or a 6-minute demo loop), so the color is never static but never visibly "moving" either. It drifts the way the sky drifts: you only notice it changed if you look away and look back. ## Imagery and Motifs **No photography, no stock, no 3D renders, no illustration in the usual sense. The imagery is *atmospheric* — generated, gradient-based, and grain-textured.** Everything is light and air. - **The horizon hairline.** 1px (1.5px on retina) of warm light running the full panorama width, with a soft `box-shadow` bloom of `#F2C9A0` at low alpha — this is the literal seam of *shinonome*. It brightens, almost imperceptibly, as you scroll east. - **The shinonome stripes.** Irregularly-spaced horizontal rules in the lower sky, 3–5% opacity, in `#F2C9A0` over dark sections and `#FFF7EC` over warm ones. They are the "banded light." They are SVG ``s with slightly varied lengths and a faint horizontal feather at the ends so they dissolve into the gradient. This is the single repeating decorative motif of the whole site. - **The morning star.** One tiny radial-gradient dot, `#FFF7EC` core fading to transparent, with a 4-point sparkle (a thin SVG cross with feathered ends) — visible in movements ① and ②, fading out by ③. It twinkles on a slow, irregular sine — never a metronome. - **Film grain.** A subtle animated noise overlay (an SVG `feTurbulence` filter or a tiled PNG), maybe 2–3% opacity, animated by jittering its `seed` a few times a second. This is what stops the gradients from looking like flat CSS and makes the sky feel *photographed at dawn on slightly-too-fast film*. - **Atmospheric haze bands.** A few very-low-opacity horizontal blurred rectangles drifting at different parallax speeds near the horizon — the suggestion of low cloud / mist over water. Never defined, never "shapes" — just density variations in the air. - **Optional, far below the horizon:** the faintest silhouette of a flat coastline or rooftops — a single low-contrast SVG path in `#3E4C6D` over `#1B2A4A`, barely a shade different from the mass it sits in. Present, not noticed. No icons. No logos beyond the wordmark. No buttons that look like buttons — the one or two links (colophon, a "begin again" affordance) are underlined text in the body serif, nothing more. ## Prompts for Implementation Build shinonome.date as **a single-route horizontal panorama of the dawn** — one HTML file, one CSS file, one JS module. The visitor scrolls left-to-right (mouse wheel mapped to horizontal translate; touch and keyboard supported; a thin progress hairline at the very bottom shows position) through ~5 viewport-widths of continuously crossfading sky. There is no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email signup, no nav menu. There is only the traverse of dawn and a handful of quiet sentences. **Storytelling structure (five movements, horizontal scroll, gradient crossfades):** 1. **① Yoake-mae (pre-dawn).** Deepest indigo `#0A0E27`. The wordmark "shinonome" in Cormorant Garamond light, far-left, mid-height, fading *in* from black over 3 seconds on load. Below it, three lines of Spectral: a fragment about the last minute of night. The morning star high in the upper-right of this screen, twinkling. Almost no light at the horizon yet — the hairline is barely there. 2. **② Akatsuki (first paling).** The sky lifts toward steel-blue `#1B2A4A`, passing through the cold mauve `#8A7F8E`. The horizon hairline strengthens. Movement title "akatsuki" lowercase italic, lower-left. A line or two of prose. The star sinks and dims. The shinonome stripes begin to be faintly visible in the lower sky. 3. **③ Shinonome (the striped light).** This is the centerpiece. The banded light is at its most visible — the horizontal stripes rake the lower third of the sky in pale gold `#F2C9A0`, irregular, feathered. The sky behind is the strange in-between grey-violet-to-warm. The word "shinonome" appears again here, small, as the movement title — the only repeated word. Prose: the etymology itself, gently — *東雲, the cloud of the east; the woven light.* 4. **④ Akebono (the flush).** Apricot `#D89B7A` floods up from the horizon. The grain is warmest here. The land-mass below is now visibly separate from the sky. Title "akebono." A line of prose about color arriving before warmth does. 5. **⑤ Asahi (first sun).** Cream-to-first-light `#FBE8D3 → #FFF7EC`. On the *right edge* of this final screen, a half-disc of `#FFF7EC` with a soft bloom — the sun's first sliver, half-risen, never fully clearing the edge. The colophon floats in the warm light beside it: one line on who made this, the year, and an underlined "watch it again" that smoothly scrolls you back to ①. Scrolling further rubber-bands you gently back into the gold. **Animation & feel:** - **Real-time-linked gradient.** On load, read `Date()`; map local hour to a position in the dawn-color cycle and offset every gradient stop accordingly, so a 5 a.m. visit looks meaningfully different from an 11 a.m. one. Then let the gradient drift forward continuously at a slow rate (full cycle ≈ 24 min compressed, or genuinely real-time — pick the slower of the two that still feels alive). Use many CSS gradient stops and animate them via a single CSS custom property updated in `requestAnimationFrame`. - **Parallax of light, not of objects.** The star, the haze bands, the coastline silhouette, and the stripe layer each translate at a *fraction* of the scroll rate (star slowest, ~0.3×; stripes ~0.7×; sky background ~1×). This makes the star sink and the horizon "open up" as you move east. - **Easing is everything.** All motion uses long, soft easing (`cubic-bezier(0.22, 0.61, 0.36, 1)` or gentler). Wheel-scroll has inertia/lerp smoothing so the panorama glides rather than jumps — momentum that decays like a held breath. - **Grain animation.** Re-randomize the noise `seed` 6–8×/second at 2–3% opacity. Without this the page looks like flat CSS; with it, it looks like dawn on film. - **Text reveal.** Each movement's prose fades up + 8px rise as it enters the viewport, staggered line-by-line, 120ms apart, very gentle. - **Reduced-motion:** if `prefers-reduced-motion`, freeze the gradient at the load-time hour, kill the grain jitter and the star twinkle, and let scrolling simply pan a static (but still beautiful) panorama. - **Sound (optional, off by default, one tiny toggle in a corner):** a barely-there field recording — distant gulls, faint wind, the hum of an empty platform — that very slowly brightens toward movement ⑤. Never autoplay. **Bias toward the full-screen narrative experience above all.** This is not a website that does a job; it is a place to stand for ninety seconds and watch the light come up. Resist the urge to add anything — no "features" list, no logos, no share buttons. The restraint *is* the design. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Horizontal-scroll as a literal sky-traverse.** Horizontal-scroll sits at only 8% in the layout frequency analysis, and where it exists it's usually a gallery or portfolio carousel. Here the horizontal axis *is* the eastern horizon — scrolling east is scrolling through the dawn — which is, as far as the corpus shows, a unique semantic use of the layout. 2. **No photography in a corpus that is 98% photography.** Imagery here is entirely generated atmosphere — CSS gradients, SVG `feTurbulence` grain, a handful of hairlines and one radial-gradient star. The dawn is *synthesized*, not shot. This alone separates it from nearly the entire corpus. 3. **A clock made of color, not numerals.** The gradient is keyed to the visitor's real local time, so the site is genuinely different at 4 a.m. than at noon — a time-aware ambient piece rather than a static layout. No stat-grid, no counter-animate, no dashboard — the only "data" on screen is the color of the sky. 4. **Evolved-minimalism, not white-space minimalism.** Evolved-minimal sits at ~1% in the aesthetic frequency analysis. Most minimal designs in the corpus are white-and-empty; this one is *dark, warm, grainy, and slowly breathing* — minimal in element count, maximal in atmosphere. 5. **Avoided the dominant patterns deliberately:** no hand-drawn (94%), no glassmorphism (83%), no card-grid (92%), no full-bleed-stack hero (16%+ but the default everywhere), no cursor-follow (89%), no magnetic buttons (79%) — there are essentially no buttons at all. The one nod to the ubiquitous `mono` typeface (94%) is confined to a corner clock readout and the movement numbers. Chosen seed / style: **aesthetic: evolved-minimal, layout: horizontal-scroll, typography: serif-revival, palette: aurora-gradient, patterns: scroll-triggered, imagery: generative-art, motifs: star-celestial, tone: zen-contemplative** — a horizontal traverse of the eastern dawn (*shinonome*, 東雲, "the cloud of the east"), where the gradient is a clock and the only ornament is a thin line of light.