# Design Language for shinonome.moe ## Aesthetics and Tone shinonome.moe is **the inside of a 2007 desktop wallpaper at the exact minute the sky decides to be blue again**. "Shinonome" (東雲) is the old Japanese word for the band of light at daybreak — the streaky pre-dawn cloud — and this site is built as a Frutiger Aero shrine to that single phenomenon: glossy, humid, hopeful, faintly corporate in the way a 2008 router box was hopeful. The aesthetic is **frutiger aero glossy tech tuned to an optimistic-bright daybreak**, where every surface looks freshly rinsed, every panel has a soft Aqua-style gel highlight running across its top third, and the air itself seems to be made of warm bandwidth. This is deliberately *not* the corpus's default. The frequency analysis shows hand-drawn at 94% and glassmorphism at 83% — frutiger-aero sits at **2%**. So there are no sketchy pencil strokes, no frosted-noise glass cards, no wabi-sabi imperfection. Instead: high-gloss plastic, dewdrops with real refraction, lens flares that aren't ironic, grass blades, koi shadows under glass, and that specific Windows-Vista-meets-Sony-Walkman optimism — the belief, circa 2007, that technology and nature were about to become the same warm thing. The tone is sincere, slightly humid, gently corporate-utopian, and unembarrassed about beauty. It feels like opening a brand-new gadget at 5:40 in the morning with the window open. The mood word is **"dewlit"** — everything beaded, everything catching the first light, everything about to evaporate into a perfectly clear day. ## Layout Motifs and Structure The composition is **organic-flow**, not card-grid (card-grid is at 92% in the corpus; organic-flow at 6%). There is no rectangular grid anywhere on this site. Content lives inside **lozenges, teardrops, and soft-cornered "pebble" panels** that overlap and nest like dew on a leaf — superellipse shapes (`border-radius` pushed past 50% into squircle territory, or actual SVG blob clip-paths) arranged along a meandering vertical S-curve, never aligned to columns. The page reads as **a single slow scroll from deep pre-dawn to full morning** — roughly six "moments," each one a different altitude of the sky: - **The Horizon Band.** The opening viewport is one continuous gradient strip — indigo at the screen bottom, bleeding up through periwinkle to a thin hot line of dawn-cream at the very top. The wordmark "shinonome" floats in the middle of this band inside a glossy gel capsule, with a single fat dewdrop magnifying one letter beneath it. - **The Pebble Stream.** Below the fold, content panels enter as **glossy pebbles drifting up a gentle current** — each pebble is an organic blob, tinted a different shade of sky, with an Aqua highlight arc across its top and a soft drop shadow that suggests it's floating a few millimetres above the page. - **The Grass Line.** A horizon of vector grass blades (the Frutiger Aero signature) runs across one full-width band, with dewdrops clinging to the tips and a koi-shadow gliding underneath as if the whole page sits on shallow water. - **The Bubble Field.** A loose cluster of translucent bubbles of varying sizes, each refracting a tiny upside-down sliver of the page behind it, drifting upward at different speeds. - **The Bright Plateau.** The palette resolves to clear sky-blue and white; panels go nearly transparent, edges go crisp, and the lens flares peak — this is "full morning," the calm after the reveal. - **The Quiet Footer.** A single pebble settling to rest at the bottom of the current, holding the small print, a last dewdrop, and a hairline horizon. **Spatial rules:** nothing is flush-left or flush-right; every panel hangs off the central S-curve at a slightly different offset. Vertical rhythm is generous and watery — lots of breathing space between pebbles so they read as *floating*, not *stacked*. No diagonal section cuts, no hard horizontal seams; transitions between moments are always a gradient melt or a drift of bubbles across the boundary. ## Typography and Palette **Fonts (Google Fonts only — clean, humanist, faintly Frutiger, never handwritten):** - **Display & Wordmark — *Quicksand* (wght 300–700).** Quicksand's perfectly geometric circular bowls and rounded terminals are the closest Google Fonts comes to the soft optimism of 2007 product branding (it has the same "friendly gadget" warmth as the era's logotypes). Used for "shinonome", the six moment-titles, and any oversized number. Set very large, low weight (300–400) for the wordmark so it feels like vapour; tracking opened up generously. - **Body & UI — *Mulish* (wght 400/600).** A clean humanist sans with a slight friendliness — stands in for the Frutiger/Myriad-family neutrality that defined the aesthetic's interface text. Comfortable line-height (~1.7), normal tracking, used for all running copy. - **Accent / micro-labels — *Jost* (wght 400, sometimes italic).** Jost's geometric-but-airy caps are used for tiny eyebrow labels above panels and for the timestamp-style "altitude" markers ("PRE-DAWN · 04:50", "FULL LIGHT · 06:15"), set in small caps with wide letter-spacing. **Palette — ethereal-blue daybreak (8 colors):** - `#0B1E3D` — **Pre-Dawn Indigo** — the deepest sky at screen bottom of the opening band; near-black-blue base. - `#3E5C8A` — **Periwinkle Haze** — mid-sky transition; the dominant tint of the lower pebbles. - `#7FB0DD` — **Morning Sky** — the "true" Frutiger blue; primary surface color for mid-page panels. - `#BFE3F5` — **Dewlight** — pale icy blue for highlights, bubble bodies, and the bright plateau. - `#EAF7FB` — **First Frost** — almost-white wash; page background of the brightest moment. - `#FFE9C2` — **Daybreak Cream** — the thin hot line of actual sunrise; used only as a sliver at the very top of the horizon band and inside lens flares. - `#F4B66A` — **Cloud Underglow** — warm amber edge-light on the undersides of pebbles and bubbles facing the dawn. - `#A8D88B` — **Wet Grass** — the single green note; the vector grass blades and the koi-shadow tint. Gel highlights are always a 60%-opacity white arc fading to transparent; drop shadows are soft, large-radius, low-opacity, and tinted with Periwinkle Haze rather than neutral grey, so shadows look *wet*. ## Imagery and Motifs **All imagery is CSS gradients + SVG. No photography (photography is 98% in the corpus — this site uses 0%), no stock illustration, no hand-drawn marks.** Every visual is the Frutiger Aero vocabulary, rendered crisp and glossy: - **Dewdrops** — the master motif. SVG ellipses with an inner radial-gradient highlight, a bright pinpoint specular dot, and a faint refraction (a tiny scaled-and-flipped copy of whatever is behind them). They cling to grass tips, sit on pebble surfaces, magnify single letters of the wordmark, and one giant hero dewdrop acts as a literal magnifying lens over part of the page. - **Bubbles** — translucent spheres with a thin bright rim, a soft top-left highlight, and a barely-visible upside-down reflection of the page. They drift upward, varying in size from 8px to 200px, never popping — just rising off the top of the viewport. - **Vector grass** — flat, layered blades in two greens (Wet Grass + a darker shade), with gentle per-blade sway. The canonical Frutiger Aero ground line. - **Lens flares** — multi-ring soft glows in Daybreak Cream and white, anchored to where the "sun" would be just above the horizon; sincere, not ironic, with hexagonal ghost-rings trailing toward screen centre. - **Koi shadow** — a single dark blob shaped like a fish, gliding slowly *under* the grass band, as if the page floats on a centimetre of dawn-still water. You never see the koi — only its shadow and the ripple it leaves. - **Gel capsules / pebbles** — the Aqua-button DNA: superellipse panels with a glossy top highlight, a subtle bottom shadow, and an inner glow. These hold all the content. - **Streak clouds (東雲 itself)** — thin horizontal smears of Cloud Underglow and Dewlight, drifting very slowly across the upper third of the page, giving the literal "shinonome" sky-streaks. Decorative connective tissue: a thin meandering "current line" — a faint dotted SVG path tracing the central S-curve, with the occasional bubble bead riding along it between sections. ## Prompts for Implementation Build shinonome.moe as **a single-route, vertically scrolled, six-moment daybreak** — one HTML file, one CSS file, one JS module. Treat the whole page as a ~70-second sunrise: the reader scrolls and the sky lightens around them in real time. **There is no CTA, no pricing block, no stat grid, no testimonial row, no signup form, no feature comparison.** There is only the sky getting brighter and the dew catching it. **Storytelling structure (six moments, vertical scroll, blur-focus transitions):** 1. **Pre-Dawn (The Horizon Band).** Full-viewport indigo→periwinkle→cream gradient. The "shinonome" wordmark fades up out of the dark inside a glossy gel capsule; a giant dewdrop drifts in and settles over one letter, magnifying it. A single thin streak-cloud crosses the top. Tiny micro-label: "東雲 · the light before light". 2. **First Light (The Pebble Stream begins).** As the reader scrolls, pebble panels drift *up* into focus from a soft blur — each one starts blurred and out-of-position, then springs gently into sharp focus and place (blur-focus is at 10% in the corpus; lean into it as the core transition). Each pebble carries one short paragraph of warm, sincere copy about dawn / new mornings / the moe of small bright things. Cloud Underglow amber rims their lower edges. 3. **The Grass Line.** Full-width band: vector grass sways along the bottom, dewdrops on the tips, the koi-shadow glides under. The sky behind has lightened to Morning Sky blue. One pebble floats here holding the "about" text. 4. **The Bubble Field.** A loose drift of bubbles rises through the viewport, each faintly refracting the content behind it. Pebbles here are more translucent. Lens flares begin to appear at the horizon. 5. **Full Light (The Bright Plateau).** Background resolves to First Frost near-white; panels go crisp and nearly clear; lens flares peak in Daybreak Cream; everything is calm and bright. This is the emotional payoff — "the day is here". Generous empty space. 6. **The Quiet Footer.** A single pebble settles to the bottom of the current line holding small print + a last clinging dewdrop + a hairline horizon. The bubbles have all risen off-screen. Stillness. **Motion & interaction:** - **Blur-focus** is the signature: every panel and image enters from `filter: blur(12px)` + slight scale-down + offset, and resolves to `blur(0)` on a soft spring as it scroll-reveals. - **Parallax** the sky gradient, streak-clouds, lens flares, and bubble layers at different scroll speeds so the air has depth. - **Cursor-follow:** the giant hero dewdrop's specular highlight tracks the pointer subtly; bubbles near the cursor drift away from it like they're being gently disturbed. - **Grass sway** and **bubble rise** are continuous, slow, sine-based loops — never random-jittery, always smooth. - **Scroll-linked sky:** the page background gradient interpolates continuously from Pre-Dawn Indigo at scroll 0 to First Frost at the bright plateau, so scrolling literally *is* sunrise. - Respect `prefers-reduced-motion`: freeze the loops, keep the scroll-linked gradient and a single static state per moment. **Tone of copy:** sincere, warm, a little dreamy, micro-poetic — short lines, present tense, about light and water and small bright things. Never salesy, never ironic. The 2007-optimism is genuine. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Frutiger Aero, played straight.** The aesthetic sits at **2%** in the corpus, and against a sea of 94% hand-drawn and 83% glassmorphism this site commits fully to high-gloss 2007 dewdrop-and-grass optimism with zero irony — no glitch, no vaporwave wink, just sincere gel and lens flare. 2. **Zero photography in a 98%-photography corpus.** Every visual is CSS/SVG: refracting dewdrops, rising bubbles, vector grass, hexagonal lens-flare ghosts, a koi-shadow under glass. Nothing photographic, nothing stock. 3. **Organic-flow, no grid at all.** Where 92% of designs use card-grid, this one has no rectangle anywhere — content lives in superellipse pebbles and teardrops strung along a meandering S-curve current. 4. **Scroll *is* sunrise.** The page background gradient is scroll-linked from pre-dawn indigo to full-morning frost, so the act of reading the site is the act of watching daybreak — the literal meaning of 東雲 / shinonome. 5. **Blur-focus as the lead transition** (10% in the corpus, not the default), used to make every panel feel like it's coming into being out of morning haze. 6. **Avoided patterns:** no hand-drawn marks, no frosted glassmorphism, no card-grid, no photography, no diagonal-section cuts, no CTA/pricing/stat-grid blocks, no typewriter-effect. Chosen seed: **frutiger aero glossy tech** — composed as *aesthetic: frutiger-aero, layout: organic-flow, typography: frutiger-clean, palette: ethereal-blue, patterns: blur-focus, imagery: water-bubbles, motifs: aurora-lights, tone: optimistic-bright*.