added more specs and rebuilt for simpler additions

samples/unified-design-specification.md

@@ -0,0 +1,86 @@
+# 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.