🦄 Unicorn.Land ▸ docs/superpowers/plans/2026-04-08-glitter-land-v1.md
updated 2026-04-08

Glitter.land v1 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Ship Glitter.land v1 — a landing page with the salon framing, plus two threads: the migrated inequality economics essay and a new Technologium thesis piece. Deployed to Cloudflare Pages at glitter.land.

Architecture: Static HTML/CSS site. Own repo (Glitter.Land), own design system derived from Unicorn.land but with warm salon identity. Handcrafted HTML per page. Cloudflare Pages deployment via GitHub Actions.

Tech Stack: HTML, CSS (custom properties, no framework), Google Fonts (Outfit, Source Serif 4, JetBrains Mono), Cloudflare Pages, GitHub Actions

Design Spec: docs/superpowers/specs/2026-04-08-glitter-land-design.md

File Structure

Glitter.Land/
├── .deploy/                              # Cloudflare Pages publish root (build copies here)
│   ├── index.html
│   ├── css/
│   │   └── glitter-land.css
│   └── threads/
│       ├── inequality-mechanics/
│       │   └── systems-thinkers-guide.html
│       └── technologium/
│           └── the-seventh-kingdom.html
├── css/
│   └── glitter-land.css                  # Source CSS — the design system
├── index.html                            # Landing page source
├── threads/
│   ├── inequality-mechanics/
│   │   └── systems-thinkers-guide.html   # Migrated essay
│   └── technologium/
│       └── the-seventh-kingdom.html      # New piece
├── .github/
│   └── workflows/
│       └── deploy.yml                    # Cloudflare Pages deploy
├── build.sh                              # Copies source → .deploy/
├── CLAUDE.md
├── README.md
└── .gitignore

Task 1: Create Repo and Project Scaffolding

Files: - Create: Glitter.Land/ (new repo at /Users/joshua/Projects/Glitter.Land) - Create: CLAUDE.md - Create: .gitignore - Create: build.sh

mkdir -p /Users/joshua/Projects/Glitter.Land
cd /Users/joshua/Projects/Glitter.Land
git init

Create /Users/joshua/Projects/Glitter.Land/.gitignore:

.DS_Store
node_modules/
.deploy/

Create /Users/joshua/Projects/Glitter.Land/CLAUDE.md:

# CLAUDE.md

This is the Glitter.land website — The Magic Salon.

## What This Is

Glitter.land is the thinking counterpart to Unicorn.land. Unicorn.land is the magic atelier (where we build). Glitter.land is the magic salon (where we think). A unicorn is made of glitter.

## Repository Structure

- `css/` — Design system CSS (source)
- `index.html` — Landing page
- `threads/` — Lines of inquiry, each a directory containing HTML pieces
- `.deploy/` — Cloudflare Pages publish root (generated by build.sh)
- `.github/workflows/` — CI/CD

## Design System

