# Design Language for sora.day ## Aesthetics and Tone **sora.day** lives in the crosscurrent between two worlds: the eerie aquatic underworld of seapunk — teal brine, corroded coral, the shimmer of sunlight through fifteen feet of salt water — and the cold authority of a maritime intelligence bureau. Imagine a classified oceanographic dossier that was printed on mottled cyan stock, water-damaged at the edges, and then somehow published as a website. The aesthetic is **seapunk-meets-military-report**: the color language of the open ocean filtered through the typography of a redacted intelligence briefing. Every visual element is simultaneously beautiful and bureaucratic. The mood is **authoritative without warmth**. The site does not invite; it states. Its palette is muted and vintage — desaturated teals, sea-bleached greens, oxidized copper — rather than the electric neons of commercial seapunk. Think of a propaganda poster from an underwater civilization that uses coral-growth charts and sonar topographies as decoration. The tone is declarative, clipped, certain. The emotional register: you have received a transmission from something very old and very large that lives beneath the ocean surface, and it wants you to understand something specific about the nature of time. ## Layout Motifs and Structure The entire composition is a **hard split-screen** — not the gradient-fade "split" common in the corpus, but a literal 50/50 binary division with a razor-thin separator (1px, color `#4a7c85`). Left panel: a dark teal void where geometric sonar shapes pulse and drift — this is the visual/atmospheric half. Right panel: the text dossier — structured, hierarchical, document-like, slightly over-engineered. The split is fixed at exactly `50vw` on desktop with no softening gradient. The separator itself is structural: it is a 1px vertical line that emits a slow horizontal ripple — a CSS `@keyframes` animation that spreads three concentric sine-wave rings outward from the center, in `#4a7c85` at 40% opacity, period 4s, no easing. This is the only animation on the separator. The ripple communicates: *the boundary is alive but the structure is not negotiable.* On mobile (< 768px), the split collapses to a vertical stack: left panel becomes a fixed 240px tall cinematic bar at top, right panel occupies the rest. The separator becomes a 1px horizontal rule with the same ripple animation now moving vertically. **Grid detail — Left panel:** A 12×12 polar coordinate grid is drawn as faint SVG arcs (`stroke: #2a5f6a`, `stroke-width: 0.5px`, `opacity: 0.35`). This is not a decorative illustration — it is a structural element, occupying the entire left panel as a persistent underlay. Over this grid, 3–5 geometric shapes (see Imagery and Motifs) float on `translateY` drift paths, each with a different period (17s, 23s, 31s, 41s — prime numbers to prevent phase-locking). **Grid detail — Right panel:** Text content is arranged on a strict 8-column grid with `column-gap: 1.5rem`. The document metaphor is an oceanographic intelligence report: a fixed `letter` document, printed margins visible as a 2rem inset on all sides, a thin border (`1px solid #2a5f6a`) framing the text area. Section headers use a monospaced "CLASSIFICATION:" label pattern — uppercase, letter-spaced, with a thin horizontal rule above. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary Display / Wordmark:** [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — a single-weight monospaced typeface with slightly condensed proportions and excellent legibility at large scale. Used for all headings, the wordmark `sora.day`, and section classification labels. Set the wordmark at `clamp(3.5rem, 8vw, 7rem)`, tracking `0.05em`. Its origins in military-technical communication design make it the ideal seapunk-bureau voice. - **Body / Document Text:** [`Source Code Pro`](https://fonts.google.com/specimen/Source+Code+Pro) — variable weight (`wght 200→900`). Used at `wght 300` for body paragraphs, `wght 500` for inline callouts and emphasis. Size `clamp(0.85rem, 1.2vw, 1rem)`, line-height `1.7`. The monospaced rhythm at body scale creates the impression of transmitted teletype data rather than editorial prose. - **No serif fallback.** This is a strict mono-only typographic system. All text on the page — headings, body, labels, captions, timestamps — is set in either Share Tech Mono or Source Code Pro. The contrast between their slightly different letterform proportions provides internal hierarchy without introducing a competing type genre. **Palette (hex values):** - `#0e2b31` — Deep Navy Brine (primary background, left panel, global `body` bg) - `#1a4a54` — Abyss Teal (secondary dark surface, document border, rule color) - `#4a7c85` — Sonar Cyan (separator, geometric shape stroke, link underline) - `#7ab3ba` — Sea Glass (body text, body on dark bg) - `#a8cfd4` — Bleached Tide (display text on dark, `h2`–`h4` on dark panels) - `#c9e4e7` — Foam White (wordmark, primary heading on dark) - `#d4c5a0` — Oxidized Sand (accent, timestamps, "classification" labels — the only warm note) - `#2e6b5e` — Deep Kelp (tertiary accent, used sparingly for subtle borders and geometric fills at 20% opacity) No pure white (`#ffffff`) is used. No pure black. No electric neons — this is muted-vintage seapunk, not saturated seapunk. ## Imagery and Motifs **No photography.** No stock images. No icons from icon fonts. All visual matter is custom SVG — geometric and sonar-derived. **The geometric-shape vocabulary (4 recurring forms):** 1. **Sonar Ring** — a perfect circle with 3 concentric rings at 120%, 140%, 160% of the base radius. `fill: none`, `stroke: #4a7c85`, `stroke-width: 1px`, `opacity: 0.6`. Appears in the left panel as a drifting element. Its drift path traces a Lissajous figure (JavaScript-computed, `requestAnimationFrame`). Slow pulse: `stroke-opacity` cycles 0.3→0.9→0.3 over 6s. 2. **Hexagonal Frame** — a regular hexagon at 80px diameter, rotated 0°, with an inner hexagon at 60% scale (a hexagonal annulus). `fill: #2e6b5e` at 15% opacity, `stroke: #4a7c85`, `stroke-width: 1.5px`. One instance in the left panel. Slow rotation: 360° over 47s, prime-period to avoid phase-locking. 3. **Rhombus Grid Fragment** — a 4×4 rhombus grid (each rhombus 24×14px), tiled at 30° angle, `fill: none`, `stroke: #1a4a54`, `stroke-width: 0.75px`. Used as a repeating `pattern` fill (`` element in SVG defs) behind the wordmark in the right panel — gives a muted graph-paper underlay to the title zone. 4. **Triangulated Depth Sounding** — three overlapping isoceles triangles (each with a different `opacity`: 0.2, 0.35, 0.5), arranged like stacked echo-location pings. `fill: #4a7c85`, `stroke: none`. Appears once in the left panel, anchored to the bottom-left corner, as if the panel is a depth chart. Static — no animation. Represents geological structure, not motion. **Glitch-art implementation:** The site's glitch language is **chromatic-aberration drift**, not scan-line tearing or RGB-split chaos. The wordmark `sora.day` has a single glitch pass: on hover (desktop) or every 8 seconds (auto-trigger), a CSS `filter: drop-shadow(2px 0 0 #4a7c85) drop-shadow(-2px 0 0 #d4c5a0)` activates for 120ms, then reverts. The two shadow colors are the sonar cyan and the oxidized sand — the two most distant hues in the palette — which creates a convincing chromatic aberration effect without RGB-split clichés. No other element glitches. The glitch is precise and infrequent — it reads as a transmission artifact, not decoration. **Ripple pattern:** The separator ripple (described in Layout) is the canonical ripple motif. A secondary ripple appears as the left panel's background texture: a radial SVG `` filter with `baseFrequency="0.015 0.02"` and `numOctaves="2"`, combined with `feDisplacementMap` to subtly warp the polar grid arcs by ±3px. This is baked as a static filter — no animation — and gives the grid the quality of being viewed through 10 meters of seawater. It runs at `opacity: 0.4` so the geometric clarity of the grid is not lost. ## Prompts for Implementation **The story this page tells:** sora (空, Japanese: sky) is also sora (海, poetic: sea). The site exists at the precise moment when sky and sea become indistinguishable — dawn on the open ocean, or the moment before a depth charge detonates. It is a one-page entity that declares its existence, its purpose, and its relationship to time. It does not sell. It does not explain. It transmits. **Structural sections (single-page, not multi-route):** 1. **SIGNAL HEADER** — The top 20vh of the right panel. Wordmark `sora.day` at full display scale, in `#c9e4e7`, set in Share Tech Mono. Below the wordmark: a single line in Source Code Pro at `wght 300`, `font-size: 0.85rem`, `letter-spacing: 0.15em`, `color: #d4c5a0` — it reads: `TRANSMISSION ORIGIN: CLASSIFIED`. No navigation. No hamburger. No CTA. 2. **COORDINATES BLOCK** — 30vh. A faux-data table in the right panel: four rows, each with a label (e.g., `LAT:`, `LON:`, `DEPTH:`, `EPOCH:`) left-aligned in Share Tech Mono, and a value right-aligned in Source Code Pro. Values are fictionalized but plausible. The table border uses `border-collapse: collapse`, `border: 1px solid #1a4a54`, cell padding `0.75rem 1.5rem`. Below the table: a single paragraph of body text (3–4 sentences, written in the authoritative-declarative voice). No bullet lists. 3. **STATUS PANEL** — 25vh. A horizontal band across the full right panel width. Background `#1a4a54`. Content: three mono-label status readouts (e.g., `SYSTEM:`, `SIGNAL:`, `DRIFT:`), each with an SVG sonar ring at 24px scale beside the label, and a value. This creates the impression of an instrument panel readout. 4. **CODA / TIMESTAMP** — 15vh. Bottom of the right panel. A single line in Source Code Pro `wght 200`, `font-size: 0.75rem`, `color: #4a7c85`, left-aligned: a timestamp in ISO 8601 format that updates live via `new Date().toISOString()` in a one-line script tag. Below it: `END TRANSMISSION`. **Left panel behavior:** The left panel is never scrolled. It is `position: sticky` / `height: 100vh` with `overflow: hidden`. Its geometric elements drift independently of scroll position. As the user scrolls the right panel, the left panel remains fixed — a static ocean window while the dossier scrolls past on the right. **Animation budget — strict:** - Geometric drift: `requestAnimationFrame`, JavaScript, Lissajous paths, 3 shapes, prime periods - Separator ripple: CSS `@keyframes`, 4s period - Wordmark glitch: CSS, 120ms on trigger - feTurbulence filter: static (no animation) - NO scroll-triggered reveals, NO fade-in-on-load, NO loading animations, NO cursor effects **AVOID:** - Any CTA button in a filled rectangle - Pricing tables or stat-grids - Parallax scroll (incompatible with the fixed left panel contract) - Any sans-serif or serif typeface introduction - Colored gradients between the two palette sections — keep the split clean and hard ## Uniqueness Notes **Differentiators:** 1. **First seapunk-authoritative combination in the registry.** The corpus treats seapunk as a maximalist, neon-electric aesthetic (when it appears at all — frequency: 0%). sora.day inverts this: muted vintage seapunk, drained of its neon, filled with military-report bureaucracy. The combination of geometric sonar shapes, polar coordinate grid underlays, and classification-label typography creates a seapunk aesthetic that reads as a government document from an ocean-dwelling civilization. No other entry in the registry attempts authority through seapunk. 2. **Hard binary split-screen at exactly 50/50 with a living separator.** Split-screen appears at 2% in the corpus and is almost always used with a decorative or gradient treatment. sora.day uses a 1px razor cut with a ripple emanating from it — the boundary is the most animated element on the page, not the content. This reversal (animate the structure, calm the content) is unique in the registry. 3. **Strict mono-only typography with two complementary monospaced voices.** The corpus has mono at 74% but it almost always means "mono accent + sans body". sora.day uses Share Tech Mono (display) + Source Code Pro (body) as a two-voice mono system with no serif or sans backup. The micro-contrast between these two monospaced typefaces — one condensed and bureaucratic, one proportional and humanist-influenced — provides all necessary hierarchy internally. This is a typographic strategy not yet used in the 481-design corpus. 4. **Glitch-art as chromatic-aberration drift (not RGB-split).** Glitch-art appears at 3% in the corpus and universally as RGB-channel-split animation. sora.day reimplements glitch as chromatic aberration using CSS `drop-shadow` with palette colors — teal offset and sand offset — making the effect look like a lens artifact or optical misalignment rather than a digital corruption. The glitch is infrequent (every 8 seconds) and lasts only 120ms, which makes it feel like a real transmission error rather than decoration. 5. **Ripple as structural motif, not decorative texture.** Ripple appears at a low frequency in the corpus as a water-surface decoration. sora.day uses the ripple as the separator's animation — the geometric boundary between the two halves of the page is what ripples. The secondary ripple (SVG feTurbulence) is applied to the sonar grid to simulate underwater light refraction. Both uses are structural (they define or modify layout elements) rather than atmospheric filler. **Seed documented:** aesthetic: seapunk, layout: split-screen, typography: tech-mono, palette: muted-vintage, patterns: ripple, imagery: glitch-art, motifs: geometric-shapes, tone: authoritative **Avoided patterns from frequency analysis:** hand-drawn (56%), editorial (51%), terminal (32%), botanical (29%), glassmorphism (20%), card-based layout (most frequent in LAYOUT category), gradient color treatments, photography (85% in corpus — avoided entirely), RGB-split glitch (universal in corpus), electric neons.