blog/samples/sample3-spec-sheet.md

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:

      /\___/\
     ( 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:

      /\___/\
     ( -   - )  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.