# Design Language for demodemodatte.com ## Aesthetics and Tone demodemodatte.com is **a cyberpunk excuse-engine: the digital interior life of a 19-year-old shrine maiden whose neural lace just received its first patch and who is now stalling for time inside her own latency window, mumbling "demo... demo... datte..." at 240Hz while the firewall reasons about whether to ship her amended sentence to the wider net**. The wordmark "でもでもだって" is the Japanese stereotypical-girl excuse phrase — *but, but, because*. The kind of sentence a tsundere or a flustered cousin or an indecisive AI assistant emits when reality has just contradicted her, and she needs the next 1.4 seconds to reassemble a face. The site takes that 1.4-second pause and stretches it into the entire scroll length of the page. Every scrollwheel tick advances her one phoneme. The cyberpunk lens is *not* the canonical Blade-Runner-rain-and-katakana-billboard cliché that sits at 22% of the registry corpus. It is **soft cyberpunk** — a dialect that only appears in two prior sites — where the future is already over, the megacities already audited, and what remains is the quiet upholstery of a single bedroom with a translucent-frost windowpane (a 2% palette, deliberately underused), a glass desk lit from beneath, and one neural-lace girl whose excuses are the only computational workload still scheduled. The tone is **conversational** (4% in the registry, deliberately rare) and the conversation is one-sided: the page speaks in her voice, in fragmented stanzas, in the cadence of someone interrupting herself. Sentences begin and refuse to end. Em-dashes are weaponized. Parentheses nest three deep. The visitor reads what she is *trying* to say while the firewall watches her try to say it. There is no marketing register anywhere on the page — no "transform your workflow," no "trusted by", no "join 50,000+", no pricing tiers, no founder photo. There is a girl, a window, a page of frost, and the sentence *demo... demo... datte... ano... eeto... chigau no... chigau no, sou ja nakute,* — repeated in seven gradients of conviction down a single scrolling column. The mood is **soft cyberpunk-domestic**: futuristic enough that the desk lamp is a holographic prism and the curtain is a stretched diffusion shader, but human enough that there is a half-finished cup of mugicha on the corner of the desk and the prism is slightly tilted because she bumped it. Inspirations: *Serial Experiments Lain* episode 4 (the bedroom scenes specifically, not the wired ones), Ghost in the Shell SAC's Tachikoma soliloquies (the half-thinking ones), the opening minute of Hideaki Anno's *Love & Pop*, the *Yume Nikki* save-screen palette, the cassette deck UI of a 1998 MD Walkman lit by an aquarium, and the specific feeling of having a thought interrupted by a notification that you cannot immediately classify. The page is what that interruption looks like from inside the thought. ## Layout Motifs and Structure The structural commitment is **immersive-scroll** (only 9% in the registry), executed not as a hero-then-sections-then-footer staircase but as **a single 18,000-pixel-tall vertical column that is simultaneously a stanza, a waveform, and a pane of frosted glass that fogs and clears as the scroll position moves**. The page is *one* document. There is no horizontal navigation. There is no sticky header. There is no footer with three columns of links. Scroll is the only verb. The composition is structured as **seven stanzas of hesitation**, each occupying roughly 100vh of vertical space, separated by translucent-frost mullions — six horizontal bars of frosted glass, each 24px tall, sitting in front of the column like the divisions of a shoji screen pressed flush against a window. Each stanza is composed as a **left-leaning asymmetry against an off-center vertical axis at 38.2% from the left edge** (the inverse golden section, chosen because the canonical 61.8% ratio sits at the conventional position and we want the column displaced toward the side of the page where, in Japanese vertical writing, a sentence would *end*). The bebas-bold display text aligns to that 38.2% axis as a left margin. Body fragments hang from the axis as right-aligned indented poetry — three to seven lines per stanza, never more. The remaining 61.8% of viewport width on the right is mostly empty frost, broken only by a single floating geometric-abstract sigil per stanza (the cyberpunk-shrine glyph, described in Imagery), positioned at the *vertical* golden section of that stanza so that the visitor's eye sweeps diagonally upper-left to lower-right across each pause. There is no card-grid (77% of corpus, refused entirely). There is no centered hero (82% refused). There are no three-column-feature-rows. There is one column of falling text inside one column of frost. The only horizontal surface is the **bottom 12vh of every stanza**, where the column meets a *spectrogram floor* — a 240px-tall waveform of the spoken phrase "でもでもだって", visualized as 800 vertical sharp-angle bars in translucent frost, which shimmer at the resonant frequency of whichever phoneme the current stanza is sounding. The spectrogram is the only horizontal element that survives the layout. It is the floor on which the mumbling stands. Navigation is intentionally minimal — a **vertical phoneme-meter** pinned to the right edge at the 95% horizontal position, 8px wide and 70vh tall, divided into seven luminous notches. Each notch corresponds to a stanza ("でも", "でも", "だって", "あの", "えと", "ちがう", "そうじゃ"), and the current notch fills with translucent-frost-cyan as the scroll passes its threshold. Tapping a notch teleports to that stanza, but with a 600ms blur-and-resolve transition rather than an instant jump, because she does not skip phonemes — she only *stalls*. ## Typography and Palette **Fonts (Google Fonts only, all confirmed available):** - **`Bebas Neue`** (single weight, 400) — the principal display face, serving the **bebas-bold** typography seed (4% in registry, deliberately underused). Bebas Neue is set at sizes that the registry has not previously claimed for it: **216px** for the wordmark, **148px** for stanza-opener phonemes, **96px** for the romanized whisper labels. Letter-spacing is set deliberately *negative* (`-0.04em`) at the largest sizes so the condensed verticals feel pressured against each other, like the girl's voice at the moment her sentence collapses. All bebas display text is **uppercased and rendered in roman, not katakana** — the Japanese phonemes are typeset in a separate face. Bebas is the *English subtitle*; the Japanese is the original audio. - **`Zen Kaku Gothic New`** (weights 300 + 700) — the Japanese display face, used for the actual hiragana of "でもでもだって". A modern Japanese gothic with a slightly humanist warmth that prevents the design from sliding into stark katakana cliché. The hiragana is set at 240px in weight 700 for the wordmark, and at 168px in weight 300 for in-stanza phoneme refrains, with `font-feature-settings: "palt"` enabled so the proportional kana spacing creates the airy, breathing rhythm of someone hesitating mid-word. - **`Space Grotesk`** (variable, 300–500) — the body face for the conversational stanza fragments. Set at 22px on a 36px line-height, with the ligatures and stylistic alternates enabled so that "ff" and "ti" behave more as rendered shapes than as letter pairs. Tracking is loose at +24 thousandths to read as whispered, not declared. **No serif anywhere on the page.** The body face also handles all timestamp annotations and the spectrogram axis labels, set at 11px with tracking +120 thousandths for the standard cyberpunk-monitor-readout register. **Palette (translucent-frost, only 2% in registry):** - `#E8F4F8` — *Pane Frost*. The dominant background, a near-white with a 4% cyan cast that reads as "frosted glass photographed against a slightly cloudy sky". This is the page background and the canvas color of the frost mullions. - `#9DCFD8` — *Mizu Veil*. The mid-frost cyan that supplies the body of every translucent surface. Used at 60% alpha for the stanza mullions, 40% alpha for the frost overlays, 100% alpha only inside the phoneme-meter active state. - `#3A4A52` — *Static Slate*. A dark cool-grey-cyan that anchors all body text. Never pure black. Reads as cool but warm enough to be human. - `#0E1418` — *Lacuna Indigo*. The deepest tone in the palette, used for the wordmark itself and for the spectrogram bars at their loudest amplitude. Almost-black, but with enough blue to feel like ink on a screen rather than ink on paper. - `#F2A3B8` — *Tsumetai Pink*. The single accent — a pale, pre-flush pink that appears only as the inner glow of the phoneme-meter active notch and as the underline-draw beneath the currently-spoken phoneme. The cyberpunk neon, but rendered as the color of someone almost-blushing through frost glass, not as electric magenta. - `#FFFFFF` — *Specular*. Used at 8% alpha for the diagonal shimmer that animates across the frost panes. - `#7A8C95` — *Fog Tertiary*. The secondary text color for whispered annotations, romanizations, and the inactive notches of the phoneme-meter. The palette is deliberately *cool* end-to-end with one warm accent. The accent appears for less than 4% of the page surface area at any moment. The frost is the dominant color event — translucent-frost is the entire compositional argument. ## Imagery and Motifs The imagery commitment is **geometric-abstract** (3% in registry) executed as **cyberpunk-shrine sigils**: seven hand-composed inline-SVG glyphs, one per stanza, each a single composition of straight lines, sharp angles, and gradient-fills-of-frost, with no curves anywhere except where two angles meet. The sigils read simultaneously as **hiragana decomposed into structural primitives**, **electronic schematic fragments**, and **shrine-charm geometries**. They are not icons. They are not logos. They are not decorative borders. They are the visual equivalent of the phoneme each stanza is trying to pronounce. **Motifs commitment: sharp-angles** (5% in registry). **Sigil family 1 — the でも glyph (stanzas 1 and 2).** A 240×240px composition. Two interlocking right-angle brackets (one full-frost-cyan, one outline-only-slate) rotated to 53.13° (the 3-4-5 right-triangle angle, chosen because it is the only angle that mathematics calls *honest*). The brackets do not touch. Between them, a third angular element — a 7-segment stroke that resembles the hiragana で if the curves were replaced with mitred corners — hovers at 50% alpha. The composition reads as a circuit-board fragment of someone refusing to commit. Both stanza 1 and stanza 2 reuse this sigil, but with the angles rotated by 4.7° between them, so that the second でも *almost* matches the first but not quite — the visual equivalent of the girl repeating herself with diminishing confidence. **Sigil family 2 — the だって glyph (stanza 3).** A 360×240px elongated composition. Three sharp-angled chevrons stacked in a descending stair, each chevron rotated 120° from the previous (the cyberpunk-trinity ratio), with a single horizontal frost-line bisecting the lowest chevron at exactly the geometric centroid of the entire stack. The bisecting line is animated to slowly translate left and right across the chevron at 0.06Hz — the rate at which someone leaning on an excuse shifts her weight. **Sigil family 3 — the あの glyph (stanza 4).** A 200×320px tall composition built from twelve parallel diagonal stripes at 71° from horizontal, each stripe a different alpha of frost, fading from 80% at the top to 5% at the bottom. The stripes are bisected by one orthogonal sharp-angle bracket at the 38.2% vertical position. This sigil reads as *trailing-off-into-nothing*. It is the visual あの — the universal Japanese hesitation marker. **Sigil family 4 — the えと glyph (stanza 5).** A 240×240px composition of seven concentric heptagonal outlines, each rotated 12.857° from the previous, generating a slow rotational moiré. Each heptagon edge is a sharp angle, no rounded vertex anywhere. The composition is animated to rotate 1.8° clockwise per second on the outermost ring, with each inner ring rotating 0.3° slower than its parent. The visual effect is a slow-spinning crystalline excuse-engine. The viewer cannot quite tell whether it is moving forward or backward. **Sigil family 5 — the ちがう glyph (stanza 6).** A 320×240px composition of an angular X — two sharp-angled strokes intersecting at 91.4° (deliberately not 90°, because she is not certain she is wrong, only fairly sure). The X is filled with a hatched gradient of 14 parallel translucent-frost lines, all rotated 14° from horizontal. Beneath the X, a 9-pixel-tall row of seven sharp-angled tick marks — the visual rhythm of "no-no-no, that's not it, not quite, not exactly". **Sigil family 6 — the そうじゃ glyph (stanza 7).** A 360×360px terminal composition. A single open-ended angular spiral built from twenty-one straight segments, each rotated 17.142° from the previous, expanding outward from a central frost-cyan dot. The spiral does not close. The spiral opens. This is the moment the sentence finally turns toward the answer she actually meant to give — the *sou ja nakute* clause that resolves the entire eighteen-thousand-pixel excuse. **Beyond the seven sigils, the page contains:** - **The frost-spectrogram floor** at the bottom of each stanza — 800 vertical sharp-angled bars rendered as a single inline SVG, animated by a Web Audio analyzer node fed by a 1.4-second loop of the recorded phrase "demo demo datte ano eeto chigau no sou ja nakute" murmured at 92dB and pitch-shifted to a soft alto. The bars shimmer in translucent-frost-cyan against the lacuna-indigo of the lowest stanza band. - **One floating prism-lamp** in the upper-right of the viewport at all times, a 64×96px inline-SVG hexagonal prism with three internal frost-gradient facets and a single tsumetai-pink inner glow. It is the only object on the page with persistent presence. It tilts 2.4° toward the viewport center on cursor-near, returns slowly when the cursor leaves. - **Zero photography, zero raster images, zero katakana billboards, zero rain-streaks, zero neon-signs-with-Japanese-text, zero glitchy-RGB-channel-shifts, zero terminal-prompts, zero scanlines.** The page refuses every canonical cyberpunk visual signifier. The cyberpunk is in the *posture*, not the *surface*. ## Prompts for Implementation Build demodemodatte.com as **one HTML document, one CSS file, one ES module, one 1.4-second compressed audio file (`murmur.opus`, target 12KB), and seven inline SVG sigil fragments emitted at build time from a small JSON spec**. No framework. No bundler. No router. No service worker. No web fonts self-hosted (use Google Fonts CDN). Total uncompressed bundle target: under 96KB. The page is a single long vertical scroll experience designed to be read top-to-bottom in approximately 90 seconds at a relaxed scroll rate. **Storytelling-as-Hesitation.** Every implementation decision should bias toward stretching, not advancing. Scrolling does not "load" content — it *advances a phoneme*. Each of the seven stanzas is bound to a 14% slice of the total scroll distance, governed by a single `IntersectionObserver` that tracks which stanza-anchor is currently most-visible and mutates a `--current-phoneme` CSS custom property on the document root. Every animated frost element subscribes to that property and shifts its visual state accordingly. There is no "next page". There is no "back to top". There is the column, the frost, and the seven phonemes she is still trying to land. **Frost as the principal visual primitive.** Every translucent surface on the page is a single CSS technique stack — `backdrop-filter: blur(28px) saturate(1.4)`, `background: linear-gradient(157deg, rgba(157,207,216,0.42), rgba(232,244,248,0.18))`, with a 1px inner border at `rgba(255,255,255,0.32)` and a 1px outer border at `rgba(58,74,82,0.08)`. This stack is reused for the stanza mullions, the phoneme-meter notches, the prism-lamp facets, and the spectrogram-floor backplate. It is the visual signature of the entire site. Memorize the stack. Apply it consistently. **The scale-hover pattern (only 2% in registry, deliberately claimed)** is the single interaction motif that runs across every interactive surface on the page. Hovering a phoneme-meter notch scales it from 1.0 to 1.18 over 240ms with a `cubic-bezier(0.16, 1, 0.3, 1)` ease-out — gentle, not springy. Hovering a sigil scales the entire SVG from 1.0 to 1.06 with the same curve, while internal sigil elements scale at *different rates* (the inner ring scales 1.0 to 1.12, the outer ring scales 1.0 to 1.04) creating a soft parallax bloom. Hovering the prism-lamp scales it 1.0 to 1.24 and shifts its internal facet gradients toward the tsumetai-pink accent. **There is no magnetic cursor (68% in registry, refused). There is no spring physics (78% in registry, refused). There is no parallax-on-mouse-move (95% in registry, refused).** Scale is the only motion verb. **The murmur soundtrack.** A single 1.4-second `murmur.opus` file plays on first-scroll-gesture (autoplay-on-interaction), looping continuously while the visitor is on the page. The audio is fed into a Web Audio `AnalyserNode` with `fftSize: 256`, and the resulting frequency-bin array drives the height of the 800 spectrogram-floor bars at 60fps. The audio is whisper-quiet by design — peak loudness around -28dB. A tiny frost-cyan mute toggle in the top-right corner (a 24×24px sharp-angled glyph) lets the visitor silence it. The toggle is the only UI control on the entire page. **The shimmer pass.** Every frost surface receives a subtle diagonal shimmer — a 0.5px-wide white gradient line at 8% alpha that translates from upper-left to lower-right of each surface every 8 seconds, with each surface offset by `index * 0.6s` so the shimmers cascade across the page rather than firing in unison. This is the cyberpunk equivalent of light catching on actual frosted glass. It is purely decorative, purely cumulative, and a single CSS keyframe animation on a pseudo-element. **The blush moment.** When the visitor reaches stanza 7 (そうじゃ — the resolving clause), the tsumetai-pink accent expands from the prism-lamp's inner glow into a 38vh-tall ambient bloom that washes the entire upper third of the viewport with `rgba(242,163,184,0.18)`, fading in over 2.4 seconds. This is the *only* moment on the page where the warm accent is visible at scale. It is the visual equivalent of her finally landing the sentence. It does not flash. It does not pulse. It arrives, and it remains until the visitor scrolls back up. **Refused implementations:** No cards. No accordions. No tabs. No modals. No tooltips. No carousels. No tab bars. No "scroll to top" button. No CTA buttons of any kind — there is nothing to convert toward. No pricing block. No feature grid. No testimonial. No stat counter (12% in registry, refused). No FAQ section. No blog teaser strip. No cookie banner (the page sets no cookies). No newsletter signup. No social share row. The page is a poem, a prism, and a frosted column. Every additional UI affordance subtracts from it. **The wordmark.** The wordmark "でもでもだって" is rendered once, at the very top of the column, as 240px Zen Kaku Gothic New 700-weight, with the romanization "demodemodatte.com" beneath it in 96px Bebas Neue at 60% alpha. The wordmark sits inside its own 100vh stanza that contains nothing else — just the title, the prism-lamp lit for the first time, and the subtle hum of the spectrogram floor warming up. There is no nav. There is no announcement bar. There is the title, and the silence before the first phoneme. ## Uniqueness Notes This design's deliberate departures from the patterns documented in the frequency analysis, and from the canonical interpretations of the chosen seed: 1. **Cyberpunk rendered as soft-domestic interiority, not as megacity-rain-and-neon.** Cyberpunk sits at 22% of the aesthetic frequency and almost every prior use leans on the canonical rain-streaked-katakana-Blade-Runner vocabulary — terminal greens, magenta neon signs, glitch RGB strobes, scanlines, code-rain backdrops, dystopian skylines. demodemodatte.com refuses every one of those signifiers. The cyberpunk here is the bedroom-after-the-cyberpunk-is-over: the neural lace is installed, the future is finished, and what remains is a translucent-frost windowpane and a girl rehearsing an excuse. The genre is preserved as posture and palette logic, not as imagery. 2. **The translucent-frost palette claimed at saturation.** Translucent-frost sits at only 2% of the palette frequency — among the rarest in the registry. demodemodatte.com makes it the entire compositional argument, not a surface treatment. Every visual element on the page is either frost, in-front-of-frost, or behind-frost. The whole page is one pane of glass with weather on one side and a girl on the other. 3. **Bebas Neue used as English subtitle, not as English headline.** Bebas-bold sits at 4%, and where it appears in the registry it is almost always the *primary* display voice — bold, aggressive, wall-filling. demodemodatte.com inverts that role: Bebas is the *romaji translation underneath the Japanese*, present at 60% alpha, never the primary voice. The primary display voice is Zen Kaku Gothic. Bebas is the visitor's subtitle track. 4. **Scale-hover claimed as the sole interaction grammar.** Scale-hover sits at 2% — almost unused. demodemodatte.com binds every single interactive moment to scale-hover, refusing the 68%-magnetic, 78%-spring, 95%-parallax canonical stack. The page never bounces. Never springs. Never tilts on cursor. It scales, it shimmers, and it stops. 5. **Geometric-abstract imagery as decomposed-hiragana, not as generic-geometric-abstract.** Geometric-abstract sits at 3% in the imagery frequency. demodemodatte.com narrows the term to a specific sub-language: each abstract glyph is a sharp-angle decomposition of a hiragana character, readable simultaneously as schematic, charm, and phoneme. Generic abstract shapes are refused. 6. **Conversational tone as sustained one-sided monologue.** Conversational sits at 4% in tone. The registry's prior uses tend toward "casual product copy". demodemodatte.com commits the tone to a single internal monologue, fragmented into seven phonemes, with no marketing register anywhere. There is no second-person voice. There is no call-to-action. There is no benefit-statement. The site speaks her language, in her cadence, and the visitor reads it. 7. **Sharp-angles motif as orthographic primitive, not as cyberpunk decoration.** Sharp-angles sits at 5% in motifs. The registry's prior uses tend toward "techy chevron borders" or "cyberpunk-HUD overlay corners". demodemodatte.com uses sharp-angles structurally: every stroke of every sigil is a straight segment meeting another straight segment at a documented angle. There is no curve, no fillet, no rounded corner anywhere. The angularity is the writing system. 8. **Immersive-scroll executed as phoneme-progression, not as section-scroll.** Immersive-scroll sits at 9% and almost always presents as "background changes between sections". demodemodatte.com binds scroll directly to a single utterance — one continuous voice stretched across the whole document, with the scrollbar acting as the time-axis of a 90-second whisper. The structural commitment is to *time*, not to *space*. 9. **Refusal of every CTA, pricing, stat-grid, and conversion artifact.** No buttons. No forms. No signups. No pricing. No counters. No testimonials. No partner logos. The page is a closed poem. The visitor is not a lead. The site is not a funnel. **Chosen seed (from assignment):** aesthetic: cyberpunk, layout: immersive-scroll, typography: bebas-bold, palette: translucent-frost, patterns: scale-hover, imagery: geometric-abstract, motifs: sharp-angles, tone: conversational. **Patterns avoided (from frequency analysis):** photography (98%), gradient palette (97%), parallax (95%), warm palette (96%), hand-drawn aesthetic (96%), mono typography (96%), full-bleed layout (91%), centered layout (82%), card-grid layout (77%), magnetic interactions (68%), glassmorphism aesthetic (68%), spring physics (78%), cursor-follow (78%), stagger (75%). The frosted-translucent surfaces of this design are explicitly *not* glassmorphism — they have no card-shape, no rounded-rectangle, and no drop-shadow vocabulary. They are sheets of frost across a column of voice.