# Design Language for daitoua.com ## Aesthetics and Tone daitoua.com is a **deep-water tactical broadcast that has been tagged**. The page is the cover of an authority — a mid-pressure abyssal command console at 800 meters of black water — and over the polished console glass somebody has aerosol-tagged a graffiti throw-up in chrome ink. The HUD reads as official, blue-cold, mathematically calm. The graffiti reads as illegal, hand-shaken, dripping. The two never reconcile. The page is the moment they coexist. The mood is **authority interrupted by signature**. It is the deck of an oceanographic monitor that has gone rogue. Every piece of telemetry — depth markers, range rings, longitude crosshairs, sonar polar plots — is rendered with the unwavering precision of submarine instrumentation. Then a single black-light tag is sprayed across half the screen, and the chrome bleeds. The chrome is not skinned over the HUD; the chrome is *layered above* the HUD, on a separate paint plane, with `mix-blend-mode: difference` so where the tag crosses a depth gauge the gauge inverts under it like an x-ray of the spray. The tone is the cold authority of a navigational broadcast — third-person institutional, present tense, no emoji, no exclamation, no warmth. *"Position confirmed. Pressure stable at 81 atmospheres. Signal cone 12 degrees east of declared bearing. Hold."* This is the voice of someone who is in charge and is not asking. Beneath that voice — graffiti — *"daitoua was here. fck the cone."* The graffiti voice never argues with the HUD; it simply marks it. Inspirations: the polar-plot UI of a Cold War sonar console; Futura Lab subway tag photography from 1980s Bronx (chrome-on-steel, drips frozen mid-fall); the bathyscape Trieste's instrument-panel photographs from 10,919m; Sasha's grime visuals; *Ghost in the Shell* tactical overlays — but **bathyspheric**, not orbital; the concept of a broadcast warning that nobody wrote, a HUD that runs without an operator. No bright cyan-magenta cyberpunk. No tron-grid neon. No Hollywood UI. The cold here is *real* cold — the cold of 4°C seawater under crushing pressure, filtered through a periscope. ## Layout Motifs and Structure The viewport is a single fixed **HUD frame** that does not scroll — content reveals through a 2400px tall *interior content tape* that translates upward inside a windowed cutout, while the HUD chrome (corner brackets, depth ladder, range rings, declared bearing, telemetry bar) remains pinned to the viewport. The page is not paginated. It is not a feed. It is a single instrument that is reading a single descending column of water. **Five overlay zones, all permanent.** 1. **Top register** (0–48px from viewport top): A horizontal status bar split into seven cells — UTC clock, station ID `DAITOUA-7`, fix mode `BATHY-ABS`, declared bearing, current depth (animated 800–812m oscillation), pressure (atm), signal integrity (0–100%, decaying). Cells are separated by single 1px hairlines in `--steel-faint`. Numbers tick at 4Hz. Letters do not change. 2. **Left rail** (0–84px from viewport left): A vertical depth ladder from 0m at top to 1200m at bottom, with a horizontal index line tied to scroll progress. The ladder uses long ticks every 100m, short ticks every 25m, all numerically labeled in `tech-mono` 9px. To the left of the ladder, vertical text reads `LAT 35.214° N | LON 138.811° E | LOCAL ABYSSAL ZONE`. Text is rotated 90° counter-clockwise. 3. **Right rail** (right 0–96px): A polar sonar plot — fixed circular SVG with 6 concentric range rings at 50m, 100m, 200m, 400m, 800m, 1600m, and a sweep line that rotates clockwise at one revolution per 18 seconds. Inside the sweep, single-pixel "contacts" appear and decay as the line passes. Below the polar plot, a stack of three smaller indicators — heading rose, listing angle, hull-stress meter. 4. **Bottom register** (bottom 0–56px): A scrolling teletype band that prints procedural broadcast text in `tech-mono` 11px, *right-to-left*, at 18 characters per second. Lines are short, telegraphic: `SECTOR 7 NOMINAL · DEPTH HOLD · NO SURFACE RETURN · OPERATOR ABSENT · CONTINUE`. The teletype never repeats exactly; it is generated from a small grammar. 5. **Center cutout** (the windowed interior, roughly 1080px × 720px on desktop, fluid-responsive): The only zone where editorial content lives. The interior translates upward inside this window as the user *scrolls*, but the surrounding HUD chrome stays put. The window has a 2px `--steel-line` border with cut corners (45° chamfer at every corner, 12px wide). **The graffiti plane.** Above all five HUD zones is one single layer — `position: fixed; inset: 0; pointer-events: none; mix-blend-mode: difference; z-index: 9000` — that holds **one** graffiti throw-up. The tag reads `DAITOUA` in a chrome bubble-script with bleeding drips, occupying roughly 60% of the viewport diagonally from upper-left to lower-right. The tag is *static*. It does not animate. It does not parallax. It is a finished spray-paint mark, frozen. The HUD continues to do its job under it. This is not card-grid. This is not full-bleed. This is **hud-overlay** at 1% of corpus — the rarest layout in the registry — and we are committing to it as the *entire* page chrome rather than as decoration over a conventional layout. The corpus's dominant patterns (full-bleed 91%, card-grid 77%, asymmetric 52%) are deliberately absent. ## Typography and Palette **Type system (Google Fonts only).** - **`Major Mono Display`** — used for HUD numerals, the depth ladder, telemetry numbers, and the station ID. Rendered at 9–14px with `font-feature-settings: "tnum" 1` for tabular alignment so numbers do not jitter as values change. Letter-spacing 0.04em. This face has the squarish, periscope-readable geometry of submarine instrumentation type. (Corpus presence of `tech-mono`: 10% — chosen because it is the *correct* face for this aesthetic, not because it is unusual.) - **`JetBrains Mono`** — used for the teletype broadcast band, the lat/lon vertical labels, and all body copy inside the center cutout window. Weight 400 for body, 500 for emphasis. This is the operator's voice. Rendered at 11–14px. - **`Permanent Marker`** — used **only** for the single graffiti throw-up tag and for two short hand-tagged messages drawn in the cutout's corner ("daitoua was here. fck the cone." and a date stamp). This is not a body face; it is a *prop*. Letter-spacing -0.04em, transform `skew(-3deg) rotate(-2deg)`. The face is rendered through an SVG filter chain that produces drips and chrome highlights (specified below). **Palette (ocean-deep, 11 hex tokens).** - `--abyssal-black` `#03070D` — the page background, the color of water at 800m where almost no light reaches. Not pure black; carries a 3% blue cast. - `--hadal-navy` `#0A1428` — the HUD frame fill, slightly lighter than the background, used for chrome-bracket interiors. - `--pressure-blue` `#102A4C` — the steel of the instrument body, midtone blue with no warmth. - `--steel-line` `#3A6FA8` — the primary HUD line color, the color of polished cold steel under blue light. Used for ticks, range rings, brackets, and the polar sweep base. - `--steel-faint` `#1E3A5C` — a faint version of the steel line, used for the inner subdivisions of the depth ladder and for the dimmer concentric rings. - `--telemetry-cyan` `#54B8E0` — the only "active" highlight color in the HUD, used for live numerical readouts (depth, pressure, bearing). Not a neon cyan; a *navigation-light* cyan, slightly desaturated. - `--alarm-amber` `#D4A341` — used **once and only once**, for the listing-angle indicator when it crosses the 4° threshold (which it does on a 23-second oscillation). Reserved exclusively for the alarm state. No other element on the page is permitted to use amber. - `--bone-text` `#C8D6E8` — the color of all body text in the center cutout. A cold off-white with a blue undertone, the color of paper held under fluorescent dock-lights. - `--chrome-base` `#9CA8B5` — the base midtone of the graffiti tag. A neutral metallic gray, not silver. - `--chrome-highlight` `#E8EEF4` — the bright blow-out highlight on the chrome tag. Near white, slight blue cast. - `--chrome-shadow` `#202830` — the deep shadow on the underside of the chrome bubbles. Almost black, slight blue cast. There is **no warm color in this palette.** The single warm token (`alarm-amber`) is a function, not a color. The corpus is 96% warm; this page is 0% warm. There is **no gradient** as a decorative effect. The corpus is 97% gradient. On daitoua.com, gradients exist only as the chrome shading inside the graffiti tag (gradient-as-material, not gradient-as-background) and in the falloff of the polar sonar sweep (gradient-as-physics, not gradient-as-decoration). Every flat surface in the HUD is a true flat fill. ## Imagery and Motifs **Motif: floating-elements (5% of corpus).** The center cutout is populated by 14 small geometric primitives — equilateral triangles, hollow squares, hollow hexagons, single dots, and short line segments — that float in the cutout's negative space at depths between -8m and +8m on a virtual z-axis. These elements drift on independent slow trajectories (each primitive has its own velocity and rotational phase, all derived deterministically from a single seed integer at page load). They never collide with text. They are not "particles" in the firework sense; they are *organisms*, each one a single-pixel wireframe of a Platonic solid suspended in cold water. **Imagery: geometric-abstract (3% of corpus).** No photography. No illustration. No photo-realism. Every visual element is constructed from primitive shapes — circles, polygons, and stroked lines — emitted as inline SVG. The page contains zero raster images other than the optional 80KB chrome-grain PNG used as the spray-can texture for the graffiti tag. **The graffiti tag, in detail.** A single SVG path describes the `DAITOUA` throw-up in seven loops of bubble-script (one per letter), each loop a closed bezier shape. Each shape has: 1. A solid `--chrome-base` fill. 2. A radial gradient overlay from `--chrome-highlight` (top-left) through `--chrome-base` (center) to `--chrome-shadow` (bottom-right), mimicking the way light reflects off a curved chrome bubble. 3. A 2.5px stroke in `--abyssal-black` for letterform edge definition. 4. **Drips** — 3 to 7 vertical paint runs per letter, each one a tapered drop-shape SVG path beginning at the lowest curve of the letter, with a length between 18px and 96px, terminating in a small bulb. Drip count and drip lengths are deterministic per letter but appear random. 5. A subtle SVG `feTurbulence` + `feDisplacementMap` filter (baseFrequency 0.02, scale 1.4) applied to all paths to roughen the edges into spray-feathering. The tag is **finished** — no animation. It is a single sprayed gesture caught at the moment after the can was lowered. Frozen. The drips are mid-fall but not falling. **HUD ornament inventory.** - 4 corner brackets — L-shaped 32px lines, 1.5px stroke `--steel-line`, with a 4px inner offset from the viewport corners. - 1 depth ladder — vertical, 1200 ticks total (every 1m, but only every 25th rendered; visual fidelity at 100m intervals). - 1 polar sonar plot — 6 range rings, 1 sweep, contact dot field. - 1 heading rose — small circular compass with N/E/S/W tick marks, current heading needle in `--telemetry-cyan`. - 1 listing-angle indicator — horizontal level bubble with center detent, oscillating ±5°. - 1 hull-stress meter — vertical bar chart, 16 segments, fill rises and falls between segments 8 and 13. - 1 longitude crosshair — full-viewport horizontal + vertical hairline at the optical center of the cutout, in `--steel-faint`. - 1 teletype band. **Texture.** A single 80KB transparent PNG (`grain-noise-spray.png`, 256×256, tileable) is multiplied over the graffiti plane only — *not* over the HUD. The HUD remains crisp digital chrome. The graffiti carries the granular texture of physical aerosol on cold metal. ## Prompts for Implementation Build daitoua.com as **one HTML document, one CSS file, one ES module, one 80KB chrome-grain PNG, and one inline SVG sprite containing every HUD primitive plus the DAITOUA graffiti path**. No framework. No bundler. No router. No service worker. Total uncompressed bundle target: under 160KB. The page is one fixed instrument with one scrolling interior tape. Bias every implementation decision toward **broadcast-as-experience and tag-as-signature**, never toward the corpus-default landing page patterns. **Storytelling commitments.** - The narrator is *the HUD itself*, speaking in third-person institutional present tense. No "we." No "you." No second person. The HUD speaks of `the operator`, `the bearing`, `the pressure`. The reader is not addressed; the reader is **eavesdropping**. - Beneath the institutional voice — exactly twice on the page, in the lower-right corner of the cutout — a graffiti voice in `Permanent Marker` writes `daitoua was here.` and `fck the cone.` These are the only first-person utterances on the page, and they belong to whoever sprayed the tag. - Reading time target: 75 seconds. The cutout interior holds approximately 320 words of HUD-voice broadcast text and zero CTA text. There are no buttons, no forms, no pricing, no testimonials, no stat grids, no FAQ, no comparison tables, no feature lists, no product showcase, no portfolio cards, no team bio, no contact form. There is the broadcast and the tag. That is all. - The page is finished. It is the cover of an authority that has been marked. The user does not interact with it the way a user interacts with a SaaS landing page. The user *reads it the way they read a wall in a tunnel*. **Animation system.** - A single global `--t` CSS custom property is updated at 30Hz from JS via `requestAnimationFrame` and one shared time integrator. Every animated element reads `--t` directly through `calc()` chains, so all motion is phase-locked to one clock. - **The polar sonar sweep** rotates at exactly one revolution per 18s (`--sweep-rad: calc(var(--t) * 0.349)` rad/s). The sweep is rendered as an SVG `` with `transform-origin: center` and `transform: rotate(...)`. As the sweep crosses each contact dot, that dot's opacity ticks from 0 to 1 over 80ms and decays back to 0 over 1.4s. This is the only true cyclic animation on the HUD. - **Telemetry numerical jitter.** The depth, pressure, signal-integrity, and bearing values tick at 4Hz with values drawn from a deterministic noise function so they appear live but are reproducible per session. Implementation: every 250ms, JS writes new `textContent` to seven `` numerical cells. The numbers do *not* count up or down dramatically; they oscillate within ±0.4 of their declared midpoint. - **The teletype band** prints right-to-left at 18 characters per second using a small grammar that selects from a 24-line corpus of broadcast strings, joined with `·` separators. When a line completes, the next line begins at the right edge and pushes the previous line leftward. - **Floating geometric primitives** in the cutout drift via a per-element transform `translate3d(--vx*--t, --vy*--t, 0) rotate(--rv*--t)`. Velocities are tiny — 4 to 14 px/s. When a primitive crosses a cutout edge, it wraps to the opposite edge. - **The center cutout interior** translates upward as the user scrolls. The page body has `overflow: hidden`; the interior is a single absolutely-positioned element whose `transform: translateY(...)` is bound to scroll progress at a 1:1 mapping. - **The graffiti tag does not animate.** It is finished spray-paint, frozen. The chrome highlight does not glint. The drips do not drip. - **The hull-stress meter** has a slow 7-second oscillation between segments 8 and 13. **The listing-angle bubble** oscillates ±5° on a 23-second period; when |angle| exceeds 4°, the bubble color flips to `--alarm-amber` for the duration above threshold. This is the only place amber appears on the page. **The corpus-dominant patterns this page deliberately does NOT use.** - **`parallax`** (95% of corpus) — *not used*. The HUD is a flat instrument plane. Parallax would imply z-axis depth, and this page commits to a single rigid frame. - **`cursor-follow`** (78% of corpus) — *not used*. The cursor is the operator's hand on the console, nothing more. No glow, no ghost, no magnetic trail. - **`spring`** (78% of corpus) — *not used*. Submarine instruments do not bounce. They hold. - **`stagger`** (75% of corpus) — *not used*. Things either are or are not on a HUD; they do not enter staggered. - **`magnetic`** (68% of corpus) — *not used*. There are no buttons to magnetically attract. **The corpus-rare patterns this page commits to.** - **`glitch`** (12% of corpus) — used in three specific moments, never decoratively. (1) When the signal-integrity readout drops below 50% (which it does on a 31-second period), the entire teletype band glitch-shifts horizontally by 1–3 character widths for 180ms before settling. (2) When the hull-stress meter peaks at segment 13, the polar sonar's sweep line stutters one frame backward before continuing. (3) The graffiti tag's `DAITOUA` text — for exactly one frame, every 47 seconds, randomly positioned within that window — RGB-channel-splits horizontally by ±2px (red shifts left, blue shifts right) before snapping back. The user may or may not catch it. - **`fade-reveal`** (7% of corpus) — used for the floating geometric primitives, which fade in over 1.2s on initial page load, never on scroll-trigger. **Glitch implementation specifics.** The teletype glitch is achieved with a CSS class `.glitch-burst` that applies a brief `text-shadow: -2px 0 var(--telemetry-cyan), 2px 0 var(--alarm-amber)` and a `transform: translateX(...)` step. JS toggles the class at the appropriate moments. The graffiti RGB-split uses a CSS filter `drop-shadow(2px 0 0 #ff003c) drop-shadow(-2px 0 0 #00d4ff)` applied for one frame. **Spray paint SVG filter.** A reusable `` is defined once and applied to all graffiti paths: 1. `` 2. `` 3. `` (slight thickening to mimic spray buildup) 4. `` (very mild edge softening) The `seed` is fixed at 14 — every visit produces the *same* tag. This is a finished piece of graffiti, not a procedural one. **HUD line rendering.** All HUD strokes use `vector-effect: non-scaling-stroke` so lines remain 1.5px regardless of viewport scale. All HUD coordinates are computed in `vmin` units so the instrument frame scales proportionally on portrait and landscape. The HUD never breaks layout below 720px viewport — instead, the page falls back to a single-column reduced-HUD mode where the polar plot moves to the top, the depth ladder hides, and the cutout fills the remaining vertical space. The graffiti tag remains; it scales to viewport diagonal. **The two graffiti voice elements** (`daitoua was here.` and `fck the cone.`) are positioned `absolute` inside the cutout's lower-right corner. They are NOT inside the graffiti `mix-blend-mode: difference` plane; they are inside the cutout content layer, where they appear as black `Permanent Marker` strokes with mild SVG-filter spray edges. They are subtle. The visitor reads them only after they have absorbed the HUD. **Color rendering discipline.** Every text fill is a flat hex color. No gradients on text. No `background-clip: text`. The chrome inside the graffiti tag is the only place gradients appear, and those gradients are *radial-as-shading*, not linear-as-decoration. Every HUD line is a single hex color stroke. The page is austere about color exactly the way submarine instrumentation is austere about color. **Performance discipline.** When `prefers-reduced-motion: reduce` is set: the polar sweep stops at its current angle; the telemetry numbers freeze at their declared midpoints; the teletype band stops scrolling and shows one static line; the floating geometric primitives stop drifting; the listing bubble stops oscillating; the glitch bursts are suppressed. The graffiti tag is unchanged because it was never animated. The page remains fully readable, fully on-message. **What this page is NOT.** - Not a SaaS landing page. - Not a product showcase. - Not a portfolio. - Not a pricing comparison. - Not a CTA-driven funnel. - Not a stat grid, testimonial row, FAQ accordion, comparison table, or feature ladder. - Not a Hollywood "hacker UI" pastiche. The HUD is dignified, austere, slow. It is not flashing red text on green. It is not a Mr. Robot screen. - Not a retro vaporwave throwback. The chrome here is graffiti chrome (Bronx 1981), not vaporwave chrome (Tumblr 2014). The depth here is real depth, not synthwave grid-floor depth. - Not a cyberpunk dashboard. There is no neon magenta. There is no tron grid. The color discipline is tighter than that. The site exists to deliver a 75-second deep-water broadcast that has been tagged. The HUD reads. The tag stays. That is the entire scope. Anything that does not serve that scope is excluded. ## Uniqueness Notes Differentiators from the other 140 designs in the registry: 1. **Layout commitment to hud-overlay (corpus 1%) as the entire page chrome, not a decoration.** Of the 140 prior DESIGN.md files, hud-overlay appears in roughly one. The corpus default is full-bleed (91%) with card-grid (77%) inside. daitoua.com refuses both: the page is a single fixed instrument frame with a single scrolling interior tape, and the user never leaves that frame. The "scroll feed" pattern that drives roughly every other site in the registry is structurally absent here. 2. **Two visual languages on two paint planes that never touch.** The HUD plane is austere submarine instrumentation — flat fills, hairline strokes, tabular numerals, tech-mono in `Major Mono Display`. The graffiti plane is one finished aerosol gesture in `Permanent Marker` with chrome shading and frozen drips. The two planes are isolated by `mix-blend-mode: difference`, so the tag inverts the HUD wherever it crosses it. This compositional move — *graffiti as a difference layer over a working instrument* — does not appear elsewhere in the registry. 3. **Authoritative tone (corpus 7%) executed as third-person institutional broadcast voice with zero second-person address.** The corpus-dominant tones are pastoral-romantic (27%) and warm-inviting (23%). daitoua.com is 0% warm and 0% conversational. The page never says "you," never says "we," never says "explore" or "discover" or "join." The HUD speaks of `the operator`, `the bearing`, `the pressure`. The reader is structurally excluded from the address — they are eavesdropping on a broadcast made for someone else. 4. **Zero gradient on a page in a corpus that is 97% gradient.** Every HUD surface is a true flat fill in one of the eleven palette tokens. Gradients appear only inside the chrome bubbles of the graffiti tag (radial-as-shading) and in the polar sonar sweep falloff (linear-as-physics). There is no atmospheric gradient sky, no hero gradient, no card gradient, no button gradient — there are no buttons. 5. **Zero warm color (corpus 96% warm).** The single warm token, `--alarm-amber #D4A341`, is reserved as a *function* — it appears only when the listing-angle bubble exceeds 4°, for the duration of the threshold violation. No headline is warm. No accent is warm. No icon is warm. The page is entirely cold blue-gray-chrome by structural commitment. 6. **Floating geometric primitives as drift-organisms, not particle effects.** The 14 wireframe Platonic-solid primitives in the cutout are deterministic per seed, drift at 4–14 px/s, and never collide with text. They are *quiet*. They are not the corpus-typical particle field that bursts on cursor-enter or scroll-trigger. They simply float, the way single-celled organisms float at depth — slowly, indifferently, on their own time. 7. **Glitch (corpus 12%) used as physics, not as decoration.** Glitch on this page only fires when the diegetic system has a reason — signal-integrity drops, hull-stress peaks, or a 47-second background interference cycle hits the tag. Glitch never fires on hover, never fires on scroll, never fires "for vibes." Each glitch event is a *symptom* of the HUD's narrative state. 8. **The graffiti tag is finished, not procedural.** Using a fixed `feTurbulence` seed of 14, the DAITOUA tag renders identically every visit. This is a deliberate refusal of the corpus-typical "every visit is unique" generative posture. The tag is a piece of evidence, not a generator output. Someone sprayed it once. It is there now. 9. **Major Mono Display + JetBrains Mono + Permanent Marker as the entire type system.** Three Google fonts, each with a structural role: Major Mono Display for HUD instrumentation, JetBrains Mono for broadcast text, Permanent Marker for the tag and the two hand-scrawled corner notes. No serif. No humanist sans. No display face. The corpus default of mono (96%) + humanist (45%) is rejected; this page is mono-only on the digital plane and hand-tag on the physical plane. 10. **Reading time target of 75 seconds for ~320 words of broadcast text and zero CTA.** The page is structured as a *single document to be read*, not as a navigation hub or a conversion funnel. Bounce rate is not the metric. *Did you stay for the full 75 seconds and notice the second graffiti line in the corner?* — that is the metric. **Chosen seed (from assignment):** `aesthetic: graffiti, layout: hud-overlay, typography: tech-mono, palette: ocean-deep, patterns: glitch, imagery: geometric-abstract, motifs: floating-elements, tone: authoritative`. Every dimension of this seed lands in underused corpus territory: graffiti 5%, hud-overlay 1%, tech-mono 10%, ocean-deep 3%, glitch 12%, geometric-abstract 3%, floating-elements 5%, authoritative 7%. There is no overlap with the corpus's three saturation zones (full-bleed/card-grid layouts, gradient/warm palettes, parallax/cursor-follow/spring/stagger/magnetic patterns). **Avoided patterns from frequency analysis.** Explicitly not used: hand-drawn (96%), glassmorphism (68%), photography (98%), full-bleed (91%), card-grid (77%), gradient (97%), warm (96%), parallax (95%), cursor-follow (78%), spring (78%), stagger (75%), magnetic (68%), pastoral-romantic tone (27%), warm-inviting tone (23%). Each absence is a structural choice consistent with the seed, not an arbitrary refusal.