# Design Language for haroo.day

## Aesthetics and Tone

haroo.day is a retro-futuristic tech-tutorial platform with the visual grammar of Japanese consumer electronics circa 1986–1998 — think Casio G-Shock manuals, early Sony Discman packaging, Sharp PC-E500 pocket computers. The aesthetic is **cool-gray corporate silicon**: precise, instructional, quietly alien. Not warm. Not nostalgic in a fuzzy way — cold clarity filtered through cathode-ray memory.

The mood is calm authority. A patient instructor who speaks in clean, measured sentences and illustrates every concept with an isometric diagram. The tone never hypes. It teaches. Every panel is a page from a meticulously produced technical booklet, the kind that came folded inside a device you treasured.

Futuristic motifs manifest as subtle — a 1px grid of faint cyan dots behind panels, an isometric cube that rotates 30° on hover (CSS only), a status-bar strip across the header with live timestamp. The retro-futuristic duality: this feels like the future that 1992 imagined, rendered at 144 dpi for 2026 screens.

## Layout Motifs and Structure

**Centered single-column** with deliberate maximum-width constraint: `max-width: 720px` for prose, `max-width: 960px` for diagram panels. The centering is not symmetrical softness — it is the rigidity of a technical manual's typesetting grid, where everything aligns to an invisible 8px baseline.

Structure:
- **Header strip** — fixed, 48px tall, cool-gray #1c2433 background with a 1px bottom border in cyan #4fc3f7 at 30% opacity. Left: logo in monospaced caps. Right: live clock in `font-variant-numeric: tabular-nums`.
- **Hero module** — full-width but centered column, containing a large isometric illustration (SVG, inline) of a document-processing machine — gears, input slots, output trays rendered in the 3-face isometric style — with a one-sentence site tagline beneath.
- **Progressive-disclosure panels** — each topic is a collapsed accordion panel. The panel header shows: an isometric icon (left), a topic name (center), a status badge (right, e.g. "3 steps"). On click, the panel expands to reveal instructional content. Each panel has a `border-left: 3px solid` accent in one of the five palette accent colors, cycling through the set.
- **Divider lines** — 1px horizontal rules in #2e3d52 (cooler than the background) between major sections.
- **Footer** — minimal, same strip height as header, centered text only.

Spatial rhythm: 48px vertical padding between panels, 24px inside panels, 8px between label and content. Tight. Deliberate. Manual-like.

## Typography and Palette

**Primary font — IBM Plex Mono (Google Fonts):** All headings, panel labels, status badges, and the logo. The monospaced rhythm reinforces the tutorial/instructional register. Weights: 400 for body, 600 for panel headings, 700 for the hero tagline.

**Secondary font — IBM Plex Sans (Google Fonts):** Body prose inside expanded panels. 16px / 1.7 line-height for comfortable reading. Light 300 weight for captions beneath diagrams.

**Fluid sizing with `clamp()`:**
- Hero tagline: `clamp(1.5rem, 3vw, 2.5rem)`
- Panel headings: `clamp(0.95rem, 1.5vw, 1.15rem)`
- Body: `clamp(0.875rem, 1.2vw, 1rem)`

**Palette — Cool Grays with Cyan Signal:**
- Background (base): `#0f1621` — near-black with strong blue undertone, not warm black
- Surface (cards/panels): `#1c2433` — cool slate
- Surface elevated: `#243040` — slightly lighter cool-gray for hovered states
- Border/rule: `#2e3d52` — visible but quiet
- Body text: `#c8d6e8` — cool off-white, not cream, not pure white
- Muted text/captions: `#6b8096` — medium-cool gray
- **Accent 1 — Cyan signal:** `#4fc3f7` — primary interactive color, borders, links, icons highlight face
- **Accent 2 — Mint confirm:** `#43e8b3` — success/complete states, checkmarks
- **Accent 3 — Amber caution:** `#f5a623` — warning states, "in-progress" badges
- **Accent 4 — Indigo deep:** `#6979f8` — secondary links, icon shadow face
- **Accent 5 — Rose error:** `#f06a8a` — error states only (used sparingly)

## Imagery and Motifs

**Isometric icon system:** Every panel's left-side icon is a hand-authored SVG isometric cube-based glyph. Each icon uses the 3-face cube shading model:
- Top face: accent color at 100% opacity
- Left face: accent color at 65% opacity (simulate shadow from top-right light)
- Right face: accent color at 40% opacity (deepest shadow)

Icons represent abstract concepts as isometric objects: a stacked-tray icon for "input parsing," a gear-cube for "configuration," a grid-lattice for "data mapping." The visual language is consistent: 24×24px canvas, 30° isometric projection, 1px stroke in `#0f1621` outlining each face.

**Dot-grid substrate:** The page background carries a `radial-gradient` dot pattern — `#4fc3f7` dots at 6% opacity, spaced 24px apart in a true grid. Applied via `background-image: radial-gradient(circle, #4fc3f7 1px, transparent 1px); background-size: 24px 24px;` on `body`. Subtle at rest; on page load a fade-in transition (opacity 0 → 0.06 over 1.2s) draws the grid in slowly.

