# Design Language for daitoua.quest ## Aesthetics and Tone `daitoua.quest` is **a transmission from a signal that hasn't been decoded yet** — imagine a broadcast architecture designed by the first team to make contact with a non-human intelligence: not the screaming emergency of a sci-fi thriller, but the **still, expectant precision of a listening array at 3:00 AM, when the last technician has gone home and the antennas are turning themselves, autonomously, toward a frequency no one has named yet**. The aesthetic is dark-mode absolute — not dark-mode as fashion, not dark-mode as "we added a toggle," but dark-mode as the **only possible substrate for this kind of signal**. The page is a void that has been measured. Background is `#050507`, a near-void with a faint indigo bias that reads as black on any display but carries a sub-perceptible coolness when placed beside the foreground elements. The tone is **futuristic-cutting-edge** in the rarest register: not the aggressive-confident tone of a startup pitch, not the chrome-and-explosion tone of a game trailer, but **the clinical awe of a measurement that cannot yet be explained**. Every word is chosen the way a systems architect chooses a variable name — minimal surface area, maximum semantic load. The site does not try to impress. It presents evidence. This is not a site about artificial intelligence. It is not about crypto. It is not about any named technology. It is about **the unnamed thing that is arriving**, and the quiet infrastructure being built to receive it. The visitor is not a customer. The visitor is a **witness**. ## Layout Motifs and Structure The structure is **single-column, narrow-measure, with deliberate breathing air on both sides** — a column width of `clamp(560px, 52vw, 680px)` centered on the viewport, producing visible dark margins on either side at any viewport above 800px. These margins are not empty: each margin contains exactly one **passive motif element** (described in Imagery section) that does not move, does not animate, and does not respond to interaction. The margins are the periphery. The column is the signal. **The single-column cascade is organized into five signal blocks, each separated by `88px` of vertical silence:** 1. **Block 0 — The Identity Anchor.** A single wordmark: `daitoua` in Space Grotesk 300 weight at `clamp(52px, 7.2vw, 96px)`, tracked at `+0.06em`, no decoration, color `#E8E2F8`. Below it, on a separate line, `.quest` in the same font but at `clamp(18px, 2.1vw, 28px)`, color `#5A547A`, tracked at `+0.18em`. The wordmark is not a logo — it is a label on a container. No animation. No entrance. It is simply present when the page loads, already finished loading. 2. **Block 1 — The Skeleton Prelude.** Three content-width skeleton bars at heights 14px, 14px, 10px, with `gap: 10px`, rendered in the skeleton-loading pattern (described in Patterns section). These are **not placeholders for real content** — they are the **content itself**: a visual metaphor for data in transit, a signal being received but not yet decoded. After a 1400ms delay, they resolve (via CSS transition) to reveal a two-line descriptor text in Space Grotesk 300 at 16px / 28px line-height, color `#8A84A8`. The revealed text: first line in `#8A84A8`, second line in `#5A547A`. The skeleton-to-text transition is the only animation on the page. It happens once, on load, and never repeats. 3. **Block 2 — The Signal Matrix.** A 3×2 grid of abstract signal cards, each `clamp(160px, 16vw, 220px)` wide × `190px` tall, with `gap: clamp(16px, 2.4vw, 28px)`. Each card has background `#0D0C14`, border `1px solid #1C1A2C`, and contains one SVG abstract-shape motif (described in Imagery) centered within it, plus a two-word label beneath in Space Grotesk 500 at 11px, `letter-spacing: +0.14em`, uppercase, color `#4A4468`. No hover states. No interaction. The cards are static instruments, not interactive components. 4. **Block 3 — The Protocol Statement.** A single typographic block of four short paragraphs, each 2–3 lines, separated by `32px`. Each paragraph is a precise, declarative observation about the domain's purpose — the kind of statement that would appear in a mission log, not a marketing document. Space Grotesk 300 at `clamp(15px, 1.8vw, 18px)` / `1.8` line-height, color `#8A84A8`. Key phrases (one per paragraph) are lifted to `#C8C2E8` — not bold, not underlined, simply lighter, the way a technician circles a reading on a printout. 5. **Block 4 — The Coordinates Footer.** Three data points in a horizontal row, each labeled with a four-character code in Space Grotesk 500 at 10px uppercase `#3C3858` and a value in Space Grotesk 300 at 13px `#6A6488`. A thin `1px` horizontal rule above the footer in `#1C1A2C`. No copyright, no social links, no navigation. Coordinates only. **No sticky elements. No navigation bar. No hamburger menu. No CTA buttons. No modals.** The scroll is a single linear descent, and the bottom of the page is the end of the document. ## Typography and Palette **Typography — one font, wielded precisely:** - **Sole typeface — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** (variable, wght 300–700): The entire site runs on a single font family. Space Grotesk carries the appropriate formal tension — it is a geometric grotesque with slight optical quirks that prevent it from being sterile. The `3` and `6` and `9` have a mild ink-trap quality; the terminals are not perfectly round. This is the right typeface for measurements that are still being processed. Used at weights 300 (body, labels) and 500 (data codes, card labels). No 700. No italic. **Palette — duotone, cold, precise:** - **Page void:** `#050507` — near-black with a 2% blue-indigo bias. Never pure black. - **Card void:** `#0D0C14` — lifted from the page void by exactly 8 points of lightness. The grid cards read as separate surfaces without any depth illusion. - **Border/rule:** `#1C1A2C` — the hairline that separates surfaces. Used for card borders, footer rule, and skeleton bar base color. - **Skeleton active:** `#2A2840` — the shimmer target in the skeleton animation. Only slightly lighter than the border color. - **Primary text (revealed):** `#E8E2F8` — off-white with a cold lavender lean. Not pure white. The `#E8E2F8` of a screen in a dark room. - **Secondary text:** `#8A84A8` — the working grey, where most body copy lives. Has violet undertones that reinforce the cold register. - **Muted text:** `#5A547A` — subdomain label, second-line descriptors, card sub-labels. The quietest voice. - **Highlight lift:** `#C8C2E8` — key phrases within paragraphs. Lighter than secondary, darker than primary. The pencil circle on a printout. - **Data codes:** `#4A4468` — card data labels, footer coordinate codes. Almost disappearing into the void. - **Skeleton shimmer gradient:** linear-gradient from `#1C1A2C` → `#2A2840` → `#1C1A2C`, animated at `1.6s` ease-in-out infinite, running left-to-right as a 200% wide background-position shift. **No red. No green. No orange. No warm tones anywhere in the palette.** The duotone is cold violet-black and cold off-white. The entire palette sits in a 5° hue window between `270°` and `275°` (violet-indigo), expressed at varying lightness levels. ## Imagery and Motifs **No photography. No illustration. No stock. No icons from libraries.** All imagery is **inline SVG, constructed from pure geometric primitives** — ``, ``, ``, ``, ``. No fills except the page and card backgrounds. No gradients in imagery. All strokes are `1px`, color `#2A2840` for passive elements, `#3C3858` for the margin motifs. **The abstract-shapes motif vocabulary — three families:** 1. **Signal bloom.** A radial arrangement of 7–9 concentric arcs (SVG `` paths), each arc covering 40°–80° of a circle at different radii (20px, 32px, 48px, 68px, 92px, 120px, 154px). No arc is complete. No arc starts at the same angle as another. The result reads as a partial radar return, a frequency envelope, or a map of a wave that has passed through an aperture. Used in Block 1 margin (left) and two of the six signal cards. Stroke color: `#2A2840`. Size: 160×160 viewBox. 2. **Coordinate grid fragment.** A sub-section of a grid where only certain intersections are marked — not all of them, and not the intersections you'd expect. Composed of: 4–6 horizontal lines at irregular spacings (not a uniform grid), 3–5 vertical lines, and small square markers (3×3px, no fill, `1px` stroke) at 5–7 selected intersections. The grid is rotated `12°` from horizontal. Reads as a fragment of a larger coordinate system that extends beyond the viewBox. Used in Block 3 margin (right) and two of the six signal cards. Stroke color: `#2A2840`. Size: 160×160 viewBox. 3. **Decomposition polygon.** A convex polygon (7–9 vertices, irregular) that has been exploded into its constituent triangulated faces, each face rendered as a separate closed `` with no fill, `1px` stroke, and a `0.5px` gap between adjacent faces. The geometry reads as a 3D form that has been unfolded or collapsed. Not organic — entirely rectilinear and precise, as if produced by a mesh decimation algorithm. Used in two of the six signal cards and not in the margins. Stroke color: `#2A2840`. Size: 160×160 viewBox. **Margin motifs (the periphery elements):** Each margin (left and right) contains exactly one SVG motif, positioned `fixed` at `top: 38vh`, vertically centered with the reading column's mid-point. Left margin: signal bloom, 200×200, opacity 0.45. Right margin: coordinate grid fragment, 200×200, opacity 0.45. Both are `pointer-events: none`, `user-select: none`, `position: fixed`. On viewports narrower than 900px, both margin motifs disappear entirely (`display: none`). They are never interactive. They are the periphery. **Abstract-tech motif doctrine:** every SVG in the design is derived from the same formal vocabulary: partial arcs, irregular-spacing grids, triangulated mesh fragments. No circles used as decorative blobs. No wavy organic lines. No hand-drawn jitter. Every path point is on a grid. The shapes are **measurements, not decorations**. ## Prompts for Implementation Build `daitoua.quest` as **a single HTML file with embedded CSS and minimal vanilla JS** (≤ 80 lines of JS). No framework. No build step. No external JS. One Google Fonts `` tag for Space Grotesk. **The skeleton-loading pattern is the pivot of the entire experience.** Implement it as follows: - Three `.skeleton-bar` elements inside a `.skeleton-prelude` container. - CSS: `background: linear-gradient(90deg, #1C1A2C 0%, #2A2840 50%, #1C1A2C 100%)`, `background-size: 200% 100%`, `border-radius: 3px`, `animation: shimmer 1.6s ease-in-out infinite`. - The `@keyframes shimmer` moves `background-position` from `200% 0` to `-200% 0`. - After 1400ms (set via `setTimeout` in JS), add class `.resolved` to the container. - `.skeleton-prelude.resolved .skeleton-bar` → `opacity: 0`, `transition: opacity 0.3s`. - `.skeleton-prelude.resolved .skeleton-text` → `opacity: 1`, `transition: opacity 0.5s 0.2s`. - The `.skeleton-text` is positioned absolutely over the bars, initially `opacity: 0`. **Signal Matrix grid:** - CSS Grid: `grid-template-columns: repeat(3, clamp(160px, 16vw, 220px))`, `justify-content: center`. - Each card: `background: #0D0C14`, `border: 1px solid #1C1A2C`, `padding: 32px 20px 20px`. - SVG centered via `display: flex; align-items: center; justify-content: center` on a wrapper. - Card label: `Space Grotesk 500, 11px, letter-spacing: 0.14em, text-transform: uppercase, color: #4A4468`. - On viewports < 640px, collapse to `grid-template-columns: repeat(2, 1fr)`. **Margin motifs:** - Each motif is a `
` containing an inline SVG. - `position: fixed; top: 38vh; left: calc(50% - 340px - 120px)` for left, `right: calc(50% - 340px - 120px)` for right. - `pointer-events: none; user-select: none; opacity: 0.45`. - `@media (max-width: 900px) { .margin-motif { display: none; } }`. **Typography implementation:** - `font-family: 'Space Grotesk', sans-serif` on `html`. - `font-weight: 300` as the base weight. - `font-size: clamp(15px, 1.8vw, 18px)` on `body`. - `line-height: 1.8` on body text blocks. - `letter-spacing: 0.02em` on body; `letter-spacing: 0.14em` on code-like labels. **Page-level CSS resets:** - `* { box-sizing: border-box; margin: 0; padding: 0; }`. - `html { background: #050507; color: #8A84A8; scroll-behavior: smooth; }`. - No custom scrollbar styles. The default OS scrollbar is correct for this aesthetic. **The five signal blocks must use semantic HTML:** - Block 0 → `
` - Block 1 → `
` - Block 2 → `
` - Block 3 → `
` - Block 4 → `