# Design Language for bada.moe ## Aesthetics and Tone bada.moe is a **late-night cinematic city diary** — a one-page film-letter pretending to be a website, where the visitor scrolls through a hexagonal honeycomb of glowing apartment windows, each cell a small confession, observation, or scene from a sleepless metropolis. The TLD `.moe` (the Japanese affective term for tender, sincere infatuation) is taken literally: this is a love letter to the city at 02:47 AM, written by someone who keeps the curtains open on purpose. The visual register is **anamorphic 2.39:1 cinema** stretched into a vertical scroll. Every section frames itself as a film still — black letterboxing top and bottom, a quiet scratch of grain (1.4% noise overlay, low-frequency `` baseFrequency 0.78), and a faint horizontal lens-flare bloom that drifts horizontally across the viewport at 0.06 px/frame whenever the cursor is idle for more than 6 seconds. Imagine **Wong Kar-wai's *Chungking Express* re-cut as a hexagonal-honeycomb stained-glass window**, lit from inside by Tokyo neon and Hong Kong sodium. The tone is warm only in pockets — most of the canvas is true black (#050507) so that every honeycomb cell can punch hard with saturated chroma without competing with its neighbours. It is **conversational, not editorial** — the copy speaks in `you` and `i`, lowercased, with line breaks that read like SMS at 3 AM rather than a designer's manifesto. There are no headings styled "OUR SERVICES." Instead, sections are labelled `interior, 2:47 AM` / `exterior, the convenience store` / `voiceover, my brother's voicemail`, like a scene heading from a screenplay. The reader is not a customer; they are a confidant being walked home through a city that refuses to sleep. The mood is **specifically cinematic, not glitchy, not vaporwave, not cyberpunk**. Cinematic registers at **2%** in the registry — bada.moe is staking claim to that empty space. There is no chrome, no holographic shimmer, no scan-lines, no "deploy" or "ship" verbs anywhere. Lights bloom; they do not flicker. The city breathes; it does not glitch. ## Layout Motifs and Structure The structural conceit is **a single vertical honeycomb spine** — a column of regular hexagons, point-up, packed in the standard offset honeycomb pattern (every other row shifted by half a hex-width), running the full length of the page from top to bottom. **Hexagonal-honeycomb registers at 5%** in the corpus; bada.moe is the second site in the registry to use it, and the first to fuse it with cinema-letterboxing. **Geometry (locked, exact):** - Hexagon edge length `e = clamp(72px, 9.6vw, 132px)` — flat-to-flat width is `e * √3` (~166px–229px). - Each row contains either 3 or 2 hexagons (alternating: 3 cells / 2 cells / 3 / 2 / 3 …) with the 2-cell row offset by half a flat-to-flat width so it nests into the gaps of the 3-cell row. - Vertical row-pitch = `e * 1.5` (so adjacent rows interlock with a 6-pixel mortar of pure black). - The honeycomb is centred horizontally; the leftmost and rightmost cells in 3-cell rows hard-bleed off the viewport by ~12% so the user always sees a partial cell at the edge — the city continues beyond the frame. **Cells are programmatic windows.** Each hexagon is an SVG `` mask filled by either: 1. A **gradient-mesh apartment-window glow** (full-bleed `radial-gradient` mesh painted into a ``, sampled into the hex, see Imagery), or 2. A **scene caption** (3–6 lines of conversational copy, set inside the hex with a 14% inset margin so type never kisses the hex edge), or 3. A **Lottie loop** (one of seven Lotties, cropped to the hex via `clip-path: polygon(...)`). Cell content alternates so that no two adjacent cells share the same content type. Rows therefore never read as a uniform "grid of photos"; they read as a stained-glass narrative — light, line, light, voice, light, motion. **The cinema letterbox.** The viewport is permanently letterboxed: a `position: fixed` top bar and bottom bar, each `8.7vh` of pure `#000000`, with a 1px `#1F1F22` inner edge. The honeycomb scrolls *behind* the letterboxing, so cells are visually masked top-and-bottom into a 2.39:1 aperture. The aperture itself is the reading frame; you never see a "header" or "footer" — only the moving city. **The scrolling spine is a long take.** No section breaks. No "About" / "Services" anchors. The page is one continuous 18,000-pixel scroll (≈ 22 honeycomb rows, ≈ 55 cells), paced like a Béla Tarr long take but with the patient luxury of voiceover. A thin (`1px`, `#FF2D55` at 32% alpha) **timecode rail** runs down the absolute right edge of the viewport, ticking from `00:00:00:00` at the top of the page to `00:04:42:00` at the bottom in real-time-against-scroll-position SMPTE format — the page IS a 4-minute-42-second short film whose duration equals the user's scroll progress. **No navigation, no CTA, no footer.** There are no buttons. There is no email-capture. There is no pricing. There is one (1) link, hidden as a hexagon in the very last row labelled `exit, the all-night diner` — clicking it returns to top with a 2.4-second fade-to-black-then-fade-up. ## Typography and Palette **Typography (Google Fonts only — futura-geometric spine, one humanist accent, one mono signal):** - **Display & section-headings — [`Jost`](https://fonts.google.com/specimen/Jost)**, variable weight 100 → 900, italic available. Jost is the closest open Google Fonts cousin to Futura with a designer-correct geometric `o` (perfect circle), single-storey `a`, and pointed `M` apex. Section labels (`interior, 2:47 AM`) are set at `clamp(11px, 1.05vw, 14px)`, weight 400, ALL LOWERCASE, letter-tracking `+0.32em`, color `#F2EAD8` at 64% opacity — they sit just above each scene-cell as a screenplay slugline. The single hero-line at the top of the page (`a love letter to the city that refuses to sleep`) is set in **Jost weight 200, italic**, `clamp(2.4rem, 5.8vw, 5.4rem)`, line-height 1.04, color `#F2EAD8`, occupying the entire aperture for the first 1.6 viewport-heights of scroll. **futura-geometric** registers at **5%** in the corpus — this places bada.moe in the underused tier. - **Body / scene-caption — [`Inter`](https://fonts.google.com/specimen/Inter)**, weight 380 (variable axis), `16.5px` / `26px` line-height, color `#F2EAD8`. Inter is used *only* inside hex cells where the conversational scene-text lives — short paragraphs of 3–6 lines, lowercase, no full stops, broken into SMS-style fragments. A `&` and the lowercase `i` are styled with the optional Inter feature `cv11` (curved-tail i / single-storey g) so that pronouns feel handwritten-adjacent. - **Mono / timecode rail & frame numbers — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 300, `10.5px`, `+0.06em` tracking, color `#FF2D55` at 78%. Used exclusively for the right-edge timecode (`00:01:42:14`), the cell-numbering badges (`SCN 027`), and the hidden colophon at the very end. Mono registers at 94% in the corpus — bada.moe uses it sparingly, **only as an instrument-panel signal, never as body text**, refusing the mono-as-default trope. **Palette (high-contrast cinema, locked 6-color):** - `#050507` — **Stage-Black**. The dominant negative space; the mortar between hex cells; the letterbox bars. Not pure `#000` — there is a 7-unit lift so that the grain noise reads as warm rather than dead. - `#F2EAD8` — **Projection-Cream**. The reader's voice; body and section-heading text; one of the four "lit cell" gradient stops. Warm cream because cinema light is never pure white — it carries the temperature of the lamp. - `#FF2D55` — **Tail-Light Red**. Pure saturated cinema-red, used for the timecode rail, exactly one cell's lit window per scene, the hidden colophon link. This is the brake-light driving away. Restricted to ≤6% of pixels per viewport. - `#1FB7C9` — **Convenience-Store-Cyan**. The fluorescent green-cyan of a 24-hour kombini sign at 3 AM. Used as the gradient-mesh inner stop in roughly 1 in 4 lit cells. - `#F8B23C` — **Sodium-Lamp-Amber**. The orange-amber of a sodium street-lamp seen through humid air. Inner mesh-stop in another 1 in 4 lit cells. Cyan + amber + cream form a triadic-warm cinema palette unique in the corpus. - `#1F1F22` — **Shadow-Plate**. Used only for the 1px inner letterbox edge and for un-lit hex cell fills (cells that contain text rather than light). Just lifted enough off Stage-Black to delineate without ever being seen as "a color". The palette runs at **high-contrast** (`#050507` vs `#F2EAD8` = 19.6:1) — high-contrast registers at 12% in the corpus. Combined with **gradient-mesh** imagery (only 7%), the chromatic punch comes from saturated point-sources inside the lit hex cells, not from washes — bada.moe is dark, but every fifth hex contains a small sun. ## Imagery and Motifs **No photography. No stock. No 3D render. No icon set.** Photography registers at 92% in the corpus; bada.moe joins the 8% who refuse it. Every visual is one of three programmatic forms: **1. Gradient-mesh apartment windows (lit hex cells).** Each "lit" hexagon is a `` element, `clip-path`-masked into the hex shape, painted at runtime with a 4-stop radial gradient mesh. The mesh anatomy is fixed: - Outer fill: `#050507` (the pre-dawn sky behind the building). - A single off-centre point-source at a per-cell-randomized position within the inner 60% of the hex. - Inner stops, picked per cell from a curated set of three combinations: - **Tail-Light** — `#FF2D55` core → `#7A1430` mid → `#1F0A10` halo. - **Konbini** — `#1FB7C9` core → `#0E5D6C` mid → `#0A2024` halo. - **Sodium** — `#F8B23C` core → `#84541E` mid → `#1F1408` halo. - A thin `mix-blend-mode: screen` overlay carrying a 0.4-px-wide horizontal **anamorphic lens-flare streak** centred on the point-source — this is the cinematic JJ-Abrams-but-tasteful touch that justifies the cinematic seed. The streak rotates 0.05° per scroll-y pixel, so as the user scrolls down a long building-face of cells, the flares slowly tilt — a parallax of light. The mesh is regenerated every 14 seconds with a 1.6-second crossfade, so the city's lights subtly *change channel* — a warm cell goes cold, a sodium cell goes red — as if windows are turning off and on inside the apartments. **Gradient-mesh registers at 7%** in the corpus — underused. **2. Lottie scene-loops (motion hex cells).** Exactly **seven** custom Lottie animations (no generic Lottie-Files clichés — these are bespoke and named). Each Lottie is ≤120kb, runs at 24fps to feel cinematic-not-web, and lives inside a single hex cell, looping forever: - `the-cigarette` — a lit cigarette tip pulses orange-amber on inhale (3.2s loop), with one drift of smoke rising past the hex's upper edge as it crosses into the cell above. - `the-vending-machine` — a single can drops behind a glass front, with a Konbini-cyan rectangle of light pulsing 0.4 Hz. - `the-train-window` — black hex, a horizontal ribbon of warm yellow streaks passing right-to-left at variable speed (1.8s loop). - `the-rain-on-glass` — animated SVG droplets traverse the hex glass, each leaving a 1.2-px Tail-Light-Red trail. - `the-elevator` — a thin floor-indicator strip ticks `B / 1 / 2 / … / 21` at 1 floor per 1.4s. - `the-streetlamp-blink` — Sodium-Amber, dies for 0.18s every ~7s, comes back. Single hex per page. - `the-cursor-of-a-text-message` — a small Inter `i` blinking, then three Inter `…` dots stagger, then the message disappears unsent. **Lottie-animation registers at 5%** in the corpus — bada.moe is one of the few sites making it the structural imagery. **3. The hexagon as the only motif.** There are no decorative flourishes outside the hex. No SVG flowers, no circuits, no abstract shapes, no underlines. The hexagon is **enforced as the universal frame**: every image, every block of text, every interactive element sits inside one. This relentless mono-shape is what turns the page from "a hexagonal grid" into "a beehive that someone has filled with film". The hex is the city seen from above (Manhattan's blocks bent into Iowa-honeycomb), and seen from inside (the mosaic of windows of an apartment tower). **City-urban registers at 5%** — the motif is staked into the corpus's underused tier. The city-urban here is *not* skyline silhouettes (the cliché): it is **the felt-aggregate of windows seen at night** — a beehive read as sodium-lit grid. ## Prompts for Implementation Build bada.moe as a **single long-scroll cinema-letter**. The page is one HTML file, ≤ 14kb gzipped excluding fonts and the seven Lotties; no framework, no router, no analytics. Vanilla HTML + CSS + ES2022 + a single `` per lit cell + Lottie-web. Mobile and desktop share the same composition — the hex grid simply re-flows to a single column on viewports under 720px (each row collapses to one cell, the offset disappears, the timecode rail moves to a 2-px-tall progress bar across the bottom letterbox edge). The implementation must obey four vows. **Vow 1 — The film is the architecture; scroll is the only verb.** Before writing markup, write the screenplay. The site is exactly **55 cells across 22 rows**. Sit down and write 55 fragments of 3–6 lines each, conversationally, in lowercase, second-person and first-person mixed, the way somebody texts a friend at 3 AM. These fragments form the narrative spine; the rest is window-light. Sample fragments: > `interior, 2:47 AM` > i can't sleep again > the building across mine has > exactly one window still on > and i wonder if that is you > or just somebody's fridge > `voiceover, my brother's voicemail` > hey it's me > call when you can > i forgot what i was going to ask These fragments are placed in roughly every third hex; the rest are lit-window cells (gradient-mesh) and Lottie cells. The visitor reads the city by scrolling, the way one reads a building by walking down the street looking up. **Vow 2 — Every visual choice serves the long-take.** - **No section breaks.** No `
`, no banded backgrounds, no full-bleed pull-quotes. The honeycomb is unbroken from y=0 to y=18,000. - **No transitions besides scroll-driven parallax.** When a hex enters the viewport from the bottom, it fades from `#050507` (invisible against the page background) to its lit state over 320ms — no slide-in, no stagger-from-side, no spring. This is not a portfolio; it is a film. Cells appear because we scrolled to them, not because they performed an entrance. - **The timecode rail must be load-bearing.** The right-edge SMPTE timecode is the only "navigation". Hovering it for ≥0.6s reveals a single ghost-tick (Tail-Light-Red, 1px) at `00:02:21:00` (the page's exact midpoint) — clicking it scroll-snaps with `behavior: 'smooth'` over 2.2s to that midpoint cell, captioned `intermission, the all-night diner`. - **One ambient audio loop, opt-in, never autoplay.** A small Konbini-cyan hex in row 2, labelled `audio: city ambience`, when clicked plays a 4:42 stereo loop of low-passed Tokyo-Shimbashi rain + distant trains + a single voicemail-tone, normalized to -22 LUFS. The hex inverts to filled cyan when audio is playing. Page-default is silence. **Vow 3 — Use Lottie like cinema, not like a saas mascot.** Each of the seven Lotties must read as a *shot*, not a *graphic*. They obey three laws: 1. **24fps, never 60.** Force `lottie.setSubframe(false)` and target `frameRate: 24` in the Bodymovin export — the slight judder is the cinematic tell. 2. **Loops do not `pong`.** No reversed playback. A cigarette is inhaled, then exhaled, then inhaled again — never inhaled-and-un-inhaled-and-re-inhaled. Each loop ends where it began, so the seam is invisible. 3. **No outlines, no gradients-on-strokes.** Every shape is a flat fill from the 6-color palette, with at most one `mix-blend-mode: screen` highlight layer. This keeps the Lotties sympathetic to the gradient-mesh windows beside them. **Vow 4 — The cursor is a small light, and the light has weight.** The default system cursor is replaced by a 7px circle of `#F2EAD8` at 84% opacity with a 1.4px outer halo. As the user scrolls or moves, the cursor: - **Inside a lit cell**: dims to 32% (the cell is brighter than the cursor, so the cursor recedes). - **Inside a text cell**: brightens to 100% (the reader's attention is the only light here). - **Crossing a hex edge**: emits one single-frame 6px ripple (`` 1.6px, opacity 0.4 → 0, 240ms). - **Idle for ≥6s**: drifts horizontally at 0.06px/frame, tracking the lens-flare drift, until the user moves again. The idle drift is the page breathing in your absence. **Conversational copy rules (enforced):** - Lowercase except in proper nouns and the SMPTE timecode. - No exclamation marks, no em-dashes, no semicolons. Commas, full stops (sparingly), and line breaks only. - Maximum sentence length: 9 words. - Pronouns: `you`, `i`, `we`, `they`. Never `users`, `customers`, `visitors`. - No verbs from the marketing register: `discover`, `explore`, `unlock`, `transform`, `journey`, `experience`, `solution`, `seamless`, `curated`. If one slips in during writing, replace it with the lived-in equivalent (`walk`, `sit with`, `notice`, `call back`). - The page contains **zero questions to the reader**. No `What if…?`, no `Are you ready to…?`. The conversation is one-way; the city talks; you listen. **AVOID, hard-banned for this site:** - No CTA buttons (`button`, `.cta`, ``). The single navigation link is the hidden `exit` hex. - No pricing, no tiers, no plans, no comparison tables. - No stat-grids (`98% uptime` / `4M users` / `12 countries`). Stats are lies that pretend to be cinema. - No carousel, no slider, no tabs, no accordion, no modal. - No newsletter capture, no email field, no form of any kind. - No "team" section, no headshots, no LinkedIn-style bios. - No glassmorphism (33% in corpus — bada.moe stays opaque-and-glowing, not frosted). - No parallax-heavy scroll (89% in corpus — bada.moe uses *one* parallax: the slow-rotating lens flares. Cells do not parallax against each other.). **Storytelling pacing target.** A first-time reader, at average scroll speed (~480px/s on desktop), traverses the entire page in **4 minutes 42 seconds** — exactly the runtime of the SMPTE timecode rail. The audio loop, if enabled, is also 4:42. The page is therefore a film with a deliberate runtime; finishing it is a small, complete act. ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic = **cinematic** (registry frequency: 2% — extremely underused) - layout = **hexagonal-honeycomb** (5% — underused) - typography = **futura-geometric** (5% — underused) - palette = **high-contrast** (12% — underused) - patterns = **lottie-animation** (5% — underused) - imagery = **gradient-mesh** (7% — underused) - motifs = **city-urban** (5% — underused) - tone = **conversational** (12% — underused) **This is an all-underused-stack design** — every single one of the eight seed dimensions sits in the bottom quartile of registry frequency. There is no other design in the 39-design corpus where every dimension is simultaneously rare. By construction, bada.moe is the registry's deliberate counter-programming entry: a site whose every aesthetic axis avoids the 80%+ majority pattern (avoiding hand-drawn 84%, photography 92%, centered 92%, full-bleed 87%, vintage 87%, warm 97%, gradient-broad 89%, parallax-heavy 89%, mono-as-body 94%). **Differentiators from every other design in the registry:** 1. **The page is a 4:42 short film, not a website.** The SMPTE timecode rail is real: scroll progress is mapped to film duration, the audio loop is exactly that duration, the narrative is paced as a long take. No other site in the registry treats the visit itself as a fixed-runtime film artifact. 2. **The hexagonal honeycomb is enforced as the only frame.** Every image, every text block, every interactive element is hex-clipped. No round avatars, no rectangle cards, no rounded buttons. The corpus has 2 hexagonal-honeycomb sites — bada.moe is the only one fusing it with cinema-letterboxing and gradient-mesh window-fills, turning the hex from "a quirky portfolio grid" into "a building seen at night". 3. **Cinematic-not-cyberpunk dark mode.** Dark-mode is at 10% in the corpus and is overwhelmingly cyberpunk-coded (neon, scan-lines, glitch). bada.moe is the registry's first dark site whose darkness is *cinema-darkness* — black mortar between lit windows, no scan-line, no glitch, no terminal-mono. 4. **No CTAs, no forms, no stats, no nav, no team.** The corpus has many "minimal" sites; none commit this completely. There is exactly one navigable link on the page (the hidden `exit` hex). The implementation is structurally incapable of converting a visitor into a lead. 5. **Conversational copy, screenplay-formatted slug-lines.** Section labels are not "About" / "Services" / "Contact" — they are screenplay slug-lines (`interior, 2:47 AM`). No other registry design uses screenplay format as its information architecture. 6. **Bespoke 7-Lottie cast, named like film characters.** Lottie usage in the corpus is generic (loaders, mascots). bada.moe's seven Lotties are scenes (`the-cigarette`, `the-vending-machine`, `the-train-window`), each a 24fps cinema-judder loop, each obeying anti-pong / flat-fill / palette-sympathetic laws. 7. **Gradient-mesh as window-light, not background-wash.** Gradient-mesh in the corpus is used as full-bleed wash. bada.moe inverts this: gradient-mesh is *contained* inside hex cells, masked, surrounded by black mortar — light is point-source, not ambient. The triadic Tail-Light-Red / Konbini-Cyan / Sodium-Amber lit-cell palette is unique in the registry. 8. **Idle = drift.** The cursor and lens-flares slowly drift horizontally when the user is idle ≥6s. The page breathes in your absence. No other site treats user-idle as a creative event. **Patterns avoided per frequency analysis:** - **AVOIDED: hand-drawn aesthetic (84%)** — bada.moe has no hand-drawn anything; every line is geometric / algorithmic. - **AVOIDED: photography (92%)** — zero photographs. - **AVOIDED: centered layout (92%) + full-bleed (87%)** — bada.moe is honeycomb-spine, edge-bleeding, neither traditionally centered nor traditionally full-bleed. - **AVOIDED: warm palette (97%) + gradient-broad (89%)** — bada.moe is cool-dominant (Stage-Black + Konbini-Cyan) with warm point-sources only. - **AVOIDED: vintage motifs (87%)** — bada.moe is contemporary near-future urban, no sepia, no aged paper, no nostalgic varnish. - **AVOIDED: parallax-heavy (89%) + scroll-triggered-stagger (64%)** — bada.moe uses one parallax (lens-flare drift), no stagger entrances; cells appear by simple fade as you scroll past. - **AVOIDED: mono-as-body (94%)** — JetBrains Mono is restricted to the timecode and frame-numbers, never body. - **AVOIDED: glassmorphism (33%) + brutalist (10%) + cyberpunk (17%)** — bada.moe is none of these despite being dark; it is cinematic. - **AVOIDED: professional/friendly tone (33%/28%)** — bada.moe is conversational-intimate at 3 AM; nobody on this site is being professional with anybody.