# Unified Design Specification: Homelab, Blog & Engineering Portfolio

**Target Platform:** Integrated Personal Site (Public Services Directory, Technical Blog/Notes, Engineering Resume)  
**Design Philosophy:** High-signal, low-noise. Developer-centric minimalism, modal text editor & terminal emulator craftsmanship.  
**Vibe References:** Zed Editor, Ghostty, Noctalia.dev, Tiling Window Managers (Hyprland/i3).  
**Strict Anti-Patterns:** Zero glassmorphism, zero glows/shadows, zero gradients, zero spring animations, zero rounded SaaS "blobs".

---

## 1. Executive Summary & Unified Purpose

This specification unites the design language across three primary user goals:
1. **Services Directory:** Instant access, routing links, and status visibility for self-hosted homelab services and public utilities.
2. **Technical Notes & Blog:** High-density, comfortable reading experience for deep technical writing (CTF write-ups, architecture specs, config guides, code snippets).
3. **Engineering Resume & Portfolio:** A crisp, high-craft presentation of skills, project archives, and active tech stack designed to impress technical recruiters and engineering leaders.

---

## 2. Unified Design Language & Rules

### Global Constraints
* **NO Glassmorphism:** Zero `backdrop-filter: blur()`, frosted glass, or translucent overlays.
* **NO Glows or Drop Shadows:** Depth is constructed exclusively via subtle surface color contrast and 1px solid borders.
* **NO Gradients:** Pure, solid color tokens across canvas, surfaces, and accent elements.
* **NO Spring/Float Animations:** Interactions feature instant snapped state transitions (`transition: none;`) or binary 1Hz blinking cursors/indicators.
* **Minimal Radii:** Sharp corners preferred. Border radii capped strictly at `0px` to `4px`.

### Geometry & Spatial Hierarchy
* **Grid Baseline:** Strict 4pt / 8pt baseline grid for consistent spacing and padding.
* **Reading Density:** Article and prose containers capped at `65ch` max width.
* **Dividers:** Clean 1px solid horizontal lines (`<hr>`) used to delineate major structural sections.

---

## 3. Unified Color Palette

The color system is dark-mode native, built from muted charcoal slate tones reminiscent of modern terminal emulators and modal text editors.

| Token Key | Hex Value | Application & Role |
| :--- | :--- | :--- |
| `--bg-canvas` | `#0d0f12` | Main canvas background (deep charcoal slate). |
| `--bg-surface` | `#121417` | Card backgrounds, terminal blocks, sidebars. |
| `--bg-elevated` | `#1c1f26` | Hovered card state, active tab surface. |
| `--border-color` | `#2b303b` | Structural 1px grid lines, card borders, horizontal dividers. |
| `--text-primary` | `#e0e6f0` | Off-white primary text for headings and body prose. |
| `--text-muted` | `#8a95a5` | Monospaced metadata, timestamps, tags, labels, status text. |
| `--accent-cyan` | `#00f0ff` | Primary active accent (terminal prompt, active nav snap, focus outline). |
| `--accent-green` | `#00e676` | Status indicator: Online / Operational / Verified. |
| `--accent-amber` | `#ffb700` | Status indicator: Under Construction / Maintenance / Warning. |

---

## 4. Digital & Typographical Language

### Dual Typography Hierarchy
* **Monospace Layer (`IBM Plex Mono`, `JetBrains Mono`):**
  - **Usage:** Headings (`H1`-`H3`), navigation links, breadcrumbs, tags, terminal code blocks, timestamps, metadata, and keyboard shortcuts (`<kbd>`).
  - **Weights:** Medium (500), Bold (700).
* **Prose Layer (`Inter`, `Geist Sans`):**
  - **Usage:** Article body prose, project summaries, resume biography.
  - **Line Height:** `1.65` to `1.7`.
  - **Weight:** Regular (400).

### Digital Interface Conventions
* **POSIX-Style Path Headers:** Titles and section markers formatted as file paths (e.g., `/var/log/status.txt`, `/etc/services`, `~/notes/ctf-2026.md`).
* **Active Status Dots:** Rigid 8x8px square indicators (`.status-dot`) signaling system state (Cyan/Green for operational, Amber for construction).
* **Metadata Tag Cluster:** Monospaced bracketed tags (e.g., `[#homelab]`, `[#docker-traefik]`, `[#cybersecurity]`).
* **Instantaneous Snap Hover:** Interactive elements transition without delay (`transition: none;`), snapping text to Cyan (`#00f0ff`) or inverting background colors.
* **Keyboard Shortcut Badges (`<kbd>`):** Crisp, 1px bordered boxes depicting keys (e.g., `Ctrl` + `K`, `Tab`).

---

## 5. Functional Layout Modules

### A. Homelab & Public Services Directory
* Dense tabular grid listing self-hosted apps and public APIs.
* Displays service name, description, status badge (`[ONLINE]`, `[INTERNAL]`, `[PUBLIC]`), and routing link.

### B. Technical Notes & Blog
* Tabular article archive indexed by date, title, reading duration, and tags.
* Terminal-style code snippets with filename headers (e.g., `traefik.yml`) and copy utility.

### C. Resume & Portfolio Showcase
* Header identity block with `whoami` summary and active stack cluster.
* Project showcase cards featuring instant snap state.
* Optional integrated ASCII companion daemon (`sys-daemon`) for interactive module inspection.