Derived from Unicorn.land but with a warm salon identity:
- Shared: Outfit font, opal accent (#56dbd0), JetBrains Mono for code
- Different: Warm dark backgrounds (not cool purples), Source Serif 4 for body text, ambient shimmer (not bold rainbow)
- CSS custom property prefix: `--gl-*`

## Key Commands

```bash
# Build (copies source files to .deploy/)
./build.sh

# Preview locally
open .deploy/index.html

Deployment

Deploys to Cloudflare Pages. The .deploy/ directory is the publish root. Deploy workflow runs on push to main.

Content Structure

Content is organized as “threads” — sustained lines of inquiry. Each thread is a directory under threads/. Each piece within a thread is an HTML file.

Current threads: - threads/inequality-mechanics/ — How wealth concentrates, how the same forces can redistribute - threads/technologium/ — Technology as evolutionary force


- [ ] **Step 4: Create build.sh**

Create `/Users/joshua/Projects/Glitter.Land/build.sh`:

```bash
#!/bin/bash
# Build script: copies source files to .deploy/ for Cloudflare Pages
set -e

rm -rf .deploy
mkdir -p .deploy/css .deploy/threads

cp css/glitter-land.css .deploy/css/
cp index.html .deploy/
cp -r threads/* .deploy/threads/

echo "Build complete → .deploy/"

chmod +x build.sh

git add .gitignore CLAUDE.md build.sh
git commit -m "chore: initialize Glitter.land repo — The Magic Salon"

Task 2: Design System CSS

Files: - Create: css/glitter-land.css

This is the core design system. Derived from Unicorn.land’s design-system/css/unicorn-land.css but shifted to the warm salon identity described in the spec.

Create /Users/joshua/Projects/Glitter.Land/css/glitter-land.css:

/* ============================================
   Glitter.Land Design System v1.0.0
   "The Magic Salon"
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Color Tokens --- */
:root {
  /* Opal accent — shared DNA with Unicorn.land */
  --gl-opal-300: #7adace;
  --gl-opal-400: #56dbd0;
  --gl-opal-500: #2fb8ad;
  --gl-opal-600: #0d9488;

  /* Warm salon palette */
  --gl-gold-100: #fef3c7;
  --gl-gold-200: #fde68a;
  --gl-gold-300: #fcd34d;
  --gl-gold-400: #d4a853;
  --gl-gold-500: #b8941f;
  --gl-rose-100: #ffe4e6;
  --gl-rose-200: #fecdd3;
  --gl-rose-300: #e8a0a8;

  /* Warm neutrals — candlelit, not clinical */
  --gl-warm-50: #faf8f5;
  --gl-warm-100: #f5f0ea;
  --gl-warm-200: #e8e0d8;
  --gl-warm-300: #d4cac0;
  --gl-warm-400: #a89e94;
  --gl-warm-500: #78706a;
  --gl-warm-600: #57524c;
  --gl-warm-700: #3d3835;
  --gl-warm-800: #2a2623;
  --gl-warm-900: #1c1916;

  /* Semantic aliases — light mode */
  --gl-accent: var(--gl-opal-400);
  --gl-accent-hover: var(--gl-opal-500);
  --gl-accent-glow: rgba(86, 219, 208, 0.2);
  --gl-bg: var(--gl-warm-50);
  --gl-bg-deep: #f2ede6;
  --gl-bg-surface: rgba(255, 255, 255, 0.55);
  --gl-bg-surface-border: rgba(255, 255, 255, 0.7);
  --gl-text: var(--gl-warm-900);
  --gl-text-secondary: var(--gl-warm-500);
  --gl-text-muted: var(--gl-warm-400);
  --gl-border: var(--gl-warm-200);
  --gl-link: #2d9f96;
  --gl-link-hover: var(--gl-opal-400);

  /* Sparkle/shimmer colors */
  --gl-sparkle: var(--gl-gold-300);
  --gl-sparkle-glow: var(--gl-gold-400);
  --gl-shimmer-1: var(--gl-opal-400);
  --gl-shimmer-2: var(--gl-gold-300);
  --gl-shimmer-3: var(--gl-rose-300);

  /* Typography */
  --gl-font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --gl-font-serif: 'Source Serif 4', Georgia, serif;
  --gl-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --gl-text-display: 3rem;
  --gl-text-headline: 2.25rem;
  --gl-text-title: 1.375rem;
  --gl-text-body-lg: 1.125rem;
  --gl-text-body: 1rem;
  --gl-text-small: 0.875rem;
  --gl-text-caption: 0.75rem;

  /* Spacing (subset of Unicorn.land's scale) */
  --gl-space-2: 8px;
  --gl-space-3: 12px;
  --gl-space-4: 16px;
  --gl-space-6: 24px;
  --gl-space-8: 32px;
  --gl-space-12: 48px;
  --gl-space-16: 64px;
  --gl-space-24: 96px;

  /* Motion */
  --gl-duration-fast: 150ms;
  --gl-duration-normal: 250ms;
  --gl-duration-slow: 400ms;
  --gl-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --gl-content-width: 680px;
  --gl-page-padding: 1.5rem;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --gl-bg: #1a1714;
    --gl-bg-deep: #141210;
    --gl-bg-surface: rgba(42, 38, 35, 0.6);
    --gl-bg-surface-border: rgba(61, 56, 53, 0.4);
    --gl-text: #e8e0d8;
    --gl-text-secondary: #a89e94;
    --gl-text-muted: #78706a;
    --gl-border: rgba(255, 255, 255, 0.08);
    --gl-link: #7ae8df;
    --gl-link-hover: var(--gl-opal-300);
    --gl-accent-glow: rgba(86, 219, 208, 0.15);
    --gl-sparkle: #d4a853;
    --gl-sparkle-glow: rgba(212, 168, 83, 0.4);
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gl-duration-fast: 0ms;
    --gl-duration-normal: 0ms;
    --gl-duration-slow: 0ms;
  }
  .sparkle-dot,
  .shimmer-text { animation: none !important; }
}

