# Design Language for daitoua.com

## Aesthetics and Tone

**daitoua.com** is a **scholarly sci-fi terminal** — imagine a JAXA mission analyst who spent a decade at CERN writing her PhD on high-energy astrophysics, then rebuilt her personal research portal as a command-line interface that also happens to display aurora-class light emissions from the outer ionosphere. The site is not a portfolio page. It is a **research station readout**: the kind of interface a field scientist keeps running on a secondary monitor while real data streams in on the primary. Everything is calibrated, annotated, and quietly luminous.

The aesthetic is **terminal** — monochrome grid fabric, scanline-grade spacing, prompt chevrons, and inline command echoes — but the palette breaks protocol: **aurora-gradient** light leaks in from the upper-right quadrant, as though the station window is open to a boreal sky and the green-violet-rose gradient is bleeding across the dark grid. The terminal is not a metaphor for nostalgia. It is a working instrument that happens to be beautiful.

Tone is **scholarly-intellectual**: every word earns its place. No marketing copy. No "welcome to my site." The text reads the way an abstract reads — dense, precise, occasionally delighting in a subordinate clause that drops a revelation sideways. The visitor is assumed to be as curious as the author.

## Layout Motifs and Structure

The entire page is **centered**: a fixed `min(760px, 92vw)` column anchored to the horizontal midline, against a near-black background (`#080c10`). Vertical rhythm is built on a strict `8px` baseline grid — every line height, every gap, every padding value is a multiple of 8. The column reads like a terminal session: top to bottom, no sidebar, no sticky chrome, no horizontal navigation.

**Macro structure (seven sequential stations, scrolled as one session):**

1. **`STATION::INIT`** — Top of the column. The domain wordmark `daitoua.com` rendered in `Space Grotesk` 700 at `clamp(2.4rem, 6vw, 5.6rem)`, tracking `-0.04em`, against the dark ground. Below it, a one-line mission descriptor in `JetBrains Mono` 400, size `0.85rem`, color `#5a7a6a` — a coordinates-style string: `lat 35.68 · lon 139.76 · alt 380km · epoch J2026.33`. Immediately below, a `1px` horizontal rule in `#1a2e2a` with a small aurora-gradient glow baked in via `box-shadow`.

2. **`STATION::SIGNAL`** — Research focus. A 3-column micro-grid (stack to 1 on mobile) of **data-viz cards**: three thin-bordered rectangular panels, each containing a small inline SVG chart (one line chart, one radial gauge, one dot-matrix grid), a label in mono, and two lines of description in grotesk. Cards have `1px` solid borders in `#1e3830`, background `#0a1218`, and the hover-lift pattern: `transform: translateY(-4px)` + `box-shadow: 0 8px 32px rgba(74,200,140,0.12)` on `:hover`. The aurora leaks in through the box-shadow color only — no gradients on the card face itself.

3. **`STATION::LOG`** — A terminal-style scrollback log. Each entry is prefixed with a timestamp `[2026-04-17T14:22:06Z]` in `#3d5a50` mono, followed by a title in grotesk weight 600, followed by 2–3 lines of description. Entries are separated by a single blank line, no dividers. The log reads like a commit history crossed with a research journal entry.

4. **`STATION::SCOPE`** — The centerpiece: a full-width (within the column) **SVG data visualization** — a stylized sky-scan chart showing a polar arc with annotated waypoints and a gradient fill running from `#0a4a2a` (deep green) through `#2a1a4a` (deep violet) to `#3a0a2a` (deep rose), mirroring the aurora palette. This is decorative-functional: the paths are labeled, the axes have tick marks, and the overall effect reads as a real instrument output, not clip art.

5. **`STATION::INDEX`** — A structured list of publications/projects. Each entry is a two-line item: a mono-text identifier `[D-0042]` in muted green, followed by a title in grotesk, followed by a secondary line in small mono giving venue and year. Entries are separated by a `1px` dashed rule in `#1a2e2a`.

