index.html

---
layout: default
title: Home
description: "Crystal Studio Labs - An indie developer studio engineering high-performance open-source developer tools, CLI systems, and software under Industrial Brutalism principles."
---

<!-- Industrial Hero Section -->
<section class="hero">
  <div class="container">
    <div class="hero-pill">
      <span class="status-pulse"></span>
      <span>EST. 2025 // OBSIDIAN PROTOCOL V1.0</span>
    </div>
    
    <h1 class="hero-title">
      ENGINEERING <span class="gradient-text">DEVELOPER UTILITIES</span> & SYSTEM PROTOCOLS
    </h1>
    
    <p class="hero-subtitle">
      Crystal Studio Labs builds high-performance CLI systems, automated GitHub Actions, local-first web software, and developer tools in the age of AI. Radical transparency. Zero bloat. 3D block brutalism by default.
    </p>
    
    <div class="hero-actions">
      <a href="{{ '/pages/projects.html' | relative_url }}" class="btn btn-cyan btn-lg">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
          <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
          <polyline points="2 17 12 22 22 17"></polyline>
          <polyline points="2 12 12 17 22 12"></polyline>
        </svg>
        [EXPLORE_PROJECTS]
      </a>
      
      <a href="{{ '/pages/projects.html#argus' | relative_url }}" class="btn btn-purple btn-lg">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
        </svg>
        [DEPLOY_ARGUS_ACTION]
      </a>

      <a href="https://github.com/Crystal-Studio-Labs" target="_blank" rel="noopener noreferrer" class="btn btn-obsidian btn-lg">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
          <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
        </svg>
        [GITHUB_ORG]
      </a>
    </div>

    <!-- System Metrics Readout -->
    <div class="hero-stats">
      <div class="stat-box">
        <div class="stat-number">99.98%</div>
        <div class="stat-label">[UPTIME_TELEMETRY]</div>
      </div>
      <div class="stat-box">
        <div class="stat-number" style="color: var(--accent-emerald);">STABLE</div>
        <div class="stat-label">[BUILD_STATUS]</div>
      </div>
      <div class="stat-box">
        <div class="stat-number">10+</div>
        <div class="stat-label">[ACTIVE_REPOSITORIES]</div>
      </div>
      <div class="stat-box">
        <div class="stat-number" style="color: var(--accent-gold);">&lt;25MB</div>
        <div class="stat-label">[MAX_MEMORY_FOOTPRINT]</div>
      </div>
    </div>
  </div>
</section>

