# Design Specification: Sample 3 (Companion Layout)

**Status:** Ready for Handoff  
**Target Page:** `companion.html`  
**Layout Type:** 50/50 Split Screen (Reactive Desktop, Stacked Mobile)  
**Theme Vibe:** Hyper-minimalist terminal utility, clean information hierarchy, zero animation noise.

---

## 1. Design Philosophy & Guidelines

This sample modifies the primary design spec by enforcing a strict **"interaction suppression"** policy. Dynamic decorations (such as border color transitions or card expansion effects) are completely disallowed. Contrast and active states are communicated solely through instantaneous typography color changes.

The key feature is a persistent digital companion on the right half of the screen. The companion must feel like a quiet terminal process rather than an active distraction.

---

## 2. Layout Geometry & Grid

The layout divides the viewport down the middle on desktop screens.

### Desktop Layout (Width > 768px)
- **Top Header:** Sticky `56px` navigation bar containing breadcrumbs/catalog links.
- **Split Container:** Spans 100% viewport width and 100% viewport height minus header (`height: calc(100vh - 56px)`).
- **Columns:** 
  - **Left Pane (50%):** Scrollable container. Houses a single-column list of project cards.
  - **Right Pane (50%):** Fixed/non-scrollable container. Houses the centered ASCII companion terminal widget.

### Mobile Layout (Width <= 768px)
- The layout collapses into a single vertical stack.
- The ASCII companion pane moves to the top (fixed height: `300px`).
- The content pane follows below, scrollable within the main document window.

---

## 3. Color Palette & Typography

### Base Colors
- **Canvas Background:** `#0d0f12` (Deep charcoal slate)
- **Surface Background:** `#121417` (Slightly lighter dark surface)
- **Static Borders:** `#2b303b` (1px solid, low contrast)
- **Primary Text:** `#e0e6f0` (Off-white prose)
- **Muted Text:** `#8a95a5` (Timestamp / status information)
- **Active Accent:** `#00f0ff` (High-contrast Cyan)

### Typography
- **UI & ASCII Content:** Monospace (`JetBrains Mono` or `IBM Plex Mono`).
- **Prose Content:** Sans-serif (`Inter` or `Geist Sans`) for high readability.

---

## 4. Content Cards (Left Column)

Each card is a clean, structural text panel.

### Structure
- 1px static border (`#2b303b`) with `4px` border-radius.
- No background color (inherits Canvas background) or a solid `#121417` surface background.
- Elements:
  1. **Header (`h3`):** Monospaced, bold, `#e0e6f0`.
  2. **Description (`p`):** Sans-serif, `#8a95a5`, capped at `65ch` length.

### Interactions (Ultra-Minimal)
- **No Border Shifts:** Borders must remain `#2b303b` at all times.
- **No Translation:** Hovering must not scale, shift, or offset the card.
- **Instant Typography Snap:** Hovering or focusing the card snaps the text color of the Header (`h3`) from `#e0e6f0` to Cyan (`#00f0ff`) instantly.
- **CSS Rule:** Use `transition: none;` on all hover effects.

---

## 5. ASCII Companion (Right Column)

The companion is rendered as block-level ASCII text inside a simulated terminal panel.

### Layout Widget
- Sits centered in the right pane.
- Styled to resemble a terminal output terminal: card box with a tab bar indicating the daemon name `sys-daemon`.

### Animation & States
The companion has two interactive states:

#### State 1: IDLE
- **Mascot Art:**
  ```text
      /\___/\
     ( o   o )  sys-daemon
     (  =^=  )  STATUS: IDLE
      \__*__/   LOG: awaiting input█
  ```
- **Animation:** The terminal block cursor (`█`) blinks continuously at 1Hz (`opacity: 0` to `1` instantly). The rest of the mascot is static.

#### State 2: READING (Triggered on Card Hover)
- **Mascot Art:**
  ```text
      /\___/\
     ( -   - )  sys-daemon
     (  =o=  )  STATUS: READING
      \__*__/   LOG: reading module_
  ```
- **Reaction Log:** Underneath the mascot, a mini status output log updates to display the title of the card currently hovered. For example:
  `[sys-daemon] target: /dev/mesh-mesh-topology-builder`

### Behavior Scripting Rules
- Attach `mouseenter` and `mouseleave` event listeners to the cards in the left pane.
- On hover, swap the inner HTML of the ASCII container to the `READING` frame and append the card's target name to the log output.
- Revert back to the `IDLE` frame immediately when the cursor leaves the card.