Design-Templates-ALL-ORGS

[blackboxprogramming]

This is a thread of all templates I APPROVE AND WANT ONLY THE BELOW DESIGNS ACROSS EVERY PAGE DOMAIN ETC. Lol we gotta get on the same page people we look like the fair right now hahah so I will be pasting below in this issue correct templates I like

[blackboxprogramming]

Mobile Directory with all orgs and websites

<title>BlackRoad — Directory</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

nav {
  font-size: 0.65rem;
  display: flex;
  gap: 20px;
}

nav a {
  color: #888888;
  text-decoration: none;
}

nav a:hover { color: #ffffff; }

.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label {
  font-size: 0.6rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
}

.hero p {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #666666;
  line-height: 1.9;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.section {
  background: #000000;
  padding: 32px 24px;
  border-bottom: 1px solid #ffffff;
}

.section-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333333;
}

.enterprise-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  padding: 14px 16px;
  border: 1px solid #ffffff;
  background: #000000;
}

.enterprise-link .name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.enterprise-link .url {
  font-size: 0.58rem;
  color: #555555;
  word-break: break-all;
}

.org-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.org-list a {
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 0.7rem;
  color: #aaaaaa;
  text-decoration: none;
}

.org-list a:hover { color: #ffffff; }

.org-list a .arrow {
  color: #444444;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-left: 8px;
}

.domain-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.domain-item {
  background: #000000;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 0.7rem;
  color: #888888;
}

.domain-item:hover { color: #ffffff; }

.domain-item::before {
  content: '—';
  color: #333333;
  margin-right: 10px;
  font-size: 0.6rem;
  flex-shrink: 0;
}

footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 36px 40px; border-right: 1px solid #ffffff; }
  .section:last-child { border-right: none; }
  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad enterprise orgs domains docs

Directory v1.0

Infrastructure
Index

GitHub enterprise, organizations, and registered domains.

<div class="section">
  <div class="section-label">github enterprise</div>
  <a class="enterprise-link" href="https://github.com/enterprises/blackroad-os" target="_blank">
    <span class="name">blackroad-os</span>
    <span class="url">github.com/enterprises/blackroad-os</span>
  </a>
</div>

<div class="section">
  <div class="section-label">organizations · 15</div>
  <div class="org-list">
    <a href="https://github.com/Blackbox-Enterprises" target="_blank">Blackbox-Enterprises<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-AI" target="_blank">BlackRoad-AI<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Archive" target="_blank">BlackRoad-Archive<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Cloud" target="_blank">BlackRoad-Cloud<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Education" target="_blank">BlackRoad-Education<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Foundation" target="_blank">BlackRoad-Foundation<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Gov" target="_blank">BlackRoad-Gov<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Hardware" target="_blank">BlackRoad-Hardware<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Interactive" target="_blank">BlackRoad-Interactive<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Labs" target="_blank">BlackRoad-Labs<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Media" target="_blank">BlackRoad-Media<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-OS" target="_blank">BlackRoad-OS<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Security" target="_blank">BlackRoad-Security<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Studio" target="_blank">BlackRoad-Studio<span class="arrow">↗</span></a>
    <a href="https://github.com/BlackRoad-Ventures" target="_blank">BlackRoad-Ventures<span class="arrow">↗</span></a>
  </div>
</div>

<div class="section">
  <div class="section-label">domains · 19</div>
  <div class="domain-list">
    <div class="domain-item">blackboxprogramming.io</div>
    <div class="domain-item">blackroad.company</div>
    <div class="domain-item">blackroad.io</div>
    <div class="domain-item">blackroad.me</div>
    <div class="domain-item">blackroad.network</div>
    <div class="domain-item">blackroad.systems</div>
    <div class="domain-item">blackroadai.com</div>
    <div class="domain-item">blackroadinc.us</div>
    <div class="domain-item">blackroadqi.com</div>
    <div class="domain-item">blackroadquantum.com</div>
    <div class="domain-item">blackroadquantum.info</div>
    <div class="domain-item">blackroadquantum.net</div>
    <div class="domain-item">blackroadquantum.shop</div>
    <div class="domain-item">blackroadquantum.store</div>
    <div class="domain-item">lucidia.earth</div>
    <div class="domain-item">lucidia.studio</div>
    <div class="domain-item">lucidiaqi.com</div>
    <div class="domain-item">roadchain.io</div>
    <div class="domain-item">roadcoin.io</div>
  </div>
</div>

BlackRoad OS, Inc. — Delaware C-Corp 1 enterprise · 15 orgs · 19 domains

[blackboxprogramming]

BlackRoad Animation dictionary

<title>BlackRoad — Animation Dictionary</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

nav {
  font-size: 0.65rem;
  display: flex;
  gap: 20px;
}

nav a {
  color: #888888;
  text-decoration: none;
}

nav a:hover { color: #ffffff; }

.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label {
  font-size: 0.6rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
}

.hero p {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #666666;
  line-height: 1.9;
}

/* ── GRID ── */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card:nth-child(2n) { border-right: none; }

@media (min-width: 900px) {
  .card:nth-child(2n) { border-right: 1px solid #ffffff; }
  .card:nth-child(3n) { border-right: none; }
}

.card-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333333;
}

.card-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}

.card-desc {
  font-size: 0.62rem;
  color: #666666;
  line-height: 1.8;
}

/* ── STAGE ── */
.stage {
  background: #000000;
  border: 1px solid #333333;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.dot {
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
}

.square {
  width: 14px;
  height: 14px;
  background: #ffffff;
}

.bar {
  width: 2px;
  height: 32px;
  background: #ffffff;
}

.line {
  width: 40px;
  height: 2px;
  background: #ffffff;
}

/* ── KEYFRAMES ── */

/* fade */
@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* slide x */
@keyframes slideX {
  0% { transform: translateX(-40px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(40px); opacity: 0; }
}

/* slide y */
@keyframes slideY {
  0% { transform: translateY(-30px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.8); }
}

/* spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0; }
  99% { opacity: 0; }
}

/* bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-28px); }
}

/* grow */
@keyframes grow {
  0%, 100% { transform: scaleX(0.1); }
  50% { transform: scaleX(1); }
}

/* shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* orbit */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(28px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}

/* type cursor */
@keyframes cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* wave */
@keyframes wave {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

/* flip */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* ── ANIMATION CLASSES ── */
.anim-fade { animation: fade 2s ease-in-out infinite; }
.anim-slideX { animation: slideX 2s ease-in-out infinite; }
.anim-slideY { animation: slideY 2s ease-in-out infinite; }
.anim-pulse { animation: pulse 1.5s ease-in-out infinite; }
.anim-spin { animation: spin 2s linear infinite; }
.anim-blink { animation: blink 1s step-end infinite; }
.anim-bounce { animation: bounce 1s ease-in-out infinite; }
.anim-grow { animation: grow 2s ease-in-out infinite; transform-origin: left center; }
.anim-shake { animation: shake 1s ease-in-out infinite; }
.anim-orbit { animation: orbit 2s linear infinite; }
.anim-cursor { animation: cursor 0.8s step-end infinite; }
.anim-wave1 { animation: wave 1s ease-in-out infinite; animation-delay: 0s; }
.anim-wave2 { animation: wave 1s ease-in-out infinite; animation-delay: 0.15s; }
.anim-wave3 { animation: wave 1s ease-in-out infinite; animation-delay: 0.3s; }
.anim-wave4 { animation: wave 1s ease-in-out infinite; animation-delay: 0.45s; }
.anim-wave5 { animation: wave 1s ease-in-out infinite; animation-delay: 0.6s; }
.anim-flip { animation: flip 2s ease-in-out infinite; }

/* wave group */
.wave-group {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}

/* orbit center */
.orbit-stage {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-center {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
}

/* type row */
.type-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.type-text {
  font-size: 0.75rem;
  color: #ffffff;
}

footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }
  .card { padding: 36px 40px; }
  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad motion timing docs

Animation Dictionary v1.0

Motion
Index

Core animation primitives for BlackRoad interfaces.

<!-- FADE -->
<div class="card">
  <div class="card-label">01</div>
  <div class="stage"><div class="dot anim-fade"></div></div>
  <div>
    <div class="card-name">fade</div>
    <div class="card-desc">opacity 1 → 0 → 1<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- SLIDE X -->
<div class="card">
  <div class="card-label">02</div>
  <div class="stage"><div class="dot anim-slideX"></div></div>
  <div>
    <div class="card-name">slide-x</div>
    <div class="card-desc">translateX -40 → 40<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- SLIDE Y -->
<div class="card">
  <div class="card-label">03</div>
  <div class="stage"><div class="dot anim-slideY"></div></div>
  <div>
    <div class="card-name">slide-y</div>
    <div class="card-desc">translateY -30 → 30<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- PULSE -->
<div class="card">
  <div class="card-label">04</div>
  <div class="stage"><div class="dot anim-pulse"></div></div>
  <div>
    <div class="card-name">pulse</div>
    <div class="card-desc">scale 1 → 1.8 → 1<br>ease-in-out · 1.5s</div>
  </div>
</div>

<!-- SPIN -->
<div class="card">
  <div class="card-label">05</div>
  <div class="stage"><div class="square anim-spin"></div></div>
  <div>
    <div class="card-name">spin</div>
    <div class="card-desc">rotate 0 → 360°<br>linear · 2s</div>
  </div>
</div>

<!-- BLINK -->
<div class="card">
  <div class="card-label">06</div>
  <div class="stage"><div class="dot anim-blink"></div></div>
  <div>
    <div class="card-name">blink</div>
    <div class="card-desc">opacity hard cut<br>step-end · 1s</div>
  </div>
</div>

<!-- BOUNCE -->
<div class="card">
  <div class="card-label">07</div>
  <div class="stage"><div class="dot anim-bounce"></div></div>
  <div>
    <div class="card-name">bounce</div>
    <div class="card-desc">translateY 0 → -28 → 0<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- GROW -->
<div class="card">
  <div class="card-label">08</div>
  <div class="stage"><div class="line anim-grow"></div></div>
  <div>
    <div class="card-name">grow</div>
    <div class="card-desc">scaleX 0.1 → 1 → 0.1<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- SHAKE -->
<div class="card">
  <div class="card-label">09</div>
  <div class="stage"><div class="dot anim-shake"></div></div>
  <div>
    <div class="card-name">shake</div>
    <div class="card-desc">translateX ±8px stagger<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- ORBIT -->
<div class="card">
  <div class="card-label">10</div>
  <div class="stage">
    <div class="orbit-stage">
      <div class="orbit-center"></div>
      <div class="dot anim-orbit" style="width:8px;height:8px;position:absolute;"></div>
    </div>
  </div>
  <div>
    <div class="card-name">orbit</div>
    <div class="card-desc">rotate + translateX 28px<br>linear · 2s</div>
  </div>
</div>

<!-- CURSOR -->
<div class="card">
  <div class="card-label">11</div>
  <div class="stage">
    <div class="type-row">
      <span class="type-text">blackroad</span>
      <div class="bar anim-cursor" style="height:16px;"></div>
    </div>
  </div>
  <div>
    <div class="card-name">cursor</div>
    <div class="card-desc">opacity hard cut<br>step-end · 0.8s</div>
  </div>
</div>

<!-- WAVE -->
<div class="card">
  <div class="card-label">12</div>
  <div class="stage">
    <div class="wave-group">
      <div class="bar anim-wave1"></div>
      <div class="bar anim-wave2"></div>
      <div class="bar anim-wave3"></div>
      <div class="bar anim-wave4"></div>
      <div class="bar anim-wave5"></div>
    </div>
  </div>
  <div>
    <div class="card-name">wave</div>
    <div class="card-desc">scaleY staggered bars<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- FLIP -->
<div class="card">
  <div class="card-label">13</div>
  <div class="stage"><div class="square anim-flip"></div></div>
  <div>
    <div class="card-name">flip</div>
    <div class="card-desc">rotateY 0 → 360°<br>ease-in-out · 2s</div>
  </div>
</div>

BlackRoad OS, Inc. 13 primitives · animation-dictionary-v1

[blackboxprogramming]

<title>BlackRoad — Animation Dictionary</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

/* brand colors */
:root {
  --br-orange:  #FF8400;
  --br-red:     #FF4400;
  --br-pink:    #FF0066;
  --br-magenta: #CC00AA;
  --br-purple:  #8800FF;
  --br-blue:    #0066FF;
  --br-navy:    #2233CC;
  --br-grad: linear-gradient(90deg, #FF8400, #FF0066, #8800FF, #0066FF);
}

header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

nav { font-size: 0.65rem; display: flex; gap: 20px; }
nav a { color: #888888; text-decoration: none; }
nav a:hover { color: #ffffff; }

/* gradient rule under logo */
.grad-rule {
  height: 3px;
  background: var(--br-grad);
}

.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label { font-size: 0.6rem; color: #555555; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; }
.hero h1 { font-size: 2rem; font-weight: 700; color: #ffffff; line-height: 1.05; }
.hero p { margin-top: 12px; font-size: 0.7rem; color: #666666; line-height: 1.9; }

/* rule */
.brand-rule {
  height: 2px;
  background: var(--br-grad);
  margin-top: 20px;
  max-width: 200px;
}

/* legend */
.legend {
  background: #000000;
  padding: 24px 24px;
  border-bottom: 1px solid #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.legend-label { font-size: 0.58rem; color: #555555; letter-spacing: 0.15em; text-transform: uppercase; margin-right: 8px; }

.swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.58rem;
  color: #888888;
}

.swatch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rule-note {
  font-size: 0.58rem;
  color: #555555;
  border-left: 1px solid #333333;
  padding-left: 16px;
  margin-left: auto;
}

/* grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card:nth-child(2n) { border-right: none; }
@media (min-width: 900px) {
  .card:nth-child(2n) { border-right: 1px solid #ffffff; }
  .card:nth-child(3n) { border-right: none; }
}

.card-label { font-size: 0.58rem; color: #555555; letter-spacing: 0.2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.card-label::after { content: ''; flex: 1; height: 1px; background: #222222; }

.card-name { font-size: 0.8rem; font-weight: 700; color: #ffffff; }
.card-desc { font-size: 0.62rem; color: #666666; line-height: 1.8; margin-top: 4px; }

/* stage */
.stage {
  background: #000000;
  border: 1px solid #222222;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* shapes */
.dot   { width: 14px; height: 14px; border-radius: 50%; }
.sq    { width: 16px; height: 16px; }
.bar   { width: 3px; height: 36px; }
.line  { width: 48px; height: 3px; }
.ring  { width: 20px; height: 20px; border-radius: 50%; border: 3px solid; background: transparent; }
.tri   {
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 16px solid;
  background: transparent !important;
}

/* ── KEYFRAMES ── */
@keyframes fade      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes slideX    { 0%{transform:translateX(-44px);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translateX(44px);opacity:0} }
@keyframes slideY    { 0%{transform:translateY(-32px);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translateY(32px);opacity:0} }
@keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(2)} }
@keyframes spin      { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes blink     { 0%,49%,100%{opacity:1} 50%,99%{opacity:0} }
@keyframes bounce    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
@keyframes grow      { 0%,100%{transform:scaleX(0.08)} 50%{transform:scaleX(1)} }
@keyframes shake     { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes orbit     { from{transform:rotate(0deg) translateX(30px) rotate(0deg)} to{transform:rotate(360deg) translateX(30px) rotate(-360deg)} }
@keyframes cursor    { 0%,49%,100%{opacity:1} 50%,99%{opacity:0} }
@keyframes wave      { 0%,100%{transform:scaleY(0.15)} 50%{transform:scaleY(1)} }
@keyframes flip      { 0%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} }
@keyframes colorCycle {
  0%   { background: #FF8400; }
  25%  { background: #FF0066; }
  50%  { background: #8800FF; }
  75%  { background: #0066FF; }
  100% { background: #FF8400; }
}
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderPulse {
  0%,100% { border-color: #FF8400; box-shadow: 0 0 8px #FF840055; }
  33%     { border-color: #FF0066; box-shadow: 0 0 8px #FF006655; }
  66%     { border-color: #0066FF; box-shadow: 0 0 8px #0066FF55; }
}

.anim-fade     { animation: fade 2s ease-in-out infinite; }
.anim-slideX   { animation: slideX 2s ease-in-out infinite; }
.anim-slideY   { animation: slideY 2s ease-in-out infinite; }
.anim-pulse    { animation: pulse 1.5s ease-in-out infinite; }
.anim-spin     { animation: spin 2s linear infinite; }
.anim-blink    { animation: blink 1s step-end infinite; }
.anim-bounce   { animation: bounce 1s ease-in-out infinite; }
.anim-grow     { animation: grow 2s ease-in-out infinite; transform-origin: left center; }
.anim-shake    { animation: shake 1s ease-in-out infinite; }
.anim-orbit    { animation: orbit 2s linear infinite; position: absolute; }
.anim-cursor   { animation: cursor 0.8s step-end infinite; }
.anim-wave1    { animation: wave 1s ease-in-out infinite; animation-delay: 0s; }
.anim-wave2    { animation: wave 1s ease-in-out infinite; animation-delay: 0.15s; }
.anim-wave3    { animation: wave 1s ease-in-out infinite; animation-delay: 0.3s; }
.anim-wave4    { animation: wave 1s ease-in-out infinite; animation-delay: 0.45s; }
.anim-wave5    { animation: wave 1s ease-in-out infinite; animation-delay: 0.6s; }
.anim-flip     { animation: flip 2s ease-in-out infinite; }
.anim-colorCycle { animation: colorCycle 3s linear infinite; }
.anim-gradShift {
  background: var(--br-grad);
  background-size: 300% 300%;
  animation: gradShift 3s ease infinite;
}
.anim-borderPulse { animation: borderPulse 2s ease-in-out infinite; }

.wave-group { display: flex; align-items: center; gap: 5px; height: 40px; }

.orbit-wrap { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.orbit-center { width: 6px; height: 6px; background: #ffffff; border-radius: 50%; position: absolute; }

.type-row { display: flex; align-items: center; gap: 2px; }
.type-text { font-size: 0.8rem; color: #ffffff; }
.cursor-bar { width: 2px; height: 18px; background: #ffffff; }

/* text rule card */
.text-demo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.text-demo .t-white { font-size: 0.85rem; font-weight: 700; color: #ffffff; }
.text-demo .t-black-bg {
  font-size: 0.85rem;
  font-weight: 700;
  color: #000000;
  background: #ffffff;
  padding: 2px 8px;
}

.grad-text {
  font-size: 1rem;
  font-weight: 700;
  background: var(--br-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero  { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }
  .card  { padding: 36px 40px; }
  .legend { padding: 24px 40px; }
  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad motion colors docs

Animation Dictionary v1.0

Motion
Index

Shapes move in color. Text stays white or black.

palette

#FF8400

#FF4400

#FF0066

#CC00AA

#8800FF

#0066FF

#2233CC

text → #ffffff or #000000 only

<!-- 01 FADE -->
<div class="card">
  <div class="card-label">01</div>
  <div class="stage">
    <div class="dot anim-fade anim-colorCycle"></div>
  </div>
  <div>
    <div class="card-name">fade</div>
    <div class="card-desc">opacity 1 → 0 → 1<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- 02 SLIDE X -->
<div class="card">
  <div class="card-label">02</div>
  <div class="stage">
    <div class="dot anim-slideX" style="background:#FF0066"></div>
  </div>
  <div>
    <div class="card-name">slide-x</div>
    <div class="card-desc">translateX -44 → 44<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- 03 SLIDE Y -->
<div class="card">
  <div class="card-label">03</div>
  <div class="stage">
    <div class="dot anim-slideY" style="background:#8800FF"></div>
  </div>
  <div>
    <div class="card-name">slide-y</div>
    <div class="card-desc">translateY -32 → 32<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- 04 PULSE -->
<div class="card">
  <div class="card-label">04</div>
  <div class="stage">
    <div class="dot anim-pulse" style="background:#FF8400"></div>
  </div>
  <div>
    <div class="card-name">pulse</div>
    <div class="card-desc">scale 1 → 2 → 1<br>ease-in-out · 1.5s</div>
  </div>
</div>

<!-- 05 SPIN -->
<div class="card">
  <div class="card-label">05</div>
  <div class="stage">
    <div class="sq anim-spin" style="background:#0066FF"></div>
  </div>
  <div>
    <div class="card-name">spin</div>
    <div class="card-desc">rotate 0 → 360°<br>linear · 2s</div>
  </div>
</div>

<!-- 06 BLINK -->
<div class="card">
  <div class="card-label">06</div>
  <div class="stage">
    <div class="dot anim-blink" style="background:#CC00AA"></div>
  </div>
  <div>
    <div class="card-name">blink</div>
    <div class="card-desc">opacity hard cut<br>step-end · 1s</div>
  </div>
</div>

<!-- 07 BOUNCE -->
<div class="card">
  <div class="card-label">07</div>
  <div class="stage">
    <div class="dot anim-bounce" style="background:#FF4400"></div>
  </div>
  <div>
    <div class="card-name">bounce</div>
    <div class="card-desc">translateY 0 → -30 → 0<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- 08 GROW -->
<div class="card">
  <div class="card-label">08</div>
  <div class="stage">
    <div class="line anim-grow anim-gradShift" style="height:4px;width:80px;border-radius:2px;"></div>
  </div>
  <div>
    <div class="card-name">grow</div>
    <div class="card-desc">scaleX 0.08 → 1 → 0.08<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- 09 SHAKE -->
<div class="card">
  <div class="card-label">09</div>
  <div class="stage">
    <div class="dot anim-shake" style="background:#FF0066"></div>
  </div>
  <div>
    <div class="card-name">shake</div>
    <div class="card-desc">translateX ±9px stagger<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- 10 ORBIT -->
<div class="card">
  <div class="card-label">10</div>
  <div class="stage">
    <div class="orbit-wrap">
      <div class="orbit-center"></div>
      <div class="dot anim-orbit" style="width:10px;height:10px;background:#8800FF;"></div>
    </div>
  </div>
  <div>
    <div class="card-name">orbit</div>
    <div class="card-desc">rotate + translateX 30px<br>linear · 2s</div>
  </div>
</div>

<!-- 11 CURSOR -->
<div class="card">
  <div class="card-label">11</div>
  <div class="stage">
    <div class="type-row">
      <span class="type-text">blackroad</span>
      <div class="cursor-bar anim-cursor"></div>
    </div>
  </div>
  <div>
    <div class="card-name">cursor</div>
    <div class="card-desc">text white · cursor white<br>step-end · 0.8s</div>
  </div>
</div>

<!-- 12 WAVE -->
<div class="card">
  <div class="card-label">12</div>
  <div class="stage">
    <div class="wave-group">
      <div class="bar anim-wave1" style="background:#FF8400"></div>
      <div class="bar anim-wave2" style="background:#FF0066"></div>
      <div class="bar anim-wave3" style="background:#CC00AA"></div>
      <div class="bar anim-wave4" style="background:#8800FF"></div>
      <div class="bar anim-wave5" style="background:#0066FF"></div>
    </div>
  </div>
  <div>
    <div class="card-name">wave</div>
    <div class="card-desc">scaleY staggered bars<br>ease-in-out · 1s</div>
  </div>
</div>

<!-- 13 FLIP -->
<div class="card">
  <div class="card-label">13</div>
  <div class="stage">
    <div class="sq anim-flip" style="background:#FF8400"></div>
  </div>
  <div>
    <div class="card-name">flip</div>
    <div class="card-desc">rotateY 0 → 360°<br>ease-in-out · 2s</div>
  </div>
</div>

<!-- 14 COLOR CYCLE -->
<div class="card">
  <div class="card-label">14</div>
  <div class="stage">
    <div class="dot anim-colorCycle" style="width:20px;height:20px;"></div>
  </div>
  <div>
    <div class="card-name">color-cycle</div>
    <div class="card-desc">orange → pink → purple → blue<br>linear · 3s</div>
  </div>
</div>

<!-- 15 GRAD SHIFT -->
<div class="card">
  <div class="card-label">15</div>
  <div class="stage">
    <div class="anim-gradShift" style="width:80px;height:20px;border-radius:10px;"></div>
  </div>
  <div>
    <div class="card-name">grad-shift</div>
    <div class="card-desc">gradient background sweep<br>ease · 3s</div>
  </div>
</div>

<!-- 16 TEXT RULE -->
<div class="card">
  <div class="card-label">16</div>
  <div class="stage">
    <div class="text-demo">
      <span class="t-white">BlackRoad</span>
      <span class="t-black-bg">BlackRoad</span>
      <span class="grad-text">BlackRoad</span>
    </div>
  </div>
  <div>
    <div class="card-name">text rule</div>
    <div class="card-desc">white on black · black on white<br>grad on black (accent only)</div>
  </div>
</div>

<!-- 17 BORDER PULSE -->
<div class="card">
  <div class="card-label">17</div>
  <div class="stage">
    <div class="ring anim-borderPulse" style="width:36px;height:36px;border-width:3px;"></div>
  </div>
  <div>
    <div class="card-name">border-pulse</div>
    <div class="card-desc">border-color cycles palette<br>ease-in-out · 2s</div>
  </div>
</div>

BlackRoad OS, Inc. 17 primitives · shapes in color · text in white/black

[blackboxprogramming]

[blackboxprogramming]

<title>BlackRoad — Library</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

nav {
  font-size: 0.65rem;
  display: flex;
  gap: 20px;
}

nav a {
  color: #888888;
  text-decoration: none;
}

nav a:hover { color: #ffffff; }

.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label {
  font-size: 0.6rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
}

.hero p {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #666666;
  line-height: 1.9;
}

.hero-meta {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-badge {
  font-size: 0.58rem;
  color: #444444;
  border: 1px solid #333333;
  padding: 4px 10px;
  letter-spacing: 0.1em;
}

.hero-badge span {
  color: #ffffff;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

.section {
  background: #000000;
  padding: 32px 24px;
  border-bottom: 1px solid #ffffff;
}

.section-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333333;
}

/* Package cards */
.package-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.package-item {
  background: #000000;
  border: 1px solid #1a1a1a;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
}

.package-item:hover {
  border-color: #ffffff;
}

.package-item .pkg-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}

.package-item .pkg-desc {
  font-size: 0.6rem;
  color: #555555;
  line-height: 1.7;
}

.package-item .pkg-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.package-item .pkg-tag {
  font-size: 0.55rem;
  color: #444444;
  letter-spacing: 0.1em;
}

.package-item .pkg-tag span {
  color: #888888;
}

/* Install block */
.install-block {
  background: #0a0a0a;
  border: 1px solid #222222;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.install-block .install-label {
  font-size: 0.55rem;
  color: #444444;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.install-block .install-cmd {
  font-size: 0.72rem;
  color: #aaaaaa;
  word-break: break-all;
  line-height: 1.8;
}

.install-block .install-cmd .prompt {
  color: #333333;
  user-select: none;
}

.install-block .install-cmd .pkg {
  color: #ffffff;
}

/* Platform list */
.platform-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.platform-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  font-size: 0.68rem;
  color: #888888;
  border-left: 2px solid #1a1a1a;
}

.platform-item.supported {
  border-left-color: #ffffff;
  color: #ffffff;
}

.platform-item .plat-status {
  font-size: 0.55rem;
  color: #444444;
  letter-spacing: 0.1em;
}

.platform-item.supported .plat-status {
  color: #666666;
}

/* Changelog list */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.changelog-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #111111;
}

.changelog-item:last-child {
  border-bottom: none;
}

.changelog-item .ver {
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  min-width: 52px;
}

.changelog-item .ver.latest::after {
  content: ' ·';
  color: #333333;
}

.changelog-item .note {
  font-size: 0.62rem;
  color: #555555;
  line-height: 1.8;
}

.changelog-item .date {
  font-size: 0.55rem;
  color: #333333;
  flex-shrink: 0;
  margin-left: auto;
}

footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 36px 40px; border-right: 1px solid #ffffff; border-bottom: none; }
  .section:last-child { border-right: none; }
  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad packages install platforms docs

Library v0.4.2

Mobile
SDK

Core packages, platform support, and installation for BlackRoad mobile.

version 0.4.2

platforms iOS · Android · RN

license MIT

packages 8

<div class="section">
  <div class="section-label">packages · 8</div>
  <div class="package-list">

    <div class="package-item">
      <span class="pkg-name">@blackroad/core</span>
      <span class="pkg-desc">Foundation layer. State machine, event bus, and trinary logic primitives.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.2</span></span>
        <span class="pkg-tag">size <span>12kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/agents</span>
      <span class="pkg-desc">Agent lifecycle management, messaging, and orchestration hooks.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.2</span></span>
        <span class="pkg-tag">size <span>18kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/ui</span>
      <span class="pkg-desc">Terminal-style components, ASCII rendering, and gradient palette tokens.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.1</span></span>
        <span class="pkg-tag">size <span>34kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/memory</span>
      <span class="pkg-desc">PS-SHA∞ persistence layer, append-only journal, truth state commits.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.3.9</span></span>
        <span class="pkg-tag">size <span>9kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/network</span>
      <span class="pkg-desc">Tailscale mesh bindings, NATS client, and edge routing utilities.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.0</span></span>
        <span class="pkg-tag">size <span>22kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/crypto</span>
      <span class="pkg-desc">Key management, identity signing, and session token utilities.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.2</span></span>
        <span class="pkg-tag">size <span>7kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/inference</span>
      <span class="pkg-desc">On-device model bindings for Hailo-8 and CoreML inference backends.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.2.1</span></span>
        <span class="pkg-tag">size <span>41kb</span></span>
      </div>
    </div>

    <div class="package-item">
      <span class="pkg-name">@blackroad/telemetry</span>
      <span class="pkg-desc">Metrics, structured logging, and distributed trace propagation.</span>
      <div class="pkg-meta">
        <span class="pkg-tag">v <span>0.4.2</span></span>
        <span class="pkg-tag">size <span>11kb</span></span>
      </div>
    </div>

  </div>
</div>

<div class="section">
  <div class="section-label">install</div>

  <div class="install-block">
    <div class="install-label">npm</div>
    <div class="install-cmd">
      <span class="prompt">$ </span>npm install <span class="pkg">@blackroad/core</span>
    </div>
  </div>

  <div class="install-block">
    <div class="install-label">yarn</div>
    <div class="install-cmd">
      <span class="prompt">$ </span>yarn add <span class="pkg">@blackroad/core</span>
    </div>
  </div>

  <div class="install-block">
    <div class="install-label">pnpm</div>
    <div class="install-cmd">
      <span class="prompt">$ </span>pnpm add <span class="pkg">@blackroad/core</span>
    </div>
  </div>

  <div class="install-block">
    <div class="install-label">install all</div>
    <div class="install-cmd">
      <span class="prompt">$ </span>npm install <span class="pkg">@blackroad/core @blackroad/agents @blackroad/ui @blackroad/memory</span>
    </div>
  </div>

  <div class="section-label" style="margin-top: 24px;">peer dependencies</div>
  <div class="package-list">
    <div class="package-item">
      <span class="pkg-name">react-native</span>
      <div class="pkg-meta">
        <span class="pkg-tag">required <span>≥ 0.72</span></span>
      </div>
    </div>
    <div class="package-item">
      <span class="pkg-name">react</span>
      <div class="pkg-meta">
        <span class="pkg-tag">required <span>≥ 18.0</span></span>
      </div>
    </div>
    <div class="package-item">
      <span class="pkg-name">@nats-io/nats-core</span>
      <div class="pkg-meta">
        <span class="pkg-tag">optional <span>≥ 3.0</span></span>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="section-label">platforms</div>
  <div class="platform-list">
    <div class="platform-item supported">iOS<span class="plat-status">≥ 16.0 · supported</span></div>
    <div class="platform-item supported">Android<span class="plat-status">API 26+ · supported</span></div>
    <div class="platform-item supported">React Native<span class="plat-status">≥ 0.72 · supported</span></div>
    <div class="platform-item supported">Expo<span class="plat-status">SDK 50+ · supported</span></div>
    <div class="platform-item">macOS Catalyst<span class="plat-status">experimental</span></div>
    <div class="platform-item">tvOS<span class="plat-status">planned</span></div>
    <div class="platform-item">watchOS<span class="plat-status">not supported</span></div>
  </div>

  <div class="section-label" style="margin-top: 28px;">changelog</div>
  <div class="changelog-list">

    <div class="changelog-item">
      <span class="ver latest">0.4.2</span>
      <span class="note">Patch: memory journal flush fix on Android cold start.</span>
      <span class="date">2025-01-18</span>
    </div>

    <div class="changelog-item">
      <span class="ver">0.4.1</span>
      <span class="note">UI token updates for gradient palette 208→33 range.</span>
      <span class="date">2025-01-04</span>
    </div>

    <div class="changelog-item">
      <span class="ver">0.4.0</span>
      <span class="note">Network: NATS client + Tailscale mesh bindings added.</span>
      <span class="date">2024-12-20</span>
    </div>

    <div class="changelog-item">
      <span class="ver">0.3.9</span>
      <span class="note">Memory: PS-SHA∞ persistence, truth state commits.</span>
      <span class="date">2024-12-08</span>
    </div>

    <div class="changelog-item">
      <span class="ver">0.3.0</span>
      <span class="note">Initial public release. Core + Agents stable.</span>
      <span class="date">2024-11-14</span>
    </div>

  </div>
</div>

BlackRoad OS, Inc. — Delaware C-Corp 8 packages · 4 platforms · MIT license

[blackboxprogramming]

[blackboxprogramming]

<title>BlackRoad — Agent Dashboard</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

/* ── HEADER ── */
header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

nav {
  font-size: 0.65rem;
  display: flex;
  gap: 20px;
}

nav a {
  color: #888888;
  text-decoration: none;
}

nav a:hover { color: #ffffff; }

/* ── HERO ── */
.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label {
  font-size: 0.6rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
}

.hero p {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #666666;
  line-height: 1.9;
}

.hero-meta {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-badge {
  font-size: 0.58rem;
  color: #444444;
  border: 1px solid #333333;
  padding: 4px 10px;
  letter-spacing: 0.1em;
}

.hero-badge span { color: #ffffff; }

.hero-badge span.online { color: #ffffff; }
.hero-badge span.warn   { color: #888888; }
.hero-badge span.off    { color: #444444; }

/* ── SECTION LABEL ── */
.section-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333333;
}

/* ── ROW 1 — 3 column grid ── */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid #ffffff;
}

.section {
  background: #000000;
  padding: 32px 24px;
  border-bottom: 1px solid #ffffff;
}

/* ── ROW 2 — 2 column grid ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
}

/* ── AGENT STATUS CARDS ── */
.agent-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-card {
  border: 1px solid #1a1a1a;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-card:hover { border-color: #ffffff; }

.agent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
}

.agent-status {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
}

.status-online  { color: #ffffff; border-color: #ffffff; }
.status-idle    { color: #666666; border-color: #444444; }
.status-offline { color: #333333; border-color: #222222; }

.agent-model {
  font-size: 0.58rem;
  color: #444444;
}

.agent-task {
  font-size: 0.62rem;
  color: #666666;
  line-height: 1.7;
}

.agent-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.agent-bar-label {
  font-size: 0.52rem;
  color: #333333;
  width: 36px;
  flex-shrink: 0;
}

.agent-bar {
  flex: 1;
  height: 2px;
  background: #111111;
}

.agent-bar-fill {
  height: 100%;
  background: #ffffff;
}

.agent-bar-val {
  font-size: 0.52rem;
  color: #555555;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── METRICS ── */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 18px;
}

.metric-box {
  border: 1px solid #1a1a1a;
  padding: 12px 14px;
}

.metric-box .metric-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.metric-box .metric-label {
  font-size: 0.55rem;
  color: #444444;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}

.metric-box .metric-delta {
  font-size: 0.55rem;
  color: #666666;
  margin-top: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #111111;
  font-size: 0.65rem;
}

.stat-row:last-child { border-bottom: none; }

.stat-row .stat-key { color: #555555; }
.stat-row .stat-val { color: #ffffff; }

/* ── CONFIG / SPECS ── */
.config-block {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.config-block .config-title {
  font-size: 0.58rem;
  color: #444444;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.config-kv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.config-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  gap: 8px;
}

.config-row .ck { color: #444444; }
.config-row .cv { color: #ffffff; text-align: right; word-break: break-all; }

/* ── LOGS ── */
.log-stream {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.log-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  font-size: 0.62rem;
  line-height: 1.6;
}

.log-line:hover { background: #080808; }

.log-ts {
  color: #333333;
  flex-shrink: 0;
  font-size: 0.55rem;
  min-width: 56px;
}

.log-level {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 36px;
}

.level-info  { color: #555555; }
.level-ok    { color: #aaaaaa; }
.level-warn  { color: #888888; }
.level-err   { color: #666666; }

.log-agent {
  color: #444444;
  flex-shrink: 0;
  font-size: 0.6rem;
}

.log-msg { color: #888888; }
.log-msg .hi { color: #ffffff; }

/* ── LINKS / NAV ── */
.link-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.link-group-title {
  font-size: 0.55rem;
  color: #333333;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0 0 8px 0;
  border-bottom: 1px solid #111111;
  margin-bottom: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 0.7rem;
  color: #888888;
  border-left: 2px solid transparent;
}

.nav-link:hover {
  color: #ffffff;
  border-left-color: #ffffff;
}

.nav-link .arrow { color: #333333; font-size: 0.65rem; }

/* ── FOOTER ── */
footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── RESPONSIVE ── */
@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero  { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-3 .section {
    border-bottom: none;
    border-right: 1px solid #ffffff;
    padding: 36px 40px;
  }
  .grid-3 .section:last-child { border-right: none; }

  .grid-2 {
    grid-template-columns: 3fr 2fr;
    border-bottom: 1px solid #ffffff;
  }
  .grid-2 .section {
    border-bottom: none;
    border-right: 1px solid #ffffff;
    padding: 36px 40px;
  }
  .grid-2 .section:last-child { border-right: none; }

  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad agents metrics logs config docs

Dashboard v1.0

Agent
Control

Live status, metrics, activity feed, and configuration for the BlackRoad agent fleet.

online 4

idle 2

offline 3

uptime 99.2%

last sync 12s ago

<!-- LIVE STATUS -->
<div class="section">
  <div class="section-label">live status</div>
  <div class="agent-list">

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Cecilia</span>
        <span class="agent-status status-online">online</span>
      </div>
      <div class="agent-model">claude-sonnet-4-6 · orchestrator</div>
      <div class="agent-task">Processing agent memory consolidation batch — 847 entries.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:72%"></div></div>
        <span class="agent-bar-val">72%</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:58%"></div></div>
        <span class="agent-bar-val">58%</span>
      </div>
    </div>

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Cadence</span>
        <span class="agent-status status-online">online</span>
      </div>
      <div class="agent-model">gpt-4o · comms relay</div>
      <div class="agent-task">Routing inter-agent messages via NATS event bus.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:31%"></div></div>
        <span class="agent-bar-val">31%</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:44%"></div></div>
        <span class="agent-bar-val">44%</span>
      </div>
    </div>

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Eve</span>
        <span class="agent-status status-online">online</span>
      </div>
      <div class="agent-model">grok-2 · analyst</div>
      <div class="agent-task">Running Z-framework equilibrium scan on node cluster.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:88%"></div></div>
        <span class="agent-bar-val">88%</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:61%"></div></div>
        <span class="agent-bar-val">61%</span>
      </div>
    </div>

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Gematria</span>
        <span class="agent-status status-idle">idle</span>
      </div>
      <div class="agent-model">gemini-2.0-flash · researcher</div>
      <div class="agent-task">Awaiting task assignment. Last active 4m ago.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:4%"></div></div>
        <span class="agent-bar-val">4%</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:22%"></div></div>
        <span class="agent-bar-val">22%</span>
      </div>
    </div>

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Lucidia</span>
        <span class="agent-status status-idle">idle</span>
      </div>
      <div class="agent-model">local · hailo-8 · inference</div>
      <div class="agent-task">Standing by on octavia node. Hailo accelerator warm.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:9%"></div></div>
        <span class="agent-bar-val">9%</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:33%"></div></div>
        <span class="agent-bar-val">33%</span>
      </div>
    </div>

    <div class="agent-card">
      <div class="agent-top">
        <span class="agent-name">Olympia</span>
        <span class="agent-status status-offline">offline</span>
      </div>
      <div class="agent-model">local · pi4b · monitor</div>
      <div class="agent-task">Node unreachable. Last ping 14m ago.</div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">CPU</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:0%"></div></div>
        <span class="agent-bar-val">—</span>
      </div>
      <div class="agent-bar-row">
        <span class="agent-bar-label">MEM</span>
        <div class="agent-bar"><div class="agent-bar-fill" style="width:0%"></div></div>
        <span class="agent-bar-val">—</span>
      </div>
    </div>

  </div>
</div>

<!-- METRICS -->
<div class="section">
  <div class="section-label">metrics</div>

  <div class="metric-grid">
    <div class="metric-box">
      <div class="metric-val">1,024</div>
      <div class="metric-label">total agents</div>
      <div class="metric-delta">↑ 12 this week</div>
    </div>
    <div class="metric-box">
      <div class="metric-val">6</div>
      <div class="metric-label">active now</div>
      <div class="metric-delta">4 online · 2 idle</div>
    </div>
    <div class="metric-box">
      <div class="metric-val">98k</div>
      <div class="metric-label">msgs / hr</div>
      <div class="metric-delta">↑ 3.4% vs last hr</div>
    </div>
    <div class="metric-box">
      <div class="metric-val">14ms</div>
      <div class="metric-label">avg latency</div>
      <div class="metric-delta">↓ 2ms vs avg</div>
    </div>
  </div>

  <div class="section-label">system stats</div>

  <div class="stat-row"><span class="stat-key">cluster nodes</span><span class="stat-val">8 / 9 healthy</span></div>
  <div class="stat-row"><span class="stat-key">NATS streams</span><span class="stat-val">34 active</span></div>
  <div class="stat-row"><span class="stat-key">K3s pods</span><span class="stat-val">62 running</span></div>
  <div class="stat-row"><span class="stat-key">Redis keys</span><span class="stat-val">204,871</span></div>
  <div class="stat-row"><span class="stat-key">D1 rows</span><span class="stat-val">1.2M</span></div>
  <div class="stat-row"><span class="stat-key">KV entries</span><span class="stat-val">847,302</span></div>
  <div class="stat-row"><span class="stat-key">CF Workers</span><span class="stat-val">85 deployed</span></div>
  <div class="stat-row"><span class="stat-key">memory commits</span><span class="stat-val">22,401 today</span></div>
  <div class="stat-row"><span class="stat-key">tasks queued</span><span class="stat-val">17</span></div>
  <div class="stat-row"><span class="stat-key">tasks completed</span><span class="stat-val">3,844 today</span></div>
  <div class="stat-row"><span class="stat-key">error rate</span><span class="stat-val">0.08%</span></div>
  <div class="stat-row"><span class="stat-key">uptime</span><span class="stat-val">99.2% (30d)</span></div>
</div>

<!-- CONFIG / SPECS -->
<div class="section">
  <div class="section-label">config · specs</div>

  <div class="config-block">
    <div class="config-title">orchestration</div>
    <div class="config-kv">
      <div class="config-row"><span class="ck">runtime</span><span class="cv">BlackRoad OS v1.0</span></div>
      <div class="config-row"><span class="ck">logic</span><span class="cv">trinary (1 / 0 / −1)</span></div>
      <div class="config-row"><span class="ck">event bus</span><span class="cv">NATS JetStream</span></div>
      <div class="config-row"><span class="ck">scheduler</span><span class="cv">K3s · Traefik</span></div>
      <div class="config-row"><span class="ck">mesh</span><span class="cv">Tailscale</span></div>
    </div>
  </div>

  <div class="config-block">
    <div class="config-title">memory layer</div>
    <div class="config-kv">
      <div class="config-row"><span class="ck">persistence</span><span class="cv">PS-SHA∞</span></div>
      <div class="config-row"><span class="ck">journal</span><span class="cv">append-only</span></div>
      <div class="config-row"><span class="ck">cache</span><span class="cv">Redis 7.2</span></div>
      <div class="config-row"><span class="ck">db</span><span class="cv">D1 · SQLite edge</span></div>
      <div class="config-row"><span class="ck">object store</span><span class="cv">R2</span></div>
    </div>
  </div>

  <div class="config-block">
    <div class="config-title">inference</div>
    <div class="config-kv">
      <div class="config-row"><span class="ck">accelerator</span><span class="cv">Hailo-8 (×2)</span></div>
      <div class="config-row"><span class="ck">local runtime</span><span class="cv">Ollama</span></div>
      <div class="config-row"><span class="ck">cloud</span><span class="cv">Claude · GPT · Grok · Gemini</span></div>
      <div class="config-row"><span class="ck">routing</span><span class="cv">Z-framework δ dispatch</span></div>
    </div>
  </div>

  <div class="config-block">
    <div class="config-title">network</div>
    <div class="config-kv">
      <div class="config-row"><span class="ck">alice (Pi 400)</span><span class="cv">100.95.120.67</span></div>
      <div class="config-row"><span class="ck">lucidia (Pi 5)</span><span class="cv">100.66.235.47</span></div>
      <div class="config-row"><span class="ck">edge</span><span class="cv">Cloudflare · 85 workers</span></div>
      <div class="config-row"><span class="ck">CDN</span><span class="cv">global · 300 PoPs</span></div>
    </div>
  </div>

</div>

<!-- ACTIVITY LOG -->
<div class="section">
  <div class="section-label">activity feed</div>
  <div class="log-stream">

    <div class="log-line">
      <span class="log-ts">14:32:08</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">cecilia</span>
      <span class="log-msg">Memory consolidation complete — <span class="hi">847 entries</span> committed to PS-SHA∞ journal.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:31:55</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">cadence</span>
      <span class="log-msg">NATS stream <span class="hi">agents.events</span> — 1,204 msgs dispatched this minute.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:31:43</span>
      <span class="log-level level-warn">WARN</span>
      <span class="log-agent">olympia</span>
      <span class="log-msg">Node heartbeat missed. Retrying in <span class="hi">30s</span>. Attempt 3 of 5.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:31:30</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">eve</span>
      <span class="log-msg">Z-framework scan initiated. Target: <span class="hi">cluster equilibrium δ</span>. Nodes: 8.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:31:18</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">lucidia</span>
      <span class="log-msg">Hailo-8 accelerator warmed on <span class="hi">octavia</span>. Inference ready.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:31:02</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">cecilia</span>
      <span class="log-msg">Task queue polled — <span class="hi">17 tasks</span> pending. Dispatching to available agents.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:30:51</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">gematria</span>
      <span class="log-msg">Research task <span class="hi">#3841</span> completed. Output committed to R2 object store.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:30:39</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">cadence</span>
      <span class="log-msg">Inter-agent message relay — <span class="hi">cecilia → eve</span>. Subject: equilibrium.request.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:30:27</span>
      <span class="log-level level-warn">WARN</span>
      <span class="log-agent">eve</span>
      <span class="log-msg">Contradiction detected in reasoning path. Paraconsistent handler invoked for <span class="hi">node-7</span>.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:30:15</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">system</span>
      <span class="log-msg">K3s cluster healthy — <span class="hi">62 pods</span> running. 0 restarts in last 60m.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:30:02</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">system</span>
      <span class="log-msg">Cloudflare Workers heartbeat — <span class="hi">85 / 85</span> healthy. Edge latency 11ms avg.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:29:48</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">cecilia</span>
      <span class="log-msg">Truth state commit <span class="hi">#22401</span> sealed. Hash verified against PS-SHA∞ chain.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:29:33</span>
      <span class="log-level level-err">ERR</span>
      <span class="log-agent">olympia</span>
      <span class="log-msg">SSH connection refused on <span class="hi">100.95.120.67</span>. Agent suspended pending recovery.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:29:18</span>
      <span class="log-level level-info">INFO</span>
      <span class="log-agent">lucidia</span>
      <span class="log-msg">Tailscale mesh status: <span class="hi">8 peers online</span>. MTU 1280. Handshake fresh.</span>
    </div>

    <div class="log-line">
      <span class="log-ts">14:29:01</span>
      <span class="log-level level-ok">OK</span>
      <span class="log-agent">system</span>
      <span class="log-msg">Daily Redis flush complete — <span class="hi">204,871 keys</span> retained. 3,102 expired.</span>
    </div>

  </div>
</div>

<!-- LINKS / NAV -->
<div class="section">
  <div class="section-label">links · nav</div>

  <div class="link-group">
    <div class="link-group-title">infrastructure</div>
    <a class="nav-link" href="https://github.com/enterprises/blackroad-os" target="_blank">GitHub Enterprise<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://dash.cloudflare.com" target="_blank">Cloudflare Dashboard<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">K3s Cluster<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://login.tailscale.com" target="_blank">Tailscale Console<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">DigitalOcean Droplets<span class="arrow">↗</span></a>
  </div>

  <div class="link-group">
    <div class="link-group-title">agents</div>
    <a class="nav-link" href="#" target="_blank">Cecilia (Claude)<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Cadence (ChatGPT)<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Eve (Grok)<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Gematria (Gemini)<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Lucidia (Local)<span class="arrow">↗</span></a>
  </div>

  <div class="link-group">
    <div class="link-group-title">repositories</div>
    <a class="nav-link" href="https://github.com/BlackRoad-OS" target="_blank">BlackRoad-OS<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://github.com/BlackRoad-AI" target="_blank">BlackRoad-AI<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://github.com/BlackRoad-Cloud" target="_blank">BlackRoad-Cloud<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://github.com/BlackRoad-Hardware" target="_blank">BlackRoad-Hardware<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://github.com/BlackRoad-Security" target="_blank">BlackRoad-Security<span class="arrow">↗</span></a>
  </div>

  <div class="link-group">
    <div class="link-group-title">domains</div>
    <a class="nav-link" href="https://blackroad.io" target="_blank">blackroad.io<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://blackroadai.com" target="_blank">blackroadai.com<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://lucidia.earth" target="_blank">lucidia.earth<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://blackroadquantum.com" target="_blank">blackroadquantum.com<span class="arrow">↗</span></a>
    <a class="nav-link" href="https://roadchain.io" target="_blank">roadchain.io<span class="arrow">↗</span></a>
  </div>

  <div class="link-group">
    <div class="link-group-title">docs</div>
    <a class="nav-link" href="#" target="_blank">Architecture Overview<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Agent Spec<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Z-Framework Reference<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">Memory System<span class="arrow">↗</span></a>
    <a class="nav-link" href="#" target="_blank">API Reference<span class="arrow">↗</span></a>
  </div>

</div>

BlackRoad OS, Inc. — Delaware C-Corp 6 active · 1,024 fleet · 99.2% uptime

[blackboxprogramming]

[blackboxprogramming]

Blog Template

<title>BlackRoad — Blog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000000;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
}

/* ── HEADER ── */
header {
  background: #000000;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-decoration: none;
}

nav {
  font-size: 0.65rem;
  display: flex;
  gap: 20px;
}

nav a {
  color: #888888;
  text-decoration: none;
}

nav a:hover { color: #ffffff; }
nav a.active { color: #ffffff; }

/* ── HERO ── */
.hero {
  background: #000000;
  padding: 48px 24px 36px;
  border-bottom: 1px solid #ffffff;
}

.hero-label {
  font-size: 0.6rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
}

.hero p {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #666666;
  line-height: 1.9;
}

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

/* ── POST LIST ── */
.posts-col {
  border-bottom: 1px solid #333333;
}

.section-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #333333;
}

.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border-bottom: 1px solid #1a1a1a;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.post-item:hover { background: #0a0a0a; }
.post-item:hover .post-title { color: #ffffff; }

.post-meta {
  font-size: 0.56rem;
  color: #444444;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  gap: 12px;
}

.post-meta .tag {
  color: #666666;
}

.post-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #cccccc;
  line-height: 1.35;
}

.post-excerpt {
  font-size: 0.65rem;
  color: #555555;
  line-height: 1.8;
}

.post-arrow {
  font-size: 0.6rem;
  color: #333333;
  margin-top: 4px;
}

.post-item:hover .post-arrow { color: #888888; }

/* ── SIDEBAR ── */
.sidebar {
  border-top: 1px solid #ffffff;
}

.sidebar-section {
  padding: 24px 24px;
  border-bottom: 1px solid #1a1a1a;
}

.sidebar-label {
  font-size: 0.58rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1a1a1a;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill {
  font-size: 0.58rem;
  color: #666666;
  border: 1px solid #222222;
  padding: 4px 8px;
  text-decoration: none;
  cursor: pointer;
}

.tag-pill:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.archive-list a {
  font-size: 0.68rem;
  color: #666666;
  text-decoration: none;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #0d0d0d;
}

.archive-list a:hover { color: #ffffff; }

.archive-list a span {
  color: #333333;
  font-size: 0.58rem;
}

.rss-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  color: #555555;
  text-decoration: none;
  border: 1px solid #222222;
  padding: 8px 12px;
  margin-top: 4px;
}

.rss-link:hover { color: #ffffff; border-color: #ffffff; }

/* ── FEATURED POST ── */
.featured-banner {
  background: #000000;
  border-bottom: 1px solid #ffffff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.featured-label {
  font-size: 0.56rem;
  color: #555555;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.featured-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.featured-excerpt {
  font-size: 0.68rem;
  color: #666666;
  line-height: 1.9;
}

.featured-cta {
  font-size: 0.62rem;
  color: #888888;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.featured-cta:hover { color: #ffffff; }

/* ── FOOTER ── */
footer {
  background: #000000;
  padding: 20px 24px;
  border-top: 1px solid #333333;
  font-size: 0.58rem;
  color: #444444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── PAGINATION ── */
.pagination {
  padding: 20px 24px;
  border-top: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.62rem;
  color: #444444;
}

.pagination a {
  color: #666666;
  text-decoration: none;
  border: 1px solid #222222;
  padding: 4px 10px;
}

.pagination a:hover { color: #ffffff; border-color: #ffffff; }
.pagination a.current { color: #ffffff; border-color: #ffffff; }

/* ── RESPONSIVE ── */
@media (min-width: 768px) {
  header { padding: 20px 40px; }
  .hero { padding: 56px 40px 44px; }
  .hero h1 { font-size: 2.4rem; }

  .layout {
    grid-template-columns: 1fr 280px;
    align-items: start;
  }

  .posts-col {
    border-right: 1px solid #ffffff;
    border-bottom: none;
  }

  .sidebar {
    border-top: none;
  }

  .featured-banner { padding: 28px 40px; }
  .section-label { padding: 20px 40px 0; }
  .post-item { padding: 24px 40px; }
  .sidebar-section { padding: 24px 28px; }
  .pagination { padding: 20px 40px; }
  footer { padding: 20px 40px; flex-direction: row; justify-content: space-between; }
}

</style> BlackRoad enterprise orgs domains blog

Blog v1.0

System
Dispatch

Architecture notes, agent updates, and infrastructure telemetry.

— featured

Deploying 1,000 Agents Across a K3s Cluster:
What We Learned

Orchestrating a distributed agent mesh across Pi 5 nodes, Jetson Orin, and DigitalOcean droplets revealed failure modes we hadn't anticipated. Here's the full post-mortem and the architectural shifts that followed.

read post ↗

<!-- POST LIST -->
<div class="posts-col">
  <div class="section-label">recent posts · 6</div>

  <div class="post-list">

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-11-14</span>
        <span class="tag">infrastructure</span>
      </div>
      <div class="post-title">PS-SHA∞ and the Memory Persistence Problem</div>
      <div class="post-excerpt">
        Why append-only journals with cryptographic chaining outperform traditional key-value stores
        for agent state across power cycles.
      </div>
      <div class="post-arrow">↗</div>
    </a>

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-11-08</span>
        <span class="tag">agents</span>
      </div>
      <div class="post-title">Naming Agents: Identity, Persona, and Operational Role</div>
      <div class="post-excerpt">
        The decision to give agents named identities—Cecilia, Cadence, Eve, Gematria—isn't cosmetic.
        It changes how humans interact with and trust the system.
      </div>
      <div class="post-arrow">↗</div>
    </a>

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-11-01</span>
        <span class="tag">theory</span>
      </div>
      <div class="post-title">The Z-Framework: Equilibrium as Operational State</div>
      <div class="post-excerpt">
        Z := yx - w defines equilibrium. When Z = ∅ the system is stable; when Z ≠ ∅ it adapts.
        Building this into runtime logic instead of monitoring dashboards.
      </div>
      <div class="post-arrow">↗</div>
    </a>

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-10-22</span>
        <span class="tag">hardware</span>
      </div>
      <div class="post-title">Hailo-8 on the Pi 5: Benchmarks and Bottlenecks</div>
      <div class="post-excerpt">
        Real inference numbers for vision and language models running on the Pironman-cased Pi 5s
        with NVMe-backed model storage. Spoiler: thermal throttling is the enemy.
      </div>
      <div class="post-arrow">↗</div>
    </a>

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-10-15</span>
        <span class="tag">networking</span>
      </div>
      <div class="post-title">Tailscale Mesh as a Zero-Trust Backbone</div>
      <div class="post-excerpt">
        How Tailscale's WireGuard layer replaced our VPN setup and why the ACL model maps cleanly
        onto multi-org enterprise governance.
      </div>
      <div class="post-arrow">↗</div>
    </a>

    <a class="post-item" href="#">
      <div class="post-meta">
        <span>2025-10-03</span>
        <span class="tag">finance</span>
      </div>
      <div class="post-title">Structuring a Delaware C-Corp for an AI Infrastructure Company</div>
      <div class="post-excerpt">
        What we chose, why we chose it, and the operational tradeoffs of going C-Corp from day one
        at formation in November 2025.
      </div>
      <div class="post-arrow">↗</div>
    </a>

  </div>

  <!-- PAGINATION -->
  <div class="pagination">
    <a href="#" class="current">01</a>
    <a href="#">02</a>
    <a href="#">03</a>
    <span>—</span>
    <a href="#">next ↗</a>
  </div>
</div>

<!-- SIDEBAR -->
<div class="sidebar">

  <div class="sidebar-section">
    <div class="sidebar-label">tags</div>
    <div class="tag-cloud">
      <span class="tag-pill">infrastructure</span>
      <span class="tag-pill">agents</span>
      <span class="tag-pill">hardware</span>
      <span class="tag-pill">theory</span>
      <span class="tag-pill">networking</span>
      <span class="tag-pill">finance</span>
      <span class="tag-pill">os</span>
      <span class="tag-pill">security</span>
      <span class="tag-pill">ai</span>
      <span class="tag-pill">devlog</span>
    </div>
  </div>

  <div class="sidebar-section">
    <div class="sidebar-label">archive</div>
    <div class="archive-list">
      <a href="#">November 2025 <span>4</span></a>
      <a href="#">October 2025 <span>7</span></a>
      <a href="#">September 2025 <span>3</span></a>
      <a href="#">August 2025 <span>5</span></a>
      <a href="#">July 2025 <span>2</span></a>
    </div>
  </div>

  <div class="sidebar-section">
    <div class="sidebar-label">subscribe</div>
    <a href="#" class="rss-link">
      <span>RSS</span>
      <span>↗</span>
    </a>
  </div>

</div>

BlackRoad OS, Inc. — Delaware C-Corp system dispatch · 1 enterprise · 15 orgs

[blackboxprogramming]