<!-- ARGUS Spotlight Banner -->
<section class="section">
  <div class="container">
    <div class="argus-banner">
      <div class="argus-grid">
        <div class="argus-info">
          <span class="chip chip-purple">[FEATURED_SECURITY_ACTION]</span>
          <h2>ARGUS PR Review Engine</h2>
          <p>
            An autonomous, 3-stage AI code reviewer for GitHub Actions enforcing zero placeholders, architectural spec compliance, and Mermaid.js flow diagrams.
          </p>

          <div class="argus-features">
            <div class="argus-feature-item">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#06B6D4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Zero-Placeholder Scanner</span>
            </div>
            <div class="argus-feature-item">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#06B6D4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Architecture Spec Guard</span>
            </div>
            <div class="argus-feature-item">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#06B6D4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Mermaid Visualizer</span>
            </div>
            <div class="argus-feature-item">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#06B6D4" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
              <span>Idempotent Single-Comment PRs</span>
            </div>
          </div>

          <div class="install-box">
            <code id="argus-install">uses: Crystal-Studio-Labs/Argus@v1</code>
            <button class="copy-btn" data-copy-target="argus-install" aria-label="Copy GitHub Action string">
              [COPY]
            </button>
          </div>

          <a href="https://github.com/Crystal-Studio-Labs/Argus" target="_blank" rel="noopener noreferrer" class="btn btn-cyan">
            [VIEW_ARGUS_REPOSITORY] →
          </a>
        </div>

        <div class="terminal-box">
          <div class="code-header" style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; margin-bottom: 1rem;">
            <span class="label-caps" style="color: var(--accent-cyan-bright);">[TERMINAL_READOUT // ARGUS_V1]</span>
            <span class="chip chip-emerald">PASSED</span>
          </div>
          <pre><code>[ARGUS] Scanning PR #42...
[ARGUS-01] Zero-Placeholders: PASSED ✓
[ARGUS-02] Spec-Compliance: PASSED ✓
[ARGUS-03] Structural-Clarity: Topology Rendered ✓

Result: 🟢 APPROVED FOR MERGE
Summary: Clean implementation with full test coverage.</code></pre>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Featured Flagship Utilities -->
<section class="section">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">[HARDWARE_ECOSYSTEM]</span>
      <h2 class="section-title">BUILT FOR PERFORMANCE & ERGONOMICS</h2>
      <p class="section-desc">Explore our active developer tools, CLI monitors, and local-first applications.</p>
    </div>

    <div class="projects-grid">
      <!-- MenuForge -->
      <div class="brutal-card project-card">
        <div class="card-header-bar">
          <span class="label-caps">[TERMINAL_UI]</span>
          <span class="chip chip-cyan">v1.2.0</span>
        </div>
        <div class="card-body" style="display: flex; flex-direction: column; flex-grow: 1;">
          <div class="project-icon" style="margin-bottom: 1.25rem;">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M4 17l6-6-6-6M12 19h8"></path></svg>
          </div>
          <h3 class="project-title">MenuForge TUI</h3>
          <p class="project-desc">A professional Linux terminal UI launcher built on the <code>gum</code> framework. Bridges manually installed binaries, scripts, and games directly into Linux desktops.</p>
          
          <div class="install-box">
            <code>curl -fsSL https://raw.githubusercontent.com/.../install.sh</code>
            <button class="copy-btn">[COPY]</button>
          </div>

          <div class="project-footer">
            <div style="display: flex; gap: 0.4rem;">
              <span class="chip chip-dark">Shell</span>
              <span class="chip chip-dark">Gum</span>
            </div>
            <a href="{{ '/pages/projects.html#menuforge' | relative_url }}" class="text-cyan">[DETAILS] →</a>
          </div>
        </div>
      </div>

      <!-- CrystalSystem.js -->
      <div class="brutal-card project-card">
        <div class="card-header-bar">
          <span class="label-caps">[TELEMETRY_ENGINE]</span>
          <span class="chip chip-purple">v1.0.3</span>
        </div>
        <div class="card-body" style="display: flex; flex-direction: column; flex-grow: 1;">
          <div class="project-icon" style="margin-bottom: 1.25rem; background: var(--accent-purple); color: #fff;">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="2" y="3" width="20" height="14" rx="0" ry="0"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
          </div>
          <h3 class="project-title">CrystalSystem.js</h3>
          <p class="project-desc">Zero-dependency real-time system resource monitor for Node.js. Displays CPU, RAM, Battery, Disk, and Network telemetry in terminal UI or returns JSON via HTTP API.</p>
          
          <div class="install-box">
            <code>npm install -g crystalsystem-js</code>
            <button class="copy-btn">[COPY]</button>
          </div>

          <div class="project-footer">
            <div style="display: flex; gap: 0.4rem;">
              <span class="chip chip-dark">Node.js</span>
              <span class="chip chip-dark">API</span>
            </div>
            <a href="{{ '/pages/projects.html#crystalsystem' | relative_url }}" class="text-cyan">[DETAILS] →</a>
          </div>
        </div>
      </div>

      <!-- InkMD -->
      <div class="brutal-card project-card">
        <div class="card-header-bar">
          <span class="label-caps">[LOCAL_FIRST_WEB]</span>
          <span class="chip chip-emerald">v1.0.0</span>
        </div>
        <div class="card-body" style="display: flex; flex-direction: column; flex-grow: 1;">
          <div class="project-icon" style="margin-bottom: 1.25rem; background: var(--accent-emerald); color: #000;">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
          </div>
          <h3 class="project-title">InkMD Editor</h3>
          <p class="project-desc">Browser-based Markdown editor with a local-first philosophy. Renders split-pane live-previews with GitHub Flavored Markdown support, syntax highlighting, and offline exports.</p>
          
          <div class="install-box">
            <code>npx create-inkmd-app@latest</code>
            <button class="copy-btn">[COPY]</button>
          </div>

          <div class="project-footer">
            <div style="display: flex; gap: 0.4rem;">
              <span class="chip chip-dark">React</span>
              <span class="chip chip-dark">TS</span>
            </div>
            <a href="{{ '/pages/projects.html#inkmd' | relative_url }}" class="text-cyan">[DETAILS] →</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Studio Principles Grid -->
<section class="section">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">[STUDIO_PHILOSOPHY]</span>
      <h2 class="section-title">THE OBSIDIAN PROTOCOL PRINCIPLES</h2>
      <p class="section-desc">Engineering standards that guide every binary, action, and interface we build.</p>
    </div>

    <div class="projects-grid">
      <div class="brutal-card">
        <div class="card-header-bar">
          <span class="label-caps">[PRINCIPLE_01]</span>
          <span class="chip chip-cyan">01</span>
        </div>
        <div class="card-body">
          <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">RADICAL TRANSPARENCY</h3>
          <p class="project-desc">We avoid closed black boxes and bloatware. Code is open source, transparently documented, and easily inspectable.</p>
        </div>
      </div>

      <div class="brutal-card">
        <div class="card-header-bar">
          <span class="label-caps">[PRINCIPLE_02]</span>
          <span class="chip chip-purple">02</span>
        </div>
        <div class="card-body">
          <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">SYSTEM EFFICIENCY</h3>
          <p class="project-desc">Zero secret exposures, minimal memory footprints (< 25MB), and strict performance benchmarks across every tool.</p>
        </div>
      </div>

      <div class="brutal-card">
        <div class="card-header-bar">
          <span class="label-caps">[PRINCIPLE_03]</span>
          <span class="chip chip-emerald">03</span>
        </div>
        <div class="card-body">
          <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">INDIE SPIRIT</h3>
          <p class="project-desc">Independent developer ownership. We ship code fast, learn from real-world usage, and iterate relentlessly.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Community Call to Action -->
<section class="section">
  <div class="container">
    <div class="brutal-card" style="text-align: center; padding: 4rem 2rem;">
      <h2 style="font-size: 2.5rem; margin-bottom: 1rem;">CONNECT_TO_STUDIO_TERMINAL</h2>
      <p style="max-width: 680px; margin: 0 auto 2rem; color: var(--text-main); font-size: 1.15rem;">
        Whether filing bug reports, submitting PRs reviewed by ARGUS, or building your own developer utilities, join our Discord server.
      </p>
      <div style="display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap;">
        <a href="https://discord.gg/EdbUJHNv9J" target="_blank" rel="noopener noreferrer" class="btn btn-cyan btn-lg">
          [JOIN_DISCORD_SERVER] →
        </a>
        <a href="{{ '/pages/community.html' | relative_url }}" class="btn btn-obsidian btn-lg">
          [CONTRIBUTOR_GUIDE]
        </a>
      </div>
    </div>
  </div>
</section>