6. **`STATION::CONTACT`** — A minimal terminal prompt block. A blinking cursor animation. Two or three contact vectors displayed as if they are shell output lines: `> pgp ────────── 0xABCD1234EF56`, `> email ──────── daitoua@daitoua.com`, `> matrix ─────── @daitoua:matrix.org`. Each line in `JetBrains Mono`, `0.875rem`.

7. **`STATION::EOF`** — End of the session. A single line: `[EOF · session 4096 · uptime 11y 203d 14h]` in `#3d5a50` mono at `0.75rem`. No further elements.

**Transition between stations:** each station header `STATION::INIT` etc. is rendered as a terminal section banner — a full-width dark bar (`#0d1a14`) with `1px` top border in `#1e3830`, containing the station label in `JetBrains Mono` 500 uppercase, tracked `0.14em`, color `#3d8a6a`.

## Typography and Palette

**Typography (Google Fonts only — two families, strict roles):**

- **Display / UI Labels / Body Prose:** [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weights 400 and 700. Used for the wordmark, section prose, card descriptions, and nav-equivalent station labels. At display size (`clamp(2.4rem, 6vw, 5.6rem)`), weight 700, tracking `-0.04em`. At body size (`1rem / 1.75`), weight 400. Space Grotesk's geometric structure and slightly unconventional letterforms (the `a`, `g`, `6`) give it a technical-but-human quality that is neither cold corporate sans nor retrofuturist novelty.

- **Code / Timestamps / Data Labels / Prompts:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono), weights 400 and 500. Used for all monospaced content: log timestamps, coordinate strings, station headers in the terminal banner, the EOF line, and the contact prompt block. At `0.875rem / 1.6` for body mono. At `0.75rem / 1.5` for secondary annotations.

**Palette (7 hex values, named for station use):**

- `--ground`: `#080c10` — near-black with a blue-green undertone. The page background. Not pure black — the undertone keeps it alive under dark monitors.
- `--surface`: `#0a1218` — card and panel backgrounds. Slightly lighter than ground.
- `--border`: `#1e3830` — all structural borders, rules, and dividers. Dark teal — visible but not bright.
- `--dim`: `#3d5a50` — secondary mono text (timestamps, EOF line). Low luminance teal-green.
- `--mid`: `#3d8a6a` — station header text, active prompt characters. Mid-luminance green.
- `--aurora-green`: `#4ac88c` — primary accent: link underlines, hover glow color, cursor blink. The brightest green in the aurora band.
- `--aurora-violet`: `#7c54d4` — secondary accent: the scope chart violet gradient stop, occasional highlight borders.
- `--aurora-rose`: `#c84a8a` — tertiary accent: sparse use only — one data point color in the scope chart, blinking cursor alternate color.
- `--text`: `#c8d8cc` — main prose text. Light gray with a green tint — easier on the eyes against the dark ground than pure `#ffffff`.

**Aurora gradient (CSS):** `linear-gradient(135deg, #4ac88c 0%, #7c54d4 55%, #c84a8a 100%)` — used only as a `background-clip: text` treatment on the wordmark on `:hover`, as the scope chart fill, and as the `box-shadow` color source on card hover. The gradient is **never** used as a full-bleed background wash.

## Imagery and Motifs

**No photography.** No stock images. No portraits. No decorative icons in the conventional sense. The entire visual world is built from three families of original form:

1. **Inline SVG data visualizations.** The page's primary visual language. Three small card charts (line, radial, dot-matrix) and one full-width scope arc chart. All SVGs are hand-authored (or generated with explicit coordinate logic), with labeled axes, tick marks, and data paths that appear to represent real instrument readings. The color palette is strict: paths in `--aurora-green`, fills in gradients from `--surface` to the aurora stops, axes and grid lines in `--border`. No decorative flourishes — every SVG element has a semantic role.