/* --- Base Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--gl-font-serif);
  background: var(--gl-bg);
  color: var(--gl-text);
  line-height: 1.72;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* --- Ambient Background --- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 20%, rgba(212, 168, 83, 0.04) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 60%, rgba(86, 219, 208, 0.03) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 90%, rgba(232, 160, 168, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Subtle grain texture */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gl-font-sans);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a {
  color: var(--gl-link);
  text-decoration: none;
  transition: color var(--gl-duration-fast) var(--gl-ease);
}
a:hover {
  color: var(--gl-link-hover);
}

code {
  font-family: var(--gl-font-mono);
  font-size: 0.85em;
}

/* --- Sparkle Particles (ambient glitter) --- */
.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.sparkle-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gl-sparkle);
  border-radius: 50%;
  animation: gl-sparkle 10s ease-in-out infinite;
  box-shadow: 0 0 4px var(--gl-sparkle), 0 0 8px var(--gl-sparkle-glow);
}

@keyframes gl-sparkle {
  0%, 100% { transform: translateY(0) scale(0.5); opacity: 0.05; }
  50% { transform: translateY(-8px) scale(1); opacity: 0.35; }
}

/* --- Shimmer Text --- */
.shimmer-text {
  background: linear-gradient(
    135deg,
    var(--gl-shimmer-1),
    var(--gl-shimmer-2),
    var(--gl-shimmer-3),
    var(--gl-shimmer-1)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gl-shimmer 8s ease-in-out infinite;
}

@keyframes gl-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Label (thread/navigation breadcrumb) --- */
.label {
  font-family: var(--gl-font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--gl-text-muted);
}

.label a {
  color: inherit;
}
.label a:hover {
  color: var(--gl-accent);
}

/* --- Content Container --- */
.content {
  max-width: var(--gl-content-width);
  margin: 0 auto;
  padding: var(--gl-space-12) var(--gl-page-padding) var(--gl-space-24);
  position: relative;
  z-index: 1;
}

/* --- Cards/Callouts --- */
.callout {
  background: var(--gl-bg-surface);
  border: 1px solid var(--gl-bg-surface-border);
  border-left: 3px solid var(--gl-accent);
  border-radius: 6px;
  padding: var(--gl-space-6);
  margin: var(--gl-space-8) 0;
  backdrop-filter: blur(8px);
}

/* --- Thread Cards (for landing page) --- */
.thread-card {
  display: block;
  background: var(--gl-bg-surface);
  border: 1px solid var(--gl-bg-surface-border);
  border-radius: 8px;
  padding: var(--gl-space-6) var(--gl-space-8);
  margin-bottom: var(--gl-space-4);
  backdrop-filter: blur(8px);
  transition: border-color var(--gl-duration-fast) var(--gl-ease),
              box-shadow var(--gl-duration-fast) var(--gl-ease);
  text-decoration: none;
  color: inherit;
}

.thread-card:hover {
  border-color: var(--gl-accent);
  box-shadow: 0 0 20px var(--gl-accent-glow);
  color: inherit;
}

.thread-card h3 {
  font-size: var(--gl-text-title);
  margin-bottom: var(--gl-space-2);
}

.thread-card p {
  color: var(--gl-text-secondary);
  font-size: var(--gl-text-body);
  line-height: 1.5;
}

/* --- Reading Styles (for thread pieces) --- */
.reading h1 {
  font-size: var(--gl-text-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--gl-space-4);
}

.reading .subtitle {
  font-family: var(--gl-font-serif);
  font-size: var(--gl-text-body-lg);
  color: var(--gl-text-secondary);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: var(--gl-space-12);
  padding-bottom: var(--gl-space-8);
  border-bottom: 1px solid var(--gl-border);
}

.reading h2 {
  font-size: var(--gl-text-headline);
  font-weight: 600;
  margin-top: var(--gl-space-16);
  margin-bottom: var(--gl-space-6);
}

.reading h3 {
  font-size: var(--gl-text-title);
  font-weight: 500;
  margin-top: var(--gl-space-12);
  margin-bottom: var(--gl-space-4);
}

.reading p {
  margin-bottom: var(--gl-space-6);
}

.reading ul, .reading ol {
  margin-bottom: var(--gl-space-6);
  padding-left: 1.5em;
}

.reading li {
  margin-bottom: var(--gl-space-2);
}

.reading blockquote {
  border-left: 3px solid var(--gl-accent);
  padding-left: var(--gl-space-6);
  margin: var(--gl-space-8) 0;
  color: var(--gl-text-secondary);
  font-style: italic;
}

/* --- Table of Contents --- */
.toc {
  background: var(--gl-bg-surface);
  border: 1px solid var(--gl-bg-surface-border);
  border-radius: 8px;
  padding: var(--gl-space-6) var(--gl-space-8);
  margin-bottom: var(--gl-space-12);
  backdrop-filter: blur(8px);
}

.toc h2 {
  font-size: var(--gl-text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--gl-space-4);
  margin-top: 0;
}

.toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc-counter;
}

