Call to action

Join Insight Systems in transforming human engagmentinto structured knowledge. Explore our real-world studies and research on human-AI interaction.

Enhance Human-AI Governance

Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Living Intelligence Stack — Insight Systems</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0D0D0D;--text:#E8E8E8;--muted:#888;
  --purple:#7C3AED;--purple-bg:#1E0A3C;
  --blue:#2563EB;--blue-bg:#0A1F3C;
  --teal:#0D9488;--teal-bg:#0A2E2E;
  --gray:#444;--gray-bg:#1A1A1A;
  --gold:#C9A24D;--gold-bg:#1A1708;
  --radius:12px;
}
html{font-size:16px}
body{background:var(--bg);color:var(--text);font-family:'Inter','Montserrat',system-ui,sans-serif;min-height:100vh;display:flex;justify-content:center;padding:40px 20px 60px;line-height:1.5;-webkit-font-smoothing:antialiased}

.container{width:100%;max-width:1080px;position:relative}

/* ── Header ── */
.header{text-align:center;margin-bottom:56px;animation:fadeSlideUp .8s ease both}
.header .eyebrow{font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.header h1{font-family:'Montserrat',sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;background:linear-gradient(135deg,#fff 0%,#aaa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.header .subtitle{font-size:1.05rem;font-weight:400;color:var(--muted);letter-spacing:.04em}

/* ── Layer generic ── */
.layer{position:relative;animation:fadeSlideUp .7s ease both;margin-bottom:0}
.layer:nth-child(1){animation-delay:.15s}
.layer:nth-child(2){animation-delay:.3s}
.layer:nth-child(3){animation-delay:.45s}
.layer:nth-child(4){animation-delay:.6s}
.layer:nth-child(5){animation-delay:.75s}

.layer-tag{font-family:'Montserrat',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);position:absolute;left:-36px;top:50%;translate:0 -50%;color:var(--muted);opacity:.55}
@media(max-width:700px){.layer-tag{writing-mode:horizontal-tb;transform:none;position:relative;left:0;top:0;translate:none;margin-bottom:8px;display:block;text-align:left;font-size:.55rem}}

.layer-inner{border-radius:var(--radius);padding:28px 32px;display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}

/* cards inside layers */
.card{border-radius:10px;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;flex:1;min-width:140px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px)}
.card-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:4px}
.card-sub{font-size:.78rem;color:var(--muted);font-weight:400}
.card-tags{margin-top:8px;font-size:.7rem;color:var(--muted);letter-spacing:.06em}