2. **Terminal chrome motifs (CSS-only).** The `STATION::` banners, the prompt chevron `>` character, the timestamp brackets `[…]`, the dotted rules `──────────`, and the blinking cursor are all rendered in CSS and HTML — no image assets. The blinking cursor is a `1ch × 1.1em` block pseudo-element on the contact section, animated with a `step-end` keyframe between `--aurora-green` and `transparent` at 1.1s intervals.

3. **Sci-fi HUD overlay (subtle, SVG).** In the hero station (`STATION::INIT`), a secondary `<svg>` element positioned `position: absolute; top: 0; right: 0; width: 40%; height: 100%; pointer-events: none; opacity: 0.07` — a faint corner reticle: thin arcs, a crosshair tick, and two small angle brackets in the upper-right corner of the wordmark area, evoking the HUD overlay of a targeting or tracking interface. Opacity is held below `0.10` so the motif is felt rather than seen; it becomes legible only when the visitor pauses and looks directly at the corner.

**Hover-lift pattern:** all interactive elements (data cards, index entries, external links) use `transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease`. On `:hover`: `transform: translateY(-3px)`, `box-shadow: 0 6px 24px rgba(74,200,140,0.14)`. The cubic-bezier gives a very slight overshoot — the element lifts with a micro-spring, then settles. This is the only animation on the page beyond the cursor blink and the scope chart's on-scroll `stroke-dashoffset` draw animation.

## Prompts for Implementation

Build daitoua.com as a **single, calibrated research station session** — a terminal interface for a field scientist whose work spans astrophysics, data systems, and long-form inquiry. The page is read top to bottom, slowly, in one column. Every element should feel like it belongs to an instrument: labeled, measured, and quietly authoritative.

**Story arc (seven stations, single-column scroll, no horizontal nav, no modals):**

1. **`STATION::INIT`** — Opens with the wordmark and a coordinates string. The HUD overlay is barely visible in the upper-right. The only movement is the `1px` aurora-glow rule below the wordmark pulsing at 4s intervals with a `box-shadow` keyframe from `rgba(74,200,140,0.0)` to `rgba(74,200,140,0.3)` and back. The effect is a slow heartbeat — the station is alive.

2. **`STATION::SIGNAL`** — Three data cards arranged in a 3-column CSS grid (`grid-template-columns: repeat(3, 1fr)`, gap `16px`, collapsing to 1 column below `520px`). Each card holds one SVG chart:
   - Card A: A line chart showing a 24-point time series (signal amplitude vs. time). Path in `--aurora-green`, fill a gradient from `rgba(74,200,140,0.15)` to transparent.
   - Card B: A radial gauge (donut arc from 0° to 270°, filled 68%), track in `--border`, fill in `--aurora-violet`.
   - Card C: A 7×7 dot-matrix grid (49 circles, radius 3px), colored by value from `--border` (low) through `--aurora-green` (high), arranged as a heat map.

3. **`STATION::LOG`** — Five log entries. Each prefixed `[ISO-8601 timestamp]` in `--dim`, followed by a title in `Space Grotesk` 600 at `1rem`, followed by 2 lines of body at `0.9rem` in `--text`. No bullet points. No cards. Pure vertical stacking with `2rem` between entries. The most recent entry is first (reverse chronological).

4. **`STATION::SCOPE`** — The full-width SVG arc chart. A polar coordinate projection: a semicircular arc spanning the full column width, center-anchored at the bottom edge of the SVG. The arc is divided into 12 angular segments (30° each), each labeled with a Greek letter (α through μ) at the outer rim. A radial gradient fill in the aurora colors (`#0a4a2a → #2a1a4a → #3a0a2a`) fills the arc interior. Three annotated waypoints (small circle markers + mono labels) are placed at specific angles. The arc paths are drawn with a `stroke-dashoffset` animation triggered by the IntersectionObserver when the SVG enters the viewport — the arc draws itself over 1.8s at `ease-out`.

