# Design Language for shinonome.moe ## Aesthetics and Tone Cinematic aesthetic in the specific tradition of Wong Kar-wai's "In the Mood for Love," Tarkovsky's "Mirror," Apichatpong Weerasethakul's "Uncle Boonmee" - films where light and motion are the primary characters and dialogue is sparse. The tone is raw-authentic: this site speaks plainly, without spin, without marketing performance. It addresses its visitors as fellow humans rather than potential conversions. Pastel cinematic color grading - the soft pinks and dusty teals of Wong Kar-wai's interiors, the gentle peach-and-mint of Sofia Coppola, the dreamy lilac-and-cream of Lana Del Rey's visual world - applied to full-bleed cinematic compositions. Star-celestial motifs (constellations, faint star fields, the moon, distant nebulae) appear as the unifying visual language. The mood is "a single long-take cinematic scene of someone standing on a balcony at twilight, watching the first stars appear over a quiet city, while a 70mm film projector plays softly behind them." ## Layout Motifs and Structure Full-bleed layout: every section is a 100vw x 100vh cinematic frame with no padding to the edges, content overlaid on lens-flare-treated photographs. Each "moment" (section) is one full viewport - the page is structured like a 7-shot film sequence: title-card, establishing-shot, character-introduction, scene-development, climax, denouement, end-card. There are no card grids, no rows of content, no symmetric three-column layouts. Each shot is one image, one piece of text, one moment. Progressive-disclosure pattern reveals each shot only as the user scrolls to it - earlier shots dim slightly as new ones take focus. Subtitle-style captions live in the lower third of each viewport, set in lowercase humanist sans, white on the cinematic image. ## Typography and Palette Display and body face: Inter (Google Fonts) - the humanist spec - at weights 300-700. Inter's slightly humanist proportions read as cinematic-subtitle (the typeface used in many indie film subtitles). Display moment-titles at clamp(56px, 9vw, 132px) with -2% tracking and 0.95 line-height, weight 300 for cinematic restraint. Body text at 18px/1.6 weight 400 with 0 tracking. Subtitle captions at 16px weight 500 in lowercase only, with a 4px tracked +2%. Numbers and timestamps in Inter Tabular at 14px. The face is intentional: among 14% humanist usage, Inter at light weights pairs with cinematic imagery distinctively. Palette (pastel - cinematic): - #F5E6E0 dusty-peach (primary background, magic-hour skin tone) - #D4C5DD lilac-haze (secondary surface, twilight sky) - #B8D4C5 dusty-mint (accent, Wong Kar-wai signature green) - #FFD4D4 rosé-cream (highlight, lens-flare cores) - #2C1F2E plum-shadow (primary text, near-black with violet warmth) - #6E5C6B mauve-mid (secondary text, captions, subtitles) - #FFC8A8 sunset-glow (rare warm emphasis, edge-light gradients) ## Imagery and Motifs Lens-flare imagery: every photograph is treated with cinematic-anamorphic lens-flare overlays - horizontal blue-tinted streaks across highlights (3px wide, 60-200px long), radial-burst halations around bright light sources (rosé-cream, 80px diameter, 30% opacity), faint chromatic-ghost points scattered diagonally across the frame. Subjects are cinematic: balconies at twilight, hands holding cigarettes, slow-motion fabric in wind, faces partially obscured by shadow, empty staircases, distant city lights. Star-celestial motifs: each section features at least one celestial element - the moon rising over a balcony, a constellation drawn in tiny dots overlaid on the sky, a faint Milky Way band across a horizon, a single shooting-star trail. Star elements are 0.5px white dots with subtle 2px halo glows. ## Prompts for Implementation Build the site as a single short film unfolding in 7 cinematic moments. Hero: full viewport. The first moment is an establishing shot - a wide cinematic image of a balcony at twilight with the title "shinonome.moe" fading in over 2400ms in Inter Light at 132px. A faint constellation of 8 stars (Cassiopeia traced in subtle dots) appears in the upper-right at 1800ms. Subtitle "a slow film of small moments" types in over 1200ms at the bottom-third in lowercase Inter. Use progressive-disclosure pattern (3% corpus): each subsequent moment reveals only when the previous one has been fully read - the user must dwell. Use IntersectionObserver with threshold 0.7 (the user has scrolled to almost-center the section) before revealing the next moment's content. Each moment fades its predecessor to 0.4 opacity as it takes focus. The cinematic images parallax very subtly (3% vertical drift on scroll, never aggressive). Lens-flare highlights pulse gently at 8-second cycles. NO pricing, NO CTAs, NO sign-up forms - the only end-card is a quiet "the end" in Inter italic with a single moonrise gradient. Cursor leaves no trail; cinematic restraint requires absence. Subtitle captions slide up from the bottom of each viewport with a 200ms ease, positioned in the lower third like real film subtitles. ## Uniqueness Notes - Cinematic aesthetic (5% corpus) committed to as a 7-shot film sequence rather than as occasional visual treatment - the structural commitment is unique. - Pastel palette (8%) paired with cinematic full-bleed and progressive-disclosure (3%) - the soft-color cinema-pacing combination is absent from the corpus. - Star-celestial motifs (2% corpus) deployed as one celestial element per section in subtle constellation form - the unifying-motif-via-celestial-element is distinctive. - Chosen seed: aesthetic: cinematic, layout: full-bleed, typography: humanist, palette: pastel, patterns: progressive-disclosure, imagery: lens-flare, motifs: star-celestial, tone: raw-authentic - Avoided patterns from frequency analysis: parallax (94%) - used only at 3% subtle drift, card-grid (90%), photography in conventional sense (90%) - cinematic-treated, warm palette in gradient slop (93%) - pastel restraint, mono typography (81%), mysterious-moody tone (70%) - raw-authentic instead.