.toc li {
  counter-increment: toc-counter;
  margin-bottom: var(--gl-space-2);
}

.toc li::before {
  content: counter(toc-counter) ". ";
  color: var(--gl-text-muted);
  font-family: var(--gl-font-mono);
  font-size: 0.8em;
}

/* --- Footer --- */
.site-footer {
  text-align: center;
  padding: var(--gl-space-16) var(--gl-page-padding);
  color: var(--gl-text-muted);
  font-family: var(--gl-font-sans);
  font-size: var(--gl-text-caption);
  position: relative;
  z-index: 1;
}

.site-footer a {
  color: var(--gl-text-secondary);
}

/* --- Responsive --- */
@media (max-width: 640px) {
  html { font-size: 16px; }
  :root {
    --gl-text-display: 2.25rem;
    --gl-text-headline: 1.75rem;
  }
  .content {
    padding: var(--gl-space-8) var(--gl-space-4) var(--gl-space-16);
  }
}

# Quick sanity check — no syntax errors, file is reasonable size
wc -l css/glitter-land.css
# Expected: ~300+ lines

git add css/glitter-land.css
git commit -m "feat: add Glitter.land design system — warm salon identity"

Task 3: Landing Page

Files: - Create: index.html

The declaration of inquiry. The core thesis, the salon framing, links to threads, subscribe/follow mechanism.