5. **`STATION::INDEX`** — Seven publication/project entries. Each entry: `[D-00XX]` identifier in `JetBrains Mono` 500, color `--mid`, at `0.875rem`; then a title in `Space Grotesk` 600, `1rem`, color `--text`; then a secondary line `venue · year` in `JetBrains Mono` 400, `0.75rem`, color `--dim`. Between entries, a `1px` dashed rule in `--border`. On `:hover`, the entire entry block gets the hover-lift treatment.

6. **`STATION::CONTACT`** — A terminal block. A mock shell prompt: `daitoua@station:~$` in `--mid` mono at `0.875rem`, followed by a cursor blink block. Below it, three output lines each formatted `> key ────── value` where the key is in `--mid` and the value is in `--aurora-green`. The dashes `──────` are U+2500 box-drawing characters, width auto-adjusted with a `ch` unit so the values align to a consistent column regardless of key length (use `display: grid; grid-template-columns: 10ch 1fr`).

7. **`STATION::EOF`** — A single `<p>` tag in `--dim` mono, `0.75rem`, centered horizontally. Below it, `4rem` of padding to close the session with breathing room.

**Do not implement:** sticky headers, modal overlays, hamburger menus, carousel/slider components, infinite scroll, cookie banners, social sharing bars, testimonial blocks, pricing tables, CTA buttons with gradients, hero video, parallax on the background layer (only the scope arc draws on scroll), or any animation with duration > 2s or easing that feels decorative rather than instrumental.

**Accessibility:** all SVG charts must have `<title>` and `<desc>` elements. All interactive elements must have `:focus-visible` outlines in `--aurora-green` at 2px offset. The blinking cursor must respect `prefers-reduced-motion` (halt the blink, show static block). Color contrast: `--text` on `--ground` passes WCAG AA at all body sizes; `--aurora-green` on `--ground` passes WCAG AA at all sizes above `0.75rem`.

## Uniqueness Notes

Three deliberate differentiators from the existing corpus, grounded in frequency analysis:

1. **Aurora-gradient palette at 4% frequency, crossing terminal aesthetic (31%) in a direction no other design has taken.** The corpus has many terminal-aesthetic designs but they overwhelmingly use dark-neon or monochrome palettes. Pairing `terminal` with `aurora-gradient` — the specific green-violet-rose arc of boreal light — is present in zero other designs. The aurora appears not as a background wash (which would read as vaporwave) but as a precision accent: glow colors on hover, gradient fill on the scope chart, and a single `background-clip: text` treatment on wordmark hover. The terminal grid stays monochrome; the aurora bleeds in only through shadow and glow, like actual light through a window.

2. **Data-viz imagery (5% frequency) implemented as authored SVG instrument readouts, not decorative charts.** The corpus uses data-viz primarily as aesthetic backdrop (gradient mesh, abstract generative). On daitoua.com, every SVG chart is semantically labeled, axis-annotated, and reads as a real instrument output — the line chart tracks signal amplitude over time, the radial gauge shows a fill percentage, the dot-matrix is a heat map. The sci-fi-hud motif (rare in the corpus) is expressed through this instrument-readout language rather than through glowing UI chrome or overlaid bracket graphics.

3. **Scholarly-intellectual tone (rare in corpus) married to terminal layout, creating academic-research-station rather than developer-portfolio.** The corpus has many terminal designs and many professional/corporate tone designs, but zero that read as a *research station session* — the kind of page a field scientist or academic maintains as a working instrument rather than a public-facing product page. The `STATION::` labeling system, the ISO-8601 timestamps in the log, the Greek-letter annotation on the scope arc, and the publication index with identifier codes all signal a domain of rigorous intellectual practice. This positions daitoua.com in white space: neither a developer portfolio nor a corporate landing page.
<!-- DESIGN STAMP
  timestamp: 2026-05-07T09:01:11
  domain: daitoua.com
  seed: unspecified
  aesthetic: daitoua.com** is a **scholarly sci-fi terminal** — imagine a JAXA mission analys...
  content_hash: c321dbf19cfb
-->