# Design Language for shinonome.monster ## Aesthetics and Tone Grainy-textured aesthetic - the visible-film-grain look of Saul Leiter color photography, the dusty paper texture of mid-century travel posters, the slight noise-overlay of Iwan Baan architectural photography. Combined with retro-futuristic palette (the cream-and-burnt-orange Olivetti future-pastel) and a calm-serene tone that reframes the "monster" domain as a tender bestiary rather than a horror site. Cultural motifs ground the design: Mexican alebrije woodcarvings, Japanese yokai prints, Iranian-miniature beasts, all interpreted through a unified grainy-paper aesthetic. The mood is "a 1962 Czech children's storybook of mythological creatures, with hand-printed grainy paper textures, telling its stories so calmly that the monsters become beloved companions." This is monster-as-friend, not monster-as-fear; the design treats every creature with affection. ## Layout Motifs and Structure Z-pattern layout: each section follows the classic Z-pattern reading flow (eye travels top-left to top-right, then diagonally down-left to bottom-right) but enforced as the actual structural composition - section blocks are placed at the Z-pattern's exact node points. Each creature section is: a creature illustration in the upper-left, a creature name in the upper-right, a longer description in the lower-left, and a "where it lives" map in the lower-right. The z-pattern is intentional and visible - the reader's eye is given a discipline rather than a free choice. Between sections: 50vh of dusty paper texture with a single cultural motif ornament centered. Cultural motif ornaments: alebrije diamonds, yokai cloud-curls, miniature-style border patterns - 4-5 ornament styles cycled through the page. ## Typography and Palette Display and headline face: DM Sans (Google Fonts) - the geometric-sans spec - at weights 400-700, used at clamp(56px, 8vw, 112px) with -1% tracking. The slight warmth of DM Sans (a geometric sans with a hint of humanism) reads as approachable but disciplined. Body text in DM Sans at 17px/1.7. Typewriter accent face: Special Elite (Google Fonts) at 14-18px for typewriter-effect moments - field notes, observations, captions. Cultural motif labels in DM Serif Display (Google Fonts) at 24-36px italic for creature names. Palette (retro-futuristic): - #F0E5D0 oatmeal-paper (primary background, grainy paper warmth) - #E07856 terracotta-clay (primary accent, creature highlights, drop caps) - #2A3340 deep-storm (primary text, near-black with cool blue warmth) - #C8B891 sand-mid (secondary surface, paper variation) - #5C8A7B sage-print (cultural motif color, secondary accent) - #B85C4A faded-brick (highlight, button fills) - #6B5641 walnut-shadow (secondary text, captions) ## Imagery and Motifs Paper-aged imagery: every illustration is treated with a 3-layer aged-paper overlay - base illustration in flat color, then a 12% noise-grain texture in walnut-shadow, then occasional fox-marks (small irregular yellow-brown stains) at 15% opacity in random positions. Subjects are friendly monsters from world cultures: a Japanese karakasa-obake umbrella-yokai sketched as a friendly companion, a Mexican alebrije winged-jaguar in soft folk-art colors, an Iranian simurgh in miniature-painting style, a Welsh Afanc rendered as a gentle lake-dwelling beast. All creatures are drawn in flat shapes with hand-printed texture - no realism, no horror. Cultural motifs surround each creature: appropriate border patterns (key-fret for Chinese mythology, talavera for Mexican, Iznik tile for Iranian) frame each section. Typewriter-effect annotations appear as field-note captions in Special Elite, as if a 1962 cryptozoologist had typed them. ## Prompts for Implementation Build the site as a calm bestiary - a paper-aged storybook of monsters, one creature per spread. Hero: full viewport. The title "shinonome.monster" types in via typewriter-effect pattern (5% corpus): characters appear one at a time at 80ms intervals with a cursor blink, set in Special Elite at 56px on grainy oatmeal-paper background. Below: a single illustrated creature (the bestiary's "type specimen") fades up over 2000ms. Use typewriter-effect pattern throughout: every section's creature-name and field-notes type in character-by-character as they enter the viewport. Z-pattern composition is rigid: creature illustration upper-left at 40% width, name upper-right at large display, description lower-left at 50ch column, where-it-lives illustrated map lower-right at 35% width. NO modern CTAs, NO pricing, NO sign-up forms - this is a bestiary, not a commercial site. Between creatures: 50vh of paper texture with a small cultural-motif ornament centered (alebrije diamond, yokai cloud, miniature-style fleur). Cursor is a tiny typewriter cursor (1px x 14px vertical line in terracotta-clay) that blinks every 800ms. Page background has a subtle 4% noise-grain overlay across the entire viewport for paper-texture continuity. ## Uniqueness Notes - Grainy-textured aesthetic (1% corpus) deployed as a unifying paper-aged treatment across all visuals - the entire page reads as printed paper, not digital surface. - Typewriter-effect pattern (5% corpus) used as the dominant text-reveal mechanism, paired with the field-note bestiary metaphor - the typewriter is loadbearing not decorative. - Z-pattern layout (2% corpus) enforced rigidly as a structural composition rather than as a reading-flow suggestion - the design IS the Z. - Chosen seed: aesthetic: grainy-textured, layout: z-pattern, typography: geometric-sans, palette: retro-futuristic, patterns: typewriter-effect, imagery: paper-aged, motifs: cultural, tone: calm-serene - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%), photography (90%) - all illustration, warm palette in gradient sense (93%) - retro-futuristic structured, mono typography (81%) - typewriter is mono but specific, mysterious-moody tone (70%) - calm-serene instead.