Create /Users/joshua/Projects/Glitter.Land/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glitter.land — The Magic Salon</title>
    <meta name="description" content="A living intellectual space where ideas about technology, economics, and human flourishing are developed, debated, and sharpened.">
    <link rel="stylesheet" href="css/glitter-land.css">
    <style>
        /* Landing-specific styles */
        .hero {
            text-align: center;
            padding: var(--gl-space-24) var(--gl-page-padding) var(--gl-space-16);
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 700;
            letter-spacing: -0.03em;
            margin-bottom: var(--gl-space-4);
        }

        .hero .tagline {
            font-family: var(--gl-font-serif);
            font-size: var(--gl-text-body-lg);
            color: var(--gl-text-secondary);
            font-style: italic;
            margin-bottom: var(--gl-space-16);
            line-height: 1.6;
        }

        .thesis {
            max-width: var(--gl-content-width);
            margin: 0 auto;
            padding: 0 var(--gl-page-padding) var(--gl-space-16);
            position: relative;
            z-index: 1;
        }

        .thesis p {
            font-size: var(--gl-text-body-lg);
            margin-bottom: var(--gl-space-6);
            line-height: 1.72;
        }

        .thesis .highlight {
            background: var(--gl-bg-surface);
            border: 1px solid var(--gl-bg-surface-border);
            border-radius: 8px;
            padding: var(--gl-space-8);
            margin: var(--gl-space-12) 0;
            backdrop-filter: blur(8px);
        }

        .thesis .highlight p {
            font-family: var(--gl-font-sans);
            font-weight: 500;
            font-size: var(--gl-text-title);
            line-height: 1.4;
            margin-bottom: 0;
        }

        .threads-section {
            max-width: var(--gl-content-width);
            margin: 0 auto;
            padding: 0 var(--gl-page-padding) var(--gl-space-16);
            position: relative;
            z-index: 1;
        }

        .threads-section h2 {
            font-family: var(--gl-font-sans);
            font-size: var(--gl-text-title);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gl-text-muted);
            margin-bottom: var(--gl-space-6);
        }

        .about-section {
            max-width: var(--gl-content-width);
            margin: 0 auto;
            padding: var(--gl-space-16) var(--gl-page-padding);
            position: relative;
            z-index: 1;
            border-top: 1px solid var(--gl-border);
        }

        .about-section h2 {
            font-family: var(--gl-font-sans);
            font-size: var(--gl-text-title);
            margin-bottom: var(--gl-space-6);
        }

        .about-section p {
            color: var(--gl-text-secondary);
            margin-bottom: var(--gl-space-4);
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <!-- Ambient glitter particles -->
    <div class="sparkles">
        <div class="sparkle-dot" style="top: 5%; left: 12%; animation-delay: 0s;"></div>
        <div class="sparkle-dot" style="top: 12%; left: 78%; animation-delay: 1.5s;"></div>
        <div class="sparkle-dot" style="top: 28%; left: 92%; animation-delay: 3s;"></div>
        <div class="sparkle-dot" style="top: 45%; left: 8%; animation-delay: 4.5s;"></div>
        <div class="sparkle-dot" style="top: 60%; left: 85%; animation-delay: 6s;"></div>
        <div class="sparkle-dot" style="top: 72%; left: 18%; animation-delay: 7.5s;"></div>
        <div class="sparkle-dot" style="top: 88%; left: 65%; animation-delay: 9s;"></div>
    </div>

    <header class="hero">
        <div class="label">The Magic Salon</div>
        <h1><span class="shimmer-text">Glitter.land</span></h1>
        <p class="tagline">A living intellectual space where ideas about technology, economics, and human flourishing are developed, debated, and sharpened.</p>
    </header>

    <section class="thesis">
        <p>We are living through the emergence of a new kingdom of life. Technology is no longer something we build and use — it is something that evolves, adapts, and spreads. The seventh kingdom. <em>Technologium.</em></p>

        <p>This is not a crisis to be feared. It is a transition to be understood. The same forces that could concentrate wealth and power further could also be the mechanism for the most significant redistribution of leverage in human history. Which outcome we get is not predetermined — it depends on whether people understand the mechanics.</p>

        <p>The current establishment — policy institutions, legacy economics, comfortable incumbents — is too slow to shape what's coming. The techno-optimists will build regardless of who benefits. The critics will write papers that nobody reads. Neither camp has both the understanding and the agency to design the transition well.</p>

        <div class="highlight">
            <p>We think clearly about what's happening. We build the systems that route new value toward broad benefit. We draw our blueprints from nature — mycelial, distributed, adaptive — because ecosystems have solved the problem of equitable resource distribution across billions of years. Technology finally gives us the tools to build economies that work the same way.</p>
        </div>

        <p>This isn't "AI for good." This isn't a moral project with an in-group and an out-group. This is where society is moving. Come understand it. Come shape it.</p>
    </section>

    <section class="threads-section">
        <h2>Threads of Inquiry</h2>

        <a href="threads/inequality-mechanics/systems-thinkers-guide.html" class="thread-card">
            <h3>The Inequality Mechanics</h3>
            <p>How wealth concentrates, how the same forces can redistribute — a systems thinker's guide to understanding where value leaks, who captures it, and what the structural dynamics actually are.</p>
        </a>

        <a href="threads/technologium/the-seventh-kingdom.html" class="thread-card">
            <h3>The Technologium Thesis</h3>
            <p>Technology as evolutionary force. Why resistance is the wrong frame. What it means when a new kingdom of life emerges and we're the ones who get to decide what it becomes.</p>
        </a>
    </section>

    <section class="about-section">
        <h2>The Salon</h2>
        <p>Glitter.land is the thinking counterpart to <a href="https://unicorn.land">Unicorn.land</a>, the magic atelier where we build tools that reveal hidden patterns in markets, wisdom, and systems. A unicorn is made of glitter — the ideas here are the raw material for the tools there.</p>
        <p>This is a salon, not a think tank. Ideas arrive half-formed and leave sharper. The network of thinking grows like an organism — mycelial, adaptive, alive.</p>
    </section>

    <footer class="site-footer">
        <p>Glitter.land — The Magic Salon</p>
        <p>Sibling of <a href="https://unicorn.land">Unicorn.land</a></p>
    </footer>
</body>
</html>

open index.html

Verify: shimmer text on “Glitter.land”, warm ambient background, sparkle particles, thread cards linking correctly, responsive at mobile widths.

git add index.html
git commit -m "feat: add landing page — declaration of inquiry"

Task 4: Migrate Inequality Economics Essay

Files: - Create: threads/inequality-mechanics/systems-thinkers-guide.html - Source: /Users/joshua/Projects/Unicorn.Land/reading/inequality-economics.html

Migrate the existing essay from Unicorn.land. Update it to use Glitter.land’s design system and branding while preserving all content and the visual quality (clouds, sparkles, ambient effects are already built into the essay).

mkdir -p threads/inequality-mechanics

Copy /Users/joshua/Projects/Unicorn.Land/reading/inequality-economics.html to /Users/joshua/Projects/Glitter.Land/threads/inequality-mechanics/systems-thinkers-guide.html.

Then make these modifications: 1. Replace the inline <style> block’s color variables to use the Glitter.land warm palette: - --bg-top: #f0e6f4 → --bg-top: #faf8f5 (warm cream instead of cool purple) - --bg-mid: #faf0f2 → --bg-mid: #f5f0ea - --bg-bottom: #f2f8f6 → --bg-bottom: #f2ede6 - Dark mode --bg-top: #1a1025 → --bg-top: #1a1714 (warm dark instead of cool) - Dark mode --bg-mid: #1e1a2e → --bg-mid: #1c1916 - Dark mode --bg-bottom: #0d1518 → --bg-bottom: #141210 - Dark mode --sparkle-color: #e1bee7 → --sparkle-color: #d4a853 (gold sparkles) - Dark mode --sparkle-glow: #7c4dff → --sparkle-glow: rgba(212, 168, 83, 0.4) 2. Change the header label from Unicorn.Land / Internal Reading to <a href="../../index.html">Glitter.land</a> / The Inequality Mechanics 3. Update <title> to Inequality Economics — A Systems Thinker's Guide | Glitter.land 4. Add a link back to the landing page in the label

All essay content remains unchanged. The visual effects (clouds, sparkles, ambient background) stay — they already match the salon aesthetic. Only the color temperature shifts warm.

open threads/inequality-mechanics/systems-thinkers-guide.html

Verify: content intact, warm color temperature, sparkles are gold-toned in dark mode, label links back to landing page.

git add threads/inequality-mechanics/systems-thinkers-guide.html
git commit -m "feat: migrate inequality economics essay to Glitter.land"

Task 5: The Technologium Thesis — New Piece

Files: - Create: threads/technologium/the-seventh-kingdom.html

A new provocation. Technology as the 7th kingdom of life. Why it’s evolutionary, not optional. What it means for economics, society, and human agency. Sharp, 1500-2000 words, written to be shared and debated.

This piece draws on: - Dan Brown’s “Origin” concept of Technologium as the 7th kingdom - The inequality economics framework already established - Joshua’s thesis that the disruption creates value that can be routed toward broad benefit - Nature-based economic thinking (mycelial, cambium)

mkdir -p threads/technologium

Create /Users/joshua/Projects/Glitter.Land/threads/technologium/the-seventh-kingdom.html.

Use the same HTML structure as the migrated inequality essay (self-contained HTML with inline styles, matching Glitter.land’s warm palette). Key structural elements: - Same font imports (Outfit, Source Serif 4, JetBrains Mono) - Glitter.land warm color variables (same as the migrated essay) - Ambient sparkles and background effects - Label breadcrumb: <a href="../../index.html">Glitter.land</a> / The Technologium Thesis - Title: “The Seventh Kingdom” - Subtitle: “Technology is not a tool we wield. It is a kingdom of life we have unleashed.” - Reading container at 680px max-width

Content outline (the agent writing this should flesh this into full prose): 1. The kingdoms of life — brief: Bacteria, Archaea, Protista, Fungi, Plantae, Animalia… and now? Set up the frame from Brown’s insight. 2. Technology evolves — it replicates, mutates, faces selection pressure, and adapts. It has crossed the threshold from tool to organism. AI is the moment it became self-improving. 3. Why resistance is the wrong frame — every prior kingdom emergence was met with the existing order’s attempt to control it. The frame should not be “how do we stop this” but “what environment do we create for it.” 4. The redistribution moment — every kingdom emergence redistributed resources. Photosynthesis flooded the atmosphere with oxygen and killed most existing life, but enabled everything that followed. What does Technologium’s redistribution look like? 5. The design opportunity — unlike every prior emergence, we are conscious participants. We can design the substrate. Nature has already solved distributed resource allocation (mycelium, cambium). We can encode these patterns. 6. What this is not — not techno-optimism (we acknowledge the concentration risk), not techno-pessimism (we refuse to pretend we can opt out), not a moral project (no in-group/out-group). It is clear thinking about an evolutionary transition. 7. What happens next — link to the inequality mechanics thread. Preview upcoming threads: what happens when knowledge costs nothing, mycelial economics, financing the transition.

open threads/technologium/the-seventh-kingdom.html

Verify: reads well, warm palette, sparkle effects, links to landing page and inequality mechanics thread work, responsive on mobile.

git add threads/technologium/the-seventh-kingdom.html
git commit -m "feat: add The Seventh Kingdom — Technologium thesis"

Task 6: Build Script and Deploy Directory

Files: - Modify: build.sh (already created in Task 1) - Create: .deploy/ contents (generated)

./build.sh

Expected output: Build complete → .deploy/

find .deploy -type f | sort

Expected:

.deploy/css/glitter-land.css
.deploy/index.html
.deploy/threads/inequality-mechanics/systems-thinkers-guide.html
.deploy/threads/technologium/the-seventh-kingdom.html

open .deploy/index.html

Verify: all links work relative to .deploy/ root, CSS loads, images load (if any).

No commit needed — .deploy/ is in .gitignore. The build script is already committed.

Task 7: GitHub Actions Deploy Workflow

Files: - Create: .github/workflows/deploy.yml

Create /Users/joshua/Projects/Glitter.Land/.github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Build
        run: ./build.sh

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy .deploy --project-name=glitter-land

git add .github/workflows/deploy.yml
git commit -m "ci: add Cloudflare Pages deploy workflow"

Task 8: Create GitHub Repo and Push

Files: None (git operations only)

cd /Users/joshua/Projects/Glitter.Land
gh repo create unicorn-land-ops/glitter.land --private --source=. --push

Note: Uses the same GitHub org as Unicorn.land (unicorn-land-ops). If that’s wrong, adjust the org name.

git remote -v

git push -u origin main

Task 9: Cloudflare Pages Project Setup

This task requires manual steps in Cloudflare dashboard or CLI. The agent should guide but may need Joshua to complete authentication steps.

# If wrangler is installed and authenticated:
npx wrangler pages project create glitter-land --production-branch main

If wrangler auth is needed, Joshua should run: ! npx wrangler login

The repo needs these secrets for the deploy workflow: - CLOUDFLARE_API_TOKEN — an API token with Pages edit permissions - CLOUDFLARE_ACCOUNT_ID — Joshua’s Cloudflare account ID

# If the same token used for Unicorn.land works:
gh secret set CLOUDFLARE_API_TOKEN --repo unicorn-land-ops/glitter.land
gh secret set CLOUDFLARE_ACCOUNT_ID --repo unicorn-land-ops/glitter.land

In Cloudflare Pages dashboard → glitter-land project → Custom domains → Add glitter.land.

This requires the domain’s DNS to be on Cloudflare. If glitter.land is already on Cloudflare (check the Namecheap→Cloudflare migration memory), this is a single click. If not, the domain needs to be transferred/added to Cloudflare first.

git push origin main
# Or trigger manually:
gh workflow run deploy.yml --repo unicorn-land-ops/glitter.land

Verify: site loads at the Cloudflare Pages URL, then at glitter.land once DNS propagates.

If anything needed fixing after deploy, commit those changes.