Design System

**Architect Workspace** embodies a **"Cyber-Minimalist"** aesthetic. The design language is inspired by terminal interfaces, code editors, and futuristic engineering consoles. It prioritizes functional clarity over decorative elements, using high-contrast neon accents to highlight critical data and interactions.

- **Precision**: Every line, border, and pixel serves a purpose.

- **Engineering Excellence**: The UI should feel like a high-performance tool built by engineers for engineers.

- **Autonomy**: Highlighting autonomous AI systems through digital animations and state indicators.

- **Stealth & Sophistication**: A dark, focused environment using a Zinc/Slate-based grayscale.

---

- **Deep Void**: `zinc-950` (#09090b) - The foundation of the entire interface.

- **System Layer**: `zinc-900` (#18181b) - Used for sidebars, cards, and modal-like backgrounds.

- **Subtle Partition**: `slate-900` (#0f172a) - Used for gradients and subtle section transitions.

- **Primary Energy**: `cyan-400` (#22d3ee) - Primary interaction color, links, and "power" indicators.

- **Success/Stable**: `emerald-400` (#34d399) - Version badges, "Operational" status, and logic-related highlights.

- **Action/Experimental**: `violet-400` (#a78bfa) - Accents for secondary signals and background glows.

- **Main Narrative**: `slate-300` (#cbd5e1) - Default text for readability.

- **Metadata**: `slate-500` (#64748b) - Secondary details, timestamps, and line numbers.

- **Technical Highlight**: `white` (#ffffff) - Headers and critical variables.

---

The project uses **monospaced typography** exclusively to maintain a developer-centric atmosphere.

- **Primary Font**: `JetBrains Mono` (via Google Fonts).

- **Fallbacks**: `Fira Code`, `IBM Plex Mono`, `ui-monospace`, `monospace`.

- **Headers**: Bold uppercase with tight letter-spacing (`tracking-tighter`).

- **Technical Text**: Small caps or uppercase for versioning and system statuses.

---

Used for sticky headers and high-level containers.

- **Properties**: `backdrop-blur-md`, `bg-zinc-950/70`, `border-slate-800`.

Used for the "About" (Manifesto) section.

- **Traits**: Rounded corners, window control dots (red/yellow/green or slate-800), monospaced headers, and breadcrumb navigation (e.g., `architect_workspace // manifesto.sh`).

Used for the "Connect" module.

- **Sidebar**: A vertical navigation bar representing a file tree (`Project Explorer`).

- **Main Area**: Line-numbered editor view with code syntax highlighting (imports, variable declarations).

- **Status Bar**: A thin footer tracking connection status and metadata.

Used for versioning and statuses.

- **Style**: Solid background (`slate-800` or `cyan-400`), inverted text color, small padding, uppercase mono text.

---

- **Grid System**: A subtle `50px x 50px` grid pattern (`rgba(34, 211, 238, 0.05)`) that slides vertically to create a sense of infinite "construction."

- **Scanlines**: A horizontal gradient that moves vertically across the screen, mimicking vintage CRT or high-tech sensor displays.

- **Radial Glows**: Large, low-opacity radial gradients (cyan or violet) positioned behind key sections to add depth and focus.

---

- **Typewriter Effect**: Used for main headers to simulate real-time "system booting" or code compilation.

- **Cursor Blink**: A vertical cyan bar at the end of typed headers.

- **Scanline Animation**: 8s linear cycle moving from top to bottom.

- **Glow Transitions**: Cards and buttons transition their border-color and box-shadow on hover to create a "glowing" neon effect.

- **Scale Pulses**: Subtle scaling of icons on hover and pulsing status indicators for "Operational" states.

---

- **Scale**: Multiples of 4px (Tailwind standard).

- **Padding**: Large breathing room for headers (e.g., `py-24`, `px-6`).

- **Borders**: Thin `1px` borders (`border-slate-800`) used extensively to frame elements and sections.