Skip to content

Instantly share code, notes, and snippets.

@unforced

unforced/index.html

Last active February 2, 2026 23:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unforced/14f27875b5a011d003c2db2915c94bcb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unforced/14f27875b5a011d003c2db2915c94bcb to your computer and use it in GitHub Desktop.
Download ZIP
Techne Institute - An Integral Technology Learning Center
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Techne Institute | An Integral Technology Learning Center</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,300;1,8..60,400&family=IBM+Plex+Mono:wght@300;400&display=swap" rel="stylesheet">
<style>
:root {
/* Deep, warm darks */
--void: #08080a;
--ink: #0f0f12;
--charcoal: #1a1a1f;
--graphite: #2a2a30;
/* Warm lights - paper tones */
--parchment: #f7f5f0;
--cream: #ebe7df;
--bone: #d8d3c8;
--stone: #9a958a;
/* Accents */
--ember: #c2512a;
--ember-dim: #8a3a1f;
--ember-glow: rgba(194, 81, 42, 0.08);
--sage: #4a5f4a;
--sage-light: #6b836b;
/* Typography */
--font-display: 'Cormorant', serif;
--font-body: 'Source Serif 4', serif;
--font-mono: 'IBM Plex Mono', monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--parchment);
color: var(--charcoal);
line-height: 1.75;
font-size: 17px;
font-weight: 400;
}
/* Subtle paper texture overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.4;
z-index: 10000;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* ============ HERO ============ */
.hero {
min-height: 100vh;
background: var(--ink);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 80%, var(--ember-glow) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(74, 95, 74, 0.04) 0%, transparent 40%),
linear-gradient(180deg, var(--void) 0%, var(--ink) 50%, var(--charcoal) 100%);
pointer-events: none;
}
/* Vertical line motif */
.hero::after {
content: '';
position: absolute;
top: 15%;
left: 50%;
width: 1px;
height: 70%;
background: linear-gradient(
180deg,
transparent 0%,
var(--ember-dim) 20%,
var(--ember) 50%,
var(--ember-dim) 80%,
transparent 100%
);
opacity: 0.3;
}
.hero-content {
max-width: 800px;
text-align: center;
position: relative;
z-index: 1;
}
.hero-wordmark {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(4.5rem, 18vw, 10rem);
letter-spacing: 0.25em;
color: var(--cream);
margin-bottom: 0.25rem;
opacity: 0;
animation: revealText 2s ease-out 0.2s forwards;
text-shadow: 0 0 80px rgba(194, 81, 42, 0.2);
}
@keyframes revealText {
from {
opacity: 0;
transform: translateY(20px);
letter-spacing: 0.35em;
}
to {
opacity: 1;
transform: translateY(0);
letter-spacing: 0.25em;
}
}
.hero-greek {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.5rem;
color: var(--stone);
letter-spacing: 0.3em;
margin-bottom: 4rem;
opacity: 0;
animation: fadeIn 1.5s ease-out 0.8s forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-tagline {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
color: var(--bone);
max-width: 500px;
margin: 0 auto 2.5rem;
line-height: 1.6;
opacity: 0;
animation: fadeIn 1.5s ease-out 1.2s forwards;
}
.hero-meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
opacity: 0;
animation: fadeIn 1.5s ease-out 1.6s forwards;
}
.hero-location {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--stone);
}
.hero-status {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ember);
}
/* ============ NAVIGATION ============ */
nav {
background: var(--parchment);
border-bottom: 1px solid var(--bone);
padding: 1.5rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
nav::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--ember);
}
nav ul {
display: flex;
justify-content: center;
gap: 3rem;
list-style: none;
max-width: 900px;
margin: 0 auto;
flex-wrap: wrap;
}
nav a {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--graphite);
text-decoration: none;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--ember);
transition: width 0.4s ease;
}
nav a:hover {
color: var(--ember);
}
nav a:hover::after {
width: 100%;
}
/* ============ MAIN CONTENT ============ */
main {
max-width: 820px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
/* Running margin element */
main::before {
content: '';
position: absolute;
left: -60px;
top: 0;
bottom: 0;
width: 1px;
background: repeating-linear-gradient(
180deg,
var(--bone) 0px,
var(--bone) 4px,
transparent 4px,
transparent 20px
);
opacity: 0.5;
}
@media (max-width: 1000px) {
main::before { display: none; }
}
section {
padding: 6rem 0;
border-bottom: 1px solid var(--bone);
position: relative;
}
section:last-of-type {
border-bottom: none;
}
/* Section markers */
.section-mark {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.section-mark::after {
content: '';
flex: 1;
height: 1px;
background: var(--bone);
max-width: 100px;
}
h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 5vw, 3rem);
color: var(--charcoal);
margin-bottom: 1.75rem;
letter-spacing: -0.01em;
line-height: 1.2;
}
h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.5rem;
color: var(--graphite);
margin: 3rem 0 1.25rem;
letter-spacing: -0.01em;
}
p {
color: var(--graphite);
margin-bottom: 1.5rem;
max-width: 65ch;
}
.lead {
font-size: 1.125rem;
font-weight: 300;
color: var(--charcoal);
line-height: 1.9;
}
em {
font-style: italic;
color: var(--ember-dim);
}
/* ============ PREMISE SECTION ============ */
.premise-blocks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
@media (max-width: 700px) {
.premise-blocks {
grid-template-columns: 1fr;
}
}
.premise-block {
padding: 2rem 2rem 2rem 2.5rem;
background: linear-gradient(135deg, var(--cream) 0%, var(--parchment) 100%);
border-left: 2px solid var(--ember);
position: relative;
}
.premise-block::before {
content: '';
position: absolute;
top: 2rem;
left: -6px;
width: 10px;
height: 10px;
background: var(--parchment);
border: 2px solid var(--ember);
border-radius: 50%;
}
.premise-block h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
color: var(--charcoal);
margin: 0 0 1rem;
}
.premise-block p {
font-size: 0.95rem;
margin: 0;
color: var(--graphite);
}
/* ============ DISTINCTION (DARK SECTION) ============ */
.distinction {
background: var(--ink);
margin: 0 calc(-50vw + 50%);
padding: 6rem calc(50vw - 50%);
position: relative;
}
.distinction::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 30% 0%, var(--ember-glow) 0%, transparent 50%),
radial-gradient(ellipse at 70% 100%, rgba(74, 95, 74, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.distinction-inner {
max-width: 820px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.distinction .section-mark {
color: var(--stone);
}
.distinction .section-mark::after {
background: var(--graphite);
}
.distinction h2 {
color: var(--cream);
}
.distinction-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
@media (max-width: 700px) {
.distinction-grid {
grid-template-columns: 1fr;
}
}
.distinction-card {
padding: 2rem;
border: 1px solid var(--graphite);
position: relative;
transition: border-color 0.3s ease, background 0.3s ease;
}
.distinction-card:hover {
border-color: var(--stone);
}
.distinction-card.highlight {
border-color: var(--ember-dim);
background: linear-gradient(135deg, rgba(194, 81, 42, 0.05) 0%, transparent 100%);
}
.distinction-card.highlight:hover {
border-color: var(--ember);
}
.distinction-label {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 1rem;
}
.distinction-card.highlight .distinction-label {
color: var(--ember);
}
.distinction-card h3 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
color: var(--bone);
margin: 0 0 1rem;
}
.distinction-card p {
font-size: 0.9rem;
color: var(--stone);
margin: 0;
line-height: 1.7;
}
.distinction-card.highlight p {
color: var(--bone);
}
/* ============ FRAMEWORK SECTION ============ */
.framework-elements {
display: flex;
justify-content: center;
gap: 0;
margin: 3rem 0;
flex-wrap: wrap;
}
.framework-element {
text-align: center;
padding: 2rem 2.5rem;
position: relative;
flex: 0 0 auto;
}
.framework-element:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: var(--bone);
}
@media (max-width: 600px) {
.framework-element {
padding: 1.5rem;
}
.framework-element:not(:last-child)::after {
display: none;
}
}
.framework-element span {
display: block;
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 300;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.framework-element p {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
margin: 0;
}
.framework-note {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
color: var(--graphite);
text-align: center;
max-width: 550px;
margin: 0 auto;
line-height: 1.7;
}
/* ============ PROGRAMS SECTION ============ */
.program-intro {
margin-bottom: 3rem;
}
.cohort-track {
margin: 3rem 0;
padding: 2.5rem;
background: var(--cream);
position: relative;
}
.cohort-track::before {
content: '';
position: absolute;
left: 2.5rem;
top: 5rem;
bottom: 2.5rem;
width: 1px;
background: linear-gradient(180deg, var(--ember) 0%, var(--bone) 100%);
}
.cohort-track h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.cohort-track > p {
font-size: 0.95rem;
color: var(--graphite);
margin-bottom: 2rem;
}
.cohort-level {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: 1.5rem;
padding: 1.5rem 0 1.5rem 0;
margin-left: 1rem;
align-items: start;
position: relative;
}
.cohort-level::before {
content: '';
position: absolute;
left: -1rem;
top: 2rem;
width: 12px;
height: 12px;
background: var(--parchment);
border: 2px solid var(--ember);
border-radius: 50%;
z-index: 1;
}
@media (max-width: 600px) {
.cohort-level {
grid-template-columns: 1fr;
gap: 0.75rem;
padding-left: 1.5rem;
}
.cohort-track::before {
left: 1.5rem;
}
.cohort-level::before {
left: -0.5rem;
}
}
.cohort-numeral {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 300;
color: var(--ember);
line-height: 1;
}
.cohort-info h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
color: var(--charcoal);
margin-bottom: 0.35rem;
}
.cohort-info p {
font-size: 0.9rem;
color: var(--graphite);
margin: 0;
}
.cohort-meta {
text-align: right;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--stone);
line-height: 1.6;
}
.cohort-meta strong {
display: block;
color: var(--charcoal);
font-weight: 500;
font-size: 0.8rem;
}
/* Other programs grid */
.programs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
@media (max-width: 700px) {
.programs-grid {
grid-template-columns: 1fr;
}
}
.program-card {
padding: 2rem;
background: var(--cream);
border-bottom: 2px solid var(--bone);
transition: border-color 0.3s ease;
}
.program-card:hover {
border-color: var(--ember);
}
.program-label {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: 0.75rem;
}
.program-card h4 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--charcoal);
margin-bottom: 0.75rem;
}
.program-card p {
font-size: 0.9rem;
margin: 0 0 1rem;
color: var(--graphite);
}
.program-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.program-card li {
font-size: 0.85rem;
color: var(--stone);
padding: 0.3rem 0 0.3rem 1rem;
position: relative;
}
.program-card li::before {
content: '';
position: absolute;
left: 0;
top: 0.65rem;
width: 4px;
height: 4px;
background: var(--ember);
border-radius: 50%;
}
.program-status {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.35rem 0.75rem;
margin-top: 1rem;
}
.program-status.active {
background: rgba(74, 95, 74, 0.1);
color: var(--sage);
}
.program-status.developing {
background: var(--ember-glow);
color: var(--ember);
}
.program-status.planned {
background: var(--bone);
color: var(--stone);
}
/* ============ PRACTICE SECTION ============ */
.practice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
@media (max-width: 700px) {
.practice-grid {
grid-template-columns: 1fr;
gap: 0;
}
}
.practice-item {
padding: 1.75rem 0;
border-bottom: 1px solid var(--bone);
}
.practice-item:last-child {
border-bottom: none;
}
.practice-item h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.practice-item p {
font-size: 0.9rem;
color: var(--graphite);
margin: 0;
}
/* ============ SPACE SECTION ============ */
.space-visual {
background: linear-gradient(135deg, var(--charcoal) 0%, var(--ink) 100%);
padding: 3.5rem;
margin: 3rem 0;
text-align: center;
position: relative;
}
.space-visual::before,
.space-visual::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 1px solid var(--graphite);
}
.space-visual::before {
top: 1rem;
left: 1rem;
border-right: none;
border-bottom: none;
}
.space-visual::after {
bottom: 1rem;
right: 1rem;
border-left: none;
border-top: none;
}
.space-visual p {
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
font-weight: 300;
color: var(--bone);
max-width: none;
margin: 0;
line-height: 1.6;
}
.space-floors {
margin-top: 3rem;
}
.floor {
display: grid;
grid-template-columns: 100px 1fr;
gap: 2rem;
padding: 2rem 0;
border-bottom: 1px solid var(--bone);
align-items: start;
}
.floor:last-child {
border-bottom: none;
}
@media (max-width: 500px) {
.floor {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
.floor-label {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ember);
}
.floor-content h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
color: var(--charcoal);
margin-bottom: 0.5rem;
}
.floor-content p {
font-size: 0.9rem;
color: var(--graphite);
margin: 0;
}
/* ============ COMMUNITY SECTION ============ */
.community-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
@media (max-width: 700px) {
.community-values {
grid-template-columns: 1fr;
}
}
.value-card {
text-align: center;
padding: 2rem 1.5rem;
}
.value-card h4 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.35rem;
color: var(--charcoal);
margin-bottom: 0.75rem;
}
.value-card p {
font-size: 0.9rem;
color: var(--graphite);
margin: 0;
max-width: none;
}
/* ============ INVITATION (DARK SECTION) ============ */
.invitation {
background: var(--ink);
margin: 6rem calc(-50vw + 50%) 0;
padding: 6rem calc(50vw - 50%);
text-align: center;
position: relative;
}
.invitation::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 60px;
background: linear-gradient(180deg, var(--charcoal) 0%, var(--ember) 100%);
margin-top: -30px;
}
.invitation-content {
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.invitation h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 2.5rem;
color: var(--cream);
margin-bottom: 2rem;
letter-spacing: 0.02em;
}
.invitation p {
color: var(--stone);
font-size: 1.05rem;
max-width: none;
margin-bottom: 1.5rem;
line-height: 1.8;
}
.invitation-cta {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
color: var(--ember);
margin-top: 3rem;
}
/* ============ FOOTER ============ */
footer {
background: var(--void);
padding: 3rem 2rem;
text-align: center;
}
footer p {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--graphite);
max-width: none;
margin: 0;
}
footer a {
color: var(--stone);
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: var(--ember);
}
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<h1 class="hero-wordmark">TECHNE</h1>
<p class="hero-greek">&#964;&#941;&#967;&#957;&#951;</p>
<p class="hero-tagline">An Integral Technology Learning Center</p>
<div class="hero-meta">
<p class="hero-location">1515 Walnut Street, Boulder, Colorado</p>
<p class="hero-status">Founding 2026</p>
</div>
</div>
</section>
<nav>
<ul>
<li><a href="#premise">Premise</a></li>
<li><a href="#distinction">Distinction</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#practice">Practice</a></li>
<li><a href="#space">Space</a></li>
</ul>
</nav>
<main>
<section id="premise">
<p class="section-mark">01 &mdash; Premise</p>
<h2>The Recovery of Craft</h2>
<p class="lead">A human with a pencil can think thoughts unavailable to a human without one. A human in conversation can reach understanding neither would find alone. Capability emerges from the pairing of mind, tool, and community.</p>
<p>This is the oldest insight about technology, encoded in the Greek word <em>techne</em>: the craft of making, where art and skill and practical wisdom were not yet separated. The institute recovers this understanding for an age when the dominant narrative treats technology as replacement for human capability rather than extension of it.</p>
<div class="premise-blocks">
<div class="premise-block">
<h3>Augmentation</h3>
<p>We develop human capability, not automate it away. Tools extend what people can think, make, and coordinate. The human remains central: more capable, not less necessary.</p>
</div>
<div class="premise-block">
<h3>Collective Intelligence</h3>
<p>Individual skill matters, but the deeper leverage comes from groups thinking together. Shared memory, common language, accumulated observations, coordinated action. Intelligence that no single mind contains.</p>
</div>
</div>
</section>
<section id="distinction" class="distinction">
<div class="distinction-inner">
<p class="section-mark">02 &mdash; Distinction</p>
<h2>What We Mean by Integral</h2>
<div class="distinction-grid">
<div class="distinction-card">
<p class="distinction-label">The Dominant Narrative</p>
<h3>Artificial Intelligence</h3>
<p>Intelligence as computation, located in machines. Humans as data sources, users, or obstacles. The goal: systems that perform tasks without human involvement. Value extracted, capability concentrated.</p>
</div>
<div class="distinction-card highlight">
<p class="distinction-label">The Alternative</p>
<h3>Collective Intelligence</h3>
<p>Intelligence as emergent from relationship: between people, between people and tools, between communities and their accumulated knowledge. The goal: humans more capable together than apart. Value created, capability distributed.</p>
</div>
<div class="distinction-card">
<p class="distinction-label">Typical Tech Education</p>
<h3>Skills Training</h3>
<p>Transfer of techniques. Learn the tool, get the job. Cohorts begin and end. Credentials certify completion. Success measured in placement rates and salary bumps.</p>
</div>
<div class="distinction-card highlight">
<p class="distinction-label">What We Build</p>
<h3>Capability Development</h3>
<p>Formation of practitioners. Develop judgment, not just skill. Community persists beyond any program. Evidence demonstrates what you can actually do. Success measured in what becomes possible.</p>
</div>
</div>
</div>
</section>
<section id="framework">
<p class="section-mark">03 &mdash; Framework</p>
<h2>The Elements of Capability</h2>
<p class="lead">Capability emerges from five co-evolving elements. Change any one, and the others shift in response. Develop all together, and possibility expands.</p>
<div class="framework-elements">
<div class="framework-element">
<span>H</span>
<p>Human</p>
</div>
<div class="framework-element">
<span>L</span>
<p>Language</p>
</div>
<div class="framework-element">
<span>A</span>
<p>Artifacts</p>
</div>
<div class="framework-element">
<span>M</span>
<p>Methodology</p>
</div>
<div class="framework-element">
<span>T</span>
<p>Training</p>
</div>
</div>
<p class="framework-note">New tools require new language to think with, new methods to apply, new training to develop proficiency. The human who emerges is different from the one who began.</p>
<h3>Applied to This Moment</h3>
<p>AI tools are artifacts. Powerful ones. But artifacts alone don't create capability. The institute develops what surrounds the artifact: the language to think about what AI does and doesn't do well, the methodology for working alongside it effectively, the training to develop genuine proficiency, and the human judgment to direct it toward worthy ends.</p>
<p>People leave not just knowing how to use AI tools but understanding their place in a larger system of human capability. They have stance, not just skill.</p>
</section>
<section id="programs">
<p class="section-mark">04 &mdash; Programs</p>
<h2>Pathways Into Practice</h2>
<div class="program-intro">
<p class="lead">Multiple entry points into capability development. Some structured, some emergent. All held within a community that persists beyond any single program.</p>
</div>
<div class="cohort-track">
<h3>AI Building Cohorts</h3>
<p>Structured programs teaching people to build with AI as a creative partner. From first explorations to production applications. <em>"Articulation is the new skill."</em></p>
<div class="cohort-level">
<div class="cohort-numeral">I</div>
<div class="cohort-info">
<h4>Foundations</h4>
<p>Introduction to AI-assisted building. Play, explore, ship something small. Develop intuition for what's possible.</p>
</div>
<div class="cohort-meta">
<strong>4 weeks</strong>
~$225
</div>
</div>
<div class="cohort-level">
<div class="cohort-numeral">II</div>
<div class="cohort-info">
<h4>Practice</h4>
<p>Deeper technical work. Complex projects, iteration, developing craft. Build something that matters to you.</p>
</div>
<div class="cohort-meta">
<strong>6 weeks</strong>
~$450
</div>
</div>
<div class="cohort-level">
<div class="cohort-numeral">III</div>
<div class="cohort-info">
<h4>Mastery</h4>
<p>Production-grade applications. Client projects, portfolio development. Become someone who ships real things.</p>
</div>
<div class="cohort-meta">
<strong>8 weeks</strong>
~$1,000
</div>
</div>
</div>
<div class="programs-grid">
<div class="program-card">
<p class="program-label">Contemplative</p>
<h4>Morning Practice</h4>
<p>Optional sessions grounding the day. Meditation, movement, presence before work.</p>
<ul>
<li>Sitting meditation</li>
<li>Tai Chi & qigong</li>
<li>Reflective journaling</li>
</ul>
<span class="program-status developing">Developing</span>
</div>
<div class="program-card">
<p class="program-label">Creative</p>
<h4>Arts Integration</h4>
<p>Where technology meets creative expression. Making things that matter beyond utility.</p>
<ul>
<li>Generative art</li>
<li>Creative coding</li>
<li>Cross-disciplinary projects</li>
</ul>
<span class="program-status planned">Planned</span>
</div>
<div class="program-card">
<p class="program-label">Professional</p>
<h4>Team Workshops</h4>
<p>Intensive sessions for organizations developing AI capability across their teams.</p>
<ul>
<li>Half-day and full-day formats</li>
<li>Custom to your context</li>
<li>Hands-on building</li>
</ul>
<span class="program-status active">Active</span>
</div>
<div class="program-card">
<p class="program-label">Wellbeing</p>
<h4>Restoration</h4>
<p>Sauna and cold plunge. Care for the body that does the learning.</p>
<ul>
<li>Infrared sauna</li>
<li>Cold plunge</li>
<li>Scheduled member access</li>
</ul>
<span class="program-status planned">Planned</span>
</div>
</div>
</section>
<section id="practice">
<p class="section-mark">05 &mdash; Practice</p>
<h2>How We Work</h2>
<p class="lead">Collective intelligence doesn't happen automatically. It requires infrastructure, discipline, and intention. The institute builds these into its operation.</p>
<div class="practice-grid">
<div>
<div class="practice-item">
<h4>Observation</h4>
<p>Members document what happens: work undertaken, insights gained, collaborations formed. This isn't bureaucracy but reflective practice. Observations accumulate into collective memory.</p>
</div>
<div class="practice-item">
<h4>Evidence</h4>
<p>Capability emerges from what you demonstrably do, not what you claim. Profiles build from accumulated observations. The community can query its own knowledge.</p>
</div>
<div class="practice-item">
<h4>Agreements</h4>
<p>Commitments made visible. Membership, mentorship, collaboration: all involve mutual expectation. Making agreements explicit creates clarity without bureaucratizing relationship.</p>
</div>
</div>
<div>
<div class="practice-item">
<h4>Multiple Capitals</h4>
<p>Value flows in many forms: knowledge shared, attention given, introductions made, trust built. The institute tracks what matters, not just what's easy to count.</p>
</div>
<div class="practice-item">
<h4>Contemplative Ground</h4>
<p>Optional morning practices: meditation, movement, grounding before work. Inner development alongside outer capability. Wisdom about when and how to act, not just ability to act.</p>
</div>
<div class="practice-item">
<h4>Bootstrapping</h4>
<p>The institute uses itself to improve itself. We apply our own tools to our own coordination. Methodology develops through practice, not just theory.</p>
</div>
</div>
</div>
</section>
<section id="space">
<p class="section-mark">06 &mdash; Space</p>
<h2>The Building</h2>
<p>1515 Walnut Street in central Boulder. A vertical ecosystem where learning flows into building flows into employment.</p>
<div class="space-visual">
<p>Third floor institute, second floor ventures, roof for gathering.<br>A complete ecosystem from street to sky.</p>
</div>
<div class="space-floors">
<div class="floor">
<p class="floor-label">Third Floor</p>
<div class="floor-content">
<h4>Techne Institute</h4>
<p>The learning community home. Commons for members, teaching space for cohorts, studio for making, quiet room for focus. Sauna and cold plunge for restoration. Where capability develops through practice alongside others.</p>
</div>
</div>
<div class="floor">
<p class="floor-label">Second Floor</p>
<div class="floor-content">
<h4>RegenHub</h4>
<p>Coworking cooperative and venture studio. Startups, founders, builders actively creating. Employment pathways, real-world context, the ecosystem that absorbs graduates and provides proving ground.</p>
</div>
</div>
<div class="floor">
<p class="floor-label">Roof</p>
<div class="floor-content">
<h4>Gathering Space</h4>
<p>Community events, happy hours, moments where relationships form in a different register. Where the community becomes visible to itself under open sky.</p>
</div>
</div>
</div>
</section>
<section id="community">
<p class="section-mark">07 &mdash; Community</p>
<h2>What Forms Here</h2>
<p class="lead">The community that emerges is the primary artifact. Relationships, shared language, collective memory, evolving practice: these matter more than any particular program or output.</p>
<div class="community-values">
<div class="value-card">
<h4>Making</h4>
<p>Techne is productive knowledge. We don't just study; we build. Projects, prototypes, artifacts that exist because we made them.</p>
</div>
<div class="value-card">
<h4>Craft</h4>
<p>Attention to how something is made, not just that it works. Quality emerges from care and discipline, developed through practice.</p>
</div>
<div class="value-card">
<h4>Wisdom</h4>
<p>Knowing when to apply which capability. Judgment that comes from experience and reflection. Not just ability but discernment about its use.</p>
</div>
</div>
</section>
</main>
<section class="invitation">
<div class="invitation-content">
<h2>An Invitation</h2>
<p>We're gathering a founding community. Not customers, not employees: people who want to develop capability alongside others who share these commitments.</p>
<p>The first participants shape what this becomes. Their observations become the first entries in collective memory. Their relationships form the network's initial threads. Their questions become the curriculum's early material.</p>
<p class="invitation-cta">If you feel the pull: reach out.<br>The next step is conversation.</p>
</div>
</section>
<footer>
<p>Techne Institute &bull; Part of <a href="https://regenhub.xyz">RegenHub</a> &bull; Boulder, Colorado &bull; 2026</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment