# Design Language for shinonome.stream ## Aesthetics and Tone shinonome.stream is **the eleven minutes before sunrise, rendered as a website you scroll through in real time**. *Shinonome* (東雲) is the old Japanese word for the faint banded light that streaks the eastern sky at daybreak — not the sun itself, but the rumor of it. This site treats that interval as a place. It is a **japanese-zen portfolio** in the truest sense: a near-empty room facing east, a single low table, a paper screen, and the slow chromatic event of dawn doing all the work that other sites assign to gradients-as-decoration. Here the gradient is not an ornament — it is the *subject*. The whole page is one continuous atmospheric wash that crawls from cold indigo through ash-violet through the pale apricot of "shinonome-iro" (東雲色, the traditional dye name, a muted rosy dawn-orange) as you descend, the way the actual sky does. The tone is **zen-contemplative**, almost monastic: long held silences, generous *ma* (間, the charged interval of nothing), text that arrives one quiet line at a time and is allowed to just sit there. There is no urgency, no conversion funnel, no exclamation point anywhere in the type. The mood is the specific lucid stillness of being awake before everyone else — slightly cold, slightly holy, watching the dark thin out. Inspiration: Hasui Kawase's dawn woodblock prints; Hiroshi Sugimoto's *Seascapes* at their dimmest; the paper-and-shadow logic of a shoin-zukuri tea room; the way condensation beads on a single blade of grass when light first touches it. Restraint as luxury. The user is not a customer — they are someone who got up early on purpose. ## Layout Motifs and Structure The page is **one vertical column, off-center, hugging the right third of the viewport** — like a hanging scroll (*kakemono*) pinned to the east wall, deliberately not centered, because dawn does not happen in the middle of the sky. The left two-thirds is **near-empty atmospheric field**: the dawn-wash gradient, a few drifting horizon bands, occasionally a single thin SVG line representing the meeting of land and sky. This asymmetric, *ma*-heavy composition is the structural commitment — `ma-negative-space` sits at 16% and `asymmetric` at 42%, but the **combination of the two driven entirely by a real horizon metaphor** is rare in the corpus, and full-bleed-centered (the 86%/80% default pairing) is explicitly refused. Structure as a **single uninterrupted scroll = a single sunrise**, roughly seven "stations" of light, each one a held composition with enormous breathing room between: 1. **Yoake-mae (夜明け前 — before dawn).** Full-viewport indigo so dark it is almost black; the wordmark "shinonome" set tiny in the lower-right, barely legible, the way you can barely see anything yet. A single horizontal hairline far down the field: the horizon. Scroll-hint: one slow vertical stroke being drawn downward. 2. **Hitosuji (一筋 — a single streak).** The first band of lighter color appears low on the left field. One line of text in the right column, vertically set (tategaki) where the type tool allows, otherwise horizontal: a fragment, a held breath. 3. **Akatsuki (暁 — the deepening).** The wash has climbed to ash-violet; two or three horizon bands now, parallax-drifting at different rates. The column carries a short passage — never more than three lines visible at once. 4. **Shinonome (東雲 — the streaked sky, the namesake).** The center of the experience: the wash reaches its rosy shinonome-iro; faint SVG "cloud-streaks" (thin elongated lozenges) lie along the horizon, each rendered as a hairline-stroked, near-transparent shape. The wordmark, which has been creeping up the page, is now legible for the first time. 5. **Akebono (曙 — broadening light).** Pale gold enters at the very bottom of the left field. The column lists — quietly, no bullets, just stacked lines with wide leading — whatever this site *is* (a stream, a journal, a portfolio of mornings; the implementation decides, but it is presented as a list of quiet observations, never a feature grid). 6. **Asaborake (朝朗け — clear morning beginning).** The whole field lightens toward a washed warm-paper tone; the horizon lines fade because in full light you stop noticing the horizon. A single line of text: a closing thought. 7. **Hi (日 — day).** The page bottoms out on a near-white warm paper field; the wordmark sits where a sun would, small, no glow, just present. One thin line — a contact gesture, or nothing at all. The scroll ends the way a sunrise ends: not with a bang, just with it being morning now. No sticky nav. No footer columns. No card grid anywhere — `card-grid` (92%) is the single most refused pattern in this design. Section "boundaries" do not exist; the wash is continuous, so the stations are felt as changes in *light*, not as blocks. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Wordmark — *Shippori Mincho B1* (weights 400 & 600).** A Japanese serif (mincho) with crisp, slightly austere brush-derived terminals — it carries Latin glyphs that share the same calligraphic restraint. The wordmark "shinonome" is set in this, lowercase, very wide letter-spacing (0.4em → 0.6em as it ascends the page), starting at 18px and growing only to about 64px by the final station. It is never bold-bold; 600 at most, and only at the very end. - **Body / Passages — *Zen Maru Gothic* (weights 300 & 400)** — wait, no: **body uses *Shippori Mincho B1* 400 as well**, for unity, but at generous size (19–22px) with line-height 2.0 (the *ma* extends into the leading). If a second voice is wanted for the smallest captions and the date-stamps, use **_Zen Kaku Gothic New_ (weight 300)**, a quiet humanist sans, set at 13px, tracked wide — but used sparingly, for the kind of marginalia you'd write in pencil. - **Romanized accents / the small kanji-romaji pairs ("暁 akatsuki") — *Zen Kaku Gothic New* 300**, kanji glyph slightly larger than the romaji that trails it, baseline-aligned, a hairline of space between. `serif-revival` is at 16% and `mono` dominates typography at 94% — this design is **deliberately mono-free**; not one monospace character appears, which is itself a quiet act of defiance in this corpus. **Palette — the dawn wash, in order of descent (these are the gradient stops):** - `#0E1326` — *yoake-mae*, the indigo-black before dawn (top of page) - `#1C2240` — deep night-blue, lifting - `#3A3759` — ash-violet, the sky beginning to bruise toward light - `#6E5A6E` — dusty mauve, the in-between - `#C98B7E` — **shinonome-iro**, the traditional muted rosy dawn-orange (the namesake stop, the visual heart) - `#E8C6A6` — pale warm apricot, akebono - `#F4E9DC` — washed warm paper, full morning (bottom of page) **Accent / ink colors (used only for type and hairlines):** - `#F2EDE4` — "morning-white" text on the dark upper field (never pure #FFFFFF — dawn has no pure white) - `#2A2230` — "sumi-faint" text on the light lower field (never pure black — a soft ink-stick gray-violet) - `#B5704F` — a single warm rust used *once*, for the namesake kanji 東雲 at station 4, and nowhere else The whole palette is `warm`-leaning and `gradient`-built (matching the 98%/94% norms) but the **monotone-walk through seven named traditional-dye stops, top-to-bottom, as the literal page background**, rather than a contained hero gradient, is the differentiator. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration.** `photography` is at 98% in the corpus; this site has zero photographs, by principle — a sunrise photograph is a stopped sunrise, and this site wants the live one. Every visual element is **SVG or pure CSS**, hairline-thin, low-opacity, brush-suggestive. The motif vocabulary, all custom-built: - **The horizon line(s).** One to four perfectly horizontal hairlines (0.75px, stroke `#F2EDE4` at 8–20% opacity on the dark field, `#2A2230` at low opacity on the light field), spanning the empty left field, parallax-drifting at staggered rates. They thin and fade as the page lightens. This is the spine of the imagery. - **Cloud-streaks (東雲 made literal).** At station 4 only: three to five very long, very thin lozenges (elongated ellipses, 1px hairline stroke, fill at ≤6% opacity) lying parallel along the horizon, each at a microscopic tilt (1–3°), like the actual banded clouds of daybreak. They drift left at glacial speed. - **The dew-bead.** Exactly one small circle, ~6px, near the bottom-left, that catches a tiny radial highlight when the page reaches the apricot stops — the single moment of "shine" in the entire design, and it is the size of a grain of rice. (`lens-flare` is at 5%; this is the anti-lens-flare.) - **The single brushstroke.** The scroll-progress indicator is one vertical sumi stroke down the far-right edge, drawn via `path-draw-svg` as you descend — tapered at both ends like a real brush lift, ink-dark on the dark field, fading to a ghost on the light field. It is the only "UI" element on the page. - **Tategaki fragments.** Where a fragment of text can be set vertically (Japanese vertical writing), it is — a single column of glyphs reading top-to-bottom, occupying a thin strip, surrounded by void. Rare, deliberate, scroll-paced. Decorative pattern: **none.** No grain overlay, no noise texture, no mesh — the gradient must be *clean*, banded only by the natural sky-bands of the horizon lines. The cleanliness is the texture. ## Prompts for Implementation Build shinonome.stream as **one HTML file, one CSS file, one small JS module — a single vertical scroll that is, start to finish, one eleven-minute sunrise**. The page is tall (≈700–900vh). There is **no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no feature cards** — there is the wash, the column, the horizon, and seven held stations of light. **The dawn-wash background (the core mechanic):** - The `` (or a fixed full-viewport `
` behind everything) carries a vertical `linear-gradient` through the seven named stops above, but the *effect* of descent is achieved by translating the gradient or shifting `background-position` so that whatever stop "you are at" fills the viewport. Equivalent: a tall absolutely-positioned gradient panel that scrolls slightly slower than content (gentle parallax) so the light "rises to meet you." - Use `prefers-reduced-motion` to drop the parallax and simply tie gradient-position to scroll-position directly. The light still moves; nothing leaps. - `mix-blend-mode` on the text layers: morning-white text uses `screen`-adjacent behavior on the dark field, sumi-faint uses `multiply`-adjacent on the light field, so the type always reads as *light through paper* rather than ink stamped on top. **Motion language — `fade-reveal` + `stagger`, nothing springy.** Text lines enter via opacity 0→1 over 1.6–2.4s with a long ease (`cubic-bezier(.2,.6,.2,1)`), one line at a time, staggered by ~600ms. No bounce, no elastic, no magnetic cursor, no tilt-3d, no card-flip — the corpus is saturated with spring/magnetic/cursor-follow (84%/79%/89%); this site uses **none of them**. The cursor is just a cursor. The only "active" animation is the brushstroke scroll-indicator (`path-draw-svg`, tied to scroll) and the imperceptible left-drift of the cloud-streaks (~2px/sec). **Storytelling, station by station:** 1. *Yoake-mae* — open in near-black indigo, viewport-filling, almost nothing visible; wordmark a faint whisper lower-right; one horizon hairline far down. A single vertical stroke begins drawing as the scroll-hint. 2. *Hitosuji* — first lighter band rises into the left field; one line of text fades in, in the right column. Hold. 3. *Akatsuki* — wash at ash-violet; two-three horizon lines parallax-drifting; a three-line passage arrives, staggered. 4. *Shinonome* (the namesake, the peak) — wash reaches rosy shinonome-iro `#C98B7E`; cloud-streaks lie along the horizon; the kanji 東雲 appears once, in the lone rust `#B5704F`, with its romaji "shinonome" trailing in Zen Kaku Gothic New 300; the wordmark is fully legible now for the first time. 5. *Akebono* — pale apricot enters at the bottom; the column lists, as quiet stacked lines with 2.0 leading, whatever this stream *contains* — presented as observations, never as a feature grid, never with bullets or icons. 6. *Asaborake* — field lightens to warm paper; horizon lines fade out (in full light you stop seeing the horizon); one closing line. 7. *Hi* — bottom of page is near-white warm paper `#F4E9DC`; the wordmark rests where a sun would, small, glow-less; the dew-bead catches its single rice-grain highlight; one thin hairline below, perhaps a contact gesture, perhaps nothing. The scroll just... ends. It is morning. Type is set large and slow; line-height 2.0; letter-spacing on the wordmark widens as it ascends. Lowercase throughout for Latin; kanji where it earns its place. The whole thing should feel less like a website and more like **watching a slow, certain, undramatic miracle** — the kind that happens every day whether anyone watches or not. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **The background gradient *is* the content, walking seven named traditional Japanese dawn-dye colors top-to-bottom as the literal scroll-length sky.** `gradient` palettes are at 94% — but used as decoration, contained in heroes and meshes. Here the gradient is the entire architecture and follows a real chromatic event (real *shinonome-iro*, real *akatsuki*, real *akebono*); the page's height *is* the sky's height. That structural use is, in this corpus, singular. 2. **Zero photography, zero monospace, zero card-grid — three of the corpus's top patterns (98% / 94% / 92%) all refused at once.** Most designs refuse one popular thing; this refuses the three most popular things simultaneously and replaces them with hairline SVG horizons, mincho serif, and a single off-center scroll-column. 3. **The motion budget is almost zero on purpose.** Spring (84%), magnetic (79%), cursor-follow (89%) — this design uses none of them. The only animations are a brush-tapered scroll-indicator and a ~2px/sec cloud drift. Stillness as the active choice, in a corpus where stillness is rare. 4. **Asymmetric right-third "kakemono" column over an empty atmospheric left field, justified by the dawn-doesn't-happen-in-the-middle metaphor** — `asymmetric` (42%) and `ma-negative-space` (16%) exist separately; their combination grounded in a hanging-scroll-facing-east logic is not seen elsewhere. 5. **Tategaki (vertical Japanese text) fragments and kanji-romaji pairs used as compositional elements** in a surrounding void — east-Asian typographic practice treated as layout primitive, not as exotic flavor. Chosen seed/style: **japanese zen portfolio** (aesthetic: zen / japanese-minimal · layout: ma-negative-space + asymmetric · typography: serif-revival, mincho · palette: muted warm "shinonome-iro" dawn-walk gradient · patterns: fade-reveal + path-draw-svg only · imagery: minimal hairline SVG, no photography · motifs: horizon-line, candle-less atmospheric dawn · tone: zen-contemplative). Avoided patterns from the frequency analysis: `card-grid` (92%), `photography` (98%), `mono` typography (94%), `glassmorphism` (83%), `hand-drawn` (94%), `spring` (84%), `cursor-follow` (89%), `magnetic` (79%), `tilt-3d` (30%), `parallax`-as-spectacle, `full-bleed`+`centered` default pairing, `grain-overlay`/`noise-texture`, and all CTA/pricing/stat-grid/testimonial structures.