# Design Language for resar.one ## Aesthetics and Tone resar.one is a **signal that was never meant to be found** — a clandestine research terminal from an institution that may not exist, broadcasting on a frequency just below official noise. The aesthetic is **hand-annotated dark-field science**: like a physicist's lab notebook photocopied at 3am, then neon-leaked through a CRT display showing corrupted satellite imagery. It is not cyberpunk (too polished) and not vaporwave (too nostalgic) — it is something colder: the **classified brief**, the anomaly report, the measurement that doesn't fit the model. The mood is **mysterious and moody without being decorative about it**. Mystery here means *information withheld deliberately*, not skulls and fog. Every element on the page looks like it was assembled by someone who knows more than they are saying. The visual language is the *residue* of a process — pencil annotations on a spectrograph printout, hand-circled coordinates on a dark-field astronomical image, a handwritten `???` in the margin where the math breaks down. The hand-drawn component is used with precision, not abundance: only **marginal annotation glyphs** (small arrows, brackets, underlines, asterisk-bursts, margin crosses) are hand-drawn. Structural elements are mechanical. This inverts the common hand-drawn overuse (full organic layouts, sketchy cards, doodle borders) — here hand-drawing means *human doubt inscribed on a machine document*. Tone: suspicious, terse, brilliant, slightly alarmed. A site for people who know what `resar` means and are not surprised it has a domain. ## Layout Motifs and Structure The layout is **hero-dominant with a single radical focal point**. A full-viewport dark field is the first thing seen — `100dvh`, no scroll hint, no navigation. The hero is structured as a **telescope field-of-view overlay**: a circular vignette darkening the corners, with the site's core signal — the wordmark plus a single cryptic statement — at the precise center. Nothing sells. Nothing explains. The page simply *is*. Below the hero, the layout becomes a **grid of instrument readouts** — each section is a panel with a hairline border (`1px solid #00ffe0 at 15% opacity`) and a monospace label in the top-left corner (e.g., `[SECTOR 7]`, `[ANOMALY LOG]`, `[SURFACE ECHOES]`). Panels are sized `clamp(280px, 45vw, 560px)` and stack in a two-column grid on wide viewports, single column on narrow. No card shadows. No rounded corners. No backdrop-blur chrome. The visual flow is **top-heavy and then sparse**: the hero takes 100dvh, the first below-fold section takes 80vh, then sections shrink to 50vh each. The further you scroll, the sparser the content — like signals getting weaker. The final section is almost empty: just a grid reference coordinate and a blinking cursor. Navigation: none visible on load. A small `+` mark in the top-right corner — 20px, `#00ffe0`, 60% opacity — when hovered reveals a minimal floating nav of four monospace labels. It disappears after 3 seconds of inactivity. ## Typography and Palette **Typography (Google Fonts only):** - **Wordmark / Hero Display:** [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono), weight 400 (only weight available). The wordmark `resar.one` is set at `clamp(5rem, 13vw, 11rem)`, tracking `0.08em`, all-lowercase. The `.one` fragment drops to `60% opacity` creating an apparent fade — the domain suffix visible but uncertain. A typewriter-effect reveal plays once on load: characters appear one by one at 80ms intervals. - **Section Headers:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 700, set at `clamp(1.1rem, 2.5vw, 1.6rem)`, all-uppercase, tracking `0.2em`. Used only for bracketed instrument labels like `[ANOMALY LOG]`. - **Body Text:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, `clamp(0.85rem, 1.3vw, 1rem)`. Line-height 1.7. Paragraphs are deliberately **short and telegraphic** — max 3 sentences per paragraph, often 1. Text reads like a field note, not prose. - **Annotation Glyphs (hand-drawn layer):** Not a font — these are inline `` paths drawn with a single `1.5px` stroke in `#ff2df7` (neon magenta). Used sparingly: 1–3 per section. The paths look like quick pencil marks: a ring around a word, an arrow pointing left off-page, a margin bracket, an asterisk with uneven arms. **Palette:** - `#09090f` — Void Black (background, ~90% of page surface) - `#00ffe0` — Aqua Signal (primary neon accent: borders, cursor blinks, interactive elements) - `#ff2df7` — Magenta Anomaly (secondary neon: hand-drawn SVG annotations, glitch error frames, rare text highlights) - `#c8f0ff` — Cold Star White (body text, wordmark) - `#1a1a2e` — Deep Field (panel backgrounds, slightly lifted from void) - `#003333` — Sonar Dark (subtle tonal fills on active panel states) ## Imagery and Motifs **No photography. No stock vectors.** All visual content is generated from four categories: 1. **Dark-field star map (Canvas/WebGL, hero background).** The hero background is a `` rendering a procedural particle field — approximately 800 particles at varying sizes (0.3px–2px), distributed with a slight Poisson disk clustering around the center-left quadrant. Particles are `#c8f0ff` at 20–80% opacity, with 12 "anomaly" particles at `#00ffe0` (larger, 2–4px, with a `box-shadow`-style glow). The field **drifts** at 0.02px/frame in a slow rightward current — imperceptible moment-to-moment, clearly moved after 30 seconds. 2. **Glitch-art corruption frames.** At 3 strategic points (hero wordmark on initial reveal, one section header, and the final section), a `CSS clip-path` glitch animation fires: the element fractures into 3 horizontal slices, each translating ±4–12px on the X axis for 120ms, with the top slice tinted `+15%` toward `#00ffe0` and the bottom slice tinted `+15%` toward `#ff2df7`. The glitch fires once per element on first entry into viewport (Intersection Observer), then never again. It reads as a brief signal corruption, not a loop. 3. **Hand-drawn SVG margin annotations.** 8 total across the full page. Each is an original `` path with `stroke: #ff2df7`, `stroke-width: 1.5`, `fill: none`. The 8 annotation types: (a) uneven ring, (b) margin arrow pointing off-page-left, (c) underline with uptick at the end, (d) asterisk with 7 unequal arms, (e) bracket pair with slight bow, (f) triangle with a question mark centred by `` in Share Tech Mono, (g) small X cross, (h) horizontal strike with overrun. Each annotation is positioned absolutely against the nearest content element, rotated 1–4 degrees, at 70% opacity. 4. **Typewriter reveal effect (JS).** The wordmark and three key phrases use a typewriter reveal: characters appear sequentially at 80ms/character for the wordmark (first load only), and 40ms/character for body phrases. A blinking `_` cursor remains at the end of the last typed phrase in the hero indefinitely. **Particle effect implementation detail:** The hero canvas particle field uses `requestAnimationFrame` with delta-time capping. On pointer move, particles within 80px of the cursor are pushed radially outward with a spring-return at `stiffness: 0.08, damping: 0.92`. This creates a subtle **breathing** effect around the user's position — the field knows you are there. ## Prompts for Implementation **The story to tell.** A visitor arrives at a dark field. The site says nothing except a code name and a single sentence that may or may not be a threat. They scroll. Each panel reveals a fragment — coordinates, a log entry, an observation that was recorded but not explained. The further they go, the sparser the information. The site ends with a cursor blinking in an empty field. There is no call-to-action. There is no footer navigation. There is no explanation of what `resar` is. Visitors who need to know, know. **Section inventory (hero-dominant, sparse below-fold):** 1. **HERO — full viewport, dark field.** Canvas particle background. Centered column: wordmark `resar.one` in Share Tech Mono at display size, typewriter reveal on load. Below wordmark, a single line in Space Mono 400 at `0.9rem`, `#c8f0ff` at 70% opacity: `[ signal integrity: nominal ]`. A blinking cursor `_` in `#00ffe0` follows the last visible character. One glitch frame fires on the wordmark 1.2 seconds after the typewriter completes. Circular vignette overlay: `radial-gradient(circle at 50% 50%, transparent 40%, #09090f 80%)`. 2. **[SECTOR 7] — 80vh, two-column panel grid, first below-fold section.** Left panel: 3 paragraphs of telegraphic observation text, each 1–2 sentences, in Space Mono. Each paragraph is separated by a `1px solid` `#00ffe0 at 15% opacity` hairline. One hand-drawn SVG annotation (uneven ring) wraps the second paragraph. Right panel: a grid of 9 monospace values (3×3, e.g., `RA 14h29m`, `DEC -62°`, `MJD 60789`, etc.) styled as instrument readings — each value has a label above in `0.7rem` Space Mono at 50% opacity and a value in `0.95rem` at 100% opacity. On viewport entry, the 9 values count up from 0 simultaneously over 600ms. 3. **[ANOMALY LOG] — 50vh.** A single-column list of 5 log entries. Each entry: `[timestamp]` in `#00ffe0` + single sentence in `#c8f0ff`. Log entries are staggered-in on viewport entry (50ms offset per entry). One entry has a hand-drawn SVG asterisk in the left gutter. The glitch animation fires on the section header `[ANOMALY LOG]` text. 4. **[SURFACE ECHOES] — 50vh.** A side-by-side layout: a large `` simulating a sonar sweep (a slow rotating line from center, leaving a fading green trace on a `#003333` background, 240px diameter) and a short text block describing what the echo revealed. The sonar canvas is purely decorative — no real data — but is rendered in `#00ffe0` on `#003333` at `0.6rem` opacity with a `radial-gradient` fade. Two hand-drawn SVG annotations on the text block side (margin bracket + underline with uptick). 5. **[TRANSMISSION END] — final section, 60vh.** Near-empty. Top-left: `[TRANSMISSION END]` in Space Mono 700 at `0.9rem`, `#c8f0ff` 40% opacity. Center: a single grid coordinate pair `47.3821° N 122.0617° W` in Share Tech Mono at `clamp(1.8rem, 4vw, 3rem)`, `#00ffe0`, no other context. Bottom-right: a blinking `_` cursor in `#ff2df7`, blinking at 800ms interval. No footer. No links. The glitch animation fires on the coordinate text once on viewport entry. One hand-drawn SVG `?` triangle annotation in the lower-left. **CSS/JS requirements:** - `prefers-reduced-motion` media query: disable all animations (typewriter, glitch, particle drift, sonar sweep, count-up). Static state shown. - Canvas particle field uses `devicePixelRatio` scaling. - All fonts loaded via `` and `fonts.gstatic.com`, subset: `latin`. - Glitch animation: pure CSS `@keyframes` with `clip-path: polygon(...)` slices. No JS required for glitch. - Typewriter: vanilla JS, no library. Characters appended to a `` with `setAttribute('aria-live', 'polite')` on the container. - No framework. Single HTML file + one external CSS + one external JS (or inline). No build step. ## Uniqueness Notes **Differentiators from the existing corpus (informed by frequency analysis):** 1. **Hand-drawn used as epistemic doubt, not decorative warmth.** The corpus uses hand-drawn at 58% — almost always as organic layout sketches, illustrated icons, or friendly doodle aesthetics. This site uses hand-drawn *only* as margin annotations on a machine document — the visual language of a scientist writing `???` on a printout. This reframes the overused pattern as its opposite: not warmth, but suspicion. No sketchy borders, no illustrated characters, no organic shapes anywhere in the structure. 2. **Glitch fires once, not on loop.** The corpus uses glitch (10%) primarily as continuous looping animation — the cyberpunk RGB-split headband. Here, glitch fires exactly once per element on first viewport entry, reads as a real signal fault, then clears. This makes glitch *meaningful* rather than decorative. After it fires, the element is stable forever. The surprise is the point. 3. **Particle field responds to cursor proximity.** Corpus particle effects (2%) are typically decorative backgrounds with no interaction. The hero canvas here implements a spring-return physics layer — particles within 80px of the cursor are repelled with spring restitution. This makes the background *aware* of the viewer without calling attention to it. There is no visual affordance hinting at the interactivity. 4. **Documented seed:** seed: aesthetic: hand-drawn, layout: hero-dominant, typography: oversized-display, palette: dark-neon, patterns: typewriter-effect, imagery: glitch-art, motifs: particle-effects, tone: mysterious-moody 5. **Avoided corpus overuses:** no centered hero stack above CTA, no card grid with shadows and rounded corners, no sticky header, no gradient hero fade-in, no full-width photography, no icon+label feature blocks.