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:

Services Directory: Instant access, routing links, and status visibility for self-hosted homelab services and public utilities.
Technical Notes & Blog: High-density, comfortable reading experience for deep technical writing (CTF write-ups, architecture specs, config guides, code snippets).
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.

5.0 KiB Raw Blame History