# Design Language for sora.day ## Aesthetics and Tone sora.day is **a quiet meteorological diary kept by someone who has spent their whole life looking up** — "sora" is the Japanese word for *sky*, and this site treats a single day's sky as the only subject worth a website. The aesthetic is **ethereal sky-study filtered through a zen-contemplative patience**: not the saturated lens-flare "ethereal" of most corpora entries (gradient-mesh blobs over a hero CTA), but the pale, almost-bleached luminosity of looking at the troposphere through a north-facing window for twelve hours straight. Think of the colour-field paintings of Agnes Martin if she had been a cloud-spotter; think of the *Nuage* plates in a 19th-century French sky atlas; think of the moment in a long-exposure timelapse where the gradient between two cloud layers is so slow you can't tell if anything is moving. The tone is **unhurried, slightly devotional, and entirely uninterested in selling anything**. No urgency, no exclamation, no "join 10,000 sky-watchers." Just the sky, named carefully — cumulus humilis, altostratus translucidus, the green flash, the Belt of Venus — and rendered in light so soft it feels like the page is lit from behind frosted vellum rather than a backlight. Every transition is the speed of weather: a cloud edge dissolving, dawn bleeding into day, day cooling into the blue hour. Where most "ethereal" sites reach for chrome and neon-glow, sora.day reaches for **haze, diffusion, and the specific desaturation of midday overcast**. ## Layout Motifs and Structure The spine of the page is a **single vertical timeline-vertical column running from pre-dawn (top) to deep night (bottom)** — the entire scroll *is* one day, top to bottom, and the background gradient of the whole document shifts continuously through the 24-hour sky as you descend. (Timeline-vertical sits at only 6% in the frequency analysis; sora.day takes the format literally — not a résumé timeline but an actual diurnal arc.) - **The Sky Strip.** The left ~14vw of the viewport is a fixed, full-height vertical band — the "sky strip" — whose colour at any scroll position is the colour of the sky at that hour. It never scrolls; it is repainted by scroll progress. A thin hairline (1px, `#9CB4C8`) and a small floating time label ("06:14", "13:02", "21:40") ride along it like a sundial gnomon's shadow. - **The Field.** The remaining width is the reading field — **ma-negative-space pushed to an extreme**: each "entry" (a named cloud, a named light phenomenon, a fragment of sky lore) occupies its own full-viewport-height panel with the text set small and low, weighted toward the bottom-left corner, the upper two-thirds left **empty on purpose** so the eye does what eyes do under an open sky: drift up into nothing. - **Stratified bands, not cards.** Where a card-grid would chop content into equal tiles, sora.day uses **horizontal cloud-layer bands** — soft-edged horizontal zones of slightly different luminosity stacked like real atmospheric strata (boundary layer, free troposphere, tropopause). Content lives *between* the bands, never inside a bordered box. There is not a single hard rectangle, drop-shadow card, or border-radius pill anywhere in the layout. - **No nav bar.** A vertical list of hours (the "table of contents") fades in at the far right only when the cursor rests near that edge; otherwise the page is chromeless. No header, no footer logo-bar, no breadcrumb. - **The Zenith Moment.** At true solar noon — roughly the page's vertical midpoint — the layout briefly **centers**: one panel, the lightest of the whole document (`#F2F6F9`), with a single line of text dead-centre. It's the only centered panel on the page, and it lands like a held breath. ## Typography and Palette **Fonts (Google Fonts only — a garamond-classic body voice paired with one airy grotesque for labels, never blended):** - **Body & Lore — *EB Garamond* (regular 400, italic 400, medium 500)** — Used for every passage of sky-writing, every cloud description, every fragment of lore. EB Garamond is chosen for its low contrast and humane, slightly old-book texture — it reads like a field naturalist's journal, not a tech blog. Set generously: 19–22px, line-height 1.85, measure capped at 58ch, colour `#33444F` (a soft slate, never pure black). Italics carry the Latin cloud names (*cirrus uncinus*, *mammatus*). - **Time Labels, Hour-TOC, Captions — *Jost* (light 300, regular 400)** — A clean geometric-humanist sans (a faithful Futura descendant on Google Fonts) used *only* for numerals and short metadata: the floating clock on the sky strip, the hour list, the tiny "alt. ~2,000 m" altitude tags. Always uppercase for the TOC, always tracked +0.18em, always small (11–14px), always in `#7C93A4`. - **The single Display moment — *EB Garamond* at 500, optical-large, ~clamp(2.6rem, 6vw, 4.4rem)** — used exactly twice: the wordmark "sora.day" at the very top (pre-dawn, barely visible against `#0E1722`) and the noon line at the Zenith Moment. No bold-display face, no oversized grotesque banner. The biggest type on the site is still a book serif. **Palette — the diurnal sky, sampled at eight hours (every colour is something you could actually photograph by looking up):** - `#0E1722` — *astronomical twilight* — the near-black blue at the very top of the page, behind the wordmark. - `#2E4A63` — *nautical dawn* — deep dusty blue, the sky strip's colour in the first scroll-third. - `#8FB0C4` — *civil morning* — the pale working blue of a clear 9 a.m. - `#C9D8E1` — *high overcast* — the desaturated pearl-grey that dominates the midsection (the "default" page tone). - `#F2F6F9` — *zenith white* — almost-paper, the lightest panel, reserved for solar noon. - `#E7C9A6` — *Belt of Venus / golden hour* — warm sand glow entering the lower third. - `#B5728A` — *afterglow* — the muted dusty-rose of a fading sunset, used sparingly as an accent and link colour. - `#1A2735` — *deep night* — the blue-black the page settles into at the bottom, before a hairline horizon ends it. Text colours: body `#33444F`, metadata `#7C93A4`, hairlines `#9CB4C8`, links/afterglow accent `#B5728A` (with a 1px dotted underline in the same hue that draws itself on hover). ## Imagery and Motifs **No photography, no 3D renders, no stock illustration, no hand-drawn doodles.** Every visual is CSS gradient or inline SVG — because the sky itself is, fundamentally, a gradient that occasionally grows texture. - **Cloud forms as soft SVG.** Each named cloud type gets one **diffuse, blurred SVG silhouette** — not a cartoon cloud-puff but a `feGaussianBlur`-softened organic mass with no outline, sitting low and large behind its panel's text at 12–22% opacity. Cumulus = compact heaped lobes; cirrus = thin combed streaks; stratus = a single horizontal smear; nimbostratus = a heavy grey ceiling fading into the band above. Built from 3–6 overlapping ellipses per cloud, never reused. - **Atmospheric optics, drawn as pure gradients.** The "phenomena" entries (halo, sundog, crepuscular rays, green flash, Belt of Venus, noctilucent cloud) are rendered as **radial / conic / linear CSS gradients only** — a 22° halo is a faint conic ring; crepuscular rays are a set of low-opacity skewed linear-gradient wedges fanning from one corner; the green flash is a single 0.4s sliver of `#7FB89A` at one panel's horizon. (This is gradient-mesh territory — 17% in the corpus — but used as *meteorology*, not as a generic hero-blob backdrop.) - **The horizon hairline.** A recurring motif: a single 1px line across the full field width at the *bottom* of certain panels — the horizon. It's the only "edge" allowed. At the very end of the page it's drawn last, slowly, left to right, and the page just stops above it. - **Star-celestial trace, once.** In the final night band, a sparse scatter of 1–2px dots and one barely-visible SVG path-draw arc (a meteor / the ecliptic) — drawn once, never looped, never twinkling. (Star-celestial is at 5%; here it's a single restrained gesture, not a particle field.) - **The gnomon shadow.** On the fixed sky strip, a thin soft-edged dark wedge whose angle rotates with scroll progress — a sundial shadow tracking the implied sun. The only element that "rotates" on the whole site, and it does so imperceptibly slowly. - **Beaufort & altitude tags.** Tiny Jost metadata tags ("F2 light breeze", "alt. ~6,000 m", "12:48") float near each cloud like a naturalist's pencil annotations — the only "data" on the page, and deliberately almost too small to read. ## Prompts for Implementation Build sora.day as **a single-route, vertically scrolled "one day of sky"** — one HTML file, one CSS file, one small JS module. The scroll position maps linearly to the hours of a day; the document's background and the fixed sky strip are repainted continuously from that progress. There is **no CTA, no pricing block, no stat-grid, no testimonial row, no feature cards, no signup, no contact form**. There is only the descent from pre-dawn to deep night, and the named sky along the way. **Storytelling structure (one long vertical day, top → bottom):** 1. **Astronomical twilight (page top).** Near-black `#0E1722`. The wordmark "sora.day" in EB Garamond, low-opacity, slightly tracked, alone in the dark. One Jost line beneath: "a record of one day's sky." Scroll cue: a single dim time label "04:50" on the sky strip. 2. **Nautical & civil dawn.** The background blues lighten band by band. First lore fragment, set small and low-left: the origin of the word "dawn", the Belt of Venus rising in the *anti-solar* west. A diffuse SVG of low stratus fog hugging the field's bottom. 3. **Early morning — first clouds.** Cumulus humilis ("fair-weather clouds"): a compact blurred SVG mass behind a paragraph on convection, thermals, why these clouds vanish by evening. Altitude tag "alt. ~1,200 m". Background now `#8FB0C4`. 4. **Mid-morning — cirrus.** Thin combed SVG streaks; text on ice crystals at 8 km, on "mares' tails", on cirrus as a weather omen. A faint conic-gradient 22° halo ghosts across the panel. 5. **Late morning — building cumulus / the halo.** Bigger heaped SVG lobes; a sundog (parhelion) rendered as two soft bright gradient spots flanking an implied sun. Beaufort tag "F3 gentle breeze". 6. **Solar noon — the Zenith Moment.** The one centered panel. Lightest tone `#F2F6F9`. A single EB Garamond line, large, dead-centre — something like: *"Directly overhead, the sky is always its deepest blue. No one is ever looking there."* Hold. Whitespace above and below. Then continue. 7. **Early afternoon — overcast / nimbostratus.** The page greys down to `#C9D8E1`/darker; a heavy featureless SVG ceiling; text on stratiform cloud, on the particular flat light of an overcast day, on petrichor. Maybe a few CSS-only "rain" hairlines slanting through, very faint. 8. **Late afternoon — clearing, crepuscular rays.** Skewed low-opacity linear-gradient wedges fan from the upper corner; text on "Jacob's ladder", on Tyndall scattering. Background warms toward `#E7C9A6`. 9. **Golden hour & the Belt of Venus.** The afterglow accent `#B5728A` enters; lore on the pink band and the dark "Earth's shadow" beneath it rising in the east; the single 0.4s green-flash sliver at this panel's horizon hairline. 10. **Civil dusk & the blue hour.** Cooling to `#2E4A63`; noctilucent clouds as the faintest electric-blue gradient high in the panel; text on why the blue hour is a real photographic term. 11. **Night (page bottom).** `#1A2735`. Sparse star dots; one slow path-draw meteor arc; a final short EB Garamond line. The horizon hairline draws itself left → right beneath everything. The page ends there — no footer, no "back to top", just the line and the dark. **Animation & interaction (everything moves at the speed of weather):** - **Scroll-driven gradient.** The `` background and the fixed `.sky-strip` interpolate between the eight palette stops based on `scrollYProgress`. Use `requestAnimationFrame`, ease everything, never snap. - **blur-focus reveals.** Each panel's text and cloud SVG arrive via a `filter: blur(8px) → blur(0)` + opacity fade as it enters the viewport — clouds *condensing into focus*, not sliding in. Generous thresholds; nothing pops. - **The gnomon.** A `transform: rotate()` on the sky-strip shadow wedge, mapped to scroll progress over a small arc (~−20deg → +20deg) — barely perceptible. - **path-draw-svg, used twice only:** the night meteor arc, and the final horizon hairline. `stroke-dasharray` reveal, slow, once, no loop. - **Hour-TOC.** On `mouseenter` near the right edge, a vertical Jost list of hours fades in; clicking one smooth-scrolls (long duration, soft ease) to that panel. Fades out when the cursor leaves. This is the *only* navigation. - **No cursor-follow blob, no magnetic buttons, no tilt-3d cards, no parallax-stack of layers, no counter animations, no typewriter.** Restraint is the brief. If a motion would draw attention to *itself* rather than to the sky, it doesn't ship. - **prefers-reduced-motion:** the gradient becomes a few discrete steps, blur-reveals become plain fades, path-draws appear instantly. The page still reads as a day. **Build notes:** semantic single `
` with `
` per hour; all clouds and optics are inline `` or CSS gradients (zero raster assets); EB Garamond + Jost loaded from Google Fonts with `display=swap`; the whole thing should weigh almost nothing and feel like looking out a window. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **The scroll *is* a literal day.** Timeline-vertical sits at 6% in the corpus and is almost always used as a CV/process timeline. sora.day makes the vertical axis an actual 24-hour diurnal arc — background, sky strip, gnomon shadow, and content all driven by one "hour" progress variable. No other site in the corpus equates scroll-depth with time-of-day. 2. **"Ethereal" without chrome, neon, or hero-blobs.** The ethereal aesthetic (3%) almost always means glossy gradient-mesh + lens-flare + neon-glow over a CTA. sora.day's ethereal is *meteorological desaturation* — pale overcast pearl `#C9D8E1`, no chrome, no neon, no glass panels — a chromatic recontextualization of the style. 3. **A book serif is the loudest type on the page.** Against a corpus where 94% of designs lean on mono and the "big" face is almost always a grotesque or display-bold, sora.day's largest type is EB Garamond at weight 500. There is no display sans, no oversized grotesque banner. Garamond-classic typography is ~3% in the analysis. 4. **Zero hard rectangles, zero cards, zero cursor-blob.** Card-grid (92%), cursor-follow (89%), and parallax (89%) are corpus near-universals. sora.day uses none: content lives *between* soft horizontal atmospheric bands, navigation is a fade-in hour list, and the only "follow" interaction is the imperceptible sundial shadow. Hand-drawn (94%) and glassmorphism (84%) — the two most overused aesthetics in the entire corpus — are explicitly absent. 5. **The Zenith Moment.** Exactly one centered panel on an otherwise rigorously bottom-left, ma-heavy page — a single held line at solar noon. A structural punctuation mark unique to this design. Chosen seed/style: **aesthetic: ethereal, layout: timeline-vertical, typography: garamond-classic, palette: ethereal-blue, patterns: blur-focus, imagery: gradient-mesh, motifs: aurora-lights, tone: zen-contemplative** — assembled from underused corpus slots (timeline-vertical 6%, ethereal 3%, garamond-classic ~3%, aurora-lights 2%) and deliberately avoiding the saturated hand-drawn / glassmorphism / card-grid / cursor-follow / mono cluster that dominates the frequency analysis.