**Hero isometric illustration:** A single large SVG (approximately 480×320px) depicting a retro-futuristic document machine: input hopper, conveyor belt rendered as an isometric track, processing unit (a cube with a blinking indicator — CSS animation `opacity 0.5s ease-in-out infinite alternate`), and output tray. All in the same 5-color cool-gray + cyan palette. No stock imagery, no photography, no gradients outside the palette.

**Futuristic motifs:** Status bar in the header displays `UTC HH:MM:SS` updated every second via `setInterval`. Panel badges use tabular monospace numerals. A thin `box-shadow: 0 0 0 1px #4fc3f7` glow pulses on the currently active/expanded panel — `animation: panel-glow 2s ease-in-out infinite alternate`.

## Prompts for Implementation

Build haroo.day as a **single-page instructional experience** — not a landing page, not a product pitch — a beautifully formatted technical tutorial index. Think of it as an interactive manual's table of contents, where each entry is a living lesson.

**Structure the HTML as:**
```
<header> — fixed strip with logo + live clock
<main>
  <section class="hero"> — SVG illustration + tagline
  <section class="panels"> — accordion container
    <article class="panel" data-accent="cyan|mint|amber|indigo"> × N
      <header class="panel-header"> — icon + title + badge (clickable)
      <div class="panel-body"> — instructional content, hidden by default
  </section>
</main>
<footer> — minimal strip
```

**Progressive disclosure implementation:**
- Panel bodies: `max-height: 0; overflow: hidden; transition: max-height 400ms ease-in-out, opacity 300ms ease-in-out; opacity: 0;`
- On `.panel.open` → `max-height: 600px; opacity: 1;`
- Toggle via JS: `panel.classList.toggle('open')` on header click. Only one panel open at a time (close siblings).
- The `border-left` accent cycles: `data-accent="cyan"` → `border-color: #4fc3f7`, `data-accent="mint"` → `border-color: #43e8b3`, etc.

**Isometric icon rendering:** Each icon is an inline `<svg viewBox="0 0 24 24">` inside the panel header. Use CSS variables for the accent tints so a single icon template can render in any of the five accent colors. Example structure (parallelogram paths for iso cube faces):
- Top face: `<polygon points="12,2 22,7 12,12 2,7"/>` fill `var(--accent)`
- Left face: `<polygon points="2,7 12,12 12,22 2,17"/>` fill `var(--accent-mid)`
- Right face: `<polygon points="22,7 12,12 12,22 22,17"/>` fill `var(--accent-dark)`

**Typography loading:** Use `<link rel="preconnect">` and a single Google Fonts request combining both families: `IBM+Plex+Mono:wght@400;600;700&IBM+Plex+Sans:wght@300;400`. Apply `font-display: swap`.

**Animation budget:** Keep all animations CSS-only or minimal JS (clock only). No libraries. No scroll-jacking. The page scrolls naturally; only the accordion panels have motion. The dot-grid fade-in on load is the sole page-level animation. The hero illustration's blinking indicator is a single CSS keyframe.

**Avoid:** hero CTAs, pricing tables, testimonial carousels, stat grids ("10,000 users"), modal overlays, sticky sidebars. The page has one job: present instructional content with calm authority and excellent typography.

## Uniqueness Notes

1. **retro-futuristic claimed in the cool-gray chromatic direction.** The registry has retro-futuristic precedents (footprint.market used terracotta NASA-console warmth), but haroo.day takes it cold — Japanese consumer electronics aesthetic, Casio/Sony/Sharp visual language, silicon-age cool. Distinct chromatic territory.

2. **cool-grays palette at 1% — highly underused in registry.** Most dark-mode designs use warm blacks or neon-on-black. This design is cool-gray end-to-end — `#0f1621` to `#c8d6e8` with zero warm tones in the base palette.

3. **isometric-icons as a structural icon system, not decoration.** The 3-face cube shading model applied consistently to every panel icon creates a unified visual language. Registry has isometric-icons at 2% (rare); this design makes it systematic, not ornamental.

4. **progressive-disclosure as the page's entire organizational logic.** Not one accordion component — the whole page IS the accordion. Every piece of content lives inside a panel. The "flat" state of the page is intentionally content-sparse; depth requires interaction.

5. **No hero CTA, no stat grid, no pricing.** The hero is an isometric illustration and a single sentence. The page is a tech tutorial index, not a pitch. The absence of landing-page furniture is structural, not accidental.

6. **Chosen seed:** aesthetic: retro-futuristic, layout: centered, typography: variable-fluid, palette: cool-grays, patterns: progressive-disclosure, imagery: isometric-icons, motifs: futuristic, tone: tech-tutorial.

7. **Avoided patterns (overused in registry):** parallax (90%), stagger (62%), spring (43%), scroll-triggered (38%). This design uses none of them. Progressive-disclosure (4%) is used instead — genuinely underused.
<!-- DESIGN STAMP
  timestamp: 2026-05-08T01:08:07
  domain: haroo.day
  seed: seed:
  aesthetic: haroo.day is a retro-futuristic tech-tutorial platform with the visual grammar o...
  content_hash: 095634174958
-->