/* ── Layer 1 EXECUTIVE ── */
.layer--executive .layer-inner{background:var(--purple-bg);border:1px solid rgba(124,58,237,.25);box-shadow:0 4px 30px rgba(124,58,237,.12)}
.layer--executive .card{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);box-shadow:0 0 20px rgba(124,58,237,.08)}
.layer--executive .card-title{color:#c4b5fd;font-size:1.4rem}
.layer--executive .card-sub{color:#a78bfa}

/* ── Layer 2 ARCHITECTURE ── */
.layer--architecture .layer-inner{background:var(--blue-bg);border:1px solid rgba(37,99,235,.25);box-shadow:0 4px 30px rgba(37,99,235,.1)}
.layer--architecture .card{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);box-shadow:0 0 20px rgba(37,99,235,.06)}
.layer--architecture .card-title{color:#93c5fd}
.layer--architecture .card-sub{color:#60a5fa}
.layer--architecture .card--small{flex:.35;min-width:120px}
.layer--architecture .card--wide{flex:.65}

/* ── Layer 3 COGNITIVE ── */
.layer--cognitive .layer-inner{background:var(--teal-bg);border:1px solid rgba(13,148,136,.25);box-shadow:0 4px 30px rgba(13,148,136,.1)}
.layer--cognitive .card{background:rgba(13,148,136,.1);border:1px solid rgba(13,148,136,.25);box-shadow:0 0 20px rgba(13,148,136,.06)}
.layer--cognitive .card-title{color:#5eead4}

/* ── Layer 4 EXECUTION ── */
.layer--execution .layer-inner{background:var(--gray-bg);border:1px solid rgba(68,68,68,.4);box-shadow:0 4px 30px rgba(0,0,0,.25)}
.layer--execution .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:0 0 14px rgba(0,0,0,.15)}
.layer--execution .card-title{color:#ccc}

/* ── Layer 5 FEEDBACK ── */
.layer--feedback .layer-inner{background:var(--gold-bg);border:1px solid rgba(201,162,77,.3);box-shadow:0 4px 30px rgba(201,162,77,.1)}
.layer--feedback .card{background:rgba(201,162,77,.1);border:1px solid rgba(201,162,77,.25);box-shadow:0 0 20px rgba(201,162,77,.06)}
.layer--feedback .card-title{color:#f6e27a;font-size:1.2rem}
.layer--feedback .card-sub{color:var(--gold)}

/* ── Animated connectors ── */
.connector{display:flex;justify-content:center;align-items:center;height:48px;position:relative;animation:fadeSlideUp .7s ease both}
.connector svg{overflow:visible}
.connector .arrow-line{stroke-dasharray:6 6;animation:flowDown 1.2s linear infinite}
.connector .arrow-head{fill:var(--muted)}
.connector--purple .arrow-line{stroke:var(--purple);filter:drop-shadow(0 0 4px var(--purple))}
.connector--purple .arrow-head{fill:var(--purple)}
.connector--blue .arrow-line{stroke:var(--blue);filter:drop-shadow(0 0 4px var(--blue))}
.connector--blue .arrow-head{fill:var(--blue)}
.connector--teal .arrow-line{stroke:var(--teal);filter:drop-shadow(0 0 4px var(--teal))}
.connector--teal .arrow-head{fill:var(--teal)}
.connector--gray .arrow-line{stroke:var(--gray);filter:drop-shadow(0 0 3px var(--gray))}
.connector--gray .arrow-head{fill:var(--gray)}

@keyframes flowDown{0%{stroke-dashoffset:12}100%{stroke-dashoffset:0}}

/* ── Feedback loop arrow (right side) ── */
.feedback-arrow{position:absolute;right:-60px;top:0;bottom:0;width:60px;pointer-events:none;animation:fadeIn 1.2s .9s ease both}
@media(max-width:900px){.feedback-arrow{right:-40px;width:40px}}
@media(max-width:600px){.feedback-arrow{display:none}}
.feedback-arrow svg{width:100%;height:100%}
.feedback-arrow .loop-path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:8 5;animation:flowUp 2s linear infinite;filter:drop-shadow(0 0 6px rgba(201,162,77,.5))}
.feedback-arrow .loop-head{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold))}

@keyframes flowUp{0%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}

/* ── Legend ── */
.legend{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;animation:fadeSlideUp .7s 1s ease both}
.legend-item{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── Animations ── */
@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* ── Responsive ── */
@media(max-width:600px){
  .layer-inner{padding:18px 14px;gap:10px}
  .card{padding:16px 12px;min-width:100px}
  .card-title{font-size:1rem}
  .header h1{font-size:1.8rem}
}

/* ── Layers wrapper for feedback arrow positioning ── */
.layers-wrapper{position:relative;padding-right:70px}
@media(max-width:900px){.layers-wrapper{padding-right:48px}}
@media(max-width:600px){.layers-wrapper{padding-right:0}}
.layers-wrapper > .layer,.layers-wrapper > .connector{padding-left:44px}
@media(max-width:700px){.layers-wrapper > .layer,.layers-wrapper > .connector{padding-left:0}}

/* ── Cycle icon in feedback card ── */
.cycle-icon{display:inline-block;font-size:1.6rem;margin-bottom:4px;animation:spin 6s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
</style>
</head>
<body>

<div class="container">
  
  <header class="header">
    <p class="eyebrow">Insight Systems</p>
    <h1>Living Intelligence Stack</h1>
    <p class="subtitle">Distributed Cognitive Governance Framework</p>
  </header>

  
  <div class="layers-wrapper" id="stack">

    
    <div class="layer layer--executive">
      <span class="layer-tag">Executive</span>
      <div class="layer-inner">
        <div class="card">
          <div class="card-title">Freedom Queen 👑</div>
          <div class="card-sub">Solo Decision Maker</div>
        </div>
      </div>
    </div>

    
    <div class="connector connector--purple">
      <svg width="24" height="48"><line class="arrow-line" x1="12" y1="0" x2="12" y2="40" stroke-width="2"/><polygon class="arrow-head" points="6,38 12,48 18,38"/></svg>
    </div>

    
    <div class="layer layer--architecture">
      <span class="layer-tag">Architecture</span>
      <div class="layer-inner">
        <div class="card card--small">
          <div class="card-title">Gemini</div>
          <div class="card-sub">AI Architect</div>
        </div>
        <div class="card card--wide">
          <div class="card-title">ZOHO ONE</div>
          <div class="card-sub">Operational Backbone</div>
          <div class="card-tags">CRM · Automation · Data · Systems</div>
        </div>
      </div>
    </div>

    
    <div class="connector connector--blue">
      <svg width="24" height="48"><line class="arrow-line" x1="12" y1="0" x2="12" y2="40" stroke-width="2"/><polygon class="arrow-head" points="6,38 12,48 18,38"/></svg>
    </div>

    
    <div class="layer layer--cognitive">
      <span class="layer-tag">Cognitive Engine</span>
      <div class="layer-inner">
        <div class="card">
          <div class="card-title">DeepSeek</div>
          <div class="card-sub">Research &amp; Reasoning</div>
        </div>
        <div class="card">
          <div class="card-title">ChatGPT</div>
          <div class="card-sub">Language &amp; Content</div>
        </div>
        <div class="card">
          <div class="card-title">ChatLLM</div>
          <div class="card-sub">Custom Intelligence</div>
        </div>
      </div>
    </div>

    
    <div class="connector connector--teal">
      <svg width="24" height="48"><line class="arrow-line" x1="12" y1="0" x2="12" y2="40" stroke-width="2"/><polygon class="arrow-head" points="6,38 12,48 18,38"/></svg>
    </div>

    
    <div class="layer layer--execution">
      <span class="layer-tag">Execution</span>
      <div class="layer-inner">
        <div class="card">
          <div class="card-title">Data &amp; Compute Layer</div>
          <div class="card-sub">Processing · Storage · Analytics</div>
        </div>
        <div class="card">
          <div class="card-title">Distribution Layer</div>
          <div class="card-sub">Delivery · Channels · Scale</div>
        </div>
      </div>
    </div>

    
    <div class="connector connector--gray">
      <svg width="24" height="48"><line class="arrow-line" x1="12" y1="0" x2="12" y2="40" stroke-width="2"/><polygon class="arrow-head" points="6,38 12,48 18,38"/></svg>
    </div>

    
    <div class="layer layer--feedback">
      <span class="layer-tag">Feedback Loop</span>
      <div class="layer-inner">
        <div class="card">
          <div class="cycle-icon">🔄</div>
          <div class="card-title">Continuous Intelligence Cycle</div>
          <div class="card-sub">Learn · Adapt · Evolve · Optimize</div>
        </div>
      </div>
    </div>

    
    <div class="feedback-arrow" aria-hidden="true">
      <svg viewBox="0 0 60 800" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path class="loop-path" d="M 5,760 C 55,760 55,700 55,600 L 55,200 C 55,80 55,40 5,40"/>
        <polygon class="loop-head" points="0,50 10,40 5,30"/>
      </svg>
    </div>

  </div>

  
  <div class="legend">
    <div class="legend-item"><span class="legend-dot" style="background:var(--purple)"></span>Executive</div>
    <div class="legend-item"><span class="legend-dot" style="background:var(--blue)"></span>Architecture</div>
    <div class="legend-item"><span class="legend-dot" style="background:var(--teal)"></span>Cognitive Engine</div>
    <div class="legend-item"><span class="legend-dot" style="background:var(--gray)"></span>Execution</div>
    <div class="legend-item"><span class="legend-dot" style="background:var(--gold)"></span>Feedback Loop</div>
  </div>

</div>

</body>
</html>

Insight Systems

Insight Systems, is a universal living research space that explores cognition, intuition, and human‑AI collaboration by documenting real‑world case studies, field notes, and applied research on how lived experience becomes structured knowledge. Emphasizing documentation over performance, the venture is just starting out.